Skill Filter Team Block for React

Edit PEOPLE and SKILLS at the top of the file. A person is a name, a role and a skills list. A skill is filterable when it is in SKILLS; any other skill on a person (like "Linux kernels") shows as a plain chip. The counts on the chips and the line above the list are counted from the same data, so adding someone needs no other change. Keep at least two people per filterable skill, or the line reads "1 person knows" for a skill that is hardly a team strength.

It's a group named Skills. Tab moves into it, the arrow keys move between the chips, and Space or Enter presses one; pressing the pressed chip again clears it. Each chip is read with its count ("Rust, 3 people"), a polite line says the result ("3 people know Rust") without moving focus, and a matching chip in a row is read with "(matches)". The matching people also come first in the list itself, so a screen reader meets them first.

Hiding leaves a list with holes and a block that shrinks, which moves everything below it. Here the people who know the skill move to the front in their usual order, and everyone else follows, dimmed in place: a light tint on the row, an outline avatar and a muted name, all at AA contrast in light and dark themes. The list always has the same height. Tools that watch for layout shifts report the re-sort as one; it is the feature.

The chips scroll sideways from rail to rail, with the next chip peeking in, and the polite line sits under them. Each row stacks: the avatar, name and role first, then the skills wrapped under the role, in a few short lines. All seven people are shown, since a pick should never hide behind a button.

Yes: put an AvatarImage in each Avatar, before the fallback. The avatar is decorative (the name is in the heading beside it), so the picture needs no alternative text. A filled initials avatar marks the matches while a skill is picked; with photos you may want a ring on the matching rows instead.