Coverage Heatmap Team Block for React

The five steps are solid mixes of the foreground into the background (none, 9%, 20%, 38% and solid), and each cell's text colour is chosen for AA contrast on its step, so the number stays readable in light, dark and any preset. The number is in every cell, and the legend names the steps (None, Learning, Working, Strong, Expert), so the level never rests on shade alone.

It marks a skill with fewer than two people at level 3 or above (the Target and the coverage count are in the row's last two columns). Change MIN_COVER to move the line, and each skill's target to change what the team aims for. The marker is an outline badge with an icon and the word "Thin", read with "fewer than 2 people", so it is not colour either.

Every cell is a button named with the person, the skill and the level ("Zainab Bello, Survey statistics: level 4, expert"). The picked cell is pressed and gets an inner outline; the polite line under the matrix says the same sentence and adds the target. Only one cell is picked at a time, and picking never changes the block's height: the line has room for its longest sentence.

Edit PEOPLE and SKILLS at the top of the file. A skill is a name, a target and its levels: one number from 0 to 4 per person, in the order of PEOPLE. The coverage counts and the Thin markers are computed. The matrix reads skills down the side, so the pinned column on a phone is the skill; adding a person adds a column.

It keeps its width and scrolls sideways, with the skill column pinned. The cells stay buttons, so a tap picks one and the line under the matrix answers. The scroller is a labelled region that a keyboard can reach (it is in the tab order) and scroll with the arrow keys.