Skill
frontend-design: avoiding templated defaults in UI design
Anthropic's frontend-design skill: plan the visual direction, check it against the brief, avoid templated defaults. Not tested; follow the official text.
frontend-design is a skill Anthropic keeps in the anthropics/skills repository. The folder holds only SKILL.md and LICENSE.txt. This page only relays what the official text says; it was not run on this site.
- Verified
- · Not tested by us
- Applies to
- Claude Code For Claude Code: the anthropics/skills README at the same pinned commit says the repo can be registered as a Claude Code plugin marketplace, and marketplace.json lists ./skills/frontend-design in the example-skills plugin; the Claude Code docs describe how skills are invoked (basis: the official bundle and skill list, not format similarity). Only these Claude Code sources were checked; this page only checked the Claude Code invocation flow; the specific flows on other platforms (e.g. Claude.ai, API) were not checked here.[1][4][5][6]
- How to invoke
- No official command
Claude loads it automatically when the description matches, or you invoke it directly with /skill-name; the docs give the plugin-skill form /plugin-name:skill-name. There is no separate official command for this skill.[1][6]
- Install
/plugin install example-skills@anthropic-agent-skillsThe README says to register the repo first with /plugin marketplace add anthropics/skills, then install the plugin; this command installs the whole example-skills plugin, not a single skill.[4][5]
- License
- Apache-2.0 [2]
- Prerequisites
- Checked revision
dbd4588- Tools
When to use
- Building a new UI, or reshaping an existing one, when you want a deliberate visual direction instead of a common template.[1]
- You want Claude to produce a design plan (colour, type, layout, principles) before it writes code.[1]
- Also usable when the brief already pins a visual direction: then follow the brief exactly, since SKILL.md says the brief's own words win over the skill's own default preferences (a usage limit, not a non-use case).[1]
When not to use
- Tasks unrelated to UI visuals, such as backend or data work. The official text does not list non-use cases; this item is inferred from the description, which only mentions building or reshaping UI.[1]
What it does
The official description in one line: guidance for distinctive, intentional visual design when building new UI or reshaping an existing one, covering aesthetic direction, typography and avoiding templated defaults.[1]
- Ground the design in the subject: if the brief does not say what the product or subject is, identify it first and confirm with the client.
- Two passes: first a short design plan (a base palette of 4-6 named hex values, typefaces and their roles, layout, principles), then review it against the brief; revise any part that reads like a generic default and say what changed and why.
- While writing code, watch CSS selector specificity so classes do not cancel each other out.
- Stay restrained: spend boldness in one place, keep the rest quiet; build to a floor of mobile-responsive layout, visible keyboard focus and reduced motion respected.
- Usage limit: when the brief pins a visual direction, you still use the skill but follow the brief exactly (SKILL.md: "follow it exactly"), even if the brief asks for one of the looks the skill lists as defaults.
How to call and install it
| Item | Official wording (summary) |
|---|---|
| Call | Claude uses skills when relevant, or you can invoke one directly with /skill-name (Claude Code docs) |
| Install | README: run /plugin marketplace add anthropics/skills, then install the example-skills plugin; marketplace.json lists frontend-design inside it |
| Install this skill alone | Not stated officially |
| License | LICENSE.txt in the folder is Apache License 2.0 |
| Folder contents | LICENSE.txt, SKILL.md |
/plugin marketplace add anthropics/skills
/plugin install example-skills@anthropic-agent-skillsDependencies and gaps
The SKILL.md frontmatter has only name, description and license, and the body does not ask for extra software or commands; it only says to take screenshots to review "if your environment supports it". Account, permission and cost are not stated officially. Note that the README installs the whole example-skills plugin, which holds other skills too, not this skill alone.[1][4][5]
The Claude Code docs place personal skills at ~/.claude/skills/<skill-name>/SKILL.md and project skills at .claude/skills/<skill-name>/SKILL.md. The official text does not describe copying this particular skill there by hand; check the docs yourself.[6]
Sources
All links are official pages; verification dates are listed per source, and links point to the version checked.
- Anthropic · frontend-design/SKILL.md
dbd4588 - Anthropic · frontend-design/LICENSE.txt
dbd4588 - Anthropic · skills/frontend-design (directory)
dbd4588 - Anthropic · anthropics/skills README.md
dbd4588 - Anthropic · anthropics/skills marketplace.json
dbd4588 - Anthropic (Claude Code Docs) · Extend Claude with skills
Related tools
Claude Code
Anthropic's coding agent for reading codebase context, editing files, running commands and assisting development work.