@dannote/figma-use 0.6.2 → 0.7.0

package/SKILL.md

@@ -62,6 +62,8 @@ Output (unified diff format):
 +opacity: 1
 ```
 
+⚠️ **Don't forget space prefix on context lines** — `size: 48 40` will fail, ` size: 48 40` works.
+
 ### Apply patch (validates old values!)
 ```bash
 # Dry run — preview changes
@@ -77,6 +79,14 @@ figma-use diff apply patch.diff --force
 cat patch.diff | figma-use diff apply --stdin
 ```
 
+### Visual diff (PNG)
+```bash
+figma-use diff visual --from <id1> --to <id2> --output diff.png
+figma-use diff visual --from <id1> --to <id2> --output diff.png --threshold 0.05  # Stricter
+```
+
+Red pixels show differences. Useful for verifying modifications.
+
 ### Workflow: Iterative design with critique
 
 1. **Render initial design:**
@@ -111,46 +121,72 @@ figma-use node delete <id>
 Use `render --stdin` with **pure JSX only**. No variables, no functions, no imports — just JSX tags:
 
 ```bash
-echo '<Frame style={{padding: 24, gap: 16, flexDirection: "column", backgroundColor: "#FFF", borderRadius: 12}}>
-  <Text style={{fontSize: 24, fontWeight: "bold", color: "#000"}}>Card Title</Text>
-  <Text style={{fontSize: 14, color: "#666"}}>Description text here</Text>
+echo '<Frame style={{p: 24, gap: 16, flex: "col", bg: "#FFF", rounded: 12}}>
+  <Text style={{size: 24, weight: "bold", color: "#000"}}>Card Title</Text>
+  <Text style={{size: 14, color: "#666"}}>Description text here</Text>
 </Frame>' | figma-use render --stdin
 ```
 
 ⚠️ **stdin does NOT support:** `const`, `let`, `function`, `defineComponent`, `defineComponentSet`, ternary operators, or any JavaScript logic. Only literal JSX.
 
-**Elements:** `Frame`, `Rectangle`, `Ellipse`, `Text`, `Line`, `Star`, `Polygon`, `Vector`, `Group`
+⚠️ **When rendering multiple elements**, use `--x` and `--y` to position each render at different coordinates. Don't stack everything at (0, 0).
+
+**Elements:** `Frame`, `Rectangle`, `Ellipse`, `Text`, `Line`, `Star`, `Polygon`, `Vector`, `Group`, `Icon`
+
+**Icons (150k+ from Iconify):**
+```bash
+echo '<Frame style={{flex: "row", gap: 8, p: 16}}>
+  <Icon icon="mdi:home" size={24} color="#3B82F6" />
+  <Icon icon="lucide:star" size={24} color="#F59E0B" />
+</Frame>' | figma-use render --stdin
+```
+
+**Style props (with shorthands):**
 
-**Style props:** `width`, `height`, `x`, `y`, `padding`, `paddingTop/Right/Bottom/Left`, `gap`, `flexDirection` (row|column), `justifyContent`, `alignItems`, `backgroundColor`, `borderColor`, `borderWidth`, `borderRadius`, `opacity`, `fontSize`, `fontFamily`, `fontWeight`, `color`, `textAlign`
+| Shorthand | Full | Values |
+|-----------|------|--------|
+| `w`, `h` | `width`, `height` | number |
+| `bg` | `backgroundColor` | hex color |
+| `rounded` | `borderRadius` | number |
+| `p`, `pt`, `pr`, `pb`, `pl` | `padding*` | number |
+| `px`, `py` | paddingLeft+Right, paddingTop+Bottom | number |
+| `flex` | `flexDirection` | `"row"`, `"col"` |
+| `justify` | `justifyContent` | `"start"`, `"end"`, `"center"`, `"between"`, `"evenly"` |
+| `items` | `alignItems` | `"start"`, `"end"`, `"center"`, `"stretch"` |
+| `size` | `fontSize` | number |
+| `font` | `fontFamily` | string |
+| `weight` | `fontWeight` | `"bold"`, number |
+
+Also: `gap`, `opacity`, `color`, `borderColor`, `borderWidth`, `textAlign`, `x`, `y`
 
 ### Auto-Layout (Hug Contents)
 
-Frames with `flexDirection` automatically calculate size from children:
+Frames with `flex` automatically calculate size from children:
 
 ```bash
 # Height calculated as 50 + 10 (gap) + 30 = 90
-echo '<Frame style={{width: 200, flexDirection: "column", gap: 10}}>
-  <Frame style={{width: 200, height: 50, backgroundColor: "#00FF00"}} />
-  <Frame style={{width: 200, height: 30, backgroundColor: "#0000FF"}} />
+echo '<Frame style={{w: 200, flex: "col", gap: 10}}>
+  <Frame style={{w: 200, h: 50, bg: "#00FF00"}} />
+  <Frame style={{w: 200, h: 30, bg: "#0000FF"}} />
 </Frame>' | figma-use render --stdin
 ```
 
-**Limitation:** Row layout without explicit width collapses to 1×1 — always set `width` on row containers
+**Limitation:** Row layout without explicit width collapses to 1×1 — always set `w` on row containers
 
 ### Buttons Example (3 sizes)
 
 Since stdin doesn't support variables, write out each variant explicitly:
 
 ```bash
