The skills field guide
Skill Tutorials
A curated quick-reference for everything Claude Code can do here.
Open Design
Skills bundled from nexu-io/open-design. Each is a self-contained recipe that produces one polished artifact (HTML page, deck, poster, etc.) without the OD web UI.
Web prototypes
Single-file HTML pages. Each skill ships a seed template, layout reference, and tasteful default styling. Pair with a design system to inherit a brand's visual identity.
howDescribe the page in one sentence; optionally name a brand to inherit (Linear, Stripe, Vercel, etc.). Claude picks the matching skill, reads the template, and writes a single .html you can open in a browser.
Build me a SaaS landing page for 'Fenway' (an AI ops dashboard for SREs). Use Linear's design system. Hero, feature grid, social proof, pricing CTA.
Make a pricing page in Stripe's style. Three tiers (Hobby/Pro/Team), feature comparison table, 4-question FAQ.
Use web-prototype-taste-brutalist to mock up a homepage for a record label. Loud type, harsh contrast, no images.
Build a docs landing page for an open-source library called 'duckling'.
Skills in this group
Tell me where to write the file or it lands in the current directory.
Open the rendered HTML, then iterate inline: 'darker hero, swap the secondary buttons to ghost'.
Decks & presentations
HTML-based slide decks. Each html-ppt-* skill is a pre-baked aesthetic; pick by vibe. The default magazine-web-ppt (guizang) ships with WebGL hero backgrounds and editorial layouts.
howTell me how many slides, the topic, and ideally the aesthetic ('pitch deck for VCs', 'editorial magazine', 'cyber terminal'). I'll generate a single self-contained HTML deck you can present from a browser or export to PDF.
Make a 12-slide pitch deck for 'Fenway', an AI ops dashboard for SREs. Use html-ppt-pitch-deck. Cover: problem, market, product demo, traction, team, ask.
Use magazine-web-ppt to build an 8-slide deck about generative video models in 2026. Editorial tone, lots of pull quotes.
Generate a weekly engineering update deck. Use html-ppt-weekly-report. 6 sections: shipped, in-flight, blockers, metrics, next week, asks.
Make a 10-slide internal tech-sharing deck on 'CRDTs for collaborative editing'. Use html-ppt-tech-sharing.
Skills in this group
html-ppt-graphify-dark-graph is great for data-heavy decks.
html-ppt-xhs-* are Xiaohongshu social-style; perfect for visual storytelling cards.
Run pptx-html-fidelity-audit before exporting to PowerPoint to catch layout drift.
Mobile mockups
Phone-shaped HTML mockups for app screens and onboarding flows. Useful for design reviews, investor decks, and quick UX prototypes.
howDescribe the app and which screens you want. I'll render a single HTML file with multiple phone frames side by side; copy the screens into Figma or share the file directly.
Build a mobile-app mockup for a journaling app. 4 screens: home feed, new entry composer, tag explorer, settings.
Use mobile-onboarding to design a 5-screen first-run flow for a meditation app. Dark theme, soft purple accent, friendly copy.
Skills in this group
Office & operations docs
Document-flavored HTML for internal artifacts: PM specs, runbooks, meeting notes, finance reports, invoices. Print-friendly defaults.
howGive me the topic and a few facts to populate. These skills have strong defaults so you can ship a passable first draft in one prompt and iterate from there.
Use pm-spec to write a product spec for 'inline editing' in a notes app. Include problem statement, success metrics, scope/non-scope, open questions.
Build an eng-runbook for our auth-service. Cover: alerts table, 2 dashboards, the cert-rotation procedure, on-call expectations.
Use invoice to generate a $2,400 consulting invoice from Acme Co. to Fenway Inc. Three line items: design audit, prototype build, async review.
Make a kanban-board snapshot for our Q2 design system migration. 5 columns, 12 cards, owners + due dates.
Visual & posters
Editorial posters, social carousels, wireframes, and ebook layouts. Single-image or multi-image static outputs.
howDescribe the visual brief in 1-2 sentences. Posters and carousels are great for marketing assets, recruiting, and social posts.
Use magazine-poster to design a launch poster for our open-source library 'duckling'. Editorial tone, bold serif headline, deep teal background.
Build a 6-card Instagram carousel announcing our Series A. Use social-carousel. Match Linear's visual identity.
Use wireframe-sketch to create a low-fi wireframe for a 4-page checkout flow.
Skills in this group
image-poster and magazine-poster ideally call an image-gen API. Without one, I'll write the prompt + storyboard for you to run elsewhere.
Motion & video
Video skills that author Hyperframes / Seedance / sprite compositions. These are the heaviest skills - they expect external generation services.
howUse these as prompt scaffolding even if you haven't wired up the gen APIs. I'll write the HyperFrames spec, storyboard, and shot list; you run it through your generator of choice.
Use hyperframes to author a 15-second product launch video for Fenway. 5 shots, editorial tone, ends on the logo.
Use video-shortform to draft a 30-second TikTok-style explainer about CRDTs. Hook, 3 beats, payoff.
Use motion-frames to plan a hero-section animation for our docs page. 4 frames, 2-second loop, looping easing.
Skills in this group
These need npx hyperframes / Seedance API access to actually render. OD's daemon usually brokers that.
Meta skills (the workflow glue)
Skills that don't produce artifacts directly but make the others work better. Use these around any artifact-generating skill.
howdesign-brief is the structured intake when you don't know what you want yet. critique reviews any artifact. tweaks does small targeted edits without regenerating. fidelity-audit checks PPTX exportability.
Use design-brief to interview me about a marketing site for 'Stitch'. Ask the question form first - no rendering yet.
Use critique to evaluate this landing page (path: ./out/landing.html). Comment on hierarchy, density, color choices, and CTAs.
Use tweaks: in ./out/deck.html, change the accent color from teal to amber and bump body font size by one step.
Run pptx-html-fidelity-audit on ./out/deck.html before I export to PowerPoint.
Design systems
142 brand DESIGN.md files at ~/.claude/design-systems/design-md/. Each is a 9-section token spec (color, typography, spacing, components, motion, voice, etc.) that any web-prototype skill can inherit.
How to use a design system
Just name the brand. Claude reads the matching DESIGN.md and binds the tokens (palette, font stack, spacing, component rules) into whatever artifact it's generating.
howMention the brand by name in any prompt that produces visual output. Or use /design-system explicitly to load it as standalone context before the artifact prompt.
/design-system stripe
Loads the Stripe DESIGN.md as context for everything that follows.
Build a pricing page in Stripe's style.
Make a dashboard for an analytics tool. Use Linear's design system.
I want Linear's typography but Stripe's palette. Mock up a settings page.
List 5 design systems that would suit a developer-tool homepage and explain why.
Skills in this group
Available systems: Vercel, Linear, Stripe, Notion, Apple, Anthropic, Cursor, Supabase, Figma, Resend, Raycast, Lovable, Cohere, Mistral, ElevenLabs, Spotify, Webflow, Sanity, PostHog, Sentry, MongoDB, ClickHouse, Cal, Replicate, Clay, Composio, Xiaohongshu, and ~115 more.
Run `cd ~/.claude/vendor/open-design && git pull` to refresh the OD-supplied systems.
Impeccable (frontend craft)
21-skill workflow for elevating frontend code from functional to polished. Designed to be used in a phased order, but each skill works standalone.
Phase 0 - Bootstrap
One-time setup that captures your project's design context.
howRun impeccable:teach-impeccable once per project after you've cloned a repo.
Use impeccable:teach-impeccable to gather design context for this project and save it to CLAUDE.md.
Skills in this group
Phase 1 - Build
Generate distinctive, production-grade frontend code.
howUse this when you want a high-quality first draft that avoids generic AI aesthetics. Stack with a design system for an opinionated brand voice.
Use impeccable:frontend-design to build a settings page for a developer tool. Match Cursor's design system.
Skills in this group
Phase 2 - Diagnose
Audit and critique what you've built before iterating.
howaudit gives you a structured quality report (a11y, perf, theming, responsive). critique gives you a designer's-eye UX read.
Use impeccable:audit on this component file. Give me severity-rated issues across a11y, perf, and responsive.
Use impeccable:critique on the homepage. Focus on visual hierarchy and emotional resonance.
Skills in this group
Phase 3 - Foundation
Fix structural problems: layout, typography, naming consistency, reusable tokens.
howRun these on a working but rough draft to clean up the bones before adding personality.
Use impeccable:arrange to fix the spacing rhythm on this dashboard page.
Use impeccable:typeset to clean up the typography hierarchy in our docs site.
Use impeccable:extract to pull repeated patterns out of these 6 components into shared primitives.
Use impeccable:normalize to align this feature with our design system.
Phase 4 - Expression
Add personality: color, weight, motion, microcopy, delight, onboarding.
howOnce the foundation is clean, layer in the things that make a UI feel intentional rather than default.
Use impeccable:bolder to make this dashboard hero section more visually striking.
Use impeccable:colorize - the marketing page is too monochromatic.
Use impeccable:animate to add purposeful micro-interactions to the checkout flow.
Use impeccable:delight to add unexpected touches to the empty state.
Use impeccable:clarify to rewrite the error messages to be more helpful.
Use impeccable:onboard to design a first-run experience for new users.
Phase 5 - Resilience
Make it production-ready: error handling, i18n, performance, responsive adaptation.
howRun these before merging. They're the boring-but-critical pass that separates 'looks good in dev' from 'works for real users'.
Use impeccable:harden on this form component - error handling, edge cases, text overflow, i18n readiness.
Use impeccable:optimize to improve loading and rendering perf on the dashboard.
Use impeccable:adapt to make this layout work on mobile and tablet.
Skills in this group
Phase 6 - Final pass
Polish and (optionally) overdrive.
howpolish is the always-do final QA. overdrive is when you want a portfolio-grade flourish.
Use impeccable:polish on this page before we ship - alignment, spacing, consistency, all the small things.
Use impeccable:overdrive on the hero - I want users to ask 'how did they do that?'.
Superpowers (dev workflow)
14 process skills that shape how Claude approaches engineering work. Many trigger automatically; you mostly just opt in to the discipline.
Think before building
Brainstorming and planning skills. Use these before any non-trivial implementation.
howSay 'let's brainstorm' or 'write a plan first' explicitly when you want to slow down. Otherwise these trigger automatically on multi-step tasks.
Brainstorm with me: I want to add comment threads to our docs site. Explore the design space before we build.
Write me a plan for migrating our dashboard from chart.js to ECharts. Multi-step, with checkpoints.
Skills in this group
Build with discipline
TDD, parallel execution, and structured plan execution.
howUse TDD when correctness matters more than speed. Use parallel/subagent skills when you have 2+ truly independent tasks.
Implement the rate-limiter using TDD. Write failing tests first, then make them pass.
Execute the plan in ./PLAN.md. Use checkpoints between phases.
We have 3 independent tasks (API route, UI page, tests). Dispatch them as parallel agents.
Skills in this group
Debug & review
Systematic debugging, verification before claiming done, and code review flows.
howWhen a fix isn't working, switch into systematic-debugging mode explicitly. Before merging or claiming done, request-code-review and verification-before-completion are good checkpoints.
Debug this systematically: tests pass locally but fail in CI. Use the debugging skill - hypothesis, evidence, one fix.
I'm done with the auth refactor. Request a code review and verify before I claim it's done.
Skills in this group
GSD (project management)
36 commands for running structured project work: roadmaps, phases, plans, execution, verification. Heavier than superpowers; built for shipping multi-week projects.
Start a project or milestone
Bootstrap the .planning/ structure and roadmap.
howRun /gsd:new-project once per repo. /gsd:new-milestone for each version cycle. /gsd:add-phase to grow the roadmap.
/gsd:new-project
/gsd:new-milestone
/gsd:add-phase
/gsd:map-codebase
Generates .planning/codebase/ docs.
Plan → Execute → Verify
The core phase loop.
howdiscuss-phase → plan-phase → execute-phase → verify-work → add-tests. Or run /gsd:autonomous to do all remaining phases hands-off.
/gsd:discuss-phase
/gsd:plan-phase
/gsd:execute-phase
/gsd:verify-work
/gsd:add-tests
/gsd:autonomous
Runs all remaining phases.
Status & resume
Check where you are, pick up where you left off.
how/gsd:progress at session start. /gsd:resume-work to recover full context.
/gsd:progress
/gsd:resume-work
/gsd:stats
/gsd:check-todos
Vercel & Next.js
Deep expertise on the Vercel platform, Next.js 16 App Router, AI SDK, and the broader Vercel ecosystem (Marketplace, Sandbox, Workflows). Most trigger automatically when you're working in a Next.js project.
Build Next.js apps
App Router, Server Components, caching, middleware, deployments.
howJust work in a Next.js repo - the relevant skill activates per file. Or invoke a specific one when you want focused guidance.
Use vercel-plugin:nextjs to review my routing setup and suggest improvements.
Use vercel-plugin:next-cache-components to migrate this page from unstable_cache to PPR + cacheLife.
I want to deploy this to Vercel - walk me through with vercel-plugin:deploy.
Skills in this group
Build AI features
AI SDK, AI Gateway, agents, sandbox, workflow.
howUse vercel-plugin:ai-sdk for any LLM feature in a Next.js app - it covers chat, structured output, tool calling, agents, MCP integration.
Use vercel-plugin:ai-sdk to build a chat feature with streaming and tool calling.
Set up vercel-plugin:ai-gateway so I can route between OpenAI, Anthropic, and Google with failover.
Use vercel-plugin:vercel-sandbox to safely run AI-generated code.
Build a durable agent with vercel-plugin:workflow that survives restarts.
Platform & integrations
shadcn, auth, marketplace, knowledge updates.
howshadcn for UI primitives. auth for Clerk/Descope/Auth0 setup. marketplace for adding databases or third-party services.
Use vercel-plugin:shadcn to add a data table to this admin page.
Use vercel-plugin:auth to wire Clerk into this Next.js app.
I need a Postgres database - use vercel-plugin:marketplace to find the right option.
Session management
Skills that move state between Claude sessions: orient at start, hand off at end, transfer to parallel instances.
Start of session
Get up to speed on what was happening last time.
howRun /prime at the top of any new session in a project you've been working in.
/prime
/prime 2
Read HANDOFF-2.md slot for parallel instances.
Skills in this group
End of session
Save state so the next session (or another Claude) can pick up.
how/handoff for a fast prose summary. /save to capture learnings into CLAUDE.md. /save-and-push composes both with a commit.
/handoff
/handoff save
Commits and pushes.
/save
/save-and-push
/transfer
Self-contained context for a parallel instance.
Skills in this group
Mid-session reflection
Audit the conversation and improve how you and I work together.
how/reflect at the end of long or friction-heavy sessions. /digest when you want a tight summary instead of a wall of text.
/reflect
/digest
/spot
Spot-check a long-running batch job.
Miscellaneous power tools
Useful skills that don't fit neatly into a category.
Research & analysis
Pull in external knowledge and pressure-test claims.
howyoutube-transcript and distill for capturing knowledge. scrutinize for methodology review. context7 (built in) for live library docs.
/youtube-transcript https://youtube.com/watch?v=... - extract the transcript and pull out the 5 most important learnings.
/distill on these 8 markdown files in docs/research/ - produce one reference doc with principles, patterns, and gotchas.
/scrutinize my analysis pipeline - is the sample size sufficient and is the statistical test appropriate?
Skills in this group
Codebase operations
Code-level audits, simplification, and bulk implementation.
howcodebase-audit for a 6-pillar deep audit. simplify after any logical chunk of changes. parallel-build when a feature touches 3+ files across concerns.
/codebase-audit
Spawns 6 parallel agents looking for dead code, inconsistencies, design issues.
/simplify the recent changes.
/parallel-build to add a new pipeline step (API route + UI page + types + tests).
/review-claude-md
/review-claudeignore
/review-tasks
Creative output
Diagrams, slide decks, demo videos.
howdiagram-design for technical/product diagrams as standalone HTML+SVG. marp-slides for clean MARP decks. screen-demo for polished website walkthroughs.
/diagram-design - draw the data flow from upload through processing to display.
/marp-slides - 8-slide deck on our pipeline architecture. Dark theme, with SVG diagrams.
/screen-demo - record a 30-second polished demo of the dashboard at localhost:8177.
/ui-ux-pro-max - design a high-quality dashboard with proper UX patterns.
Automation & scheduling
Run things on a loop or a schedule. Configure your harness.
how/loop for recurring polling. /schedule for cron-like remote agents. /agent-browser for any web automation. /update-config for hooks and harness settings.
/loop 5m /spot - check the running batch every 5 minutes.
/schedule daily at 9am - check for new GitHub issues and triage.
/agent-browser open https://example.com, snapshot, then fill in the contact form.
/autoimprove - iterate on this prompt until it passes the rubric.
/update-config - allow npm and bq commands without prompts.
/fewer-permission-prompts - scan transcripts and add common allowlist entries.
Tasks & utility
Lightweight helpers for managing TASKS.md and quick file ops.
how/add-task for ad-hoc capture. /finder to open a directory. /push for git.
/add-task add support for dark mode in the experiments page
/finder ~/Code/agentic/dashboard
/push
/git-pr
Skills in this group