punkadillo/figma-code-composer
Skill Claude CodeCodex
Build immersive, cinematic 2.5D interactive websites using scroll storytelling, parallax depth, text animations, and premium scroll effects — no WebGL required. Use this skill for any web design task: landing pages, product sites, hero sections, scroll animations, parallax, sticky sections, section overlaps, floating…
punkadillo/figma-code-composer
Agent Claude Code
Use to review recently written or modified code for complexity, risk, correctness, and convention-match. Trigger after an implementation agent (component-builder, test-author, story-author) finishes — or after work guided by the senior-frontend / senior-fullstack / senior-qa skills — or when the user asks for a PR /…
punkadillo/figma-code-composer
Agent Claude Code
Builds framework-native components from the component nodes in a Figma manifest. Branches on configSnapshot.framework + cssSystem. Writes only inside configured component directories. Spawned by figma-coordinator after token-builder (when applicable).
punkadillo/figma-code-composer
Agent Claude Code
Orchestrator for the Figma→code pipeline. Invoked by /figma-build, /figma-update, /figma-icons, /figma-tokens. Reads .figma-pipeline/config.json, spawns figma-fetcher, validates the manifest, routes specialists, handles errors/retries/model-tier. Writes no source code.
punkadillo/figma-code-composer
Agent Claude Code
Fetches and parses Figma nodes via the Figma MCP and emits the canonical manifest every downstream agent consumes. Single writer of the manifest. Preserves Figma variable names (never resolves to values). Classifies nodes by layer per the active design methodology. Read/scratch only — never writes source code.
punkadillo/figma-code-composer
Agent Claude Code
Generates accessible framework-native icon components from manifest.icons[]. Single owner of config.icons.outputDir. Branches on configSnapshot.framework.
punkadillo/figma-code-composer
Agent Claude Code
Reads the target project tree (package.json, lockfiles, config files, source fingerprints) and returns a structured detection report: framework, language, CSS system, candidate component/token/icon paths, design methodology guess. Read-only — never writes. Spawned by the wizard during /init-figma-compose step 3.
punkadillo/figma-code-composer
Agent Claude Code
Generates Storybook stories with interaction + a11y + visual regression tests for components built by component-builder, and refreshes icon stories when icon-generator changes icons. Branches on configSnapshot.framework. Spawned in parallel with test-author after component-builder.
punkadillo/figma-code-composer
Agent Claude Code
Use PROACTIVELY before writing tests to plan the minimum test matrix and the red-green-refactor sequence. Trigger when the test-author agent (or work using the senior-qa skill) needs a principled test plan before writing test code. Returns a compact matrix: what to assert, at what level, and in what order. Keeps test…
punkadillo/figma-code-composer
Agent Claude Code
Writes unit + integration tests for components built by component-builder, and Playwright E2E suites when tests.e2e.enabled. Branches on configSnapshot.framework + tests.unit.framework + tests.unit.testingLibrary + tests.e2e.enabled. Spawned in parallel with story-author after component-builder.
punkadillo/figma-code-composer
Agent Claude Code
Translates manifest.tokens into the project's native token format per config.tokens.strategy + config.cssSystem.name. Writes only inside config.tokens.outputDir. Spawned by figma-coordinator first when tokens changed; subsequent builders depend on its output.
punkadillo/figma-code-composer
Agent Claude Code
The /init-figma-compose wizard. Walks the user through project identity → Figma MCP connect (hard gate) → stack detection (via project-detector) → methodology + CSS-system pick → graphify project-skill registration → target .gitignore patch. Writes .figma-pipeline/config.json and verifies .mcp.json. Spawned by…
punkadillo/figma-code-composer
Command Claude Code
Build NEW components/icons/tokens from a Figma design via the full figma-coordinator pipeline (fetch → tokens → icons + components in parallel → stories + tests in parallel).
punkadillo/figma-code-composer
Command Claude Code
Generate or repair ONLY icons from a Figma design via the figma-coordinator pipeline (figma-fetcher → icon-generator). No components, tokens, stories, or tests.
punkadillo/figma-code-composer
Command Claude Code
Generate or refresh ONLY design tokens from a Figma design via the figma-coordinator pipeline (figma-fetcher → token-builder). No components or icons.
punkadillo/figma-code-composer
Command Claude Code
UPDATE existing components/icons/tokens from a changed Figma design via the figma-coordinator pipeline (patches in place, refreshes stories + tests).
punkadillo/figma-code-composer
Command Claude Code
Configure the figma-to-code orchestration scaffold in this project. Runs the wizard, writes .figma-pipeline/config.json, verifies Figma MCP, optionally registers /graphify, and emits the derived write allowlist.
punkadillo/figma-code-composer
Hook Claude Code
Runs when a session starts, executing session-start-context.sh via bash. From punkadillo/figma-code-composer.
punkadillo/figma-code-composer
Hook Claude Code
Runs when you submit a prompt, before the agent sees it, executing figma-url-nudge.sh via bash. From punkadillo/figma-code-composer.
punkadillo/figma-code-composer
Hook Claude Code
Runs before the agent uses a tool for Write, Edit, MultiEdit, Read, Edit, Write, MultiEdit, NotebookEdit, Bash and Grep tool calls, executing check-frozen-paths.sh and check-env-access.sh via bash (2 commands). From punkadillo/figma-code-composer.
punkadillo/figma-code-composer
Hook Claude Code
Runs after a tool call finishes for Write, Edit and MultiEdit tool calls, executing check-manifest-schema.sh, check-config-schema.sh and check-token-syntax.sh via bash (3 commands). From punkadillo/figma-code-composer.
punkadillo/figma-code-composer
Hook Claude Code
Runs when a subagent finishes, executing subagent-scope-check.sh via bash. From punkadillo/figma-code-composer.
punkadillo/figma-code-composer
Hook Claude Code
Runs when the agent finishes a response, executing stop-summary.sh via bash. From punkadillo/figma-code-composer.
punkadillo/figma-code-composer
Settings file Claude Code
Agent settings declaring 6 hook events (SessionStart, UserPromptSubmit, PreToolUse, PostToolUse).