Skill Claude Code
Animation patterns for React — Framer Motion, CSS transitions, page transitions, micro-interactions, scroll-driven animations, and reduced-motion accessibility.
not rated 8 21d ago A 31 tokens
original MIT
8Stars on the repository
96Mods indexed here, across every type
21d agoLast push, which is what freshness is scored on
MITLicence, which decides whether bodies are shown
auth-flows
02Skill Claude Code
Authentication patterns for React apps — Auth.js (NextAuth), Clerk, Supabase Auth. Covers session management, protected routes, role-based access, and OAuth flows.
not rated 8 21d ago A 37 tokens
original MIT
canva-intake
03Skill Claude Code
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 interview…
not rated 8 21d ago A 66 tokens
original MIT
Skill Claude Code
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, color extraction…
not rated 8 21d ago A 63 tokens
original MIT
Skill Claude Code
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. Entry point (Phase C0)…
not rated 8 21d ago A 98 tokens
original MIT
Skill Claude Code
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 generatefigmadesign tool. Outputs a Figma URL that…
not rated 8 21d ago A 122 tokens
original MIT
Skill Claude Code
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, Tailwind config…
not rated 8 21d ago A 70 tokens
original MIT
Skill Claude Code
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 tests, browser…
not rated 8 21d ago A 77 tokens
original MIT
Skill Claude Code
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 versioning, and a properly…
not rated 8 21d ago A 102 tokens
original MIT
figma-intake
10Skill Claude Code
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.
not rated 8 21d ago A 60 tokens
original MIT
Skill Claude Code
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, component library, TDD…
not rated 8 21d ago A 85 tokens
original MIT
Skill Claude Code
Form patterns with React Hook Form + Zod validation. Covers typed forms, field arrays, multi-step wizards, server actions, and accessible error handling.
not rated 8 21d ago A 35 tokens
original MIT
Skill Claude Code
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…
not rated 8 21d ago A 99 tokens
original MIT
Skill Claude Code
Concurrent phase runner that dispatches independent pipeline phases in parallel, respecting dependency graphs and resource constraints.
not rated 8 21d ago A 23 tokens
original MIT
Skill Claude Code
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 reader, focus…
not rated 8 21d ago A 72 tokens
original MIT
Skill Claude Code
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, useReducer…
not rated 8 21d ago A 68 tokens
original MIT
Skill Claude Code
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.memo, useMemo…
not rated 8 21d ago A 77 tokens
original MIT
Skill Claude Code
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, integration test…
not rated 8 21d ago A 76 tokens
original MIT
Skill Claude Code
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 spec, screenshot…
not rated 8 21d ago A 84 tokens
original MIT
seo-metadata
20Skill Claude Code
SEO patterns for React apps — Next.js Metadata API, Open Graph, structured data (JSON-LD), sitemap generation, and Core Web Vitals optimization.
not rated 8 21d ago A 35 tokens
original MIT
Skill Claude Code
State management patterns for React apps — Zustand, TanStack Query, Context, URL state. Guides architecture decisions for local, global, server, and URL state.
not rated 8 21d ago A 35 tokens
original MIT
Skill Claude Code
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…
not rated 8 21d ago A 115 tokens
original MIT
Skill Claude Code
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 development, Figma tests…
not rated 8 21d ago A 92 tokens
original MIT
Skill Claude Code
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, compare to Figma…
not rated 8 21d ago A 81 tokens
original MIT
At most 3 mods per repository are shown here, and a mod shipped inside a plugin is left to that plugin's page — the rest are on their repository pages: