What problem does it solve? Teams often jump straight into coding a page or component without a clear plan, resulting in inconsistent hierarchy, missing UI states, poor responsive behavior, and accessibility gaps discovered only after implementation. This Skill produces a structured, project-grounded design brief before any code is written. ## Core Features & Use Cases - Design Brief Generation: Creates a structured brief covering user goals, hierarchy, layout, tokens, interaction states, responsive behavior, accessibility, and a visual QA plan. - State and Responsive Contracts: Defines loading, empty, error, and disabled states plus behavior at 320, 768, 1024, and 1440 px breakpoints. - Accessibility Contract: Specifies semantic HTML, keyboard operation, focus management, contrast, and screen-reader requirements before implementation. - Use Case: Before building a new settings page, ask for a design brief that reuses the existing design system, defines every form error state, and plans keyboard navigation, then hand the approved brief to an engineering workflow. ## Quick Start Ask the assistant to create a frontend design brief for a specific page or component, describing the audience, primary action, and any existing design-system constraints.
