Design referenceFigma / Public website reference / From reference to a feature.
Four concrete extension briefs and the current readiness boundary.
Use these four implementation exercises to test whether the guide answers the consequential questions. Passing requires actual implementation and verification against the frozen local reference.
Task 1
Add a loading state to the primary action, keeping width and accessible name stable. Use the component contract and token catalog.
Acceptance: No double activation; visible progress; keyboard behavior; state reset; geometry stable.
Task 2
Build a resource landing page from header, editorial intro, category filter, cards, and footer.
Acceptance: Responsive at 390/768/1440; stable headings; no clipped cards; native links.
Task 3
Create a dismissible inline notification using feedback rules, token roles, and native button semantics.
Acceptance: Accessible dismissal; focus goes to a logical surviving control; content is preserved.
Task 4
Combine long translated content, keyboard operation, and an offline/empty collection state.
Acceptance: No page overflow; visible recovery action; query preserved; correct live-region feedback.
Open implemented handoff examples
Read the added extension contracts
Open the second independent extension attempt →
This guide is not certified as Junior implementation-ready. The public inventory contains 64 component families and 17 patterns. Some source-to-component mappings and variant comparisons remain partial. Authenticated editor behavior is outside this study.
Working examples have browser evidence. The first handoff exposed missing decisions that were added to the local contracts. The second attempt passed 81 browser checks, but incidental exposure to prior ratings means it does not establish a strictly blind challenge pass.
The full research package retains the machine-readable benchmark assessment, independent findings, measured geometry, and original captures. Publication alone is not a benchmark pass.
.agents/skills/design-research/scripts/run-playwright.sh \
designs/figma/evidence/verify-reference.cjs http://127.0.0.1:4173/
node designs/validate-benchmark-score.mjs designs/figmaEvery exercise should identify its tokens, source selector or local contract, component, fixture, behavior, responsive rule, accessibility expectation, and test. Record any missing decision as a gap. No paper-only exercise counts as an implementation pass.