Installs into .claude/skills of the current project.
Are you the author of Front End Dev?
Add the live security badge to your README. It updates with every re-scan.
[](https://www.skillsdirectory.com/skills/majiayu000-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
