figma-static-pass

Installation
SKILL.md

Figma Static Pass

Turn a Figma frame into production static code. This is stage one of the motion handoff pipeline: the animation pass (figma-motion-handoff skill) lands on top of what this pass produces, so the deliverables here are shippable markup AND the hooks the animation pass will resolve against.

Core premise: get_design_context output is reference material, not shippable code. It transplants a fixed canvas. Production needs a layout system, semantic HTML, theme tokens, and stable animation hooks.

Pipeline

0. Contract gate (blocking, before any file is touched)

After gathering (step 1), and before creating or modifying ANY file, output a validation table:

| Node id | Layer name | data-motion candidate | Status |

Status is PASS, or FAIL if the layer name is generic: matches patterns like Group N, Frame N, Rectangle N, Ellipse N, Component N, Layer N, Text alone, or any default Figma name. Numbered variants of a meaningful name (card-2) pass.

If any row is FAIL: your entire turn is the table plus a request to rename those layers in Figma (or provide names inline). End the turn. Do not build anything, not even the passing nodes. Building a partial result invalidates the contract for the whole frame and forces rework. This gate exists because the animation pass resolves targets by these exact names; proceeding with invented or generic names silently breaks every future handoff of this file.

If all rows PASS, include the table in your response and continue.

Installs
5
GitHub Stars
11
First Seen
Jul 14, 2026
figma-static-pass — joyco-studio/skills