aurelius

Plugin aurelius from marketplace aurelius in PMDevSolutions/Aurelius. Commands read from the repo's manifest — 4 days ago.

Skills (31)

• animation-motion

  Animation patterns for React — Framer Motion, CSS transitions, page transitions, micro-interactions, scroll-driven animations, and reduced-motion accessibility. Keywords: animation, framer motion, transition, micro-interaction, page transition, scroll animation, motion, animate

• auth-flows

  Authentication patterns for React apps — Auth.js (NextAuth), Clerk, Supabase Auth. Covers session management, protected routes, role-based access, and OAuth flows. Keywords: authentication, auth, login, sign in, sign up, session, protected route, authorization, OAuth, clerk, supabase auth, nextauth

• build-from-canva

  Autonomous Canva-to-working-app pipeline. Canva intake, AI token inference with user confirmation, failing tests first, per-component build lanes, pixel-diff visual QA against the Canva exports, E2E, quality gate and build report. Use when the user gives a Canva design URL and wants a working, teste

• build-from-conversation

  Talk-to-build pipeline with no design file. A bounded interview produces a build spec and design brief, a real Figma file is generated from HTML mockups, and the run hands off to /build-from-figma. Use when the user describes an app in words and has no Figma, Canva or screenshot to start from. Keywo

• build-from-figma

  Autonomous Figma-to-working-app pipeline. Intake, design-token lockfile, failing tests first, per-component build lanes, pixel-diff visual QA, E2E, cross-browser, quality gate and build report, for React, Vue, Svelte or React Native. Use when the user gives a Figma URL and wants a working, tested ap

• build-from-screenshot

  Autonomous screenshot- or URL-to-working-app pipeline for React, Vue, Svelte or React Native. Captures or reads the screenshots, infers tokens with user confirmation, writes failing tests first, builds components in per-component lanes, and verifies against the source with pixel diffs, E2E and the q

• canva-intake

  Structured discovery for Canva designs. Uses Canva AI Connector MCP to export screenshots, Claude vision to analyze page structure and components, and targeted user questions to produce a build-spec.json. Entry point for /build-from-canva pipeline. Keywords: Canva intake, build spec, Canva discovery

• canva-token-inference

  AI-powered design token extraction from Canva screenshots. Uses Claude vision to infer colors, typography, spacing, and effects with confidence scoring. Presents tokens for user confirmation before locking. Keywords: Canva tokens, token inference, design tokens, Canva extraction, AI token detection,

• ci

  Run the same checks as /verify-all non-interactively, with JSON output and an exit code that reflects overall pass or fail, for CI pipelines, pre-merge gates and automation. Keywords: ci, json, pre-merge, automation, verify

• conversation-intake

  Structured interview that turns a natural-language app description into a build-spec.json and a design-brief.json — no design file required. Auto-discovers local project context, asks at most 7 targeted questions, and dispatches the conversation-designer agent to make concrete design decisions. Entr

• design-brief-to-figma

  Generates a real Figma file from a design-brief.json. Renders the brief as one high-fidelity HTML mockup per page (via the conversation-designer agent), serves them locally, creates a new Figma file, and captures each mockup into it with the Figma MCP generate_figma_design tool. Outputs a Figma URL

• design-token-lock

  Extracts exact design values from Figma and writes a lockfile that becomes the single source of truth for colors, typography, spacing, and text content. Generates tailwind.config.ts and tokens.css from the lockfile. Keywords: design tokens, lockfile, Figma variables, token extraction, style drift, T

• e2e-test-generator

  Generates Playwright E2E tests from build-spec.json with app-type-aware templates for web apps, Chrome extensions, and PWAs. Reads e2e flows from the build spec and produces runnable test files. Keywords: E2E tests, Playwright, end-to-end testing, chrome extension testing, PWA testing, integration t

• export-design-system

  Exports generated components + design-tokens.lock.json as a publishable pnpm workspace. Generates a framework-agnostic tokens package and a framework-specific component library (React/Vue/Svelte via Vite library mode, React Native via tsc). Includes Tailwind preset, ThemeProvider, Changesets version

• figma-intake

  Structured interview that auto-discovers Figma file structure, project context, and asks 3-5 targeted questions to produce a build-spec.json. Entry point for the autonomous build pipeline. Keywords: Figma intake, build spec, project discovery, figma interview, build plan

