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.
Need a design system like this?
I design and build products end‑to‑end — from first idea and design system to production‑ready code, ready to hand off to your development team.
Product Designer | AI Design Engineer | Designer for Startups | Mobile & Complex SaaS | from Idea to Product | Framer Developer