Willem van den Ende
54651d2349
- Install highlight.js via npm with 8 language definitions - SourceViewer hook applies syntax highlighting on mount/update - Atom One Dark theme for dark mode, Atom One Light for light mode - Add hooks directory, package.json, and package-lock.json - Add demo document and screenshots - Add rodney-docker.md documentation - Ignore .rodney/ chrome data directory
Demo Skill
Generate living demo documents proving features work, with showboat for Markdown assembly and rodney for browser screenshots.
Prerequisites
Requires two Go CLI tools:
go install github.com/simonw/showboat@latest
go install github.com/simonw/rodney@latest
Verify installation:
showboat --help
rodney --help
Rodney Chrome data directory
Rodney needs write access to the Chrome data directory at ~/.rodney. If you get Permission denied errors when running rodney start, fix it:
mkdir -p ~/.rodney && chmod 755 ~/.rodney
Usage
In pi, invoke via:
/skill:demo <feature-name> [--scenario <description>] [--plan <path>]
Or ask naturally:
- "demo this"
- "show me it works"
- "create a demo"
- "create a demo of the authentication flow"
How It Works
- Checks that showboat and rodney are installed
- Gathers feature context from plan files, recent commits, or your description
- Verifies the dev server is running
- Handles authentication (creates a demo user if needed)
- Captures backend evidence (tests, compilation, database state)
- Takes browser screenshots of UI pages
- Maps evidence to acceptance criteria
- Produces a standalone Markdown demo document in
demos/
Demo Document Structure
- Feature Overview — narrative description
- Test Suite — relevant test output
- Compilation Check —
mix compile --warnings-as-errors - Database State — if relevant
- UI Screenshots — static pages and interactive flows
- Acceptance Criteria Verification — checklist with evidence references