Skill Bars Team Block for React

Edit SKILLS and PEOPLE at the top of the file. A person has a name, a role and a scores list: one number from 0 to 100 per skill, in the order of SKILLS. The team averages (where the ticks sit) and the "Strongest in" line are computed from the scores, so nothing else needs editing. Five skills and five people fill the figure and the picker; other counts work, the picker just scrolls sooner.

As a small tick laid over each bar, at the mean of the five scores, rounded. It is placed with a logical offset, so in a right-to-left page it follows the bar and sits at the same score. The average is also written next to every value ("92 (team 72)"), and a caption says what the tick means, so it is never colour or position alone.

It's a group named Person. Tab moves into it, the arrow keys move between the avatars and Space or Enter chooses one. One person is always chosen: pressing the chosen avatar again does nothing. Each avatar is named by the full name (the initials are decorative), and a polite status says "Showing Rafael's scores" after a change.

A value that only appears on hover can't be reached on a phone or by a screen reader, so each number is simply written next to its bar. The bars themselves are decorative: the numbers carry the information.

The two columns stack. The picker comes first and scrolls sideways if the avatars don't fit, then the person's name and role, then the framed bars, which keep their numbers beside them. The block's height doesn't change when you pick, because every person has five scores.