Agent skill · Anthropic

Frontend Design skill for Claude Code, Codex and Cursor

Steers UI work toward deliberate visual direction and typography instead of generic template looks.

Officialname: frontend-design★ 184k (repo)pushed 2026-10-09See repoSKILL.md on GitHubchecked 2026-11-07

What it does, in the publisher's words

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.

The description field of the SKILL.md. The agent reads only this at startup and decides from it when to load the full skill.

Install Frontend Design

The skills CLI copies the skill into the folder of each agent you pick (Claude Code, Codex, Cursor, Copilot, Gemini CLI, OpenCode, Windsurf...). Add -g for all projects. Needs Node.js 22.20+. docs

npx skills add anthropics/skills --skill frontend-design

This repo is a plugin marketplace. Inside Claude Code, add it and install the plugin that holds the skill (document-skills, example-skills, claude-api, academy-guide...), or copy only this skill into ~/.claude/skills. docs

/plugin marketplace add anthropics/skills
/plugin install <plugin>@anthropic-agent-skills

# or only this skill:
npx skills add anthropics/skills --skill frontend-design -a claude-code

Download the skill folder, zip it, then Customize > Skills > + > Create skill > Upload a skill. Code execution must be on (Settings > Capabilities). docs

git clone --depth 1 https://github.com/anthropics/skills.git /tmp/frontend-design-src
cp -r /tmp/frontend-design-src/skills/frontend-design ./frontend-design
zip -r frontend-design.zip frontend-design

Codex reads skills from .agents/skills in the repo or ~/.agents/skills. Type $ in Codex to use one. docs

npx skills add anthropics/skills --skill frontend-design -a codex

gh skill (GitHub CLI 2.90+, preview) installs it for Copilot in VS Code, the CLI and the cloud agent. Copilot also reads .github/skills and ~/.copilot/skills. docs

gh skill install anthropics/skills frontend-design

Cursor reads .cursor/skills, .agents/skills and ~/.cursor/skills (and .claude/skills). It does not install loose skills from a GitHub URL, so copy it in. docs

npx skills add anthropics/skills --skill frontend-design -a cursor

Installs from the GitHub repo; --path picks this skill out of the repo. Default scope is user (all projects). docs

gemini skills install https://github.com/anthropics/skills.git --path skills/frontend-design

OpenCode reads .opencode/skills, ~/.config/opencode/skills and the Claude and .agents folders. docs

npx skills add anthropics/skills --skill frontend-design -a opencode

Windsurf (now Devin Desktop) reads .devin/skills, .windsurf/skills and ~/.codeium/windsurf/skills. docs

npx skills add anthropics/skills --skill frontend-design -a windsurf

Works with

Claude Code, Claude.ai and Claude Desktop, Codex, GitHub Copilot, Cursor, Gemini CLI, OpenCode, Windsurf and other agents that read the open Agent Skills format.

What's in the SKILL.md

5 sections

Ground your designs in the subject matter
Design principles
Process: plan, review against the brief, build, critique
Restraint and self-critique
More on writing in design

Bundled files

LICENSE.txt

Loaded only when the instructions point to them.

Facts

Skill name: frontend-design
Publisher: Anthropic (official)
Repo: anthropics/skills
License: Complete terms in LICENSE.txt
SKILL.md size: 1,477 words, 66 lines
Bundled files: 1
Repo stars: 184k (as of 2026-10-24)
SKILL.md checked: 2026-11-07

More skills from anthropics/skills

Canvas Design: Produces posters and static artwork as PNG or PDF files, guided by a written design philosophy.
Claude API: Reference for building on the Claude API and Anthropic SDKs: models, tool use, streaming, caching, pricing.
Doc Co-authoring: Walks you through drafting specs, proposals and design docs step by step with Claude.
Word Documents (DOCX): Creates, reads and edits Word .docx files, including templates, tracked changes and formatting.
MCP Server Builder: Guide for designing and building Model Context Protocol servers that wrap external APIs as tools.
PDF: Extracts text and tables, merges, splits, fills forms and creates PDF files.
PowerPoint (PPTX): Builds, reads and edits PowerPoint decks and templates, including layouts and speaker notes.
Skill Creator: Helps write new skills, refine existing ones and test how well they trigger and perform.
Slack GIF Creator: Makes small animated GIFs sized and validated for Slack's emoji and message limits.
Web Artifacts Builder: Builds multi-component HTML artifacts with React, Tailwind and shadcn/ui, bundled into one file.
Web App Testing: Uses Playwright to drive a local web app, check behavior, read console logs and take screenshots.
Excel Spreadsheets (XLSX): Opens, cleans, edits and creates spreadsheets (.xlsx, .csv), including formulas and charts.

Related frontend & design skills

FAQ

What does the frontend-design skill do?+

Steers UI work toward deliberate visual direction and typography instead of generic template looks. In its own SKILL.md, Anthropic describes it as: "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."

How do I install the frontend-design skill?+

Run npx skills add anthropics/skills --skill frontend-design and pick your agents, or use the tab for your agent above. In Claude Code the skill ends up in ~/.claude/skills/frontend-design/SKILL.md; in Codex and Cursor in .agents/skills/frontend-design/.

Does Frontend Design work in Codex, Cursor and Copilot, or only Claude?+

It's a standard SKILL.md, so any agent that reads the Agent Skills format can use it: Claude Code, the Claude apps, Codex, GitHub Copilot, Cursor, Gemini CLI, OpenCode, Windsurf and more.

Who maintains Frontend Design?+

Anthropic, the company or project behind it, in the anthropics/skills repo on GitHub, last pushed 2026-10-09. License: Complete terms in LICENSE.txt.

Read a skill's SKILL.md and scripts before you install it: skills aren't verified by any agent vendor. Claude skills marketplace · How to install skills · MCP servers