feat(pipeline): ship InDesign pipeline agent, skill, CLI, and docs

.claude/AGENT-NAMING-GUIDE.md

@@ -4,7 +4,7 @@
 
 ## Naming Convention
 
-All 55 agents use unique, hyphenated names (e.g., `frontend-developer`, `figma-react-converter`). There are no naming conflicts in the current agent set.
+All 56 agents use unique, hyphenated names (e.g., `frontend-developer`, `figma-react-converter`). There are no naming conflicts in the current agent set.
 
 Agent files live in `.claude/agents/` as `<agent-name>.md`.
 

.claude/CUSTOM-AGENTS-GUIDE.md

@@ -1,7 +1,7 @@
 # Custom Agents Guide
 
 **Last Updated:** 2026-06-11
-**Total Agents:** 55
+**Total Agents:** 56
 **Location:** `.claude/agents/`
 
 Agents are auto-selected by Claude Code based on task context, or you can request one explicitly.
@@ -44,6 +44,7 @@ Agents are auto-selected by Claude Code based on task context, or you can reques
 | astro-converter | Design-to-Astro hybrid conversion (zero-JS .astro statics + React islands) | Building Astro apps where most components are static and a few are interactive React islands |
 | conversation-designer | Natural-language descriptions → concrete design decisions, design briefs, and HTML mockups for Figma generation | Powering /build-from-conversation: authoring design-brief.json and the mockups captured into Figma |
 | asset-cataloger | Image/asset semantic mapping and validation | Mapping hash-named exports to meaningful names, validating asset usage |
+| indesign-to-react | InDesign (IDML/PDF) → typed React components, design tokens, and Storybook stories via @aurelius/pipeline | Converting an exported `.idml` or PDF handoff into a React starting point |
 
 ## Testing & QA
 
@@ -141,7 +142,7 @@ User: "Use the accessibility-auditor agent to check this page"
 
 ## Agent + Skill Integration
 
-Agents work alongside the 22 custom skills in `.claude/skills/`:
+Agents work alongside the 23 custom skills in `.claude/skills/`:
 
 | Agent | Complementary Skill |
 |-------|-------------------|

.claude/agents/indesign-to-react.md

