front-end-dev

---

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