@hienlh/ppm 0.9.80 → 0.9.81

package/.opencode/skills/play/templates/saas-launch.json

@@ -0,0 +1,224 @@
+{
+  "id": "saas-launch",
+  "name": "SaaS Go-to-Market Launch",
+  "version": "1.0.0",
+  "author": { "name": "ClaudeKit", "url": "https://claudekit.cc" },
+  "tags": ["saas", "gtm", "launch", "growth", "demand-gen"],
+  "estimatedDuration": "60 days",
+  "difficulty": "advanced",
+  "ai_models_used": ["claude-sonnet", "claude-opus"],
+  "inputs": {
+    "required": [
+      { "key": "product_name", "type": "string", "prompt": "Your SaaS product name" },
+      { "key": "product_url", "type": "url", "prompt": "Product website URL" },
+      { "key": "value_prop", "type": "string", "prompt": "Core value proposition in one sentence" },
+      { "key": "pricing_range", "type": "string", "prompt": "Pricing range (e.g., '$29-$99/mo')" },
+      { "key": "target_market", "type": "string", "prompt": "Target market description (industry + company size + role)" }
+    ],
+    "optional": [
+      { "key": "competitors", "type": "array", "default": [], "prompt": "Top 3-5 competitor names or URLs" },
+      { "key": "existing_audience", "type": "number", "default": 0, "prompt": "Existing email list or audience size" },
+      { "key": "monthly_content_budget", "type": "number", "default": 0, "prompt": "Monthly content/marketing budget in USD" },
+      { "key": "launch_timeline", "type": "string", "default": "60 days", "prompt": "Target timeline to first paid customers" }
+    ]
+  },
+  "goal_targets": {
+    "mrr": { "default": 10000, "metric": "stripe" },
+    "trial_signups": { "default": 200, "metric": "stripe" },
+    "organic_traffic": { "default": 10000, "metric": "ga4" },
+    "email_subscribers": { "default": 2000, "metric": "manual" }
+  },
+  "stages": [
+    {
+      "id": "brand-intelligence",
+      "name": "Brand Intelligence",
+      "steps": [
+        {
+          "id": "market-research",
+          "name": "Market Research & Opportunity Mapping",
+          "strategy": "Map the entire competitive landscape before writing a single word of copy. Identify three layers: direct competitors (same solution), indirect competitors (different solution, same problem), and status quo (spreadsheets, manual processes, doing nothing). The biggest competitor is usually 'do nothing' — your messaging must overcome inertia, not just feature-compare.",
+          "ai_execution": "Crawl competitor websites, pricing pages, G2/Capterra reviews, and social profiles. Extract positioning statements, feature matrices, pricing structures, and customer complaints. Map the competitive landscape into direct/indirect/status-quo layers. Identify messaging white space and underserved segments.",
+          "human_decision": "Validate market sizing with real data, not just TAM projections. Identify which competitor weaknesses are genuine opportunities vs deliberate trade-offs. Decide whether to position as a category leader, challenger, or category creator — each requires fundamentally different go-to-market.",
+          "command": "/ckm:competitor",
+          "agent": "researcher",
+          "skills": ["competitor", "marketing-research"],
+          "outputs": ["market-landscape.md", "competitor-matrix.md", "opportunity-map.md"],
+          "dependsOn": [],
+          "parallel": false,
+          "gate": null
+        },
+        {
+          "id": "icp-profiling",
+          "name": "ICP Deep Profiling",
+          "strategy": "Your ICP is not a demographic — it is a psychographic. The best ICP definition includes: what triggers their search for a solution, what words they use to describe their problem, what they have tried before, who influences their buying decision, and what would make them switch from their current solution. Interview 5-10 real prospects if possible — one conversation beats 100 survey responses.",
+          "ai_execution": "Build multi-dimensional ICP profiles from review mining, community analysis, and competitor customer research. Extract buying triggers, objection patterns, and decision-making criteria. Map the buyer journey from problem-aware to solution-aware to product-aware. Generate interview scripts for prospect validation.",
+          "human_decision": "Validate ICP against your actual best customers, not aspirational targets. Narrow down to one primary ICP for launch — trying to serve multiple ICPs at launch dilutes everything. Conduct real prospect interviews and update profiles with qualitative insights AI cannot access.",
+          "command": "/ckm:persona",
+          "agent": "researcher",
+          "skills": ["persona", "marketing-research", "marketing-psychology"],
+          "outputs": ["icp-profiles.md", "buyer-journey-map.md", "interview-scripts.md"],
+          "dependsOn": ["market-research"],
+          "parallel": false,
+          "gate": null
+        },
+        {
+          "id": "competitive-positioning",
+          "name": "Competitive Positioning & Messaging",
+          "strategy": "Positioning is not what you say about yourself — it is the mental real estate you own in the buyer's mind. Use the positioning formula: For [ICP] who [trigger/need], [product] is the [category] that [key differentiator], unlike [alternative] which [limitation]. Test three positioning options: best-in-class (we do X better), unique approach (we solve X differently), or new category (X is the wrong way to think about this problem).",
+          "ai_execution": "Generate positioning statements using multiple frameworks (April Dunford, Crossing the Chasm, Obviously Awesome). Create messaging hierarchies for website, ads, email, and sales conversations. Produce a competitive battle card showing your advantages and how to handle competitor comparisons. Draft the 'why us' narrative.",
+          "human_decision": "Choose the positioning that is both true and defensible long-term. Ensure the key differentiator is something customers actually care about, not just something you are proud of building. Test positioning with 3-5 real prospects before committing — their reaction tells you everything.",
+          "command": "/ckm:write/fast",
+          "agent": "copywriter",
+          "skills": ["copywriting", "marketing-psychology", "competitor"],
+          "outputs": ["positioning-doc.md", "messaging-hierarchy.md", "battle-cards.md"],
+          "dependsOn": ["icp-profiling"],
+          "parallel": false,
+          "gate": "brand-review"
+        }
+      ]
+    },
+    {
+      "id": "content-pipeline",
+      "name": "Content Pipeline",
+      "steps": [
+        {
+          "id": "content-strategy",
+          "name": "Content Strategy & Calendar",
+          "strategy": "Build a content strategy that serves three goals simultaneously: SEO (bottom-of-funnel keywords people search when ready to buy), thought leadership (original insights that build authority), and sales enablement (content that helps close deals). Prioritize bottom-of-funnel content first — 'best X for Y' and 'X vs Y' pages drive revenue faster than top-of-funnel blog posts.",
+          "ai_execution": "Build a keyword-driven content calendar mapping each piece to funnel stage, ICP segment, and distribution channel. Identify bottom-of-funnel keywords with buying intent. Generate content briefs for the first 30 days of publishing. Create a content production workflow with templates for each content type.",
+          "human_decision": "Prioritize content by revenue impact, not traffic potential. Decide your unique editorial angle — what perspective can only you bring? Allocate resources between SEO content (compounds over time) and thought leadership (builds brand authority faster).",
+          "command": "/ckm:seo/keywords",
+          "agent": "content-creator",
+          "skills": ["seo", "content-marketing", "marketing-research"],
+          "outputs": ["content-strategy.md", "content-calendar.md", "content-briefs/"],
+          "dependsOn": ["competitive-positioning"],
+          "parallel": false,
+          "gate": null
+        },
+        {
+          "id": "anchor-content",
+          "name": "Anchor Content Creation",
+          "strategy": "Create 3-5 anchor content pieces that will drive your organic growth for months: a definitive guide for your primary keyword, a comparison page against top competitors, a use-case guide for your primary ICP, an ROI calculator or interactive tool, and a 'state of X' original research piece. These assets become the foundation everything else links to.",
+          "ai_execution": "Draft anchor content pieces following approved briefs. Apply brand voice and positioning consistently. Include data visualizations, expert quotes, and actionable frameworks. Optimize each piece for featured snippets and rich results. Generate all supporting meta content and social share assets.",
+          "human_decision": "Add proprietary data, customer quotes, and original insights to every anchor piece. These must be genuinely valuable — not just long. Review competitor comparison content for fairness and accuracy. Ensure the ROI calculator uses realistic assumptions.",
+          "command": "/ckm:write/blog",
+          "agent": "copywriter",
+          "skills": ["copywriting", "content-marketing", "seo"],
+          "outputs": ["anchor-content/", "comparison-pages/"],
+          "dependsOn": ["content-strategy"],
+          "parallel": true,
+          "gate": "brand-review"
+        },
+        {
+          "id": "content-distribution",
+          "name": "Content Distribution Engine",
+          "strategy": "Publishing without distribution is a tree falling in an empty forest. For every hour creating content, spend one hour distributing it. Build distribution into the content creation process — before writing, identify 5 places each piece will be shared and tailor the angle for each. Leverage founder personal brands — people follow people, not company accounts.",
+          "ai_execution": "Generate platform-native versions of each anchor piece for Twitter, LinkedIn, Reddit, Indie Hackers, and email. Create a distribution playbook with templates for each channel. Schedule posts at optimal times. Draft community engagement scripts that add value without being promotional.",
+          "human_decision": "Choose distribution channels based on where your ICP actually spends time, not where everyone else posts. Personally engage in community discussions — AI can draft but you must deliver authenticity. Build relationships with newsletter curators and content aggregators in your niche.",
+          "command": "/ckm:social",
+          "agent": "social-media-manager",
+          "skills": ["social", "content-marketing", "email"],
+          "outputs": ["distribution-playbook.md", "social-content/", "community-plan.md"],
+          "dependsOn": ["anchor-content"],
+          "parallel": false,
+          "gate": null
+        }
+      ]
+    },
+    {
+      "id": "demand-gen",
+      "name": "Demand Generation",
+      "steps": [
+        {
+          "id": "email-sequences",
+          "name": "Email Nurture Sequences",
+          "strategy": "Build three email sequences: welcome series (5 emails over 10 days — educate and activate), trial nurture (7 emails matching trial milestones — drive to aha moment), and re-engagement (3 emails for churned trials — address top objections). Each email should deliver standalone value — if they never click, they should still learn something useful. The CTA should feel like a natural next step, not a sales push.",
+          "ai_execution": "Generate complete email sequences with subject line variants, preview text, body copy, and CTAs. Map each email to buyer journey stage and behavioral triggers. Create dynamic content blocks for ICP segment personalization. Draft A/B test plans for subject lines and send times.",
+          "human_decision": "Review email sequences for genuine helpfulness vs thinly veiled selling. Test deliverability before launching — check spam scores and preview across email clients. Set up proper tracking and attribution before sending a single email. Decide email frequency based on your audience's tolerance.",
+          "command": "/ckm:email/sequence",
+          "agent": "copywriter",
+          "skills": ["email", "copywriting", "marketing-psychology"],
+          "outputs": ["welcome-sequence/", "trial-nurture/", "reengagement-sequence/"],
+          "dependsOn": ["competitive-positioning"],
+          "parallel": true,
+          "gate": "brand-review"
+        },
+        {
+          "id": "lead-magnets",
+          "name": "Lead Magnet Creation",
+          "strategy": "The best lead magnets solve a specific, immediate problem for your ICP — not a vague educational piece. Create lead magnets that naturally lead to your product: a template that is better with your tool, a calculator that shows the cost of the problem you solve, a checklist for a process your product automates. The lead magnet should make them want your product, not replace it.",
+          "ai_execution": "Generate 3 lead magnets aligned to different funnel stages: top (educational guide), middle (template/tool), bottom (ROI calculator/comparison). Create landing page copy for each with conversion-optimized forms. Draft follow-up email sequences specific to each lead magnet download.",
+          "human_decision": "Ensure lead magnets provide genuine standalone value — if it feels like a bait-and-switch, it damages trust permanently. Choose formats your audience actually consumes (developers hate PDFs, executives hate videos). Gate only high-value content — give away the rest to build organic reach.",
+          "command": "/ckm:write/fast",
+          "agent": "content-creator",
+          "skills": ["content-marketing", "copywriting", "form-cro"],
+          "outputs": ["lead-magnets/", "lead-magnet-landing-pages/", "follow-up-sequences/"],
+          "dependsOn": ["competitive-positioning"],
+          "parallel": true,
+          "gate": "brand-review"
+        },
+        {
+          "id": "paid-ads-setup",
+          "name": "Paid Ads Foundation",
+          "strategy": "Start with bottom-of-funnel paid search (competitor keywords and high-intent terms) before scaling to cold audiences. Set up proper conversion tracking and attribution before spending a dollar. Budget rule: spend enough to reach statistical significance on each ad variant within 7 days. If your budget does not allow that, focus on fewer channels. Retargeting website visitors is almost always the highest-ROI paid channel.",
+          "ai_execution": "Generate ad copy variants for Google Ads (search and display), LinkedIn Ads, and Twitter Ads. Create audience targeting specifications for each platform. Build a retargeting funnel with sequential messaging. Draft landing page variants with message-match for each ad group. Set up UTM tracking scheme.",
+          "human_decision": "Set budget caps and cost-per-acquisition targets before launching. Choose platforms based on where your ICP is reachable, not platform popularity. Start small and scale what works — resist the temptation to launch everywhere at once. Monitor daily for the first week to catch wasted spend early.",
+          "command": "/ckm:campaign/create",
+          "agent": "campaign-manager",
+          "skills": ["campaign", "copywriting", "analytics"],
+          "outputs": ["ad-copy-variants/", "audience-targeting.md", "retargeting-funnel.md", "tracking-setup.md"],
+          "dependsOn": ["content-distribution"],
+          "parallel": false,
+          "gate": "human-approval"
+        }
+      ]
+    },
+    {
+      "id": "performance",
+      "name": "Performance & Optimization",
+      "steps": [
+        {
+          "id": "attribution-analysis",
+          "name": "Attribution & Funnel Analysis",
+          "strategy": "Build a full-funnel attribution model: first touch (what brought them in), multi-touch (what influenced them), and last touch (what converted them). Most SaaS buying journeys involve 7-12 touchpoints over 2-4 weeks. Single-touch attribution is misleading — it over-credits the last click and under-credits everything that built trust. Track cohorts by acquisition channel to measure true LTV:CAC by source.",
+          "ai_execution": "Build attribution reports from GA4, email, and CRM data. Map the typical buyer journey with touchpoint sequence analysis. Calculate channel-level metrics: CAC, LTV:CAC ratio, payback period, and conversion rate by funnel stage. Generate cohort analysis showing how different acquisition channels perform over time.",
+          "human_decision": "Interpret attribution data with business judgment — some channels have long payback periods but higher LTV. Decide which attribution model aligns with your business reality (most B2B SaaS should use multi-touch). Set realistic LTV:CAC targets by channel and adjust budget allocation accordingly.",
+          "command": "/ckm:analyze/report",
+          "agent": "analytics-analyst",
+          "skills": ["analytics", "campaign"],
+          "outputs": ["attribution-report.md", "funnel-analysis.md", "cohort-analysis.md"],
+          "dependsOn": ["paid-ads-setup"],
+          "parallel": false,
+          "gate": null
+        },
+        {
+          "id": "optimization-loop",
+          "name": "Continuous Optimization Loop",
+          "strategy": "Build a weekly optimization rhythm: Monday — review metrics and identify the biggest lever. Tuesday-Thursday — implement one change to that lever. Friday — measure impact and document learning. The goal is not to optimize everything at once but to improve the biggest bottleneck by 10-20% each week. Over 60 days, compound improvements of 15% weekly on your worst metric will double your overall performance.",
+          "ai_execution": "Generate weekly optimization reports identifying the biggest conversion bottleneck. Create A/B test recommendations with statistical significance calculators. Draft updated creative variants based on performance data. Build a learning repository that connects changes to outcomes. Generate next-week optimization priorities.",
+          "human_decision": "Choose which single lever to focus on each week — resist the urge to change multiple variables. Make resource allocation decisions based on expected impact vs effort. Recognize when diminishing returns on one channel signal the need to open new channels. Set the long-term optimization roadmap beyond the initial 60 days.",
+          "command": "/ckm:funnel",
+          "agent": "analytics-analyst",
+          "skills": ["analytics", "campaign", "marketing-research"],
+          "outputs": ["weekly-optimization-reports/", "ab-test-results/", "learning-repository.md", "optimization-roadmap.md"],
+          "dependsOn": ["attribution-analysis"],
+          "parallel": false,
+          "gate": null
+        }
+      ]
+    }
+  ],
+  "gates": {
+    "brand-review": {
+      "type": "auto",
+      "checker": "content-reviewer",
+      "criteria": ["brand-voice-consistency", "positioning-alignment", "messaging-accuracy", "competitive-fairness"],
+      "pass_threshold": 0.8
+    },
+    "human-approval": {
+      "type": "manual",
+      "prompt": "Review budget allocation and targeting before committing ad spend. Verify conversion tracking is working.",
+      "blocksAll": true
+    }
+  }
+}

