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
63 lines
1.6 KiB
Markdown
63 lines
1.6 KiB
Markdown
# 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:
|
|
|
|
```bash
|
|
go install github.com/simonw/showboat@latest
|
|
go install github.com/simonw/rodney@latest
|
|
```
|
|
|
|
Verify installation:
|
|
|
|
```bash
|
|
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:
|
|
|
|
```bash
|
|
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
|
|
|
|
1. Checks that showboat and rodney are installed
|
|
2. Gathers feature context from plan files, recent commits, or your description
|
|
3. Verifies the dev server is running
|
|
4. Handles authentication (creates a demo user if needed)
|
|
5. Captures backend evidence (tests, compilation, database state)
|
|
6. Takes browser screenshots of UI pages
|
|
7. Maps evidence to acceptance criteria
|
|
8. 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
|