frontend-designlisted
Install: claude install-skill bg-szy/TOP-SKILLS
# Frontend Design
Expert guidance for creating beautiful, accessible, and responsive frontend designs using modern UI principles, color theory, and React+Tailwind CSS patterns.
- Leverage native parallel subagent dispatch and 200k+ context windows where available.
## Activation Conditions
Use symptom -> action triggers: when one matches, apply this skill and verify with the protocol below.
**Color & Design:**
- Choosing color palettes for applications
- Applying the 60-30-10 design rule
- Creating accessible color combinations
- Designing backgrounds, text, and accent colors
- Triggered on color selection, UI color palette design, gradient creation
- Ensuring WCAG contrast compliance
**UI Components & Layouts:**
- Creating React UI components with Tailwind CSS
- Building forms, modals, cards, badges, buttons, inputs, tabs, tables
- Implementing responsive design patterns
- Designing accessible UI components
- Working with states, variants, and animations
**Design Review & Correction:**
- Reviewing website design (local or remote)
- Checking UI for consistency issues
- Finding and fixing layout breakage
- Detecting responsive design problems
- Fixing accessibility violations
- "Review website design", "check UI", "fix layout", "find design problems"
## Part 1: Color Theory & Palettes
### Color Categories
- **Hot Colors**: Oranges, reds, and yellows - energizing, attention-grabbing
- **Cool Colors**: Blues, greens, and purples - calming, professional
- **Neutral Col