diff --git a/CLAUDE.md b/CLAUDE.md index d1a5c58..a0e8845 100644 --- a/CLAUDE.md +++ b/CLAUDE.md @@ -60,7 +60,7 @@ hardcode any hex values outside the token definitions. ## Pattern data -15 patterns across 7 sections. All defined in the `PATTERNS` array in +15 patterns across 8 sections. All defined in the `PATTERNS` array in `index.html`. Fields per pattern: ```js @@ -95,6 +95,23 @@ as a dashed group box containing one node per `members` entry — `parallel` draws solid fan-out/fan-in edges (AND semantics), `branch` draws dashed edges (exclusive-OR / "choose one" semantics). +### Statefulness tooltips + +`STATEFULNESS_INFO` (in `index.html`, alongside `PATTERNS`) maps each +`statefulness` value to a one-sentence explanation, shown as a hover/focus +tooltip on the "At a glance" panel's Statefulness row. Every distinct +`statefulness` value used in `PATTERNS` must have an entry here — +`scripts/validate-patterns.js` enforces this. + +### Deep dive button + +Each expanded card has a "Deep dive" button (`copyDeepDive` / +`deepDivePrompt` in `index.html`). It copies a prompt built from the +pattern's name, description, flow, and common uses to the clipboard +(for pasting into a separate Claude conversation), and briefly shows +"Copied ✓" on the button as feedback. It does not call any API or +navigate away — the site has no backend. + --- ## Export targets & tasks for Claude Code @@ -140,6 +157,8 @@ ai-agent-patterns/ ├── index.html ← main interactive site (source of truth) ├── CLAUDE.md ← this file ├── README.md ← to be generated by Claude Code +├── docs/ +│ └── preview.png ← committed screenshot for README (exports/ is gitignored) ├── exports/ │ ├── linkedin-all.png │ ├── linkedin-single.png diff --git a/README.md b/README.md index 0db93f9..65d1623 100644 --- a/README.md +++ b/README.md @@ -7,16 +7,21 @@ An interactive reference of AI agent design patterns — single-agent and multi-agent architectures — covering 15 patterns across 8 sections. Built as a single self-contained `index.html` with no build step and no external -dependencies. Click any card to expand it and see its description, common -uses, and at-a-glance metadata (complexity, agent count, loop type, -statefulness). +dependencies. Click any card to expand it and see a colored flow diagram, +its description, common uses, and at-a-glance metadata (complexity, agent +count, loop type, statefulness — hover any statefulness value for an +explanation). The "Deep dive" button copies a ready-to-paste prompt +(pattern name, description, flow, and common uses) to your clipboard for +following up in a Claude conversation. The same `index.html` is the source of truth for every other export format in this repo (LinkedIn images, PPTX slides, PDF) — all of them render directly from the `PATTERNS` array defined in that file. -![Site preview](exports/linkedin-all.png) - +![Site preview](docs/preview.png) + ## Patterns @@ -60,10 +65,15 @@ headless browser) so there is only ever one copy of the content. npm install npx playwright install chromium -npm run export:images # exports/linkedin-{all,single,multi}.png + exports/card-{slug}.png +npm run validate # checks PATTERNS against the schema in CLAUDE.md +npm run export:images # exports/linkedin-{all,single,multi}.png + exports/card-{slug}.png npm run export:pptx # exports/ai-agent-patterns.pptx ``` +`npm run validate` and both export scripts also run on every pull request +via `.github/workflows/ci.yml`, so a malformed pattern or a renderer crash +is caught before merge. + ## Project structure ``` @@ -71,16 +81,21 @@ ai-agent-patterns/ ├── index.html ← main interactive site (source of truth) ├── CLAUDE.md ← project spec for Claude Code ├── README.md -├── exports/ ← generated by the scripts below +├── docs/ +│ └── preview.png ← committed screenshot for this README +├── exports/ ← generated by the scripts below, gitignored │ ├── linkedin-all.png │ ├── linkedin-single.png │ ├── linkedin-multi.png │ ├── card-*.png │ └── ai-agent-patterns.pptx ├── scripts/ +│ ├── validate-patterns.js │ ├── export-images.js │ └── export-pptx.js -└── .github/workflows/deploy.yml ← GitHub Pages deploy action +└── .github/workflows/ + ├── deploy.yml ← GitHub Pages deploy action + └── ci.yml ← PR validation (schema + export smoke test) ``` ## License diff --git a/docs/preview.png b/docs/preview.png new file mode 100644 index 0000000..febfbf6 Binary files /dev/null and b/docs/preview.png differ