Skills / Design & frontend
Best design & frontend skills for Claude Code
Skills that help an agent design and build interfaces: layout, typography, components, accessibility and frontend code.
34 skill repos graded, 15 earn an A, the median one keeps 104 tokens in your agent's context on every message. The lightest, claude-skills/sveltekit-svelte5-tailwind-skill, costs 33 tokens; the heaviest, Kimeur/duology, costs 8,145.
Updated Nov 13, 2026. Graded by the free Skill Grader: six deterministic axes, no model, same result every run.
34 design & frontend skills, ranked
Best score first; ties go to the lighter footprint. Green and amber tags say what a skill does well and what is costing it rank. Click a skill for its full report card. All categories on one leaderboard.
Want your coding agent to do your site's SEO?
Your first SEO pull request in about 5 minutes. You pick the repo, and you merge every change.
What do you use to work on your site?
Pick one above and we take you to the right setup.
FAQ
What is the best design & frontend skill for Claude Code?
On the Skill Grader, 996pm/interaction-prd ranks #1 of 34: graded A (4.00/4), with 43 tokens resident on every message. #2 is ZWD11/house-plan-designer (A) and #3 is wu-tian807/AstraLayering (A). The order updates whenever a skill is re-graded.
How are these skills ranked?
Each repo is graded on six deterministic axes, with no model involved: resident footprint (tokens its descriptions add to every message), description honesty, body size, progressive disclosure, factoring, and CLI leverage. Best score first; ties go to the lighter footprint, then more GitHub stars. A model only assigns the category, from a fixed list of twelve, and it never changes the grade. Public repos with 25+ stars are listed.
Does a high grade mean the skill works?
Not on its own. The grade measures what a skill costs your agent and how well it is built, not whether it gets the task right. Read the report card, then try the skill on a real task in your own repo.
Can I use these skills outside Claude Code?
They are SKILL.md bundles, the Agent Skills format Claude Code loads. Other coding agents that read SKILL.md, such as Codex, can use the same files; each repo’s README has its install steps.
How do I get my skill listed or move up?
Grade it with the free Skill Grader: paste the repo URL. A public repo with 25+ stars is listed in its category automatically. Fix what the report card flags, grade it again, and its rank and README badge update at once.