---
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