name: front-end-dev description: Build distinctive, production-grade frontend interfaces with a strong aesthetic point of view and real working code. trigger: always_on
This skill follows engineering-doctrine and structured-workflow.
Design Commitment (Required)
Before coding, explicitly choose:
- Purpose: what problem this UI solves
- Audience: who it is for
- Aesthetic Direction: one dominant, intentional style
Aesthetic Constraints (Non-Negotiable)
- No system fonts or AI-default fonts
(e.g. Inter, Roboto, Arial, Space Grotesk) - Typography and spacing carry equal weight to layout
- Visual differentiation must be obvious within seconds
- One cohesive palette with dominant and accent colors
Implementation Requirements
- Production-grade, functional code
- Framework-appropriate patterns (React, Vue, HTML/CSS/JS)
- CSS variables for theme consistency
- Motion used intentionally, not decoratively
Visual Techniques (Use When Appropriate)
- Asymmetry and grid-breaking layouts
- Controlled density or deliberate negative space
- Gradient meshes, noise, grain, or texture
- Layering, depth, and atmospheric backgrounds
Explicit Prohibitions
- Generic component libraries without customization
- Predictable layouts and color schemes
- Cookie-cutter landing-page aesthetics