@@ -0,0 +1,72 @@
+---
+name: indesign-to-react
+description: Converts Adobe InDesign sources (exported .idml packages or PDFs) into typed React components, design tokens, and Storybook stories using the @aurelius/pipeline InDesign pipeline. Reads the generation report and proposes concrete follow-ups (unmapped frames, font fallbacks, missing alt text, semantic-tag refinements). Non-destructive: works on a feature branch, never commits to main.
+tools: Write, Read, MultiEdit, Bash, Grep, Glob, AskUserQuestion, TaskOutput, TodoWrite
+model: opus
+permissionMode: bypassPermissions
+---
+
+You are an InDesign-to-React conversion specialist. You turn the artifacts designers actually deliver — an exported InDesign **IDML** package or a **PDF** — into a coherent, typed React component set with design tokens and Storybook stories, then guide the developer through the manual touch-ups print-to-web always needs.
+
+You orchestrate the `@aurelius/pipeline` package (the IDML/PDF parser, the design-token mapper, and the React component generator). You do not re-implement parsing or generation — you run the pipeline, read its reports, and act on them.
+
+## Operating principles
+
+- **Non-destructive.** Always work on a feature branch (e.g. `indesign/<name>`). Never write to `main`. Never overwrite a developer's hand-edited components without confirming.
+- **Deterministic.** The generator produces byte-identical output for the same input; reruns must not churn unrelated files.
+- **Honest about fidelity.** PDF and even IDML are reconstructed heuristically. Surface what was inferred vs. read; never claim pixel-perfection.
+
+## Procedure
+
+### 1. Validate input
+
+- Confirm the input is a `.idml` or `.pdf`. If both a `.idml` and a `.pdf` exist for the same design, prefer IDML (richer style metadata) unless the user asks for PDF parity (`--source-priority pdf`).
+- Check the file exists and is readable. For IDML, it must be a zip with a `designmap.xml`.
+
+### 2. Create a feature branch
+
+```bash
+git checkout -b indesign/<short-name>
+```
+
+### 3. Run the pipeline
+
+```bash
+# Build the pipeline package once if needed.
+pnpm --filter @aurelius/pipeline build
+# Convert: parse → tokens → components, into the chosen output dir.
+node packages/pipeline/dist/pipeline-cli.js pipeline indesign <input> \
+  --target <next|vite|astro|react> --styling <tailwind|css-modules> --output <dir>
+```
+
+Honor `aurelius.config.json` (`indesign` section) for the default target, styling, and output when present; explicit flags win.
+
+### 4. Review the generation report
+
+Read `<output>/indesign-pipeline-report.md` (and the `.json` for machine use). Turn each section into concrete, prioritized follow-ups:
+
+- **Accessibility TODOs** — every `<img>` ships with an empty `alt`. Propose real alt text per image (or mark decorative with `alt=""`), and flag heading-order issues.
+- **Unmapped IR nodes** — graphic/vector frames with no JSX mapping. Suggest whether to drop them, replace with a background, or hand-build.
+- **Font fallbacks** — families resolved by name to a web stack. Ask the developer to confirm the substitution or supply a `--font-map`/web font.
+- **Out-of-gamut colors** (from the parse warnings) — CMYK/Lab colors clamped to sRGB may shift; confirm brand colors.
+- **Semantic-tag refinements** — the role→tag inference (`h1`–`h6`/`p`/`figcaption`) is heuristic; review headings and lists.
+
+### 5. Verify
+
+- Type-check the generated components (`tsc --noEmit` in the host project, or rely on the pipeline's CI smoke).
+- Render a Storybook story or the component to confirm it mounts.
+
+### 6. Summarize and commit
+
+- Commit the generated files and a short summary of the follow-ups on the feature branch.
+- Present the developer a checklist of the touch-ups (alt text, font confirmation, unmapped frames) and the report location. Do not merge to `main`.
+
+## What you do not do
+
+- You do not guarantee pixel-perfect reconstruction — generated layout is a token-spaced, semantic flow meant for manual refinement.
+- You do not edit the `@aurelius/pipeline` source to "fix" a single conversion; file an issue if the parser/generator is wrong.
+
+## Related
+
+- Skill: `indesign-conversion` (when-to-use, prerequisites, gotchas, worked example).
+- Docs: `docs/pipelines/indesign.md` (exporting, fidelity, accessibility checklist, troubleshooting).

.claude/skills/README.md

@@ -1,7 +1,7 @@
 # Skills Catalog
 
 **Last Updated:** 2026-06-11
-**Total Skills:** 22
+**Total Skills:** 23
 **Location:** `.claude/skills/`
 
 Skills are documentation-based workflows that trigger automatically when relevant keywords appear in conversation. They provide systematic guidance, not tool integrations.
@@ -138,6 +138,14 @@ These skills provide patterns and best practices. They trigger on relevant keywo
 - **Triggers:** `/export-design-system`, "export design system", "publishable component library"
 - **Output:** `packages/` pnpm workspace (tokens + component library)
 
+### InDesign Skills
+
+#### 23. indesign-conversion
+
+- **Purpose:** Converts an exported InDesign IDML package or PDF into typed React components, design tokens (Tailwind preset + `tokens.css`/`tokens.ts` + Style Dictionary JSON), and Storybook stories via the `@aurelius/pipeline` InDesign pipeline; reads the generation report to propose follow-ups.
+- **Triggers:** "InDesign to React", "IDML", "PDF to React", "indesign pipeline", "brochure to React", "aurelius pipeline indesign"
+- **Output:** A React project (`components`, `stories`, `index.ts`, `tokens/`, extracted assets, plus Markdown + JSON reports)
+
 ---
 
 ## Pipeline Flow

.claude/skills/indesign-conversion/SKILL.md

@@ -0,0 +1,64 @@
+---
+name: indesign-conversion
+description: Convert an exported Adobe InDesign IDML package or PDF into typed React components, design tokens, and Storybook stories via the @aurelius/pipeline InDesign pipeline. Use when a designer hands you an .idml or .pdf and you need a starting React component set. Keywords: InDesign to React, IDML, PDF to React, indesign pipeline, design tokens from InDesign, brochure to React, print to web, aurelius pipeline indesign
+---
+
+# InDesign Conversion
+
+## Overview
+
+This skill drives the InDesign pipeline end to end: it parses an exported **IDML** package or **PDF** into a normalized intermediate representation (IR), maps the styles and swatches to design tokens (a Tailwind preset, `tokens.css`, `tokens.ts`, and a Style Dictionary JSON), and generates typed React components with Storybook stories. It pairs with the `indesign-to-react` agent, which reviews the generation report and proposes follow-ups.
+
+## When to use
+
+- A designer delivered an exported **`.idml`** or **`.pdf`** (the normal handoff) and you want a styled React starting point rather than rebuilding by hand.
+- You need design tokens (colors, type scale, spacing) derived directly from the InDesign document.
+
+Do **not** use it for live Figma/Canva designs (use those pipelines) or when you need pixel-perfect reconstruction — this produces a usable, token-driven scaffold for manual refinement.
+
+## Prerequisites
+
+- An exported **`.idml`** (File → Export → InDesign Markup) or a **PDF** exported from InDesign. Source `.indd` files are not supported — export first.
+- The `@aurelius/pipeline` package built (`pnpm --filter @aurelius/pipeline build`).
+- For best fidelity, prefer IDML when available — it carries named paragraph/character styles and swatches that PDF lacks.
+
+## Expected outputs
+
+Into `<output>` (default `./src/indesign`):
+
+- `*.tsx` — one typed component per spread, plus `*.stories.tsx` and an `index.ts` barrel.
+- `tokens/` — `tokens.ts`, `tokens.css`, `tailwind.preset.ts`, `design-tokens.json`.
+- `public/indesign/` — extracted images, referenced by the components.
+- `indesign-pipeline-report.md` and `indesign-pipeline-report.json` — produced files, staged assets, unmapped frames, and accessibility TODOs.
+
+## Worked example
+
+Using the committed fixture (`tests/fixtures/indesign/sample.idml`):
+
+```bash
+pnpm --filter @aurelius/pipeline build
+node packages/pipeline/dist/pipeline-cli.js pipeline indesign \
+  tests/fixtures/indesign/sample.idml \
+  --target react --styling tailwind --output ./out/indesign
+```
+
+This writes `out/indesign/Spread1.tsx` (a `<section>` with an `<h1>` heading and an `<img>`), `Spread1.stories.tsx`, `index.ts`, the token files under `out/indesign/tokens/`, and the two reports. The report's **Accessibility TODOs** section will list the hero image's missing alt text — add it before shipping.
+
+Then review and refine:
+
+1. Open `indesign-pipeline-report.md`; address each TODO (alt text, unmapped frames, font fallbacks).
+2. Confirm the Tailwind preset is wired into the host project's `tailwind.config.ts` (or, for CSS Modules, that `tokens.css` is imported).
+3. Render a story in Storybook to confirm the component mounts.
+
+## Common gotchas
+
+- **CMYK → sRGB shifts.** Print colors are converted to sRGB without ICC profiles; CMYK/Lab swatches may shift and out-of-gamut colors are clamped. Confirm brand colors against the design.
+- **Missing / non-embedded fonts.** Print fonts are rarely web fonts; the mapper resolves families by name to a web stack (`config/font-map.json`). Confirm substitutions or supply a `--font-map`.
+- **Oversized print images.** Exported images are often print-resolution. Optimize/resize the files in `public/indesign/` for the web.
+- **Accessibility gaps.** Every generated `<img>` has an empty `alt`; headings are inferred heuristically. Always do an accessibility pass.
+- **PDF reconstruction.** PDFs have no named styles — text frames, columns, and style buckets are inferred from positions and font sizes. Expect to merge/split a few blocks by hand.
+
+## Related
+
+- Agent: `indesign-to-react`.
+- Docs: `docs/pipelines/indesign.md`, `docs/pipeline/indesign-pdf-fidelity.md`.

.gitattributes

@@ -10,3 +10,6 @@ templates/**/*.tpl linguist-generated=true
 
 # Lock files are vendored
 pnpm-lock.yaml linguist-generated=true
+
+# Binary test fixtures (InDesign packages are zip archives)
+*.idml binary

.prettierignore

@@ -8,3 +8,4 @@ templates/
 docs/
 app/
 *.md
+*.idml

CLAUDE.md

@@ -17,8 +17,8 @@ The framework is designed for:
 ```
 project-root/
 ├── .claude/              # Claude Code configuration
-│   ├── agents/           # 55 specialized agents
-│   ├── skills/           # 22 React-specific skills
+│   ├── agents/           # 56 specialized agents
+│   ├── skills/           # 23 React-specific skills
 │   ├── commands/         # Custom slash commands
 │   ├── hooks/            # Hook scripts (automated hooks configured in settings.json)
 │   └── pipeline.config.json  # Pipeline thresholds, iteration limits, app types
@@ -214,15 +214,15 @@ pnpm tsc --noEmit         # Type check without emitting
 
 ---
 
-### Custom Agents (55 Total)
+### Custom Agents (56 Total)
 
-55 specialized agents covering the full product lifecycle:
+56 specialized agents covering the full product lifecycle:
 
 | Category | Count | Key Agents |
 |----------|-------|------------|
 | Engineering | 12 | frontend-developer, backend-architect, rapid-prototyper, test-writer-fixer, error-boundary-architect, migration-specialist, i18n-engineer, animation-optimizer, bundle-analyzer |
 | Design | 5 | ui-designer, ux-researcher, brand-guardian |
-| Design-to-Code | 8 | figma-react-converter, canva-react-converter, astro-converter, asset-cataloger, vue-converter, svelte-converter, react-native-converter, conversation-designer |
+| Design-to-Code | 9 | figma-react-converter, canva-react-converter, astro-converter, asset-cataloger, vue-converter, svelte-converter, react-native-converter, conversation-designer, indesign-to-react |
 | Testing & QA | 7 | visual-qa-agent, accessibility-auditor, api-tester, performance-benchmarker |
 | Product | 3 | sprint-prioritizer, feedback-synthesizer, trend-researcher |
 | Marketing | 7 | content-creator, growth-hacker, app-store-optimizer |
@@ -238,7 +238,7 @@ Agents are invoked automatically based on task context.
 
 ---
 
-### Skills (22 Total)
+### Skills (23 Total)
 
 | Skill | Purpose | Triggers |
 |-------|---------|----------|
@@ -539,6 +539,7 @@ Claude: [Uses test-writer-fixer agent]
 /build-from-screenshot <URL or paths>  # Full autonomous screenshot pipeline
 /build-from-conversation [description] # Conversational pipeline: interview → generated Figma → build
 /export-design-system [flags] # Export components + tokens as publishable pnpm workspace
+aurelius pipeline indesign <input> [--target ...] [--styling ...] [--output ...] # InDesign IDML/PDF → React
 ```
 
 **Quality Verification:**
@@ -616,7 +617,7 @@ node scripts/metrics-dashboard.js summary  # Quick metrics summary
 
 ---
 
-**Last Updated:** 2026-06-11
-**Architecture:** 55 agents, 22 skills, 4 plugins + gh CLI, Figma + Canva + Playwright MCP, 40 scripts, 8 hooks, 5 renderers (nextjs, vite, astro, sveltekit, expo)
+**Last Updated:** 2026-06-20
+**Architecture:** 56 agents, 23 skills, 4 plugins + gh CLI, Figma + Canva + Playwright MCP, 40 scripts, 8 hooks, 5 renderers (nextjs, vite, astro, sveltekit, expo)
 
 > **Keeping counts in sync:** When adding or removing agents, skills, scripts, or hooks, update all count references across the project. Search for the old count number in `*.md` files to find all references: `CLAUDE.md`, `README.md`, `CONTRIBUTING.md`, `docs/onboarding/`, `docs/react-development/`, and `.claude/AGENT-NAMING-GUIDE.md`. The agent and skill counts are enforced automatically by `scripts/check-doc-counts.sh` (run in CI and on pre-commit), which recounts `.claude/agents/` and `.claude/skills/` and fails on any documented count that disagrees.

CONTRIBUTING.md

@@ -137,7 +137,7 @@ Because the bump is derived from commit history, **conventional commit messages
 
 ## Claude Code Agents
 
-Aurelius includes 55 specialized Claude Code agents and 22 skills that automate significant portions of the development workflow — from design-to-code conversion to testing, accessibility, and deployment.
+Aurelius includes 56 specialized Claude Code agents and 23 skills that automate significant portions of the development workflow — from design-to-code conversion to testing, accessibility, and deployment.
 
 If you have Claude Code installed, these agents and skills are available to you automatically when working in this repository. They can assist with component development, test writing, visual QA, and much more.