From 6614b32fd3c6e40db193d94e8694feb217a6e46a Mon Sep 17 00:00:00 2001 From: Andreas Reinhold / reini Date: Tue, 15 Sep 2026 11:51:51 +0200 Subject: [PATCH] Document the icon's size and mirror-rtl props in the skill The skill still sized an icon with Tailwind's size-* classes and paired optical="20" with size-5 by hand. 2.0.0's takes size in px and picks the 20 cut from it; SealShare's settings rewrite found the prop in the view, not the skill (plan step 46). Co-Authored-By: Claude Opus 5 (1M context) --- .../boost/skills/livewire-material-development/SKILL.md | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/resources/boost/skills/livewire-material-development/SKILL.md b/resources/boost/skills/livewire-material-development/SKILL.md index ab44d696..256258bf 100644 --- a/resources/boost/skills/livewire-material-development/SKILL.md +++ b/resources/boost/skills/livewire-material-development/SKILL.md @@ -205,12 +205,14 @@ A Material Symbol (Rounded, weight 400, grade 0), inline. Every symbol on fonts. |---|---|---| | `name` | required | `calendar_month`, `cloud_upload`, `content_copy` | | `filled` | `false` | the filled symbol — M3 uses it for active or selected | -| `optical` | `24` | the cut the glyph is drawn from, `24` or `20`; anything else falls back to 24 | +| `size` | `24` | the drawn size in px, a whole number from 8 to 256 (`16`, `18`, `20`, `32`, `40`, `48` …), written as `--md-icon-size` | +| `optical` | from `size` | the cut the glyph is drawn from, `24` or `20`; anything else falls back to 24 | | `label` | `null` | names the icon for screen readers when it carries the meaning alone; otherwise it is `aria-hidden` | +| `mirror-rtl` | `false` | flips a directional symbol (an arrow, a chevron) in a right-to-left document | -24px (`size-6`) unless a `size-*`, `w-*` or `h-*` class is passed. Colour follows the text: ``. +Colour follows the text: ``. -M3's optical size axis redraws a symbol so its strokes look equally heavy at every size, so **an icon drawn at 20px or smaller (`size-5` and below) takes `optical="20"`**; scaling the 24 cut down thins its strokes by about a sixth. The cut is not a size — pass both, and where a component sizes an icon for you, pass the cut alongside the size class. +M3's optical size axis redraws a symbol so its strokes look equally heavy at every size, so **an icon drawn at 20px or smaller takes the 20 cut**; scaling the 24 cut down thins its strokes by about a sixth. `size="20"` and below pick it for you. Pass `optical="20"` yourself only when the icon's size comes from somewhere else (your own CSS setting its width and height, which outranks the package's layer). ### ``