/component-rules
Triggers when building any UI element in Figma — 'create a card', 'build a nav', 'add a section', 'make a component'. Enforces library-first component lookup, correct Auto Layout structure, and semantic node naming. For visual property binding (colors, text styles, spacing
One skill from claude2figma.
shell
$ npx -y skills add senlindesign/claude2figma --skill component-rules --agent claude-codeInstalls just this skill. Get the whole plugin for auto-invocation.
How it fires
How this skill gets triggered: by you, by Claude, or both.
- Fires itselfClaude auto-loads it when your prompt matches the work.
- You can call itInvoke it directly when you want it.
- Slash command
/component-rules
Context preview
The summary Claude sees to decide when to auto-load this skill.
Triggers when building any UI element in Figma — 'create a card', 'build a nav', 'add a section', 'make a component'. Enforces library-first component lookup, correct Auto Layout structure, and semantic node naming. For visual property binding (colors, text styles, spacing
Stats
Stars178
Forks16
LicenseMIT
SKILL.md
component-rules.SKILL.md
--- name: component-rules description: "Triggers when building any UI element in Figma — 'create a card', 'build a nav', 'add a section', 'make a component'. Enforces library-first component lookup, correct Auto Layout structure, and semantic node naming. For visual property binding (colors, text styles, spacing values), defer to figma-style-binding." disable-model-invocation: false --- # Component Rules Governs how Claude constructs UI in Figma. Supplements `figma-generate-design`. For visual property binding, defer to `figma-style-binding`. --- ## Rule 1 — Library-first hierarchy Before building anything, resolve the component source in this order: ``` 1. search_design_system → importComponentByKeyAsync → createInstance() 2. Local file scan → createInstance() 3. Build from scratch — ONLY if nothing matches ``` Never rebuild primitives the DS provides: Button, Input, Checkbox, Toggle, Badge, Tag, Avatar, Icon, Tab, Breadcrumb, Toast, Alert, Spinner. ```js // Library import const comp = await figma.importComponentByKeyAsync("key_from_search"); const instance = comp.createInstance(); parent.appendChild(instance); // For component sets (variants) const set = await figma.importComponentSetByKeyAsync("key");