demo

name	demo
description	Demo-Ready Mode — prepare your app for demos, screenshots, and presentations. Use when user wants to demo their app, take screenshots, prepare for a presentation, or clean up dev artifacts.
allowed-tools	Bash, Read, Edit, Grep, Glob

Demo-Ready Mode

One command to make your app demo-ready. Clean up dev artifacts, check visual polish, generate a walkthrough script.

Process

Phase 1: Scan

node ${CLAUDE_PLUGIN_ROOT}/tools/demo-prep.mjs <project-directory>

Parse the JSON output for demo readiness score and issues.

Phase 2: Demo Readiness Report

Present the demo readiness score and status:

• Demo Ready (90-100): Ship it, present it
• Almost Ready (70-89): A few things to clean up
• Needs Work (below 70): Significant polish needed

Phase 3: Fix Dev Artifacts

For each category of issues found:

Console Logs (Priority: High) Remove all console.log/debug statements from production code:

• Use Edit tool to remove each one
• Keep console.error for legitimate error handling
• Skip test files

TODO Comments (Priority: Medium) For each TODO:

• If it's blocking the demo: implement it
• If it's not blocking: remove the comment or convert to a GitHub issue

Placeholder Text (Priority: High) Replace all Lorem ipsum and placeholder text with real copy that makes sense for the product.

Phase 4: Visual Polish

Fix visual issues found:

Missing Favicon:

• Suggest the user add one, or offer to create a simple SVG favicon

Default Branding:

• Remove framework default logos/text
• Ensure the app shows the user's brand

Error Pages:

• Create a custom 404 page if missing
• Create a custom 500 page if missing

Loading States:

• Add loading spinners/skeletons where async content loads

Empty States:

• Replace "No data" with helpful, friendly empty state messages
• Add CTAs in empty states ("Create your first X")

Phase 5: Seed Data

If the app has a seed file:

• Remind user to run it: [seed command from tool output]
• Verify seed data creates a compelling demo state

If no seed file exists:

• Suggest creating one with realistic demo data
• Help create a basic seed script if the user wants

Phase 6: Walkthrough Script

Present the auto-generated walkthrough:

For each step:

1. Action — what to do (navigate, click, fill)
2. Screenshot — whether to capture this screen
3. Talking point — what to say/highlight at this step
4. Notes — things to point out or avoid

Phase 7: Screenshot Capture

If the user wants screenshots, use Playwright MCP:

1. Navigate to each walkthrough URL
2. Use browser_resize for the target viewport
3. Use browser_take_screenshot at each step
4. Capture both desktop and mobile versions of key screens

Phase 8: Final Check

After all fixes, re-run the tool to verify the score improved:

node ${CLAUDE_PLUGIN_ROOT}/tools/demo-prep.mjs <project-directory> --check-only

Report the before/after scores.

Key Principle

First impressions are forever. A demo with console.logs, Lorem ipsum, and empty states kills credibility. A polished demo with real data and smooth flows wins deals, users, and investors.