frontend-design

---
name: frontend-design
description: "Create distinctive, production-grade frontend interfaces with high design quality. Avoids generic AI aesthetics in favor of premium, modern UI."
allowed-tools: [generate_image, write_to_file]
---

# frontend-design

This skill ensures every UI generated feels premium, alive, and professional.

## Phase 1: Conceptual Direction
Before coding, commit to a BOLD aesthetic direction:
- **Tone**: Brutally minimal, luxury/refined, editorial, or glassmorphic.
- **Differentiator**: What makes this interface unforgettable?

## Phase 2: Design Tokens & System
Implement a cohesive design system using CSS variables:
1. **Typography**: Use modern Google Fonts (Inter, Outfit, Roboto). Avoid browser defaults.
2. **Color**: Use curated HSL palettes. Avoid generic red/blue/green.
3. **Surfaces**: Implement depth using gradients, subtle shadows, or glassmorphism (backdrop-filter).

## Phase 3: Dynamic Interaction
Make the interface feel "alive":
- **Micro-animations**: Subtle hover transitions, staggered reveals.
- **Feedback**: Clear visual cues for every interaction.

## Phase 4: Implementation
Produce production-grade HTML/CSS/JS or React code.
- **Golden Rule**: Never use placeholders. If an image is needed, use `generate_image`.

## References
| File | Purpose |
|------|---------|
| [premium-ui-checklist.md](file:///c:/Users/Ray.Shen/WebProjects/colab/skills/coding/frontend-design/references/premium-ui-checklist.md) | Checklist for visual excellence |
| [color-palettes.md](file:///c:/Users/Ray.Shen/WebProjects/colab/skills/coding/frontend-design/references/color-palettes.md) | Curated color combinations |