frontend

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:

1. Identify the project type (landing page, dashboard, component)
2. Choose a design style from references
3. Use the magic prompt formula if building from scratch
4. 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

1. Always reference specific sites (Stripe, Linear, Framer)
2. Ask for multiple variations
3. Be specific about interactions ("hover effects that lift")
4. Push for boldness over safe designs
5. 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"