# Frontend Skill

> Frontend Skill

- Skill: `haohao-end/frontend-skill` (Agent Skill, multi-file: 4 files)
- Install (CLI): `npx skillmds@latest add haohao-end/frontend-skill`
- Raw SKILL.md: https://api.skillmd.com/api/skills/haohao-end/frontend-skill/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: Haohao-end (https://skillmd.com/u/haohao-end)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/haohao-end/frontend-skill

---

# Frontend Skill

Use this skill when the task depends on visual hierarchy, spacing, composition, imagery, and motion more than on component count.

## When to use

- Building or refining a landing page, app surface, prototype, demo, or game UI
- A screen needs to feel deliberate, premium, and current
- The request is about visual quality, not just functional completion

## Working approach

1. Define a visual thesis in one sentence.
2. Write a short content plan: hero, support, detail, final CTA.
3. Decide 2-3 interaction ideas that meaningfully change the feel.
4. Build from composition first, then add components only when needed.

## Design principles

- Prefer strong layout, scale, and cropping before adding chrome.
- Keep the first viewport simple and memorable.
- Use a small color system and no unnecessary decoration.
- Remove cards or borders if plain layout is clearer.
- Make the main message readable at a glance.

## Output expectations

- If the user asked for implementation, give a concrete front-end plan.
- If the user asked for critique, call out hierarchy, spacing, motion, and clutter.
- If the user asked for code, keep the result consistent with the visual direction above.