empty-states-and-ai-streaming

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.