An interactive wizard to create Claude Skills — step by step.
Built on The Complete Guide to Building Skills for Claude by Anthropic.
Skill Builder is a web app that walks you through creating a Claude Skill in 6 guided steps — no blank page, no guesswork. It generates a valid SKILL.md with correct YAML frontmatter and lets you download the complete skill folder as a .zip, ready to upload to Claude.ai or Claude Code.
If you've ever thought "I should build a skill for this workflow" but didn't know where to start, this is for you.
→ Open the app — no install, runs in the browser
A Claude Skill is a folder containing a SKILL.md file with instructions that teach Claude how to handle a specific task or workflow. When enabled, Claude automatically loads the skill's instructions whenever it detects a relevant request.
my-skill/
├── SKILL.md # Required — instructions + YAML frontmatter
├── scripts/ # Optional — Python, Bash scripts
├── references/ # Optional — API docs, guides
└── assets/ # Optional — templates, fonts, icons
Skills work across Claude.ai, Claude Code, and the API. Build once, use everywhere.
| Step | What you do |
|---|---|
| 01 — Category | Choose between Document & Asset Creation, Workflow Automation, or MCP Enhancement |
| 02 — Use Cases | Define 2–3 trigger phrases and expected outcomes |
| 03 — Metadata | Name your skill, write the description (with live YAML preview), add optional fields |
| 04 — Instructions | Pick a pattern (Sequential, Multi-MCP, Iterative…), write your steps |
| 05 — Checklist | Validate against Anthropic's official quality checklist |
| 06 — Export | Preview the rendered SKILL.md, copy or download the complete .zip |
Everything runs client-side — no account, no server, no data sent anywhere.
git clone https://github.com/Ruexyz/skills-builder.git
cd skills-builder
npm install
npm run devOpen http://localhost:5173.
Requirements: Node 18+
# Production build
npm run build
# Deploy to Cloudflare Pages
npm run deployThe app is a static site — you can deploy it anywhere (Cloudflare Pages, Vercel, Netlify, GitHub Pages).
- React 19 + Vite 7 + TypeScript
- Tailwind v4 + custom dark theme
- Zustand — wizard state (persisted in localStorage)
- JSZip + file-saver — client-side
.zipgeneration - react-markdown — live
SKILL.mdpreview - Radix UI — accessible headless components
- Cloudflare Pages — hosting
Claude.ai:
- Open Settings → Capabilities → Skills
- Click "Upload skill"
- Select your downloaded
.zip - Toggle on your new skill
Claude Code:
- Unzip the downloaded file
- Place the skill folder in your Claude Code skills directory
- Claude Code detects it automatically
- Anthropic Skills Documentation
- Skills API Quickstart
- anthropics/skills — Official example skills
- The Complete Guide to Building Skills for Claude — the PDF this wizard is based on
PRs are welcome. If you find a bug or have an idea for a new pattern or step, open an issue.
MIT