aliafsahnoudeh/figma-to-code-claude-pipeline
Plugin Claude Code
Claude Code pipeline from the figma-to-code-claude-pipeline demo: Figma-to-code agents, design-system checks, and review/test/commit workflows, packaged as an installable plugin.
aliafsahnoudeh/figma-to-code-claude-pipeline
Hook Claude Code
Runs after a tool call finishes for Write and Edit tool calls, running an inline shell check. From aliafsahnoudeh/figma-to-code-claude-pipeline.
aliafsahnoudeh/figma-to-code-claude-pipeline
Settings file Claude Code
MCP configuration declaring 1 server: playwright.
aliafsahnoudeh/figma-to-code-claude-pipeline
Instructions file
Claude Code instructions for aliafsahnoudeh/figma-to-code-claude-pipeline, covering claude.md, repository overview, commands, backend (backend/) and frontend (web/).
aliafsahnoudeh/figma-to-code-claude-pipeline
Plugin Claude Code
The TaskFlow Figma-to-code pipeline as a plugin: figma-impl and design-system agents, code-review/test/commit/PR skills, an .env read-guard, prettier + tsc edit hooks, and the Figma + Playwright MCP servers.
aliafsahnoudeh/figma-to-code-claude-pipeline
MCP server Claude CodeCodexCursor
Lets the agent drive a real browser: open pages, click, type, take screenshots and read the accessibility tree, using Playwright. Runs locally from the @playwright/mcp npm package.
aliafsahnoudeh/figma-to-code-claude-pipeline
MCP server Claude CodeCodexCursor
Give your coding agent access to your Figma data. Implement designs in any framework in one-shot. Runs locally from the figma-developer-mcp npm package.
aliafsahnoudeh/figma-to-code-claude-pipeline
Agent
Scaffolds a new in-memory FastAPI resource in backend/ — Pydantic schemas, router, store entry, and pytest tests. Use when adding a new resource to the TaskFlow demo API.
aliafsahnoudeh/figma-to-code-claude-pipeline
Agent
Reviews code changes against project conventions — backend (Python/FastAPI), frontend (React/Next.js/Design System), and Design System (MUI wrappers/tokens). Use after writing or modifying code, before committing or opening a PR.
aliafsahnoudeh/figma-to-code-claude-pipeline
Agent
Quick scan of frontend code for Design System compliance — catches direct MUI imports, hardcoded colors, and custom UI components that should use @taskflow/components. Use on any web/ changes.
aliafsahnoudeh/figma-to-code-claude-pipeline
Agent
Scaffolds a new component in the TaskFlow Design System — wraps MUI with a curated API, forwardRef, TypeScript props interface, and Storybook story. Use when adding a new component to @taskflow/components.
aliafsahnoudeh/figma-to-code-claude-pipeline
Agent
Implements UI features from Figma designs with pixel-perfect accuracy. Extracts real design tokens from Figma, builds with the TaskFlow Design System, and visually verifies the result using Playwright screenshots. Use when given a Figma URL or asked to implement a design.
aliafsahnoudeh/figma-to-code-claude-pipeline
Hook
Runs before the agent uses a tool for Read and Grep tool calls, executing read_hook.js via node. From aliafsahnoudeh/figma-to-code-claude-pipeline.
aliafsahnoudeh/figma-to-code-claude-pipeline
Skill Claude CodeCodex
Audit frontend dependencies (web + design-system), update outdated packages, and run tests to verify nothing breaks.
aliafsahnoudeh/figma-to-code-claude-pipeline
Skill Claude CodeCodex
Create atomic git commits following Conventional Commits with scope derived from branch name.
aliafsahnoudeh/figma-to-code-claude-pipeline
Skill Claude CodeCodex
Set up the TaskFlow demo monorepo locally — installs deps for backend, design-system, and web, then runs init-claude.js. Use when a new developer clones the repo.
aliafsahnoudeh/figma-to-code-claude-pipeline
Skill Claude CodeCodex
Create a pull request with project conventions, summarising all commits since diverging from main.
aliafsahnoudeh/figma-to-code-claude-pipeline
Skill Claude CodeCodex
Write or update frontend tests for a given file, following project conventions (Jest + React Testing Library for web/).