Skip to content
SkillReady to runNewDesign

UI State Playbook

Written in-house · editorially graded

Every SkillsBank offering is written in-house — never scraped or crowd-sourced — and graded against a fixed editorial rubric in a separate grading step.

Dry-run test passed · Aug 17, 2026

Trigger check passed

Editorially graded · Aug 17, 2026

Reviews and edits loading, empty, and error-state logic directly inside the customer's own component files (React/TSX, Vue, Svelte, Angular, or plain CSS/JS), applying a decision layer covering loading thresholds per surface, empty-state taxonomy, retry/backoff and race-condition handling, error-boundary vs. fetch-error routing, error placement, and state precedence — then returns the edited source files plus a UI-STATE-CHECKLIST.md. Use when building a new loading, empty, or error state from scratch, or when auditing an existing component or pull request for flicker, missing empty-state anatomy, wrong retry behavior, stale-response races, or ambiguous state precedence.

What you get

An installable SKILL.md file for your AI assistant. Produces code.

Works in
Claude Code · Cursor
Native — drops into .claude/skills/
Copilot · Codex · Gemini CLI
Native — reads .agents/skills/
claude.ai — web & desktop
Upload the .zip in Customize → Skills
ChatGPT
Via a Project — paste into its instructions

See it in action

A real input → output sample

Example Input
Customer provides a code snippet with a loading state, error handling, and empty state. For example, a React component or a plain HTML file with JavaScript code.
Example Output
The skill generates a refactored version of the code with improved UI state management, including loading indicators, error messages, and empty states. For instance, it may add a skeleton loader, an error banner, or a no-results message, and ensure accessibility features like aria-live and role="alert" are properly implemented.

Related