← ClaudeAtlas

frontend-designlisted

UI/UX design — color theory (60-30-10 rule), responsive layouts, WCAG accessibility, CSS/Tailwind patterns, wireframes, and visual review. Use when designing interfaces, choosing palettes, writing CSS, or fixing layout/accessibility issues.
bg-szy/TOP-SKILLS · ★ 1 · Web & Frontend · score 70
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