-echo '<Frame name="Buttons" style={{gap: 16, flexDirection: "row", padding: 24}}>
-  <Frame name="Small" style={{paddingLeft: 12, paddingRight: 12, paddingTop: 6, paddingBottom: 6, backgroundColor: "#3B82F6", borderRadius: 6, flexDirection: "row", justifyContent: "center", alignItems: "center"}}>
-    <Text style={{fontSize: 12, color: "#FFF"}}>Button</Text>
+echo '<Frame name="Buttons" style={{gap: 16, flex: "row", p: 24}}>
+  <Frame name="Small" style={{px: 12, py: 6, bg: "#3B82F6", rounded: 6, flex: "row", justify: "center", items: "center"}}>
+    <Text style={{size: 12, color: "#FFF"}}>Button</Text>
   </Frame>
-  <Frame name="Medium" style={{paddingLeft: 16, paddingRight: 16, paddingTop: 8, paddingBottom: 8, backgroundColor: "#3B82F6", borderRadius: 6, flexDirection: "row", justifyContent: "center", alignItems: "center"}}>
-    <Text style={{fontSize: 14, color: "#FFF"}}>Button</Text>
+  <Frame name="Medium" style={{px: 16, py: 8, bg: "#3B82F6", rounded: 6, flex: "row", justify: "center", items: "center"}}>
+    <Text style={{size: 14, color: "#FFF"}}>Button</Text>
   </Frame>
-  <Frame name="Large" style={{paddingLeft: 24, paddingRight: 24, paddingTop: 12, paddingBottom: 12, backgroundColor: "#3B82F6", borderRadius: 6, flexDirection: "row", justifyContent: "center", alignItems: "center"}}>
-    <Text style={{fontSize: 16, color: "#FFF"}}>Button</Text>
+  <Frame name="Large" style={{px: 24, py: 12, bg: "#3B82F6", rounded: 6, flex: "row", justify: "center", items: "center"}}>
+    <Text style={{size: 16, color: "#FFF"}}>Button</Text>
   </Frame>
 </Frame>' | figma-use render --stdin
 ```
@@ -178,6 +214,7 @@ For proper Figma ComponentSets with variant properties, create a `.figma.tsx` fi
 ```bash
 figma-use render --examples  # Full API reference
 figma-use render ./MyComponent.figma.tsx
+figma-use render ./MyComponent.figma.tsx --x 100 --y 200  # Position at coordinates
 ```
 
 ---
@@ -191,10 +228,14 @@ figma-use create page "Page Name"
 figma-use create frame --width 400 --height 300 --fill "#FFF" --radius 12 --layout VERTICAL --gap 16
 figma-use create rect --width 100 --height 50 --fill "#FF0000" --radius 8
 figma-use create ellipse --width 80 --height 80 --fill "#00FF00"
-figma-use create text --text "Hello" --fontSize 24 --fill "#000"
+figma-use create text --text "Hello" --font-size 24 --fill "#000"
 figma-use create line --length 100 --stroke "#000"
+figma-use create icon mdi:home --size 24 --color "#000"        # Iconify icon
+figma-use create icon lucide:star --size 48 --component        # as Figma component
 ```
 
+**Icons:** 150k+ from Iconify — `mdi:*`, `lucide:*`, `heroicons:*`, `tabler:*`, `fa-solid:*`, `ph:*`, etc. Browse: https://icon-sets.iconify.design/
+
 ### Query
 
 ```bash
@@ -241,8 +282,9 @@ figma-use export selection --output selection.png
 ### Navigate
 
 ```bash
-figma-use page list
-figma-use page set "Page Name"
+figma-use page current               # Show current page
+figma-use page list                  # List all pages
+figma-use page set "Page Name"       # Switch page
 figma-use viewport zoom-to-fit <ids...>
 figma-use viewport get
 figma-use viewport set --x 100 --y 200 --zoom 1.5
@@ -262,6 +304,14 @@ figma-use style list
 figma-use style create-paint "Brand/Primary" --color "#E11D48"
 ```
 
+**Variable references in CLI:** Use `var:Name` or `$Name` in any color option (`--fill`, `--stroke`, `--color`):
+```bash
+figma-use create rect --x 0 --y 0 --width 100 --height 100 --fill 'var:Primary'
+figma-use create icon mdi:home --color '$Brand/Accent'
+figma-use set fill <id> 'var:Colors/Primary'
+figma-use set stroke <id> '$Brand/Border'
+```
+
 ### Fonts
 
 ```bash
@@ -318,6 +368,18 @@ figma-use export node <id> --scale 0.5 --output /tmp/check.png  # Overview
 figma-use export node <id> --scale 2 --output /tmp/detail.png   # Details
 ```
 
+For modifications, use visual diff to highlight changes:
+
+```bash
+# Before modifying, export original
+figma-use export node <id> --output /tmp/before.png
+
+# After changes, compare visually
+figma-use diff visual --from <original-id> --to <modified-id> --output /tmp/diff.png
+```
+
+Red pixels = differences. Use `--threshold 0.05` for stricter comparison.
+
 ### Copying Elements Between Pages
 
 `node clone` creates a copy in the same parent. To move to another page: