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 does
Claude's UI output has a recognizable aesthetic — same card structures, same gradient buttons, same hero sections. Not because Claude can't generate good code, but because without a design constraint it defaults to the average of everything it's seen. This skill loads Anthropic's production design principles: specific rules about typography hierarchy, spacing systems, colour contrast, component weight, and when not to use decorative elements. It's the difference between "looks like AI made it" and "looks like a designer reviewed it."
Use case
Any time you're asking Claude to build UI that real users will see. The failure mode this prevents: Claude generates technically correct code that looks generic and cheap. Made by Anthropic — these are the same principles used to build Claude.ai and Anthropic's own product interfaces.
"Build a dashboard with a sidebar, stat cards, and a data table." "Create a SaaS landing page — hero, features grid, pricing, footer." "Redesign this component — it looks like a Bootstrap template from 2018." "Build a settings page with profile editing, notifications, and danger zone." "Make this form look production-ready with proper validation states."
Drop the SKILL.md in your project root — Claude reads it on every session start.
Describe what you want to build in plain language. The skill shapes how Claude approaches the visual decisions, not what you ask for.
Works with React, Next.js, plain HTML/CSS, and Vue. Output is framework-agnostic by default unless you specify.
Input
A description of the page, component, or UI you want built. No design brief needed.
Output
Frontend code with deliberate visual decisions: correct typographic scale, consistent spacing, appropriate use of colour, and component hierarchy that reads as designed rather than generated.
npx skillsadd anthropics/skills/frontend-design
npx skillsadd anthropics/skills/frontend-design
Requires skills.sh CLI
Build Obsidian.md plugins following official API patterns, TypeScript best practices, and plugin review guidelines.
Create new skills, modify and improve existing skills, and measure skill performance. Use when users want to create a skill from scratch, edit, or optimize an existing skill, run evals to test a skill, benchmark skill performance with variance analysis, or optimize a skill's description for better triggering accuracy.
Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui). Use for complex artifacts requiring state management, routing, or shadcn/ui components - not for simple single-file HTML/JSX artifacts.