Punch Skill Reference
Every Punch-installed skill in one page — what it does, who runs it, which surface (Cowork or Claude Code), and when in the workflow you'd reach for it. The flow diagram up top shows how files and skills feed each other; the table below is sorted by phase. Print and pin next to the Playbook.
Mental model Files → Skills → Outputs
Inputs
Humans write these
Strategist · Copywriter · Lead Designer · PM
brand/copy-brief.mdbrand/theme-notes.mdbrand/visual-direction.mdcontent/sitemap.yamlcontent/homepage.mdcontent/[page].mdcontent/assets-manifest.yaml- Figma fork — designed externally
→
Process
Skills cascade through phases
Run from Cowork or Claude Code
Phase 0 · Strategy
punch-content-briefpunch-sitemappunch-theme-taglines
Phase 1 · Foundation
punch-project-initpunch-webflow-decodepunch-web-copywriterpunch-wireframepunch-token-exportpunch-component-exportpunch-rebind
Phase 2 · Expansion
- Direct Cowork compose
punch-page-polish/website-design-amplifierpunch-production-artist-qa
Phase 3 · Ship
punch-pre-launch-qa↓punch-copy-lintpunch-link-checkpunch-asset-auditdesign:accessibility-review
→
Outputs
What ships
Reviewed at Gates 5, 7, and 9
sandbox/tokens.csssandbox/text-styles.csssandbox/components.htmlsandbox/wireframe/[page].htmlsandbox/[page].html(composed)assets/logo.svg+ other media- QA report at
qa-reports/ - → Migrated to CMS by Dev
- → Live site verified at Gate 9
Humans write the briefs and visual direction. Figma is the design source of truth. Skills cascade those inputs into outputs. QA scrubs everything before launch.
Phase 0 Discovery & Strategy
| Skill | What it does | Owner | Surface | |
|---|---|---|---|---|
| ● | punch-content-brief |
First-passes a Creative Brief from raw discovery materials (kickoff notes, recordings, client docs). v0.7.7: never fabricates factual content — auto-discovers source/ for grounded claims, emits visible MISSING SOURCE markers + auto-appends to source/_missing.md for anything ungrounded, ends with explicit per-section ask before fabricating. |
Strategist | Cowork |
| ● | punch-theme-taglines |
Generates three creative theme directions, each anchored on a distinct Big Idea. | Strategist + Creative Strategist | Cowork |
| ● | punch-sitemap |
Drafts the sitemap.yaml from audit, analytics, and content strategy. Also produces a Mermaid diagram. | Strategist | Cowork |
| ● | design:user-research ext |
Plans interviews, surveys, or usability tests when the project needs structured user research. | Strategist | Cowork |
| ● | design:research-synthesis ext |
Synthesizes interview transcripts / survey results into themes and recommendations. | Strategist | Cowork |
Phase 1 Foundation
| Skill | What it does | Owner | Surface | |
|---|---|---|---|---|
| ● | punch-project-init |
Scaffolds the project folder with all stub files (brand/, source/, content/, sandbox/, assets/, plus a source/README.md explaining the auto-discovery convention). v0.7.6+: no manifest required — PM just drops client material in source/. |
PM | Cowork |
| ● | punch-webflow-decode |
Decodes a Webflow / reference template URL into named visual idioms. Requires screenshots. | Lead Designer | Cowork |
| ● | punch-web-copywriter |
Drafts page copy from a content brief, applying Punch's house voice and the client's brand voice. v0.7.7: obeys the same hard rule as punch-content-brief — never fabricates factual claims, emits MISSING SOURCE markers for any section without source coverage, ends with explicit ask. Bracketed placeholders like [STAT: ...] retired (they shipped as real claims once too often). |
Copywriter + Strategist | Cowork |
| ● | punch-wireframe |
Builds the content-first clickable HTML wireframe — Punch's signature deliverable. Real copy in newspaper-greyscale styling with client typography inherited from the Figma fork. v0.7.5+: renders any MISSING SOURCE markers from the briefs as loud red blocks (never silently fabricated). v0.7.7 reinforces: never fabricate filler copy of its own — renderer-fidelity is the whole job. | Strategist or PM | Cowork |
| ● | punch-token-export |
Exports the Figma fork's design tokens to sandbox/tokens.css, plus Tailwind config and JSON. |
Lead Designer | Cowork |
| ● | punch-component-export |
Extracts component specs + text styles + the client logo from Figma. Writes components.html, text-styles.css, assets/logo.svg. |
Lead Designer | Cowork |
| ● | punch-rebind |
Rebinds Figma component instances from master library variables to the client fork's local tokens. | Lead Designer | Cowork |
| ● | punch-omma-export |
Generates omma.build inputs (design.md + page-type prompts) if the project will compose pages in omma. | Lead Designer | Cowork |
Phase 2 Expansion
| Skill | What it does | Owner | Surface | |
|---|---|---|---|---|
| ● | Direct Cowork compose | Conversational composition against sandbox/components.html + brand/visual-direction.md. Not a named skill — you just direct Cowork. |
Lead Designer | Cowork |
| ● | punch-page-polish |
Polish-phase iteration — re-targeting decoded idioms, animation race-condition checks, sandbox-files-are-fair-game rule. | Lead Designer | Cowork |
| ● | /website-design-amplifier:amplify |
Expands the homepage + sitemap into the standard 80% of pages. Production runs this — not designers. | Production Artist | Claude Code |
| ● | /website-to-static:convert |
Converts external reference material (live URLs, exported sites) into static HTML in the sandbox. | Production Artist / Dev | Claude Code |
| ● | punch-production-artist-qa |
Self-QA Production Artists run on every page BEFORE handing to TDM at Gate 5. Calls copy-lint + link-check, plus manual checklist. | Production Artist | Cowork |
Phase 3 Ship
| Skill | What it does | Owner | Surface | |
|---|---|---|---|---|
| ● | punch-pre-launch-qa |
The Gate 7 orchestrator. Runs every QA sub-skill, aggregates a unified report. Exit code 1 if any BLOCKERS — launch is blocked. | TDM | Cowork |
| ● | punch-copy-lint |
Catches the class of bugs that historically slip to launch — double spaces, missing spaces, comment leaks, hype words, placeholder text, smart-quote mixing, spelling. | Production Artist + TDM | Cowork |
| ● | punch-link-check |
Internal links, external URLs, anchor links, image / video paths. Finds typo'd hrefs, missing assets, broken redirects, dead URLs. | Production Artist + TDM | Cowork |
| ● | punch-asset-audit |
Cross-checks every asset reference against assets-manifest.yaml. Catches wrong-video-wrong-section (different bug class than link-check). |
TDM | Cowork |
| ● | design:accessibility-review ext |
WCAG 2.1 AA audit — color contrast, keyboard navigation, touch targets, screen reader behavior. | TDM | Cowork |
| ● | design:design-handoff ext |
Generates developer handoff specs from a design — layout, tokens, component props, interaction states. | Lead Designer → Dev | Cowork |
| ● | creative-qa ext |
Generic creative-deliverable QA reviewer. Catches objective issues so creative leads focus on subjective judgment. | Lead Designer / TDM | Cowork |
| ● | punch-retrospective |
Runs the structured post-launch retrospective (what worked, what didn't, what should change) and files candidate skill / rule updates. Run within ~2 weeks of launch, while the project is fresh. | PM + Strategist | Cowork |
Anytime Cross-phase utilities
| Skill | What it does | Owner | Surface | |
|---|---|---|---|---|
| ● | punch-term-drift |
Scans the skills folder + workflow docs for stale terminology against terminology.yaml (e.g. an old wireframe term lingering after a rule shift). Run after any rule change, before declaring it shipped. |
Strategist / PM / Designer | Cowork |
| ● | punch-brand |
Applies Punch's own brand styling (colors, type, logo) to an internal artifact — a deck, doc, one-pager, or HTML page. For Punch-branded deliverables, not client work. | Anyone | Cowork |
| ● | design:design-critique ext |
Structured design feedback on usability, hierarchy, and consistency. Essential at Phase 2 step 19 when Lead Designer audits the amplified pages for design quality — pages don't advance until the audit signs off. Also useful through exploration and polish. | Lead Designer (Phase 2 audit); anyone else reviewing a design | Cowork |
| ● | design:design-system ext |
Audits, documents, or extends the design system. Useful when adding a new pattern or checking for naming inconsistencies. | Lead Designer / CCO | Cowork |
| ● | design:ux-copy ext |
Writes or reviews microcopy — error messages, empty states, CTAs, button labels. | Copywriter | Cowork |
| ● | creative-brief |
Creates design-focused creative briefs as interactive HTML documents with Punch branding. For rebrand / visual system projects. v0.7.7: never fabricates — same FLAG + ASK rule as the content skills. Sections without source coverage render as visible red callouts in the HTML brief. | Strategist + Lead Designer | Cowork |
Legend
● Essential — every project uses this
● Sometimes — project-dependent, reach for when the situation calls for it
● Legacy / Optional — kept for rare cases, not the default path
Cowork — designer / strategist / PM / TDM surface (chat-based)
Claude Code — Production Artist / Dev surface (terminal-based, repo-focused)
ext companion-plugin skill (
design / Anthropic skills), not the punch-website plugin