package/.opencode/skills/preview/SKILL.md

@@ -0,0 +1,87 @@
+---
+name: ck:preview
+description: Path to markdown file, plan directory, or plans collection
+metadata:
+  author: claudekit
+  version: "1.0.0"
+---
+
+Universal viewer using `markdown-novel-viewer` skill - pass ANY path and see it rendered nicely.
+
+## Usage
+
+- `/preview <file.md>` - View markdown file in novel-reader UI
+- `/preview <directory/>` - Browse directory contents
+- `/preview --stop` - Stop running server
+
+## Examples
+
+```bash
+/preview plans/my-plan/plan.md     # View markdown file
+/preview plans/                    # Browse plans directory
+/preview docs/                     # Browse docs directory
+/preview any/path/to/file.md      # View any markdown file
+/preview any/path/                 # Browse any directory
+```
+
+## Execution
+
+**IMPORTANT:** Run server as Claude Code background task using `run_in_background: true` with the Bash tool. This makes the server visible in `/tasks` and manageable via `KillShell`.
+
+Check if this script is located in the current workspace or in `$HOME/.opencode/skills/markdown-novel-viewer` directory:
+- If in current workspace: `$SKILL_DIR_PATH` = `./.opencode/skills/markdown-novel-viewer/`
+- If in home directory: `$SKILL_DIR_PATH` = `$HOME/.opencode/skills/markdown-novel-viewer/`
+
+### Stop Server
+
+If `--stop` flag is provided:
+
+```bash
+node $SKILL_DIR_PATH/scripts/server.cjs --stop
+```
+
+### Start Server
+
+Otherwise, run the `markdown-novel-viewer` server as CC background task with `--foreground` flag (keeps process alive for CC task management):
+
+```bash
+# Determine if path is file or directory
+INPUT_PATH="{{path}}"
+if [[ -d "$INPUT_PATH" ]]; then
+  # Directory mode - browse
+  node $SKILL_DIR_PATH/scripts/server.cjs \
+    --dir "$INPUT_PATH" \
+    --host 0.0.0.0 \
+    --open \
+    --foreground
+else
+  # File mode - view markdown
+  node $SKILL_DIR_PATH/scripts/server.cjs \
+    --file "$INPUT_PATH" \
+    --host 0.0.0.0 \
+    --open \
+    --foreground
+fi
+```
+
+**Critical:** When calling the Bash tool:
+- Set `run_in_background: true` to run as CC background task
+- Set `timeout: 300000` (5 minutes) to prevent premature termination
+- Parse JSON output and report URL to user
+
+Example Bash tool call:
+```json
+{
+  "command": "node .opencode/skills/markdown-novel-viewer/scripts/server.cjs --dir \"path\" --host 0.0.0.0 --open --foreground",
+  "run_in_background": true,
+  "timeout": 300000,
+  "description": "Start preview server in background"
+}
+```
+
+After starting, parse the JSON output (e.g., `{"success":true,"url":"http://localhost:3456/view?file=...","networkUrl":"http://192.168.1.x:3456/view?file=..."}`) and report:
+- Local URL for browser access
+- Network URL for remote device access (if available)
+- Inform user that server is now running as CC background task (visible in `/tasks`)
+
+**CRITICAL:** MUST display the FULL URL including path and query string (e.g., `http://localhost:3456/view?file=/path/to/file.md`). NEVER truncate to just `host:port` (e.g., `http://localhost:3456`). The full URL is required for direct file access.

