Agent skill
front-end-dev
Build distinctive, production-grade frontend interfaces with a strong aesthetic point of view and real working code.
Install this agent skill to your Project
npx add-skill https://github.com/majiayu000/claude-skill-registry/tree/main/skills/data/front-end-dev
SKILL.md
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
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
majiayu000/claude-skill-registry
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
majiayu000/claude-skill-registry
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
majiayu000/claude-skill-registry
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
majiayu000/claude-skill-registry
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
majiayu000/claude-skill-registry
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
majiayu000/claude-skill-registry
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
Didn't find tool you were looking for?