Workflow Capture

A project for documenting current-state and desired-state workflows through structured interviews, producing visual HTML deliverables suitable for consulting engagements.

What this is

A self-contained Claude Code project. Cloning it gives you three skills and the supporting files needed to:

• Run a guided interview that captures how a workflow runs today (workflow-interview-current-state).
• Run a follow-up interview that captures how it should run, anchored to the current-state capture (workflow-interview-desired-state).
• Render the captures as scrollable HTML infographics with diagrams, callouts, and contextual notes (infographic).

The skills are scoped to this project — they don't pollute your global Claude config.

Prerequisites

• Claude Code installed (CLI, VS Code extension, or JetBrains plugin).
• Markdown preview support if you want to watch the interview's progress diagram update live (built into VS Code: Ctrl+Shift+V).

Getting started

1. Clone or download this repository.
2. Open the folder in your editor.
3. Start a Claude Code session from this directory.
4. Ask Claude to start a capture:
   • "Start a current-state workflow interview."
   • or, after a current-state exists: "Start a desired-state workflow interview."

The skill will ask for a workflow name, generate a kebab-case slug, and create captures/<slug>/ for its working files. After each interview section it shows a text summary in chat and updates captures/<slug>/progress.md (open this file with markdown preview to watch the diagram build up live).

What you get

After a current-state interview, captures/<slug>/ contains:

• progress.md — the live working file used during the interview.
• current-state-workflow.md — the contract-compliant final capture, with structured primitives (scope card, role grid, flow diagram, pain callouts) and contextual margin notes.
• current-state-workflow.html — the rendered infographic (if you accept the render step at wrap-up).

After a desired-state interview anchored to a current-state capture, you also get:

• workflow.md — a single tabbed deliverable with three views: Comparison (default), Current State, Desired State.
• workflow.html — the rendered tabbed infographic.

Project layout

.
├── README.md                  ← you are here
├── CLAUDE.md                  ← standing instructions for Claude
├── .gitignore                 ← excludes capture outputs by default
├── .claude/
│   ├── settings.json          ← project permissions
│   └── skills/
│       ├── workflow-interview-current-state/
│       ├── workflow-interview-desired-state/
│       └── infographic/
└── captures/                  ← interview outputs land here

Notes on outputs

By default, captures/ is .gitignored — workflow content is often client-confidential. Remove the entry from .gitignore if you want captures in version control.

The infographic HTML is fully self-contained: open it in any browser, no network required, no build step. Suitable for emailing as an attachment or hosting as a static file.

Customizing the skills

The skills are plain markdown in .claude/skills/. Edit them in place to adapt the interview structure, change the deliverable format, or extend the visual contract. Changes apply on the next Claude Code session in this directory.

License

Add your preferred license here.