# Front End Dev > Build distinctive, production-grade frontend interfaces with a strong aesthetic point of view and real working code. Use when this capability is needed. - Skill: `tomevault-io/front-end-dev` (Agent Skill, multi-file: 2 files) - Install (CLI): `npx skillmds@latest add tomevault-io/front-end-dev` - Raw SKILL.md: https://api.skillmd.com/api/skills/tomevault-io/front-end-dev/raw - Safety review: pending (external: skill-scanner PASS, skillspector PASS) - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Web & Frontend - Author: tomevault-io (https://skillmd.com/u/tomevault-io) - Updated: 2026-09-17 - Page: https://skillmd.com/skills/tomevault-io/front-end-dev --- 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 --- > Converted and distributed by [TomeVault](https://tomevault.io/claim/mattg101) — claim your Tome and manage your conversions.