Essential session storage is required to sign in. Optional analytics remain off unless you allow them.
Design a non-trivial feature end-to-end and deliver it as a stakeholder/engineering-ready package. Include: (1) the user problem + research basis; (2) IA and a user flow; (3) hi-fi designs built from reusable COMPONENTS/tokens (a small design system or an existing one like Material/HIG), with responsive behavior across breakpoints; (4) full ACCESSIBILITY — WCAG AA contrast (4.5:1 text), keyboard operability, focus order, screen-reader labels, and never relying on color alone; (5) a usability validation; and (6) an engineering HANDOFF spec (component states, tokens, redlines, behavior, edge cases). Define UX metrics (HEART) you'd track post-launch.
WCAG AA met (contrast, keyboard, focus, screen-reader semantics); no meaning by color alone; inclusive considerations documented.
Built from reusable components/tokens; consistent; responsive across breakpoints with sensible touch targets.
Engineer-ready spec: states, tokens, redlines, behavior, and edge cases documented so it can be built faithfully.
Design grounded in research + a usability check; HEART metrics defined to measure success post-launch.
Use this README structure to make the work reviewable.
DevPath fetches a read-only, size-capped snapshot. Submitted code is never executed.
# An accessible feature with a design-system handoff ## Goal Design a non-trivial feature end-to-end and deliver it as a stakeholder/engineering-ready package. Include: (1) the user problem + research basis; (2) IA and a user flow; (3) hi-fi designs built from reusable COMPONENTS/tokens (a small design system or an existing one like Material/HIG), with responsive behavior across breakpoints; (4) full ACCESSIBILITY — WCAG AA contrast (4.5:1 text), keyboard operability, focus order, screen-reader labels, and never relying on color alone; (5) a usability validation; and (6) an engineering HANDOFF spec (component states, tokens, redlines, behavior, edge cases). Define UX metrics (HEART) you'd track post-launch. ## Acceptance criteria - [ ] Accessibility: WCAG AA met (contrast, keyboard, focus, screen-reader semantics); no meaning by color alone; inclusive considerations documented. - [ ] System & responsiveness: Built from reusable components/tokens; consistent; responsive across breakpoints with sensible touch targets. - [ ] Handoff quality: Engineer-ready spec: states, tokens, redlines, behavior, and edge cases documented so it can be built faithfully. - [ ] Evidence & metrics: Design grounded in research + a usability check; HEART metrics defined to measure success post-launch. ## Verification - [ ] Document installation and run commands. - [ ] Record automated checks and their exact commands. - [ ] Add representative output, screenshots, or a short demo where useful. - [ ] Confirm failure paths and known constraints. ## Decision log ### Decision title - Context: - Choice: - Alternatives considered: - Tradeoffs: ## Evidence - Link each rubric criterion to the file, test, or artifact that demonstrates it. ## Known limitations - List what is intentionally out of scope and what should be improved next.