AI UI design skills pack. 8 skills and 5 agents that enforce design quality for AI feature UIs — states, streaming, prompt UX, accessibility, and design tokens.
Use before shipping any UI that renders AI-generated content. Dynamic model output requires ARIA live regions, reading order, and cognitive load review that static content does not. Blocks "we'll do accessibility later" completions.
Use when designing or implementing any of the 6 core AI UI components. Each has specific patterns, pitfalls, and required sub-components that generic UI components don't address.
Use when designing first-run flows and empty states for AI features. AI onboarding has specific requirements — model capability communication, trust building, and graceful degradation when the model doesn't know — that generic onboarding patterns miss.
Use when designing how AI-generated content is rendered — streaming text, structured data, citations, code blocks, and uncertainty signals. Covers both visual rendering and the accessibility layer.
Use before writing any code for an AI feature's UI. All 7 states must be designed and documented before implementation begins. Blocks "we'll add loading states later" completions.
Use before implementing any new AI feature UI component. Requires a written shape/spec — layout, states, copy, interactions — before a single line of implementation code is written. Blocks "I'll design it as I build it" completions.
Use before any AI feature UI lands in production. Every colour, spacing value, typography, shadow, and border in AI components must reference design tokens — no hardcoded values. Blocks "I'll align with the design system later" completions.
Use when designing the user-facing prompt experience for any AI feature. Covers input design, suggestion patterns, history, feedback signals, and the interaction model between user intent and model execution.