Claude Code

6 essential front-end development skills for Claude Code

Ship production-quality React, debug confidently, and turn designs into code without sacrificing accessibility, performance, or consistency.

6 skill files — download free

How to install

Install into Claude Code

Drop any .md from this page into the path below and restart. The skill is then available across every Claude Code session.

~/.claude/skills/[skill-name]/SKILL.md

Skill files

Install into Claude Code · Drop in your project root

Skill .md

superpowers.md

Complete software development methodology as composable skills: brainstorm, spec, plan, TDD, execute, review, ship. The most-installed skills repo.

Skill .md

test-driven-development.md

TDD workflow before writing implementation code. The core engineering discipline most designers skip.

Skill .md

web-artifacts-builder.md

Build complex HTML artifacts with React, Tailwind, shadcn/ui. Best path for designer-built prototypes.

Skill .md

webapp-testing.md

Test local web applications using Playwright. Run smoke tests on what you've built before shipping.

Skill .md

next-best-practices.md

Next.js patterns straight from Vercel's engineering team. Directly relevant to most modern React stacks.

Skill .md

mcp-builder.md

Build Model Context Protocol servers to integrate any external API into your AI tools. The bridge between agents and your existing systems.

6 essential front-end development skills for Codex

0 prompts · 6 skill files

6 essential front-end development skills for Cursor

0 prompts · 6 skill files

6 essential front-end development skills for Gemini CLI

0 prompts · 6 skill files