← ClaudeAtlas

ai-states-requiredlisted

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.
RBraga01/builder-design · ★ 2 · AI & Automation · score 75
Install: claude install-skill RBraga01/builder-design
# AI States Required ## The Law ``` AN AI FEATURE WITHOUT DESIGNED STATES IS HALF A FEATURE. "We'll add error states later" means users see broken UI in production. "The happy path looks great" is not a UI design — it is a demo. All 7 states designed, documented, and approved IS a complete AI feature design. ``` ## The 7 Required States Every AI feature touchpoint must have a designed state for each: | State | When It Appears | What Users Need | |---|---|---| | **Loading** | Request sent, waiting for first token | Progress signal, estimated wait, cancel option | | **Streaming** | Tokens arriving, response building | Readable partial content, clear "generating" signal | | **Success** | Generation complete, full response available | Result, confidence signal, actions (copy, retry, share) | | **Error** | API failure, timeout, server error | Human error message, recovery action, no raw stack trace | | **Partial** | Model answered but incompletely | Clear indication of incompleteness, option to continue | | **Uncertain** | Low confidence, hedged response | Uncertainty signal, source citation, human review option | | **Empty** | No input yet / no history / first run | Guidance, examples, prompt suggestions — not a blank void | ## When to Use Trigger before: - Any PR that adds a new AI-powered UI feature - Any PR that adds a new model call with user-visible output - Designing a new agent interface or chat UI - Adding AI capabilities to an existing feature ## When NOT to Use