Recipes

The right-edge pill of the floating command bar. Bordered pill containing a pulsing success dot, the user’s readiness average (numeric), and a 32px avatar in brand-overlay-20. Static demo here; live menu logic lives in the product’s navigation feature.

Stack of numbered next-action cards on /results. Four semantic variants (warn/info/success/error) signal urgency and category. Numbered prefix anchors scan order.

Dashed warning score chip used inside dim-rows to flag scores that crossed or hovered around the 3.5 passing threshold.

Single-select filter pills for catalog headers (Level, Domain) and other list views. Active state uses brand overlay tokens for soft, on-brand emphasis that does not compete with primary buttons.

A Combobox driven by useAsyncOptions: debounced server-side search with loading / empty states. shouldFilter is off so the server owns filtering.

A Combobox that filters a static option list as you type and selects one value. The searchable alternative to Select for longer lists.

A multi-select Combobox composed inside FormField. Selected tags render as removable chips; Backspace removes the last. Shows the FieldContext boundary.

Slim description bar pointing to the reference solution diff. Sits between evaluation prose and dimension scores on /results.

A single labelled DatePicker with a selected value. Shows the Input-styled trigger and localized date display.

A DatePicker composed inside FormField + FormProvider. The trigger picks up the label association, required marker, and aria-describedby through FieldContext — the same boundary Input/Select use.

A range DatePicker clamped to a bookable window via minValue/maxValue. Shows the start–end trigger and in-range calendar highlight.

Per-skill feedback row on /results. Weak rows borrow the error border; each card carries the dimension score, an inline narrative, and an action sub-card pointing at the next remediation step.

Dashboard next-action band with a recommended primary path (brand-overlay gradient + brand-tinted border) and a secondary review path. Both rest the action against a meta pill so the user sees mode, duration, or queue state before committing.

Feedback paragraph card with a mono kicker. Surfaces evaluator prose alongside the dimension breakdown on /results.

Dismissible brand-tinted pill that signals an active narrowing applied across a catalog — e.g. focusing on a single skill dimension surfaced from a recent evaluation. Sits above the catalog grid.

Post-evaluation follow-up question, collapsed by default. Uses native <details> for the toggle so the section is keyboard-operable without JS.

Inline attempt-history glyph on /sessions cards. Each dot is one prior attempt colored by score tier (below / approaching / passing), trailed by an attempt-count label.

Minimal email + password sign-in form built on FormProvider + FormField. Email is required and format-checked; the submit handler only fires onValid when both fields pass.

Compact level visualization used on /problems cards and session list rows. Four vertical segments fill in brand orange to encode L1–L4 difficulty without a numeric label.

A two-step wizard sharing one FormProvider across steps. Step navigation is local recipe state; field values and validation stay owned by FormProvider — the thin layer is not extended for step state. Per-step Next validates only that step’s fields before advancing.

A default Pagination wired to local state — the windowed page list with first/last anchors and ellipsis collapses gracefully as the page count grows.

The jump-to Pagination variant for long result sets — type a page number and press Enter to leap directly there. Out-of-range entries clamp to bounds.

Pre-filled profile form using FormProvider defaultValues, mixing Input, Select, and Textarea controls — all wired through FormField with no per-control glue.

The product’s signature 8-axis data visualization. Ember Orange carries the data shape; gray category rings mark skill tier; dashed brand ring is the 70% readiness target. Tier-colored numeric values render outside the polygon. Skill identity lives in the axis label, never the hue.

Closed-by-default reference solution card. The mono brand-soft toggle invites a deliberate click after the user has attempted the problem.

Alternate /results layout — sticky 380px radar hero on the left, 4-col dimension breakdown grid (label, sparkline, score, verdict) on the right. All seven dimensions fit in a single fold on viewports ≥ 1024px.

Interactive list row used on /problems and similar list views. Hover lifts -2px and reveals a faint gradient-mask border in the brand hue. Header carries level + topic + tag badges with a meta line and trailing action button.

Tier-colored 22px mono numeric used on Sessions and History pages where a single big number is the focus of the row. Color resolves to the tier-aware --color-score-(below|approaching|passing)-text family.

A compact card showing one dimension with its score, threshold tier, and most-recent-assessment timestamp. The smallest unit of a results grid.

Hero panel on /results — tabular 72px overall score, readiness verdict, delta vs last attempt, and a thin progress bar with the score-approaching → score-passing gradient.

Dashboard breakdown row pairing a ScoreBar with a small mono trend indicator. Up uses success color, down uses warning, flat uses muted — meaning carries even without the arrow glyph.

Tight 18px / 600 heading used on /results and other long-form pages to introduce a grouped block. The sub-line carries the count or scope qualifier.

Account settings panel grouping several FormFields with help text under section headings. Shows FormField composing labelled controls in a denser, sectioned layout.

Account creation form demonstrating cross-field validation: the confirm-password field is checked against password via FormProvider’s form-level validate(values).

A two-thumb Slider for selecting a bounded range — the canonical price/value filter, with both ends echoed in a live readout.

A Slider bound to local state with a live value readout — the standard pattern for a single setting like volume or zoom.

Compact dropdown trigger paired with chip rows in /problems and /sessions toolbars. The italic muted prefix labels the axis (Sort, Level) without occupying a separate line.

Page-level context strip used at the top of /sessions/[id] and /results — back link, page title, and secondary actions sitting on a surface-1 card.

Per-day activity grouping with a brand-glowing dot. Threads attempts and concept rereads in chronological order on /sessions.

Two-up segmented control on /sessions for switching between Grouped and Timeline views. Mono uppercase microtype matches the dashboard label system.