fd-states-feedback
CommunityMaster loading, empty, error, and success states.
Design & Creative#accessibility#error-handling#ui-design#skeleton#loading-states#empty-states#success-feedback
Authorandrewle9510
Version1.0.0
Installs0
System Documentation
What problem does it solve?
This skill provides standardized guidance for designing and implementing robust user feedback patterns during loading, empty, error, and success states to improve perceived performance and clarity.
Core Features & Use Cases
- Loading states: spinner, skeleton, progress bar, shimmer and optimistic loading.
- Empty states: first-use and no-results patterns with clear Primary actions.
- Error states: page, section, field, and toast errors with recovery paths.
- Success states: toasts, inline confirmations, and persistent success messages.
- Accessibility: ARIA live regions and accessible messaging.
- Platform guidance: aligns with Next.js 16+, Tailwind CSS v4, shadcn/ui, and Sonner.
Quick Start
Use this skill to design and implement consistent feedback for common UI states. Example: Create a loading skeleton for a product grid, an empty state for an empty catalog, an inline error message for a form, and a success toast when the item is saved.
Dependency Matrix
Required Modules
None requiredComponents
Standard package💻 Claude Code Installation
Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.
Please help me install this Skill: Name: fd-states-feedback Download link: https://github.com/andrewle9510/design-skill-orchestrator/archive/main.zip#fd-states-feedback Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
Agent Skills Search Helper
Install a tiny helper to your Agent, search and equip skill from 223,000+ vetted skills library on demand.