A community-driven registry for Claude, Cursor, Windsurf, Cline & more. Not affiliated with Anthropic.
Are you the author? Sign in to claim
Claude Code-integrated React App Development Framework with 53 agents, Figma-to-React pipeline, and full product lifecyc
A Claude Code-integrated multi-framework app development framework with TypeScript, Tailwind CSS, and automated design-to-code pipelines.
/build-from-conversation generate the Figma design first# Clone the repository
git clone <repository-url>
cd aurelius
# Initialize a new project (Next.js or Vite)
./scripts/setup-project.sh my-app --vite # or --next
# Install dependencies
cd app && pnpm install
# Start development
pnpm dev
/build-from-figma https://figma.com/file/abc123/My-Design
This runs a 10-phase autonomous pipeline:
[0] Token Sync → Drift check (conditional, if lockfile exists)
[1] Intake → Figma discovery + build-spec.json
[2] Token Lock → Design tokens lockfile + Tailwind config
[3] TDD (Gate) → Failing tests written first (mandatory)
[4] Build → React components that pass the tests
[5] Visual Diff → Pixel-level comparison loop (max 5 iterations, 2% threshold)
[6] E2E Tests → Playwright tests (app-type-aware)
[7] Cross-Browser→ Firefox/WebKit screenshots (non-blocking)
[8] Quality Gate → Coverage + TypeScript + build + tokens + Lighthouse + mutation score (opt-in)
[8.5] Responsive → Screenshots at 5 breakpoints (non-blocking)
[9] Report → Build report with diff images + component docs
project-root/
├── app/ # Your application (generated by pipeline or setup script)
├── scripts/ # Automation scripts
│ ├── setup-project.sh # Initialize new project
│ ├── lint-and-format.sh # ESLint + Prettier
│ ├── run-tests.sh # Vitest with coverage
│ ├── check-types.sh # TypeScript type checking
│ ├── check-bundle-size.sh # Bundle size analysis
│ ├── check-accessibility.sh # a11y scanning
│ ├── verify-tokens.sh # Design token enforcement
│ ├── verify-test-coverage.sh # Component test verification
│ ├── visual-diff.js # Pixel-level screenshot comparison
│ ├── cross-browser-test.sh # Playwright multi-browser
│ ├── setup-playwright.sh # One-time browser setup
│ ├── check-dead-code.sh # Dead code detection (knip)
│ ├── check-security.sh # Dependency audit + anti-patterns
│ ├── generate-api-client.sh # OpenAPI → typed client
│ ├── check-responsive.sh # Responsive screenshots
│ ├── check-dark-mode.sh # Dark mode verification
│ ├── sync-tokens.sh # Token drift detection
│ ├── generate-stories.sh # Storybook story generation
│ └── generate-component-docs.sh # Component documentation
├── templates/ # Starter configs
│ ├── shared/ # ESLint, Prettier, Tailwind, TS, Vitest
│ ├── nextjs/ # Next.js config
│ ├── vite/ # Vite config
│ └── chrome-extension/ # Playwright E2E fixtures for extensions
├── docs/ # Documentation
│ ├── figma-to-react/ # Figma pipeline guide
│ ├── canva-to-react/ # Canva pipeline guide
│ └── react-development/ # Development standards
├── .claude/ # Claude Code configuration
│ ├── agents/ # 55 custom agents
│ ├── skills/ # 22 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
│ └── PLUGINS-REFERENCE.md # Plugin reference
├── CLAUDE.md # Claude Code project instructions
└── README.md # This file
/build-from-canva https://www.canva.com/design/DAGxyz.../My-Design
Same 12-phase pipeline as Figma, with AI-powered token inference:
/build-from-conversation a minimal analytics dashboard with auth and dark mode
No design file needed -- describe the app and the pipeline designs it first:
build-spec.json + design-brief.jsongenerate_figma_design)/build-from-figma, which runs unchanged (figma-intake fast-paths the interview)The /build-from-figma command takes a Figma URL and autonomously builds a working React application through 10 phases. Key enforcement rules:
pixelmatch-based comparison, not manual eyeballing| App Type | Detection | E2E Strategy | Special Handling |
|---|---|---|---|
| Web App | Default | Page navigation, forms, responsive | Standard Playwright |
| Chrome Extension | manifest.json with manifest_version | Extension load, popup, storage, content scripts | Persistent browser context with --load-extension |
| PWA | manifest.json with start_url | Install prompt, offline fallback | Service worker and offline tests |
All thresholds and behavior are configurable in .claude/pipeline.config.json:
Agents are auto-selected by Claude Code based on your task:
| 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, vue-converter, svelte-converter, react-native-converter, conversation-designer, asset-cataloger |
| 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 |
| Project Mgmt | 3 | studio-producer, project-shipper, experiment-tracker |
| Operations | 5 | analytics-reporter, infrastructure-maintainer, legal-compliance-checker |
| Other | 5 | docusaurus-expert, agent-expert, command-expert, joker, studio-coach |
Full catalog: .claude/CUSTOM-AGENTS-GUIDE.md
| # | Skill | Purpose |
|---|---|---|
| 1 | figma-intake | Figma discovery + build-spec.json generation |
| 2 | design-token-lock | Extract and lock design tokens from Figma |
| 3 | tdd-from-figma | Write failing tests before components (app-type-aware) |
| 4 | figma-to-react-workflow | Generate components that pass the tests |
| 5 | visual-qa-verification | Pixel-diff comparison loop with region analysis |
| 6 | e2e-test-generator | Generate Playwright E2E tests (app-type-aware) |
| 7 | parallel-orchestration | Concurrent phase execution with dependency graph |
| # | Skill | Purpose |
|---|---|---|
| 8 | canva-intake | Canva design discovery + build-spec.json generation |
| 9 | canva-token-inference | AI-powered token extraction from Canva/screenshot sources |
| 10 | screenshot-intake | URL/screenshot capture + vision-based discovery |
| 11 | conversation-intake | Conversational interview → build-spec.json + design-brief.json |
| 12 | design-brief-to-figma | Generate a real Figma file from the design brief (HTML-mockup capture) |
| # | Skill | Purpose |
|---|---|---|
| 13 | react-component-development | Component patterns, hooks, composition |
| 14 | react-testing-workflows | Vitest, RTL, Playwright, Storybook |
| 15 | react-performance-optimization | Profiling, bundle analysis, Web Vitals |
| 16 | react-accessibility | WCAG 2.1 AA patterns for React |
| 17 | state-management | Zustand, TanStack Query, URL state architecture |
| 18 | form-handling | React Hook Form + Zod: typed forms, wizards |
| 19 | auth-flows | Auth.js, Clerk, Supabase Auth, RBAC |
| 20 | animation-motion | Framer Motion, CSS transitions, reduced-motion a11y |
| 21 | seo-metadata | Next.js Metadata API, JSON-LD, OG images, sitemaps |
| # | Skill | Purpose |
|---|---|---|
| 22 | export-design-system | Export components + tokens as a publishable pnpm workspace |
Full catalog: .claude/skills/README.md
./scripts/lint-and-format.sh # ESLint + Prettier
./scripts/check-types.sh # TypeScript type checking
./scripts/check-bundle-size.sh # Bundle size analysis
./scripts/check-accessibility.sh # Automated a11y scanning
./scripts/run-tests.sh # Vitest unit/component tests
./scripts/cross-browser-test.sh # Playwright multi-browser screenshots
./scripts/setup-playwright.sh # One-time browser engine setup
./scripts/verify-tokens.sh # Catch hardcoded design values
./scripts/verify-test-coverage.sh # Ensure every component has tests
node scripts/visual-diff.js --batch actual/ expected/ --json # Pixel diff
Full reference: scripts/README.md
Starter configuration files for new projects:
| Directory | Contents |
|---|---|
templates/shared/ | ESLint, Prettier, Tailwind, TypeScript, Vitest configs |
templates/nextjs/ | Next.js config |
templates/vite/ | Vite config |
templates/chrome-extension/ | Playwright E2E fixtures for Chrome extensions |
Full reference: templates/README.md
The framework uses four MCP (Model Context Protocol) servers for Figma access, browser automation, and testing:
| Server | Purpose | Required For |
|---|---|---|
| Figma Desktop MCP | Read designs, extract tokens, capture screenshots from Figma | Phases 1-2, 5 |
| Figma Remote MCP | Fallback remote Figma access | Phases 1-2, 5 |
| Chrome DevTools MCP | Screenshots, Lighthouse audits, DOM inspection | Phases 5, 7-8 |
| Canva AI Connector | Search, export, interact with Canva designs | Phases 1-2 (Canva) |
| Playwright MCP | Cross-browser testing (Chromium, Firefox, WebKit) | Phases 6-7 |
MCP servers are configured in .claude/settings.json. Figma Desktop MCP requires the Figma desktop app running locally.
episodic-memory # Persistent memory across sessions
commit-commands # Git workflow automation (/commit, /commit-push-pr)
superpowers # Advanced development workflows (TDD, planning, debugging)
ai-taskmaster # Task management (local)
GitHub integration via gh CLI (not a plugin).
Details: .claude/PLUGINS-REFERENCE.md
| Document | Location | Description |
|---|---|---|
| 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 55 agents, 22 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 |
| Figma pipeline guide | docs/figma-to-react/README.md | Pipeline overview and troubleshooting |
| React standards | docs/react-development/README.md | TypeScript, Tailwind, testing conventions |
| Canva pipeline guide | docs/canva-to-react/README.md | Canva pipeline overview and troubleshooting |
| Conversation pipeline guide | docs/conversation-to-app/README.md | Conversational app creation via generated Figma designs |
| Agent catalog | .claude/CUSTOM-AGENTS-GUIDE.md | All 55 agents with use cases |
| Skills catalog | .claude/skills/README.md | All 22 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 |
| Pipeline config | .claude/pipeline.config.json | Thresholds, app types, quality gates |
| Agent naming guide | .claude/AGENT-NAMING-GUIDE.md | Conventions for creating new agents |
| Project | Description |
|---|---|
| AI SEO Copilot (Chrome) | Free, open-source Chrome extension for AI-powered SEO analysis. Built with React 19, TypeScript, and Vite. The Chrome extension pipeline in Aurelius was battle-tested against this project. Install from Chrome Web Store |
| AI SEO Copilot (Webflow) | The original Webflow app with ~20,000 installs |
| Flavian | Claude Code-integrated WordPress development framework with FSE block theme tools and Figma-to-WordPress pipelines |
| Nerva | Claude Code-integrated API and backend development framework with Hono, Cloudflare Workers, and Drizzle ORM |
| Claudius | Embeddable AI chat widget powered by Claude. React + TypeScript + Cloudflare Workers |
MIT
MCP server integration for DaVinci Resolve Studio
Run Claude Code as an MCP server so any agent can delegate coding tasks to it
@microsoft✓ OfficialBrowser automation using accessibility snapshots instead of screenshots
A Jetbrains IDE IntelliJ plugin aimed to provide coding agents the ability to leverage intelliJ's indexing of the codeba