React Ui Patterns
sickn33/antigravity-awesome-skillsBuilding user interfaces with React can be tricky when data is loading or fails. This set of patterns helps you handle those situations smoothly. Developers use these rules to show the right thing at the right time. Never show stale data or hide errors from users. The goal is to make apps feel fast and reliable.
These patterns cover loading indicators, error states, button behavior, and empty lists. Each pattern comes with simple code examples and clear decision trees. They work for any React app, whether you use hooks or components.
By following these guidelines, you avoid common problems like flickering spinners or silent failures. Users always know what is happening. The result is a cleaner codebase and a better experience for everyone.
Add React Ui Patterns skill to your workflow
Global
mkdir -p ~/.claude/skills/react-ui-patternsProject
mkdir -p .claude/skills/react-ui-patternsSource Repository
More Frontend Development Claude Code Skills
Frontend Designanthropics/skills
Create striking frontend interfaces with bold design and polished code every time
Vercel React Best Practicesvercel-labs/agent-skills
Optimize React and Next.js apps using proven Vercel performance guidelines
Design Taste Frontendleonxlnx/taste-skill
Enforce premium frontend design with metric-based rules and smart component architecture
Vercel Composition Patternsvercel-labs/agent-skills
Clean React components with composition instead of boolean props
Shadcnshadcn/ui
Manage shadcn UI components easily with CLI commands and clear styling rules
Impeccablepbakaus/impeccable
Polish your frontend interfaces with expert design critique and code
Minimalist Uileonxlnx/taste-skill
Build warm minimal web interfaces with editorial typography and flat bento grids
Industrial Brutalist Uileonxlnx/taste-skill
Raw mechanical UIs fusing Swiss print with military terminal aesthetics and high data density