| name | empty-states-and-ai-streaming |
| description | Use for empty states, no-data UI, AI output streaming, thinking steps, loading states, skeletons, progressive disclosure, and conversational product surfaces. |
Empty States and AI Streaming
Use this skill for empty states, loading, no results, onboarding nudges, AI output streaming, thinking indicators, and stateful conversational UI.
Empty states
Install coss/ui Empty when the project uses shadcn-compatible components and the user wants a polished empty-state primitive:
pnpm dlx shadcn@latest add @coss/empty
Empty states should contain:
- Specific title.
- Useful explanation.
- One primary next action where appropriate.
- Optional secondary action only if genuinely useful.
- Minimal icon or media if it clarifies the state.
Do not add decorative empty-state illustrations by default.
AI output streaming
For AI products:
- Show progress without pretending to know hidden reasoning.
- Use thinking steps only for user-facing work phases such as retrieving files, generating draft, checking constraints, or validating output.
- Do not expose private chain-of-thought.
- Avoid verbose streaming chrome; the content remains the focus.
- Include stopped, retry, error, rate-limit, and partial-output states.
Loading states
- Skeletons should match final layout dimensions.
- Spinners are acceptable for short unknown waits but should not dominate.
- For long tasks, show meaningful progress categories.
State checklist
- Empty.
- Loading.
- Partial.
- Error.
- Permission denied.
- Offline or unavailable.
- Success.
- Retry.
