planning-design

What problem does it solve?

It prevents design drift and missing accessibility states by guiding per-story UX/UI work through a structured, auditable workflow tied to the Planning Hub dispatch.

Core Features & Use Cases

• 7-phase per-story design workflow: Runs UX discovery, brand foundation (once), information architecture, visual design, HTML/CSS mockups, WCAG 2.2 AA accessibility audit, and developer handoff.
• Design-to-implementation contract: Produces developer-ready specs including design tokens, interactive states, responsive behavior, and interaction details that downstream implementers and reviewers can verify.
• Per-story scope control: Enforces when to run (design candidate domains) and when to deny (backend/implementation work, missing Hub dispatch).

Use case: when the hub dispatches a story with candidate_domains including design, this skill generates plan/user-stories/US-NNN-name/design/*.html, updates the shared plan/design/design-spec.md and plan/design/color-palette.md if needed, and ensures every mockup passes an accessibility audit aligned to the same checklist reviewers will use.

Quick Start

Use planning-design to produce design mockups and handoff specs for the current story by reading the story scope from plan/user-stories/US-NNN-name/story.md and component structure from plan/user-stories/US-NNN-name/hld.md, then write the resulting HTML/CSS mockups under plan/user-stories/US-NNN-name/design/.