• figma-to-react-workflow

  Orchestrates end-to-end Figma-to-React conversion pipeline with enforced TDD, automated pixel-diff visual QA, E2E testing, and app-type awareness (web apps, Chrome extensions, PWAs). Keywords: Figma to React, design tokens, autonomous component generation, Figma conversion, Tailwind config, componen

• form-handling

  Form patterns with React Hook Form + Zod validation. Covers typed forms, field arrays, multi-step wizards, server actions, and accessible error handling. Keywords: form, form handling, react hook form, zod, validation, form validation, multi-step form, wizard

• indesign-conversion

  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

• lint

  Run ESLint and Prettier across the project, auto-fix what they can, type-check, and report what is left. Use when asked to lint, format or clean up code style. Keywords: lint, format, eslint, prettier, code style

• parallel-orchestration

  Concurrent phase runner for the build pipelines. Dispatches Phases 4.5-9 in parallel after the component-lanes workflow, or all of Phases 4-9 when workflows are unavailable, respecting the dependency graph and resource constraints in pipeline.config.json

• react-accessibility

  Accessibility patterns for React applications. Covers ARIA patterns for common components, eslint-plugin-jsx-a11y, keyboard navigation, focus management, screen reader testing, color contrast validation, and accessible forms. Keywords: accessibility, a11y, WCAG, ARIA, keyboard navigation, screen rea

• react-component-development

  Component patterns and best practices for React with TypeScript. Covers functional components, custom hooks, state management, composition patterns, error boundaries, server components, and form handling. Keywords: React component, hooks, state management, TypeScript component, custom hooks, Zustand

• react-performance-optimization

  Performance profiling and optimization for React applications. Covers React Profiler, bundle analysis, code splitting, memoization patterns, image optimization, Core Web Vitals, and server-side rendering performance. Keywords: performance, bundle size, code splitting, web vitals, profiling, React.me

• react-testing-workflows

  Testing strategy and execution for React applications. Covers Vitest configuration, React Testing Library patterns, custom hook testing, Playwright E2E, Storybook stories and play functions, and coverage reporting. Keywords: test, vitest, testing library, playwright, storybook, coverage, unit test,

• screenshot-intake

  Use when a user provides a URL or screenshot files and wants to build an app from them, or when starting /build-from-screenshot. Captures pages via Chrome DevTools or Playwright MCP, analyzes structure with Claude vision, and produces build-spec.json. Keywords: screenshot intake, URL capture, build

• seo-metadata

  SEO patterns for React apps — Next.js Metadata API, Open Graph, structured data (JSON-LD), sitemap generation, and Core Web Vitals optimization. Keywords: SEO, metadata, open graph, og image, sitemap, structured data, json-ld, meta tags, social sharing

• state-management

  State management patterns for React apps — Zustand, TanStack Query, Context, URL state. Guides architecture decisions for local, global, server, and URL state. Keywords: state management, zustand, tanstack query, react query, global state, server state, data fetching, caching

• storybook-story-generation

  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: S

• tdd-from-figma

  Writes failing tests FIRST from Figma structure and the design token lockfile, then implementation makes them pass. Per-component TDD cycle using exact values from design-tokens.lock.json. App-type-aware: generates Chrome extension, PWA, and web app test templates. Keywords: TDD, test-driven develop

• verify-all

  Run every local quality check (lint and format, types, tests, accessibility, design tokens, dead code, security, bundle size, agent plugins, renderers, Claude Code conformance) through ./scripts/verify-all.sh and report a pass/fail summary. Use before opening a pull request or calling work done. Key

• visual-qa-verification

  Automated visual QA with pixel-level diff comparison, iterative fix loop, and cross-browser verification. Uses pixelmatch for programmatic screenshot comparison with region-based analysis. Covers responsive checks, Lighthouse audits, and accessibility validation. Keywords: verify app, visual QA, com

MCP servers (3)

• figma-desktop

  connects to: http://127.0.0.1:3845/mcp

• figma

  connects to: https://mcp.figma.com/mcp

• playwright

  runs: cmd /c npx @playwright/mcp@latest --headless

Similar plugins