component-rules

Installation
SKILL.md

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.

Installs
38
GitHub Stars
207
First Seen
May 18, 2026