create-anatomy
Generate a visual anatomy annotation in Figma showing numbered markers on a component…
Generate structure specifications documenting component dimensions, spacing, padding, and how values change across density, size, and shape variants. Use when the user mentions "structure", "structure spec", "dimensions", "spacing", "density", "sizing", or wants to document a
$ npx -y skills add redongreen/uSpec --skill create-structure --agent claude-codeHow it fires
How this skill gets triggered: by you, by Claude, or both.
/create-structureContext preview
The summary Claude sees to decide when to auto-load this skill.
Generate structure specifications documenting component dimensions, spacing, padding, and how values change across density, size, and shape variants. Use when the user mentions "structure", "structure spec", "dimensions", "spacing", "density", "sizing", or wants to document a
name: create-structure description: Generate structure specifications documenting component dimensions, spacing, padding, and how values change across density, size, and shape variants. Use when the user mentions "structure", "structure spec", "dimensions", "spacing", "density", "sizing", or wants to document a component's dimensional properties.
Generate a structure specification directly in Figma — tables documenting all dimensional properties of a component, organized into sections by variant axis or sub-component, with dynamic columns for size/density variants.
**Execution contract (read first).**
Read `uspecs.config.json` → `mcpProvider`. Follow the matching column for every MCP call in this skill.
| Operation | `figma-console` | `figma-mcp` | |-----------|-----------------|-------------| | Verify connection | `figma_get_status` | Skip — implicit. If first `use_figma` call fails, guide user to check MCP setup. | | Navigate to file | `figma_navigate` with URL | Extract `fileKey` from URL (`figma.com/design/:fileKey/...`). No navigate needed. | | Take screenshot | `figma_take_screenshot` | `get_screenshot` with `fileKey` + `nodeId` | | Execute Plugin JS | `figma_execute` with `code` | `use_figma` with `fileKey`, `code`, `description`. **JS code is identical** — no wrapper changes. | | Search components | `figma_search_components` | `search_design_system` with `query` + `fileKey` + `includeComponents: true` | | Get file/component data | `figma_get_file_data` / `figma_get_component` | `get_metadata` or `get_design_context` with `fileKey` + `nodeId` | | Get variables (file-wide) | `figma_get_variables` | `use_figma` script: `return await figma.variables.getLocalVariableCollectionsAsync();` | | Get token values | `figma_get_token_values` | `use_figma` script reading variable values per mode/collection | | Get styles | `figma_get_styles` | `search_design_system` with `includeStyles: true`, or `use_figma`: `return figma.getLocalPaintStyles();` | | Get selection | `figma_get_selection` | `use_figma` script: `return figma.currentPage.selection.map(n => ({id: n.id, name: n.name, type: n.type}));` |
**`figma-mcp` requires `fileKey` on every call.** Extract it once from the user's Figma URL at the start of the workflow. For branch URLs (`figma.com/design/:fileKey/branch/:branchKey/:fileName`), use `:branchKey` as the fileKey.
**`figma-mcp` page context:** `use_figma` resets `figma.currentPage` to the first page on every call. When a script accesses a node from a previous step via `getNodeByIdAsync(ID)`, the page content may not be loaded — `findAll`, `findOne`, and `characters` will fail with `TypeError` until the page is activated. Insert this page-loading block immediately after `getNodeByIdAsync`:
let _p = node; while (_p.parent && _p.parent.type !== 'DOCUMENT') _p = _p.parent; if (_p.type === 'PAGE') await figma.setCurrentPageAsync(_p);
This walks up to the PAGE ancestor and loads its content. Console MCP does not need this — `figma_execute` inherits the Desktop page context.
There is no screenshot-only path and no component-link extraction path. Without the component `.md` there is nothing to render — see Step 0's fail-fast contract.
Copy this checklist and update as you progress:
Task Progress:
- [ ] Step 0: Require + parse the component `.md` (Structure body + render-meta). FAIL FAST if missing.
- [ ] Step 1: Read instruction file (only as needed for row-emission conventions — NOT for re-extraction)
- [ ] Step 2: Verify MCP connection
- [ ] Step 3: Read template key from uspecs.config.json
- [ ] Step 4: Build render inputs from the parsed .md (sections, COLUMNS, ROWS, general notes, provenance) + render-meta (compSetNodeId, variantAxesDefaults, subComponents, slotContents, booleanDefs) — NO extraction
- [ ] Step 5: Navigate to destination (if a separate destination file was provided)
- [ ] Step 6: Re-derive each section's sectionType via the Step 11a decision table (match columns to variantAxes; {slot} — {comp}; subComponents[].name) — NO live reads
- [ ] Step 7: Audit the assembled render inputs against the .md
- [ ] Step 9: Import and detach the Structure templGenerate design system documentation for your UI components, directly from your AI agent. Describe a component to your agent.
Repo: redongreen/uSpec
Generate a visual anatomy annotation in Figma showing numbered markers on a component…
Generate API overview specifications documenting component properties, values, defaults, and…
Generate color annotation specifications mapping UI elements to design tokens. Use when the…
Generate a canonical JSON contract and a self-contained implementation Markdown specification…
Generate motion specification annotations from After Effects timeline data. Use when the user…
Generate a visual property annotation in Figma showing each configurable property axis with…