frontend-designcommit 41bbe19SKILL.md · UI & Interaction
Frontend Design
Guides distinctive visual design for new or reworked UI, making deliberate palette, typography and layout choices grounded in the subject matter.
npx skills add anthropics/skills --skill frontend-designCommand selected. Copy it manually.
- Permissions
- read-repo
- write-files
- shell
- network
- Compatible with
- Claude Code
- GitHub
- 186.0k
- Source
- Official · Anthropic
- Status
- Scan passed
- License
- Apache-2.0
- Category
- UI & Interaction
Core rule
The brief's own words always win; where it leaves a choice open, don't spend it on a generic default.
Execution Phases
Phase 01Ground in the subject
If the brief does not name the subject, propose one with its audience and primary job and confirm it; draw visual choices from that world's materials and vernacular.
Phase 02Draft a design plan
Create a compact token system: 4-6 named hex colors, typefaces and roles, a layout concept compared with ASCII wireframes, and guiding principles.
Phase 03Review against the brief
Revise any part of the plan that reads like the default you would produce for any similar page, and say what changed and why.
Phase 04Build and critique
Code from the revised plan, watch CSS selector specificity, meet a floor of responsiveness, visible focus and reduced motion, and review screenshots if the environment allows.
Permissions (summarised from SKILL.md)
| Capability | Needed | Details |
|---|---|---|
| File writes | Required | Writes front-end code and interface copy following the design plan. |
| Command execution | Not required | The skill does not ask for any commands to be run. |
| Network outbound | Not required | No network access needed. |
SKILL.md frontmatter (YAML)
---
name: frontend-design
description: Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.
license: Complete terms in LICENSE.txt
---