| name | frontend |
| description | Frontend design skill for creating premium, Awwwards-level UIs with Tailwind CSS. Provides magic prompt formulas, color palettes, and design patterns for stunning landing pages, dashboards, and components. |
Frontend Design Skill
Create stunning, premium frontend designs that belong on Awwwards/Dribbble.
Quick Start
When asked to create frontend/UI:
- Identify the project type (landing page, dashboard, component)
- Choose a design style from references
- Use the magic prompt formula if building from scratch
- Reference quality sites (Stripe, Linear, Framer)
Magic Prompt Formula
"Create a [PROJECT TYPE] that looks like it belongs on Awwwards/Dribbble.
**Visual Style:**
- [AESTHETIC]: Modern/Minimalist/Bold/Futuristic/Elegant
- [COLOR MOOD]: Dark mode with [COLOR] accents / Light with vibrant [COLOR]
- [DESIGN TREND]: Glassmorphism/Neumorphism/Gradient/Bento grids
**Make it premium:**
- Smooth hover animations and micro-interactions
- Bold typography with proper hierarchy
- Perfect spacing and visual flow
- High contrast and accessibility
**Reference:** [SITE] or \"Think Stripe/Linear quality\"
Don't make it functional but boring - make it STUNNING."
Common Requests
| Request Type | Use This Style |
|---|
| SaaS Landing Page | Dark glassmorphism + purple/pink gradients |
| Dashboard | Forest Night or Ocean Depth theme |
| Hero Section | Bold gradient text + dual CTAs |
| Cards | Floating glassmorphism + hover lift |
| Buttons | Gradient backgrounds + smooth hover |
| Minimal Site | Whitespace + single accent color |
References
- Color Palettes:
references/color-palettes.md
- Component Prompts:
references/component-prompts.md
- Design Styles:
references/design-styles.md
Pro Tips
- Always reference specific sites (Stripe, Linear, Framer)
- Ask for multiple variations
- Be specific about interactions ("hover effects that lift")
- Push for boldness over safe designs
- Mention the emotional goal ("make users screenshot this")
Example
Task: "Create a SaaS landing page"
Response: Use the magic prompt with:
- Style: Dark glassmorphism
- Colors: Purple Dream palette
- Components: Hero, feature cards, testimonials
- Reference: Stripe homepage vibe
Notes
- Prioritize visual excellence over just functionality
- Use Tailwind CSS utility classes
- Include smooth animations/transitions
- Make it "screenshot-worthy"