package/.opencode/skills/preview/references/generation-modes.md

@@ -0,0 +1,192 @@
+# Generation Modes
+
+## Step 1: Determine Output Location
+
+1. Check if there's an active plan context (from `## Plan Context` in hook injection)
+2. If active plan exists: save to `{plan_dir}/visuals/{topic-slug}.md`
+3. If no active plan: save to `plans/visuals/{topic-slug}.md`
+4. Create `visuals/` directory if it doesn't exist
+
+## Step 2: Generate Content
+
+**Mermaid Diagram Syntax:**
+When generating mermaid code blocks, use `/ck:mermaidjs-v11` skill for v11 syntax rules.
+
+**Essential rules (always apply):**
+- Quote node text with special characters: `A["text with /slashes"]`
+- Escape brackets in labels: `A["array[0]"]`
+
+Use the appropriate template based on flag:
+
+### --explain (Visual Explanation)
+```markdown
+# Visual Explanation: {topic}
+
+## Overview
+Brief description of what we're explaining.
+
+## Quick View (ASCII)
+[ASCII diagram of component relationships]
+
+## Detailed Flow
+[Mermaid sequence/flowchart diagram]
+
+## Key Concepts
+1. **Concept A** - Explanation
+2. **Concept B** - Explanation
+
+## Code Example (if applicable)
+[Relevant code snippet with comments]
+```
+
+### --slides (Presentation Format)
+```markdown
+# {Topic} - Visual Presentation
+
+---
+## Slide 1: Introduction
+- One concept per slide
+- Bullet points only
+
+---
+## Slide 2: The Problem
+[Mermaid flowchart]
+
+---
+## Slide 3: The Solution
+- Key point 1
+- Key point 2
+
+---
+## Slide 4: Summary
+Key takeaways...
+```
+
+### --diagram (Focused Diagram)
+```markdown
+# Diagram: {topic}
+
+## ASCII Version
+[ASCII architecture diagram]
+
+## Mermaid Version
+[Mermaid flowchart/graph]
+```
+
+### --ascii (Terminal-Friendly Only)
+```
+[ASCII-only box diagram with legend]
+```
+
+## Step 3: Save and Preview
+
+1. Write generated content to determined path
+2. Start preview server with the generated file:
+```bash
+node .opencode/skills/markdown-novel-viewer/scripts/server.cjs \
+  --file "<generated-file-path>" --host 0.0.0.0 --open --foreground
+```
+
+## Step 4: Report to User
+
+Report:
+- Generated file path
+- Preview URL (local + network)
+- Remind: file saved in plan's `visuals/` folder for future reference
+
+---
+
+## HTML Mode Generation
+
+When `--html` flag is present (or implied by `--diff`, `--plan-review`, `--recap`), generate self-contained HTML instead of Markdown.
+
+### HTML Step 1: Determine Output Location
+- Same plan-aware logic as markdown mode but with `.html` extension
+- Active plan: `{plan_dir}/visuals/{topic-slug}.html`
+- No plan: `plans/visuals/{topic-slug}.html`
+- Create `visuals/` directory if needed
+
+### HTML Step 2: Read References
+Always read `html-design-guidelines.md` first (anti-slop rules, style presets).
+
+Then read mode-specific references:
+
+| Mode | References | Templates to study |
+|------|------------|-------------------|
+| --html --explain | html-css-patterns.md, html-libraries.md | architecture.html |
+| --html --diagram | html-css-patterns.md, html-libraries.md | mermaid-flowchart.html or architecture.html |
+| --html --slides | html-slide-patterns.md, html-css-patterns.md, html-libraries.md | slide-deck.html |
+| --html --diff | html-css-patterns.md, html-libraries.md | data-table.html, architecture.html |
+| --html --plan-review | html-css-patterns.md, html-libraries.md | architecture.html, data-table.html |
+| --html --recap | html-css-patterns.md, html-libraries.md | architecture.html, data-table.html |
+
+For multi-section pages (explain, diff, plan-review, recap): also read `html-responsive-nav.md`.
+
+### HTML Step 3: Generate Content
+
+Follow the 4-phase workflow:
+
+**Think:** Determine content-type routing:
+- Mermaid for topology (flowcharts, sequence, ER, state, mind maps, class, C4)
+- CSS Grid for text-heavy architecture (cards with descriptions, code references)
+- HTML `<table>` for data (requirement audits, comparisons, matrices)
+- Chart.js for real charts (KPI dashboards, sparklines)
+- Hybrid for complex systems (15+ elements): simple Mermaid overview + detailed CSS Grid cards
+
+**Structure:** Pick template pattern, plan sections, assign depth tiers (hero/elevated/default/recessed).
+
+**Style:** Select font pairing + palette from curated presets. Vary from previous outputs. Apply anti-slop checks:
+- No Inter/Roboto/system-ui alone as body font
+- No indigo/violet (#8b5cf6, #7c3aed) as accent
+- No animated glowing box-shadows
+- No gradient text on headings
+- No emoji icons in section headers
+- No three-dot window chrome on code blocks
+
+**Deliver:** Write single self-contained `.html` file — all CSS and JavaScript inline. External resources: CDN only (Google Fonts, Mermaid.js v11, Chart.js, anime.js).
+
+**MANDATORY — Theme Toggle:** Every HTML page MUST include the light/dark theme toggle button from `html-css-patterns.md` → "Theme Toggle Button" section. This is non-negotiable. The toggle button (`<button class="theme-toggle">`) must be the first child of `<body>`, with its CSS and JS inlined. Pages without the toggle are considered incomplete.
+
+For `--slides`: recommend invoking `/ck:ui-ux-pro-max` for richer style selection.
+Must use `/ck:mermaidjs-v11` for any Mermaid diagrams.
+
+### HTML Step 4: Open in Browser
+- macOS: `open "{output-path}"`
+- Linux: `xdg-open "{output-path}"`
+- Windows: `start "{output-path}"`
+- No server needed — file is self-contained
+- Report file path and confirm browser opened
+
+### Data Gathering for HTML-Only Modes
+
+#### --diff [ref]
+1. Detect scope: branch name → working tree diff; commit hash → `git show`; HEAD → uncommitted; PR number → `gh pr diff`; range → two commits; no arg → diff against main
+2. Run: `git diff --stat`, `git diff --name-status`, line counts
+3. Read all changed files + surrounding context
+4. Scan new public API surface (grep exports, functions, classes, interfaces)
+5. Check CHANGELOG.md, README.md, docs updates
+6. Reconstruct decision rationale from commits/conversation/progress docs
+
+#### --plan-review [plan-file]
+1. Input: explicit plan file path OR detect from active plan context
+2. Read plan in full (problem, changes, rejected alternatives, scope)
+3. Read every file the plan references + their dependencies
+4. Map blast radius (imports, tests, config, public API)
+5. Cross-reference: plan assumptions vs actual code state
+
+#### --recap [timeframe]
+1. Parse time window: shorthand (2w, 30d, 3m) → git `--since` format; default 2w
+2. Project identity: README, CHANGELOG, package.json, file structure
+3. Recent activity: `git log --oneline --since=...`, `git shortlog`
+4. Current state: `git status`, stale branches, TODOs, progress docs
+5. Decision context: commit messages, plans, ADRs
+6. Architecture scan: key files, module structure, frequently changed areas
+
+### Quality Checklist
+Before delivering HTML output, verify:
+- [ ] **Squint test:** Visual hierarchy visible at arm's length?
+- [ ] **Swap test:** Would this look AI-generated? Check against forbidden patterns
+- [ ] **Theme toggle (MANDATORY):** Toggle button present as first child of `<body>`? Both light and dark modes render correctly? See `html-css-patterns.md` → "Theme Toggle Button".
+- [ ] **Overflow:** No horizontal scroll on content (tables excepted, wrapped in scroll container)
+- [ ] **Mermaid:** Zoom controls present? ELK layout for 10+ nodes?
+- [ ] **Responsiveness:** Readable on mobile width?