🎨 Design

frontend-design

Name: frontend-design
Author: anthropics

by anthropics3 months ago167.4k

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.

Install

npx skills add https://github.com/anthropics/skills --skill frontend-design

Show step-by-step

1
Open your terminal
- Mac: Press ⌘ Space, type "Terminal", press Enter
- Windows: Press Win R, type "cmd", press Enter
2
Paste the command above and press Enter
Use the Copy command button, then paste in your terminal (Mac: ⌘V, Windows: Ctrl V).
3
Restart Claude Code
Close and reopen Claude Code, or start a new session, so it picks up the new skill.

Where it lives

~/.claude/skills/anthropics--skills--skills--frontend-design/
├── SKILL.md
└── ... (skill resource files)

View on GitHub

Comments

X@mattpocockuk

"@dayson @brandonbryant02 I imagine it's because you've used one and not the other"

X@mattpocockuk

"Top 5 all-time on nice Someday its sequel, /wayfinder, will eclipse it"

X@petergyang

"4. Turn any workflow you do twice into a skill Examples include a grocery skill that refills last week's cart automatically and a video upload skill that..."