diff --git a/.claude/CUSTOM-AGENTS-GUIDE.md b/.claude/CUSTOM-AGENTS-GUIDE.md index c98ca9c..20628f0 100644 --- a/.claude/CUSTOM-AGENTS-GUIDE.md +++ b/.claude/CUSTOM-AGENTS-GUIDE.md @@ -142,7 +142,7 @@ User: "Use the accessibility-auditor agent to check this page" ## Agent + Skill Integration -Agents work alongside the 23 custom skills in `.claude/skills/`: +Agents work alongside the 24 custom skills in `.claude/skills/`: | Agent | Complementary Skill | |-------|-------------------| diff --git a/.claude/skills/README.md b/.claude/skills/README.md index dd4f020..e2a5cac 100644 --- a/.claude/skills/README.md +++ b/.claude/skills/README.md @@ -1,7 +1,7 @@ # Skills Catalog -**Last Updated:** 2026-06-11 -**Total Skills:** 23 +**Last Updated:** 2026-07-01 +**Total Skills:** 24 **Location:** `.claude/skills/` Skills are documentation-based workflows that trigger automatically when relevant keywords appear in conversation. They provide systematic guidance, not tool integrations. @@ -146,6 +146,14 @@ These skills provide patterns and best practices. They trigger on relevant keywo - **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) +### Storybook Skills + +#### 24. storybook-story-generation (Phase 4.5) + +- **Purpose:** Auto-generates Storybook 8 (CSF3) `.stories.tsx` and `.mdx` docs from built React components using a `ts-morph` AST. Emits prop-aware `argTypes`/controls, a `Default` story seeded with destructured defaults, one variant story per string-literal-union value, `True`/`False` stories for booleans, and action args for `on*` callbacks. Wraps `scripts/generate-stories.sh`. Non-blocking. +- **Triggers:** Phase 4.5 of `/build-from-figma`, `/build-from-canva`, and `/build-from-screenshot` (after component build), "generate Storybook stories", "auto-generate stories", "add MDX docs" +- **Output:** `src/components/**/*.stories.tsx` and `src/components/**/*.mdx` + --- ## Pipeline Flow @@ -181,6 +189,8 @@ Figma Design Canva Design OR canva-react-converter (Canva) → components pass tests (GREEN) | + +-- [Phase 4.5] storybook-story-generation → stories + MDX (non-blocking) + | v [Phase 5] visual-qa-verification → pixel-diff loop (max 5 iterations) | diff --git a/.claude/skills/figma-to-react-workflow/SKILL.md b/.claude/skills/figma-to-react-workflow/SKILL.md index 2d7fb05..659d18e 100644 --- a/.claude/skills/figma-to-react-workflow/SKILL.md +++ b/.claude/skills/figma-to-react-workflow/SKILL.md @@ -379,6 +379,32 @@ pnpm vitest run --reporter=verbose Iterate until all tests pass (Green phase of TDD). +### Step 2.7: Generate Storybook Stories (Non-Blocking) + +Once components are built and their unit tests pass, auto-generate Storybook +stories and MDX docs. Invoke the **storybook-story-generation** skill (or run the +script directly). This is **Phase 4.5** of the pipeline and is **non-blocking** — +a failure here logs a warning and the pipeline continues. + +```bash +# Generate .stories.tsx + .mdx for every component (skips ones that already have stories) +./scripts/generate-stories.sh + +# Preview without writing, or force-regenerate: +./scripts/generate-stories.sh --dry-run +./scripts/generate-stories.sh --force +``` + +The generator parses each component with a `ts-morph` AST and emits CSF3 stories +with prop-aware controls, one variant story per string-literal-union value, +`True`/`False` stories for booleans, action args for `on*` callbacks, and an MDX +autodocs page. Behavior is configured by `.claude/pipeline.config.json` → +`storybook`. See the storybook-story-generation skill for the full reference. + +When running under `parallel-orchestration`, this maps to the `storybook` phase +(`depends: [component-build]`, `blocking: false`) and runs alongside the visual +diff and dark-mode checks. + ## Phase 3: Verification After generation completes, invoke verification checks. @@ -650,6 +676,7 @@ This skill works with: - **design-token-lock skill** — Produces `design-tokens.lock.json` consumed by Phase 2 - **tdd-from-figma skill** — Produces test files that Phase 2 MUST satisfy (hard gate) - **e2e-test-generator skill** — Generates Playwright E2E tests in Phase 3.3 +- **storybook-story-generation skill** — Auto-generates Storybook stories + MDX docs in Phase 4.5 (non-blocking) - **figma-react-converter agent** — Generates React components during Phase 2 - **visual-qa-agent** — Performs screenshot comparison in Phase 3 - **accessibility-auditor agent** — Validates ARIA and keyboard navigation @@ -660,6 +687,7 @@ This skill works with: - **scripts/verify-tokens.sh** — Token integrity enforcement in quality gate - **scripts/verify-test-coverage.sh** — Test existence verification (TDD gate) - **scripts/cross-browser-test.sh** — Multi-browser screenshot capture +- **scripts/generate-stories.sh** — AST-based Storybook story + MDX generation (Phase 4.5) - **.claude/pipeline.config.json** — Thresholds, iteration limits, app type config --- diff --git a/.claude/skills/storybook-story-generation/SKILL.md b/.claude/skills/storybook-story-generation/SKILL.md new file mode 100644 index 0000000..254b8ed --- /dev/null +++ b/.claude/skills/storybook-story-generation/SKILL.md @@ -0,0 +1,222 @@ +--- +name: storybook-story-generation +description: Use after React components are built (Phase 4.5 of the Figma/Canva/screenshot pipeline) or whenever a project needs Storybook coverage — auto-generates .stories.tsx and .mdx docs from components via ts-morph AST parsing, with prop controls, variant stories, action args, and default args. Keywords: Storybook, generate stories, .stories.tsx, MDX docs, argTypes, controls, autodocs, CSF3, variant stories, action args, component documentation, story generation, ts-morph +--- + +# Storybook Story Generation — AST-Based Stories + MDX Docs + +## Purpose + +Auto-generate Storybook 8 (CSF3) stories and MDX documentation from built React +components. The generator parses each component's TypeScript source with a +`ts-morph` AST — not regex — so it can reliably extract prop types, string-literal +unions, default values, callback props, and JSDoc comments, then emit: + +- **`Component.stories.tsx`** — `Meta` with `tags: ['autodocs']`, prop-aware + `argTypes`/controls, a `Default` story seeded with destructured defaults, one + variant story per union value, `True`/`False` stories for booleans, action args + for callbacks, and optional responsive-viewport stories. +- **`Component.mdx`** — an autodocs page with `Meta`, `Canvas`, `Controls`, and + `ArgTypes` blocks, plus the component's JSDoc description and a `Canvas` per + variant. + +The skill wraps `scripts/generate-stories.sh` (a thin wrapper over +`scripts/generate-stories.js`). It is a **non-blocking** step: a failure never +fails the build. + +## When to Use + +- **Phase 4.5** of `/build-from-figma`, `/build-from-canva`, and + `/build-from-screenshot` — immediately after components are built and unit tests + pass, before/alongside visual QA (runs in parallel, non-blocking). +- Backfilling Storybook coverage for an existing component library. +- When the user asks to "generate Storybook stories", "add stories for these + components", "create autodocs", or "document components in Storybook". + +**Trigger phrases:** +- "Generate Storybook stories" +- "Auto-generate stories for my components" +- "Add MDX docs to Storybook" +- "Create stories with controls and variants" + +**Do NOT use for:** hand-authored interaction/`play()` tests (those belong to the +`react-testing-workflows` skill), or non-React output targets. + +## Inputs + +- **Required:** Built components under `src/components/**/*.tsx` (override with + `--src-dir`). Components must be **exported** and named with an uppercase first + letter (function, arrow-const, or default export). +- **Recommended:** A props `interface ComponentNameProps` — the generator keys off + this naming convention to build controls and variants. +- **Optional:** `.claude/pipeline.config.json` → `storybook` (thresholds and + toggles; see [Configuration](#configuration)). +- **Optional:** `tsconfig.json` — used by `ts-morph` when present; otherwise a + sensible in-memory compiler config is used. + +## Process + +### Step 1: Read configuration + +Load `.claude/pipeline.config.json` → `storybook` (falls back to defaults if the +file is missing or `autoGenerate` is unset). Relevant keys: `skipPatterns`, +`generateMdx`, `maxVariantsPerProp`, `includeResponsiveViewports`, `viewports` +(widths resolved from `visualDiff.breakpoints`). + +### Step 2: Scan for components + +Recursively walk `src/components`, collecting `.tsx` files while excluding +`*.test.tsx`, `*.stories.tsx`, `*.d.ts`, `index.tsx`, and the `node_modules`, +`__tests__`, and `__mocks__` directories. Files matching a `skipPatterns` glob are +skipped. Components that already have a `.stories.tsx` sibling are skipped unless +`--force` is passed. + +### Step 3: Extract prop metadata (AST) + +For each component the generator: +1. Finds the first exported uppercase component (function decl, exported + `const`, or default export). +2. Locates its `ComponentNameProps` interface. +3. For each prop, records: name, optionality, control type, union options, + JSDoc description, and whether it is a callback. +4. Reads default values from the parameter destructuring pattern + (`({ size = 'md' })` → `size: 'md'`). + +**Control mapping:** + +| Prop type | Control | Notes | +|-----------|---------|-------| +| `string` | `text` | | +| `number` | `number` | | +| `boolean` | `boolean` | also emits `True`/`False` variant stories | +| `'a' \| 'b' \| 'c'` (string-literal union) | `select` | `options` populated; one variant story per value | +| `on*` function (e.g. `onClick`) | action arg | `{ action: 'clicked' }` (past-tense of the event) | +| other / complex | `text` | falls back to `text`; adjust manually if needed | + +### Step 4: Generate `.stories.tsx` + +Emit CSF3 with `title: 'Components/'`, `tags: ['autodocs']`, +`argTypes`, a `Default` story (seeded with destructured defaults), variant stories +(capped at `maxVariantsPerProp` per prop), and viewport stories when +`includeResponsiveViewports` is enabled. + +```tsx +import type { Meta, StoryObj } from '@storybook/react'; +import { Badge } from './Badge'; + +const meta: Meta = { + title: 'Components/ui/Badge', + component: Badge, + tags: ['autodocs'], + argTypes: { + variant: { control: 'select', options: ['info', 'success', 'warning', 'error'] }, + onDismiss: { action: 'dismissed' }, + }, +}; +export default meta; +type Story = StoryObj; + +export const Default: Story = { args: { variant: 'info' } }; +export const Info: Story = { args: { variant: 'info' } }; +export const Success: Story = { args: { variant: 'success' } }; +// …one per union value +``` + +### Step 5: Generate `.mdx` (unless `--no-mdx` or `generateMdx: false`) + +Emit an autodocs page importing `@storybook/blocks`, referencing the sibling +`.stories`, and embedding the component's JSDoc description, the `Default` +`Canvas`, `Controls`, a `Canvas` per variant, and the full `ArgTypes` table. + +```mdx +import { Meta, Canvas, Controls, ArgTypes } from '@storybook/blocks'; +import * as Stories from './Badge.stories'; + + + +# Badge + +A status badge with semantic color variants. + + + + + +``` + +### Step 6: Run and report + +```bash +./scripts/generate-stories.sh # generate stories + MDX for all components +./scripts/generate-stories.sh --dry-run # report what would be written, write nothing +./scripts/generate-stories.sh --force # overwrite existing stories +./scripts/generate-stories.sh --no-mdx # stories only, skip MDX +./scripts/generate-stories.sh --json # machine-readable { generated, skipped, files } +``` + +Because this step is **non-blocking**, log the generated/skipped counts and +continue the pipeline even if generation fails. + +## CLI Reference + +| Flag | Default | Effect | +|------|---------|--------| +| `--src-dir ` | `src/components` | Component source directory to scan | +| `--config ` | `.claude/pipeline.config.json` | Pipeline config path | +| `--force` | off | Overwrite existing `.stories.tsx` files | +| `--dry-run` | off | Report only; write nothing | +| `--no-mdx` | off | Skip `.mdx` generation | +| `--json` | off | Emit JSON (suppresses human logs) | + +## Configuration + +`.claude/pipeline.config.json` → `storybook`: + +| Key | Default | Purpose | +|-----|---------|---------| +| `autoGenerate` | `true` | Enable/disable generation in the pipeline | +| `includeResponsiveViewports` | `true` | Add a viewport story per breakpoint | +| `viewports` | `["mobile","tablet","desktop"]` | Which breakpoints to emit (widths from `visualDiff.breakpoints`) | +| `skipPatterns` | `["**/index.ts","**/*.test.*","**/*.stories.*"]` | Globs to exclude | +| `generateMdx` | `true` | Emit `.mdx` docs alongside stories | +| `maxVariantsPerProp` | `10` | Cap variant stories per prop (prevents explosion) | + +## Output + +| File | Purpose | +|------|---------| +| `src/components/**/Component.stories.tsx` | CSF3 stories with controls, variants, actions | +| `src/components/**/Component.mdx` | Autodocs page (Meta/Canvas/Controls/ArgTypes) | + +## Common Mistakes + +- **No controls generated.** Props are declared as a `type` alias rather than an + `interface ComponentNameProps`. The generator detects the type but does not yet + expand its members — convert to an `interface` (or add controls manually). +- **Component skipped.** The export is lowercase, not exported, or the file is a + `*.test.tsx`/`index.tsx`. Ensure the component is exported with an uppercase name. +- **Stories not overwritten.** Existing `.stories.tsx` are preserved by design; pass + `--force` to regenerate. +- **`children`/complex props show a text control.** Non-primitive props fall back to + a `text` control — refine `argTypes` by hand where richer controls matter. +- **Action name looks odd.** Action args derive a past-tense label from the event + name (`onClick` → `clicked`, `onChange` → `changed`); rename the arg in the story + if a different label reads better. + +## Integration + +- **figma-to-react-workflow skill** — invokes this skill as Phase 4.5, right after + components are built and unit tests pass (non-blocking, in parallel with visual QA). +- **react-testing-workflows skill** — owns hand-authored `play()`/interaction tests; + this skill produces the base stories those can extend. +- **parallel-orchestration skill** — runs the `storybook` phase (depends on + `component-build`, `blocking: false`) alongside `visual-diff` and `dark-mode`. +- **scripts/generate-stories.sh** — bash wrapper; forwards all flags to the Node + generator. +- **scripts/generate-stories.js** — the `ts-morph` AST generator that does the work. +- **.claude/pipeline.config.json → storybook** — thresholds and toggles. + +--- + +**Skill Version:** 1.0.0 +**Last Updated:** 2026-07-01 diff --git a/CLAUDE.md b/CLAUDE.md index 6daba8d..741731c 100644 --- a/CLAUDE.md +++ b/CLAUDE.md @@ -18,7 +18,7 @@ The framework is designed for: project-root/ ├── .claude/ # Claude Code configuration │ ├── agents/ # 56 specialized agents -│ ├── skills/ # 23 React-specific skills +│ ├── skills/ # 24 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 @@ -238,7 +238,7 @@ Agents are invoked automatically based on task context. --- -### Skills (23 Total) +### Skills (24 Total) | Skill | Purpose | Triggers | |-------|---------|----------| @@ -247,6 +247,7 @@ Agents are invoked automatically based on task context. | design-token-lock | Extract + lock Figma values → lockfile | Phase 2 of /build-from-figma | | tdd-from-figma | Write tests FIRST, app-type-aware (Chrome ext, PWA) | Phase 3 of /build-from-figma | | e2e-test-generator | Generate Playwright E2E from build-spec (new) | Phase 6 of /build-from-figma | +| storybook-story-generation | Auto-generate Storybook stories + MDX from components (AST-based, non-blocking) | Phase 4.5 of /build-from-figma, "generate stories" | | react-component-development | Component patterns and best practices | "create component", "custom hook" | | react-testing-workflows | Vitest, RTL, Playwright, Storybook | "write tests", "test coverage" | | react-performance-optimization | Profiling, bundle analysis, Web Vitals | "performance", "bundle size" | @@ -617,7 +618,7 @@ node scripts/metrics-dashboard.js summary # Quick metrics summary --- -**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) +**Last Updated:** 2026-07-01 +**Architecture:** 56 agents, 24 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. diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index a37bd33..2c5c1a8 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -137,7 +137,7 @@ Because the bump is derived from commit history, **conventional commit messages ## Claude Code Agents -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. +Aurelius includes 56 specialized Claude Code agents and 24 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. diff --git a/README.md b/README.md index c34c9f5..322c4df 100644 --- a/README.md +++ b/README.md @@ -5,7 +5,7 @@ A Claude Code-integrated multi-framework app development framework with TypeScri ## What This Framework Provides - **56 Custom Agents** -- Specialized AI agents for engineering, design, testing, marketing, operations, and more -- **23 Development Skills** -- Automated workflows for Figma/Canva/screenshot/conversation conversion, TDD, E2E testing, visual QA, state management, forms, auth, animation, SEO, and more +- **24 Development Skills** -- Automated workflows for Figma/Canva/screenshot/conversation conversion, TDD, E2E testing, visual QA, Storybook generation, state management, forms, auth, animation, SEO, and more - **10-Phase Design-to-React Pipeline** -- Convert Figma or Canva designs into fully working, tested React apps with a single command -- or just describe the app and let `/build-from-conversation` generate the Figma design first - **App-Type Awareness** -- Tailored build and test strategies for web apps, Chrome extensions, and PWAs - **Testing Stack** -- Vitest, React Testing Library, Playwright (cross-browser), Storybook, and pixel-diff visual QA @@ -87,7 +87,7 @@ project-root/ │ └── react-development/ # Development standards ├── .claude/ # Claude Code configuration │ ├── agents/ # 56 custom agents -│ ├── skills/ # 23 development skills +│ ├── skills/ # 24 development skills │ ├── commands/ # Slash commands (/build-from-figma, /lint, /test) │ ├── pipeline.config.json # Pipeline thresholds and app-type definitions │ ├── CUSTOM-AGENTS-GUIDE.md # Agent catalog @@ -178,7 +178,7 @@ Agents are auto-selected by Claude Code based on your task: Full catalog: `.claude/CUSTOM-AGENTS-GUIDE.md` -## 23 Development Skills +## 24 Development Skills ### Pipeline Skills @@ -222,6 +222,18 @@ Full catalog: `.claude/CUSTOM-AGENTS-GUIDE.md` |---|-------|---------| | 22 | export-design-system | Export components + tokens as a publishable pnpm workspace | +### InDesign Skills + +| # | Skill | Purpose | +|---|-------|---------| +| 23 | indesign-conversion | Convert an InDesign IDML/PDF into React components, design tokens, and stories | + +### Storybook Skills + +| # | Skill | Purpose | +|---|-------|---------| +| 24 | storybook-story-generation | Auto-generate Storybook stories + MDX docs from built components (Phase 4.5, non-blocking) | + Full catalog: `.claude/skills/README.md` ## Scripts @@ -324,7 +336,7 @@ Details: `.claude/PLUGINS-REFERENCE.md` |----------|----------|-------------| | **Developer onboarding** | `docs/onboarding/README.md` | Start here -- quickstart, architecture, configuration, troubleshooting | | Quickstart guide | `docs/onboarding/quickstart.md` | Clone to running project in 10 minutes | -| Architecture overview | `docs/onboarding/architecture.md` | All 56 agents, 23 skills, 4 pipelines, and how they connect | +| Architecture overview | `docs/onboarding/architecture.md` | All 56 agents, 24 skills, 4 pipelines, and how they connect | | Pipeline configuration | `docs/onboarding/pipeline-configuration.md` | Every setting in pipeline.config.json explained | | Troubleshooting FAQ | `docs/onboarding/troubleshooting.md` | Common issues and solutions | | Project instructions | `CLAUDE.md` | Full project config for Claude Code | @@ -334,7 +346,7 @@ Details: `.claude/PLUGINS-REFERENCE.md` | Conversation pipeline guide | `docs/conversation-to-app/README.md` | Conversational app creation via generated Figma designs | | InDesign pipeline guide | `docs/pipelines/indesign.md` | Convert exported IDML/PDF into React components, tokens, and Storybook stories | | Agent catalog | `.claude/CUSTOM-AGENTS-GUIDE.md` | All 56 agents with use cases | -| Skills catalog | `.claude/skills/README.md` | All 23 skills with triggers | +| Skills catalog | `.claude/skills/README.md` | All 24 skills with triggers | | Plugin reference | `.claude/PLUGINS-REFERENCE.md` | Plugin configuration and commands | | Scripts reference | `scripts/README.md` | All scripts with usage examples | | Templates reference | `templates/README.md` | Starter configs and how to use them | diff --git a/docs/onboarding/README.md b/docs/onboarding/README.md index 94bbb3c..3dbdcd4 100644 --- a/docs/onboarding/README.md +++ b/docs/onboarding/README.md @@ -11,7 +11,7 @@ This guide will get you productive with the framework quickly, whether you are b | Document | What You Will Learn | |----------|-------------------| | [Quickstart Guide](quickstart.md) | Clone, install, create your first project, and run your first pipeline in under 10 minutes | -| [Architecture Overview](architecture.md) | How the 56 agents, 23 skills, 4 pipelines, and 8 hooks fit together | +| [Architecture Overview](architecture.md) | How the 56 agents, 24 skills, 4 pipelines, and 8 hooks fit together | | [Pipeline Configuration](pipeline-configuration.md) | Every setting in `pipeline.config.json` explained, with examples | | [Troubleshooting FAQ](troubleshooting.md) | Common issues, error messages, and how to resolve them | | [Framework Guides](../guides/README.md) | Deep dives into design tokens, visual QA, caching, hooks, error recovery, agent creation, and framework-specific workflows | @@ -53,7 +53,7 @@ Optional (for specific workflows): - [Main README](../../README.md) -- Project overview - [Contributing Guide](../../CONTRIBUTING.md) -- Branch naming, PR process, commit conventions - [Agent Catalog](../../.claude/CUSTOM-AGENTS-GUIDE.md) -- All 56 agents with use cases -- [Skills Catalog](../../.claude/skills/README.md) -- All 23 skills with triggers +- [Skills Catalog](../../.claude/skills/README.md) -- All 24 skills with triggers - [Plugin Reference](../../.claude/PLUGINS-REFERENCE.md) -- Installed plugins and commands - [Pipeline Config](../../.claude/pipeline.config.json) -- Thresholds and app-type definitions - [React Development Standards](../react-development/README.md) -- TypeScript, Tailwind, testing conventions diff --git a/docs/onboarding/architecture.md b/docs/onboarding/architecture.md index 4d4721a..7ae6621 100644 --- a/docs/onboarding/architecture.md +++ b/docs/onboarding/architecture.md @@ -15,7 +15,7 @@ This document explains how Aurelius is structured and how its components work to ┌────────────────────┼─────────────────────┐ │ │ │ ┌───────▼──────┐ ┌────────▼────────┐ ┌────────▼────────┐ - │ 56 Agents │ │ 23 Skills │ │ 4 Plugins │ + │ 56 Agents │ │ 24 Skills │ │ 4 Plugins │ │ (specialized │ │ (workflow │ │ (extensions: │ │ task workers) │ │ automation) │ │ memory, git, │ └───────┬──────┘ └────────┬────────┘ │ superpowers) │ @@ -144,7 +144,7 @@ Agents are specialized Claude Code sub-processes that handle complex, multi-step --- -## Skills (23 Total) +## Skills (24 Total) Skills are automated workflows triggered by slash commands or keyword detection. Unlike agents (which are general-purpose workers), skills encode specific multi-step processes. @@ -161,6 +161,7 @@ Skills are automated workflows triggered by slash commands or keyword detection. | `canva-token-inference` | Phase 2 (Canva/Screenshot) | AI-powered token extraction with confidence scoring | | `tdd-from-figma` | Phase 3 | Writes failing tests for every component (RED phase, app-type-aware) | | `figma-to-react-workflow` | Phase 4 | Orchestrates component generation with enforced TDD and visual QA | +| `storybook-story-generation` | Phase 4.5 | Auto-generates Storybook stories + MDX from components via ts-morph AST (non-blocking) | | `e2e-test-generator` | Phase 6 | Generates Playwright E2E tests (web app, Chrome extension, PWA) | | `visual-qa-verification` | Phase 5 | Automated pixel-diff using pixelmatch, up to 5 iterations | | `parallel-orchestration` | Phases 4-9 | Concurrent phase execution with dependency graph | diff --git a/docs/onboarding/quickstart.md b/docs/onboarding/quickstart.md index c874c51..8ec4479 100644 --- a/docs/onboarding/quickstart.md +++ b/docs/onboarding/quickstart.md @@ -188,7 +188,7 @@ The pipeline auto-detects the framework from `package.json` if `outputTarget` is Aurelius/ ├── .claude/ │ ├── agents/ # 56 specialized agents -│ ├── skills/ # 23 development skills +│ ├── skills/ # 24 development skills │ ├── commands/ # Slash commands (/build-from-figma, /lint, /test) │ ├── hooks/ # Hook scripts (8 automated hooks) │ ├── pipeline.config.json # All pipeline thresholds and behavior diff --git a/docs/react-development/README.md b/docs/react-development/README.md index 45647f3..24f656f 100644 --- a/docs/react-development/README.md +++ b/docs/react-development/README.md @@ -176,7 +176,7 @@ project-root/ ├── docs/ # Documentation └── .claude/ # Claude Code configuration ├── agents/ # 56 custom agents - ├── skills/ # 23 development skills + ├── skills/ # 24 development skills └── pipeline.config.json ``` @@ -203,7 +203,7 @@ pnpm build - `docs/figma-to-react/README.md` -- Figma-to-React conversion pipeline - `docs/canva-to-react/README.md` -- Canva-to-React conversion pipeline -- `.claude/skills/README.md` -- Skills catalog (23 skills) +- `.claude/skills/README.md` -- Skills catalog (24 skills) - `.claude/CUSTOM-AGENTS-GUIDE.md` -- Agent catalog (56 agents) - `.claude/PLUGINS-REFERENCE.md` -- Plugin reference - `scripts/README.md` -- Scripts reference