Skip to content
AI Primer
💻 Developer Tools

frontend-design

anthropicsby anthropics2 months ago140.2k

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/claude-code --skill frontend-design
Show step-by-step
  1. 1

    Open your terminal

    • Mac: Press ⌘ Space, type "Terminal", press Enter
    • Windows: Press Win R, type "cmd", press Enter
  2. 2

    Paste the command above and press Enter

    Use the Copy command button, then paste in your terminal (Mac: ⌘V, Windows: Ctrl V).

  3. 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--claude-code--plugins--frontend-design--skills--frontend-design/
├── SKILL.md
└── ... (skill resource files)
View on GitHub

Comments

X@RLanceMartin

"the companion gallery is fun - frontend-design skill -"

Always review skill code before installing. Third-party skills may contain scripts that run on your machine.

Related skills

🔍 Code Review

requesting-code-review

Use when completing tasks, implementing major features, or before merging to verify work meets requirements

by obra · 14 days ago266.1k
💻 Developer Tools

test-driven-development

Use when implementing any feature or bugfix, before writing implementation code

by obra · 14 days ago266.1k
💻 Developer Tools

using-git-worktrees

Use when starting feature work that needs isolation from current workspace or before executing implementation plans - ensures an isolated workspace exists via native tools or git worktree fallback

by obra · 14 days ago266.1k
💻 Developer Tools

systematic-debugging

Use when encountering any bug, test failure, or unexpected behavior, before proposing fixes

by obra · 14 days ago266.1k