Skip to content

frontend-design (vendored)

Vendored from anthropics/skills/skills/frontend-design (part of the fullstack-nextjs series). Synced via make sync; do not edit skills/vendor/fullstack-nextjs/frontend-design/SKILL.md locally — changes will be clobbered on the next sync.

Upstream frontmatter description

Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications (examples include websites, landing pages, dashboards, React components, HTML/CSS layouts, or when styling/beautifying any web UI). Generates creative, polished code and UI design that avoids generic AI aesthetics.

What it teaches

Aesthetic direction skill — encourages a bold, intentional point of view (brutally minimal, maximalist, retro-futuristic, editorial, …) and refined typography choices instead of default Inter/Arial. Anti-AI-slop guardrails. Use as the creative counterpart to web-design-guidelines's audit role.

Also published as a Claude Code plugin

The same skill is republished as the frontend-design plugin on the claude-plugins-official marketplace, which is why Claude Code's startup tip sometimes recommends /plugin install frontend-design@claude-plugins-official. Do not install it on top of the vendored copy — both pull from the same source; the only difference is the frontmatter description line, and the anthropics/skills upstream we vendor from has richer trigger phrasing (mentions artifacts, posters, landing pages, dashboards, and HTML/CSS layouts in addition to components/pages/applications).

Canonical SKILL.md

See skills/vendor/fullstack-nextjs/frontend-design/SKILL.md for the full instructions. Upstream source: anthropics/skills.