Generate or update tutorial documentation with accompanying GIFs using VHS terminal recording and Playwright browser recording.
Generates or updates tutorial documentation with terminal and browser GIFs using VHS and Playwright.
/plugin marketplace add athola/claude-night-market/plugin install pensive@claude-night-marketTo generate or update tutorials with accompanying GIFs, invoke the tutorial-updates skill:
Skill(sanctum:tutorial-updates) with the appropriate arguments./update-tutorial <name> # Single tutorial
/update-tutorial <name1> <name2> # Multiple tutorials
/update-tutorial --all # All tutorials in manifest
/update-tutorial --list # Show available tutorials
/update-tutorial --scaffold # Create directory structure without recording
/update-tutorial --validate-only # Validate tape without generating GIF
/update-tutorial --skip-validation # Skip validation for rapid regeneration
--validate-onlyRun tape validation without generating GIF. Useful for CI checks or pre-commit hooks.
Example:
/update-tutorial quickstart --validate-only
Exit codes:
Use when: You want to verify tape commands are correct before committing or before running expensive GIF generation.
--skip-validationBypass pre-flight tape validation. Use when commands are known-good and you need rapid GIF regeneration.
Example:
/update-tutorial quickstart --skip-validation
Warning: Skipping validation may result in VHS failures that could have been caught earlier.
Use when: You've already validated the tape and are iterating on timing/styling only.
--skip-rebuildSkip binary freshness check and rebuild step. Use when binary is known to be current.
Example:
/update-tutorial quickstart --skip-rebuild
Use when: You've just rebuilt the binary manually and want to avoid redundant rebuilds.
--force-rebuildForce binary rebuild even if freshness check passes. Ensures absolute latest code.
Example:
/update-tutorial quickstart --force-rebuild
Use when: You want to guarantee the binary matches source, regardless of timestamps (useful after git operations that don't change timestamps).
The skill orchestrates scry media generation capabilities:
Skill(scry:vhs-recording) for terminal demos and Skill(scry:browser-recording) for web UI demos.Skill(scry:gif-generation) for format conversion and optimization.Skill(scry:media-composition) for multi-source tutorials./update-tutorial quickstart
/update-tutorial quickstart sync mcp
/update-tutorial --all
/update-tutorial --list
/update-tutorial --scaffold
Creates the directory structure (assets/tapes/, assets/gifs/, docs/tutorials/) without executing recordings.
brew install vhs or go install github.com/charmbracelet/vhs@latestttyd, ffmpeg (VHS installs ttyd automatically)npm install -D @playwright/testttyd from sourceTutorials are defined via YAML manifests:
# assets/tapes/mcp.manifest.yaml
name: mcp
title: "MCP Server Integration"
components:
- type: tape
source: mcp.tape
output: assets/gifs/mcp-terminal.gif
- type: playwright
source: browser/mcp-browser.spec.ts
output: assets/gifs/mcp-browser.gif
requires:
- "skrills serve"
combine:
output: assets/gifs/mcp-combined.gif
layout: vertical
If skills cannot be loaded, follow these steps:
Run VHS directly
vhs assets/tapes/quickstart.tape
Run Playwright recording
npx playwright test assets/browser/mcp-browser.spec.ts
ffmpeg -i mcp-browser.webm -vf "fps=10,scale=800:-1" mcp-browser.gif
Update markdown manually
docs/tutorials/<name>.md with project-doc tonebook/src/tutorials/<name>.md with technical-book toneSkill(scry:vhs-recording) - VHS tape execution and terminal recordingSkill(scry:browser-recording) - Playwright browser automation and video captureSkill(scry:gif-generation) - Video-to-GIF conversion and optimizationSkill(scry:media-composition) - Multi-source GIF stitching