@traz1r/wonderful-slide

AI-native Slidev deck workflow. Not "README broken into slides" — a designed presentation with narrative tension, visual consistency, and verifiable build output.

Quick Start

Pick your path:

I use Claude Code and want AI to make my slides

npx @traz1r/wonderful-slide

This installs the skill to ~/.claude/skills/wonderful-slide/. Restart Claude Code, then:

"Create a technical talk about fuzzing Android apps using wonderful-slide"

Claude will run structured intake, research, narrative shaping, slide drafting, visual design, and quality verification — all in one workflow.

I just want the CLI quality-check tools

npm install -D @traz1r/wonderful-slide

Then run checks against any Slidev deck:

npx wfslide-language slides/          # copy quality & flow
npx wfslide-style slides/             # CSS line counts by file
npx wfslide-class slides/             # unused CSS class scan
npx wfslide-export slides/ --range 1-5 # export to PNG + error scan

What It Does

| You say | Wonderful Slide does | |---|---| | "Make me a talk about X" | Structured intake → research dossier → narrative map → slide draft → visual system → build verify | | "My deck feels like a README" | Diagnose root cause → restructure as audience questions → componentize visuals → language pass | | "Check if my deck is ready" | Run all quality gates: language, CSS ownership, unused classes, prompt artifacts, export errors | | "Add an animated diagram" | Vue component with state transitions, scoped styles, reusable across slides | | "Port this talk to Chinese" | Translate with language quality gates for CN technical talks |

Tiers — not every deck needs the full workflow:

| Tier | For | What runs | |---|---|---| | Light | 5–10 slide internal share | Intake summary, question outline, slide draft, build check | | Standard | 15–25 slide conference talk | Full intake, research index, narrative map, two-slide showcase, language pass, visual system | | Conference | 30+ slide keynote | Everything: full workflow + CSS audit + PNG export + adversarial review |

CLI Reference

All tools use only Node.js standard library. Run from your deck root.

Language & Content

# Defensive phrasing, abrupt transitions, dense copy
npx wfslide-language <deck-root> [--range 1-10] [--fail-on-findings]

# Overly long or empty speaker notes
npx wfslide-notes <deck-root> [--max-lines 8] [--range 1-10]

# Prompt artifacts and planning language in visible content
npx wfslide-artifact <deck-root> [--range 1-10] [--fail-on-findings]

CSS & Visual

# CSS / Vue scoped-style line counts per file
npx wfslide-style <deck-root> [--limit=200] [--warn=100]

# CSS classes defined but not referenced
npx wfslide-class <deck-root> [--fail-on-unused]

Research & Build

# Verify index.md exists with required sections
npx wfslide-research <deck-root> [--strict]

# Export slides to PNG, scan for Vue/runtime errors
npx wfslide-export <deck-root> --range 1-10 [--output png/] [--expect 10]

Workflow

Intake → Source/Facts Gate → Research Dossier → Narrative Map
→ Two-Slide Showcase → Slide Draft → Language Pass
→ Visual System → Componentize → Style Ownership → Verify

Full methodology in SKILL.md. Key reference files:

| Reference | Topic | |---|---| | structured-intake.md | Intake questions, confirmation gate | | research-first.md | Research dossier, question taxonomy | | language-quality-gates.md | Copy quality, CN technical talk checks | | vue-dynamic-visuals.md | Animated diagrams, interactive visuals | | deck-quality-gates.md | Projection/color/export readiness | | architecture-patterns.md | File structure, component/CSS patterns |

Requirements

• Node.js >= 18
• Slidev (for deck creation / editing)

License

MIT © traz1r

Links

• GitHub
• npm
• Changelog