OpenSkillIndex← back to search
claude-codedevelopment

Claude-skill-registry front-end-dev

Build distinctive, production-grade frontend interfaces with a strong aesthetic point of view and real working code.

install
source · Clone the upstream repo
git clone https://github.com/majiayu000/claude-skill-registry
Claude Code · Install into ~/.claude/skills/
T=$(mktemp -d) && git clone --depth=1 https://github.com/majiayu000/claude-skill-registry "$T" && mkdir -p ~/.claude/skills && cp -r "$T/skills/data/front-end-dev" ~/.claude/skills/majiayu000-claude-skill-registry-front-end-dev && rm -rf "$T"
manifest: skills/data/front-end-dev/SKILL.md
tags
#ui-design#react-development#css-variables#aesthetic-ux#frontend-implementation
source content

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