feat: improve flex positionement skills

Author: LeadcodeDev

.claude/skills/rustmotion/SKILL.md

@@ -49,7 +49,8 @@ Read individual rule files for detailed explanations, GOOD/BAD examples, and con
 - [rules/card-flex-layout.md](rules/card-flex-layout.md) - Scene = implicit flex container; use card/flex for nested layout
 - [rules/continuous-presets.md](rules/continuous-presets.md) - Continuous presets (pulse, float, shake, spin) need loop: true
 - [rules/timing-constraints.md](rules/timing-constraints.md) - Timing: start_at must be < end_at, duration > 0
-- [rules/icon-format.md](rules/icon-format.md) - Icon format must be "prefix:name" (e.g. "lucide:home")
+- [rules/icon-format.md](rules/icon-format.md) - Icons use Iconify (200k+ icons), format "prefix:name" (e.g. "lucide:home")
+- [rules/grid-card-height.md](rules/grid-card-height.md) - Grid containers need explicit height (not "auto") to prevent row stretching
 - [rules/wiggle-additive.md](rules/wiggle-additive.md) - Wiggle is additive on top of presets and keyframes
 - [rules/prefer-presets.md](rules/prefer-presets.md) - Prefer presets over manual keyframes (31 built-in presets)
 - [rules/hex-colors.md](rules/hex-colors.md) - Colors in hex format only (#RRGGBB or #RRGGBBAA)
@@ -559,7 +560,7 @@ Types: `linear`, `radial`.
 
 ### 5. `icon`
 
-Renders an icon from the Iconify library. See Rule 11.
+Renders an icon from the **Iconify** open-source framework (200,000+ icons from 150+ sets). Icons are fetched from the Iconify API at render time. Browse all icons: https://icon-sets.iconify.design/
 
 ```json
 {
@@ -578,6 +579,8 @@ Renders an icon from the Iconify library. See Rule 11.
 
 Style: `color` (default `"#FFFFFF"`)
 
+Common prefixes: `lucide` (UI), `mdi` (Material), `heroicons`, `ph` (Phosphor), `tabler`, `simple-icons` (brand logos), `devicon` (dev tools)
+
 ### 6. `video`
 
 ```json
@@ -707,7 +710,7 @@ Each dimension of `size` can be a number or `"auto"`.
 }
 ```
 
-**Grid example (2x2):**
+**Grid example (2x2):** Note: grid containers need explicit `height` (not `"auto"`) — see [rules/grid-card-height.md](rules/grid-card-height.md).
 ```json
 {
   "type": "card",

.claude/skills/rustmotion/rules/card-flex-layout.md

@@ -35,6 +35,8 @@ Key patterns:
 
 Children flow in the flexbox. Use `positioned` container for absolute positioning.
 
+**Grid height warning:** Grid containers need an explicit `height` (not `"auto"`) to prevent rows from stretching to fill all available space. See [rules/grid-card-height.md](rules/grid-card-height.md).
+
 **GOOD** (icon + text row):
 ```json
 {

.claude/skills/rustmotion/rules/grid-card-height.md

@@ -0,0 +1,47 @@
+# Rule: Grid Cards Need Explicit Container Height
+
+Grid cells stretch to fill their row height. When the grid container has `height: "auto"`, rows expand to consume all available space from the parent flex layout, making cards much taller than their content.
+
+**Always set an explicit height on grid containers** and use `grid-template-rows` to control row sizes.
+
+**GOOD:**
+```json
+{
+  "type": "card",
+  "size": { "width": 1200, "height": 400 },
+  "style": {
+    "display": "grid",
+    "grid-template-columns": [{ "fr": 1 }, { "fr": 1 }, { "fr": 1 }],
+    "grid-template-rows": [{ "fr": 1 }, { "fr": 1 }],
+    "gap": 24
+  },
+  "children": [ ... ]
+}
+```
+
+**BAD** (cards stretch to fill scene height):
+```json
+{
+  "type": "card",
+  "size": { "width": 1200, "height": "auto" },
+  "style": {
+    "display": "grid",
+    "grid-template-columns": [{ "fr": 1 }, { "fr": 1 }, { "fr": 1 }],
+    "gap": 24
+  },
+  "children": [ ... ]
+}
+```
+
+## Why This Happens
+
+1. Scene flex layout gives the grid container all remaining vertical space
+2. Without `grid-template-rows`, rows default to equal shares of that space
+3. Grid cells stretch to fill their assigned row height
+4. Child `height: "auto"` is ignored — the grid cell size wins
+
+## Tips
+
+- Calculate container height: `(row_count × estimated_card_height) + ((row_count - 1) × gap) + (padding × 2)`
+- Use `grid-template-rows` with `{ "fr": 1 }` entries to distribute rows evenly within the explicit height
+- For single-row grids, a flex row with `"flex-direction": "row"` may be simpler

.claude/skills/rustmotion/rules/icon-format.md

@@ -1,17 +1,40 @@
-# Rule: Icon Format Must Be prefix:name
+# Rule: Icon Format Must Be prefix:name (Iconify)
 
-The `icon` field must be an Iconify identifier in `"prefix:name"` format. Requires internet access for fetching from the Iconify API.
+The `icon` component renders icons from the **Iconify** open-source icon framework — over 200,000 icons from 150+ icon sets. Icons are fetched from the Iconify API at render time (requires internet access).
 
-Common prefixes: `lucide`, `mdi`, `heroicons`, `ph`, `tabler`, `ri`, `devicon`.
+The `icon` field must use the `"prefix:name"` format.
+
+**Browse all available icons:** https://icon-sets.iconify.design/
 
 **GOOD:**
 ```json
 { "type": "icon", "icon": "lucide:home" }
 { "type": "icon", "icon": "mdi:account-circle" }
+{ "type": "icon", "icon": "simple-icons:github" }
 ```
 
 **BAD:**
 ```json
 { "type": "icon", "icon": "home" }
 { "type": "icon", "icon": "fa-home" }
 ```
+
+## Common Icon Sets
+
+| Prefix | Name | Style | Count | Best for |
+| --- | --- | --- | --- | --- |
+| `lucide` | Lucide | Clean line icons | 1500+ | UI, general purpose |
+| `mdi` | Material Design Icons | Filled & outlined | 7000+ | Material UI, Android |
+| `heroicons` | Heroicons | Tailwind-style | 300+ | Tailwind projects |
+| `ph` | Phosphor | Flexible weights | 7000+ | Modern UI |
+| `tabler` | Tabler Icons | Stroke-based | 5000+ | Dashboards |
+| `ri` | Remix Icon | Clean dual-tone | 2800+ | Web apps |
+| `devicon` | Devicon | Dev tool logos | 800+ | Tech stack |
+| `simple-icons` | Simple Icons | Brand logos | 3000+ | Company logos |
+
+## Tips
+
+- Default to `lucide` for general UI icons (clean, consistent style)
+- Use `simple-icons` for brand/company logos (e.g. `simple-icons:github`, `simple-icons:docker`)
+- Use `devicon` for programming language logos (e.g. `devicon:rust`, `devicon:python`)
+- All icons are monochrome and colored via `style.color`