47 Claude Code skills for product management, frontend design, full-stack development, and browser automation. Organized by workflow — from discovery through deployment.
Download builder-skills.zip — direct download, no account needed.
Unzip and copy the .claude/skills/ folder into your project. That is all. See Setup below for selective installation options.
If the download link above does not work yet, use the Code > Download ZIP button on this page, then navigate into builder-skills-main/.claude/skills/ and copy the skills folder into your project.
Install everything — copy all skills into any project:
cp -r .claude/skills/ your-project/.claude/skills/Install globally — available in every project:
cp -r .claude/skills/* ~/.claude/skills/Install selectively — pick only the categories you need (recommended if you have many skills already, to avoid context bloat):
# Just design skills
cp -r .claude/skills/design/ your-project/.claude/skills/design/
# Just product skills
cp -r .claude/skills/product/ your-project/.claude/skills/product/
# Mix and match
cp -r .claude/skills/dev/setup/ your-project/.claude/skills/dev/setup/
cp -r .claude/skills/dev/review/ your-project/.claude/skills/dev/review/Knowledge skills that provide design principles and decision-making context.
| Skill | References | Covers |
|---|---|---|
frontend-design |
7 | Typography, color, spacing, motion, interaction, responsive, writing |
design-foundations |
5 | Five planes model — strategy, scope, structure, skeleton, surface |
Slash commands for targeted design work. Most accept an optional argument to scope the work (e.g. /audit header, /polish checkout-form).
| Group | Command | What it does |
|---|---|---|
| Setup | /design-brief |
One-time setup — gathers design context and saves to config |
| Review | /audit |
Technical quality checks: a11y, performance, theming, responsive |
/critique |
Design review: hierarchy, clarity, emotional resonance | |
| Refine | /normalize |
Align with design system standards |
/polish |
Final pass before shipping | |
/distill |
Strip to essence, remove complexity | |
/clarify |
Improve unclear copy and labels | |
/extract |
Pull reusable components into design system | |
| Adjust | /bolder |
Amplify safe or boring designs |
/quieter |
Tone down overly bold designs | |
/colorize |
Add strategic color | |
/animate |
Add purposeful motion | |
/delight |
Add moments of joy and personality | |
| Hardening | /optimize |
Performance: loading, rendering, bundle size |
/harden |
Error handling, i18n, edge cases | |
/adapt |
Adapt for different devices and contexts | |
/onboard |
Design onboarding flows and empty states |
Knowledge skills that provide product strategy and decision-making context.
| Skill | References | Covers |
|---|---|---|
jtbd |
5 | Jobs to Be Done — core concepts, discovering/defining/designing/delivering value |
lean-canvas |
— | One-page business model — problem, solution, channels, metrics, unfair advantage |
Slash commands for product management work. Most accept an optional argument to scope the work (e.g. /prd search-feature, /prioritize backlog).
| Group | Command | What it does |
|---|---|---|
| Discover | /interview |
Generate interview scripts or analyze transcripts for insights |
/competitive |
Competitive analysis with feature comparison and positioning gaps | |
| Define | /prd |
Write a product requirements document |
/stories |
Write job stories with acceptance criteria | |
/spec |
Write a technical specification from requirements | |
| Prioritize | /prioritize |
Score and rank features using RICE, opportunity scoring, or impact/effort |
/scope |
Cut scope to identify MVP and must-haves for a timeline | |
| Launch | /gtm |
Go-to-market plan with positioning, messaging, and launch checklist |
/metrics |
Define success metrics, KPIs, and instrumentation plan | |
/retro |
Run a structured retrospective with actionable outcomes |
Knowledge skills that provide development best practices and conventions.
| Skill | Covers |
|---|---|
vercel-react-best-practices |
React/Next.js performance optimization from Vercel Engineering (58 rules) |
web-design-guidelines |
Review UI code against Web Interface Guidelines |
typescript-patterns |
Type design, generics, utility types, discriminated unions, error handling |
api-design |
RESTful conventions, error formats, pagination, versioning, auth patterns |
Slash commands for development workflows. Most accept an optional argument to scope the work.
| Group | Command | What it does |
|---|---|---|
| Setup | /nextjs-init |
Scaffold Next.js with App Router, TypeScript, Tailwind, opinionated defaults |
/supabase-setup |
Initialize Supabase: schema, RLS policies, auth, storage, edge functions | |
/vercel-deploy |
Deploy to Vercel: config, env vars, domains, preview deploys | |
/db-schema |
Design a database schema from requirements (Postgres-first, Supabase-aware) | |
/env-config |
Set up environment variables across local/staging/production with validation | |
| Review | /code-review |
Structured code review: correctness, readability, performance, security |
/security-scan |
OWASP top 10 check: injection, XSS, auth issues, secrets exposure | |
/deps-audit |
Audit dependencies: outdated, vulnerable, unused, bloated | |
| Test | /test-plan |
Write test strategy with coverage targets and testing pyramid |
/test-write |
Generate tests for existing code (unit, integration, e2e) | |
| Deploy | /deploy-check |
Pre-deployment checklist: migrations, env vars, rollback plan, smoke tests |
/monitor |
Set up monitoring: error tracking, alerts, dashboards, SLOs |
| Skill | Covers |
|---|---|
agent-browser |
Browser automation CLI — navigate, fill forms, screenshot, scrape, test |
.claude/skills/
design/
frameworks/
design-brief/ # one-time setup
frontend-design/ # 7 reference files
design-foundations/ # 5 reference files
review/
audit/
critique/
refine/
normalize/
polish/
distill/
clarify/
extract/
adjust/
bolder/
quieter/
colorize/
animate/
delight/
hardening/
optimize/
harden/
adapt/
onboard/
product/
frameworks/
jtbd/ # 5 reference files
lean-canvas/
discover/
interview/
competitive/
define/
prd/
stories/
spec/
prioritize/
prioritize/
scope/
launch/
gtm/
metrics/
retro/
dev/
frameworks/
vercel-react-best-practices/
web-design-guidelines/
typescript-patterns/
api-design/
setup/
nextjs-init/
supabase-setup/
vercel-deploy/
db-schema/
env-config/
review/
code-review/
security-scan/
deps-audit/
test/
test-plan/
test-write/
deploy/
deploy-check/
monitor/
tools/
agent-browser/
Every skill follows the same structure: SKILL.md + optional references/ directory. See SKILL-GUIDE.md for writing conventions.
JTBD skills based on The Jobs to Be Done Playbook by Jim Kalbach (Rosenfeld Media). Design skills adapted from pbakaus/impeccable, building on Anthropic's frontend-design skill. Vercel skills from vercel-labs/agent-skills. Browser automation from vercel-labs/agent-browser.