Skill of the day: `frontend-design` (distinctive UI direction)

frontend-design is an official Anthropic marketplace skill shipped inside the example-skills plugin. It steers new UI or visual reshape work toward subject-specific palette, type, and layout — and away from templated “AI SaaS” defaults. Register anthropics/skills, install example-skills@anthropic-agent-skills, then trigger on frontend / redesign asks. Marketplace metadata version: 1.0.0 (catalog field — not per-skill semver). Checked 2026-09-26.

TL;DR: Design-lead guidance, not a component library. Install the example-skills plugin (skill path ./skills/frontend-design). Use when aesthetic direction matters. Skip Office binaries (document-skills), API/docs primary (claude-api), or structured doc co-writing (doc-coauthoring). [GAP]: there is no solo /plugin install frontend-design@….

What it does

SKILL.md tells Claude to act as a design lead: opinionated choices tied to subject matter, not generic defaults.

Process (compressed):

1. Plan tokens — compact system: color (4–6 named hex), type roles, layout (prose + ASCII), principles.

2. Uniqueness review — revise any part that reads like a generic default for “any similar page.”

3. Build — implement the revised plan; watch CSS specificity collisions.

4. Self-critique — restraint (one memorable element); quality floor: responsive, keyboard focus, reduced motion, accessible contrast.

Anti-defaults called out briefly in SKILL.md (use only if the brief asks): cream + terracotta / Claude-accent tell, acid-green-on-black, SaaS identical-card kit, tracked ALL-CAPS eyebrows, single-word accent headlines. Typography: one or two families; intentional scale; skip filler labels and scattered motion — prefer one orchestrated moment. UI copy: plain verbs, active voice, failure/empty as direction.

Triggers: new UI, visual redesign, “make it not look AI-generated.”

When to use / when not

Use when aesthetic direction / type / layout matter and you want a compact design plan before code.

Do not:

• Primary job is Office binaries (xlsx / docx / pptx / pdf) → document-skills

• Claude API / SDK app without UI direction → live claude-api radar — do not re-Intake

• Long structured doc co-writing → live doc-coauthoring radar — do not re-Intake

• Brand system already locked and you only need implementation (may still use lightly for critique)

• Invent mandatory Figma/connectors — none in SKILL.md

Sibling skill mcp-builder ships in the same example-skills plugin (MCP server guide) — separate draft elsewhere; no live radar URL yet.

Install (Claude Code)

/plugin marketplace add anthropics/skills

Then Browse → anthropic-agent-skills → example-skills → Install, or direct:

/plugin install example-skills@anthropic-agent-skills

Fact (marketplace.json, 2026-09-26): plugin name is example-skills; skill path is ./skills/frontend-design. Sibling skills in the same plugin include algorithmic-art, brand-guidelines, canvas-design, doc-coauthoring, frontend-design, mcp-builder, skill-creator, theme-factory, web-artifacts-builder, webapp-testing, and others — installing pulls the whole example set.

Walkthroughs: add the marketplace · sync Claude.ai skills / plugins into Claude Code · skill-doctor if load looks wrong.

Also available context (one line): Claude.ai paid plans already include many example skills — this radar stays Code/marketplace-first.

Limits

• README disclaimer: skills are demo/reference; product behavior may differ

• Skill folder = SKILL.md + LICENSE.txt only (skill-level README 404) — guidance skill, not a component library or a11y certification

• Bundled with the full example-skills set — expect siblings, not a minimal single-skill package

• Does not replace real design review or a locked brand-guidelines skill

Pair with prior radars / guides

Guide / radar	Moment
doc-coauthoring	Sibling example-skills — structured doc co-writing
document-skills	Deliverable is xlsx / docx / pptx / pdf
add anthropics/skills marketplace	First /plugin setup
sync skills / plugins	Claude.ai ↔ Code
skill-doctor	Skill not loading
claude-api	Optional prior C

Sources (checked 2026-09-26)

• marketplace.json — marketplace anthropic-agent-skills; plugin example-skills; skills include ./skills/frontend-design; metadata version 1.0.0

• SKILL.md — name, description, plan/review/build/critique, anti-defaults, typography/motion/writing

• LICENSE.txt — Apache 2.0

• anthropics/skills README — marketplace add; Browse//plugin install example-skills@anthropic-agent-skills; demo/reference disclaimer

• Skill tree: github.com/anthropics/skills/tree/main/skills/frontend-design — folder = SKILL.md + LICENSE.txt (no skill-level README)