difflisted

Compares AS-IS and TO-BE designs, marks the changed elements with native Figma Dev Mode annotations, and writes up the linked task doc with a Figma link, an AS-IS/TO-BE table, and a scope callout. The tracker comes from the task_tracker section of figma-conventions.yaml and can be notion, github, or none; with none it stops at the Figma annotations and emits the table as markdown. AS-IS may sit in another section of the same page or on a different page entirely, so the source is settled first. It never creates annotation categories — it reuses a shared one or uses none, and carries classification in a label tag. Only the representative screen is marked; state variants inherit. Triggers - "/fig:diff", "mark what changed", "annotate the design changes", "as-is to-be 비교", "변경점 표시해줘", "바뀐 요소 annotation 달아줘".
byjunyoung/claude-product-skills · ★ 4 · Code & Development · score 70

Install: claude install-skill byjunyoung/claude-product-skills

# fig:diff — marking AS-IS / TO-BE changes and writing up the task doc Compares AS-IS and TO-BE designs, **finds what changed and pins it with native Figma Dev Mode annotations**, and lays the same thing out as a comparison table in **the linked task doc**. Where that write-up goes is decided by the `task_tracker` setting. **Principles** - **The single source for a change is the label text.** The category colour is a secondary cue and can be lost. - **Never create a category.** Reuse a shared one, or go without. - **Mark the representative screen only.** State variants (Default/Selected, Detail/Toast, and so on) fold into one representative and are handled with an "inherits" line. - Every write (Figma or the tracker) goes through the **preview → "go"** gate. - **Never guess where AS-IS is** — if it is not on the same page, search for it or ask. ## When to invoke - There is an AS-IS/TO-BE pair and the ask is "mark what changed" or "compare these and annotate them" - The changes also need writing up in the task doc - An explicit "/fig:diff" ## When NOT to invoke - Just understanding the frame structure → `/fig:read` - Tidying structure and naming, filling placeholders → `/fig:prep` - Flow arrows → `/fig:arrows` - Auditing rule violations only → `/fig:lint` - Auditing, applying, or migrating changes into the canonical page → `/fig:sync` ## Inputs - `figma_url` (required): the TO-BE (or comparison target) URL. A page, a section, or a frame — the kind is detected and branc