Skill Breakdown
Accordion over the six skill axes, built on the existing Base UI accordion primitive. Doubles as the accessible text equivalent of SkillRadar on pages where the radar itself is aria-hidden.
All six axes (demo fixtures)
Strong, developing, weak, provisional and unpracticed states all present. Each panel names its source interviews and, where applicable, links to /setup?challenge=... to fill the gap.
| Prop | Type | Default | Description |
|---|---|---|---|
| profile | SkillProfile | — | Output of deriveSkillProfile(points). |
Single interview — every measured axis provisional
One reading per axis: each panel carries the “still one attempt” explainer and the trend section falls back to “needs a second measurement” instead of drawing a one-bar chart.
Empty — all six axes unpracticed
Meters render as dashed outlines, never as five empty segments: “not measured” and “scored at the floor” must not look the same.
VoiceMock was built by one designer
I'm Sergiy, a product designer. I built this trainer myself — research, design system, code. On LinkedIn I show how products like this come together, and what it changes in a designer's work.
Product Designer · AI Design Engineer · Designer for Startups
See it on LinkedIn