chore: update skill

Author: cossssmin

skills/maizzle/references/COMPONENTS.md

@@ -297,40 +297,39 @@ Props:
 
 ## Hr
 
-Horizontal rule. Renders `<div role="separator">` with default 1px height, `#cbd5e1` background, 24px vertical margin.
+Horizontal rule. Renders `<div role="separator">` with defaults `h-px leading-px my-6 bg-slate-300`.
 
-Customize the color with a Tailwind `bg-*` class or inline `background-color` — there is **no** `color` prop.
-
-Props:
-- `height` (string | number, default `'1px'`).
-- `spaceY` (string | number, default `'24px'`) — vertical margin.
-- `spaceX` (string | number) — horizontal margin.
-- `top`, `bottom`, `left`, `right` (string | number) — override individual sides.
+Override defaults by passing the matching utility class:
+- Height: pass `h-*` or `leading-*`.
+- Margins: pass `m-*`, `mx-*`, `my-*`, `mt-*`, `mb-*`, `ml-*`, `mr-*`.
+- Color: pass `bg-*`.
 
 ```vue
 <Hr />
-<Hr class="bg-blue-200" height="2" />
-<Hr space-y="32px" />
-<Hr top="16" bottom="32" />
+<Hr class="bg-blue-200 h-0.5" />
+<Hr class="my-8" />
+<Hr class="mt-4 mb-8" />
+<Hr class="h-[3px]" />
 ```
 
 ## Spacer
 
 Vertical or horizontal spacer.
 
-- Vertical: `<div role="separator">` with `line-height` (and `mso-line-height-alt` when `msoHeight` is set). Without `height`, collapses to a zero-width joiner (line-break).
+- Vertical: `<div role="separator">` containing a zero-width joiner. Size with `h-*` or `leading-*`.
 - Horizontal: `<i>` with em-space chars and `mso-font-width` for accurate Outlook sizing.
 
 Props:
 - `type` (`'vertical'` | `'horizontal'`, default `'vertical'`).
-- `height` (string | number) — vertical only.
 - `width` (string | number, default `16`) — horizontal only, in px.
-- `msoHeight` (string | number) — Outlook override via `mso-line-height-alt`.
-- `outlookFallback` (bool, default `true`).
+- `outlookFallback` (bool, default `true`) — horizontal `mso-font-width`.
+
+Vertical sizing is class-driven: pass `leading-*` directly, or `h-*`. For Outlook adjustments, use `mso-line-height-alt-*` utilities.
 
 ```vue
-<Spacer height="32px" />
-<Spacer height="40px" mso-height="32px" />
+<Spacer class="leading-8" />
+<Spacer class="h-10" />
+<Spacer class="leading-10 mso-line-height-alt-8" />
 <Spacer type="horizontal" :width="24" />
 ```
 

skills/maizzle/references/CONVERT-REACT-EMAIL.md

@@ -35,7 +35,7 @@ Vue templates need a colon prefix to bind dynamic values (`:href="resetUrl"`); s
 | `<Button href="..." className="... block text-center no-underline box-border">` | `<Button href="..." class="...">` | Drop `box-border block text-center no-underline` — handled internally. Use `class` for colors. Variants: `solid` (default), `outline`, `ghost`, `link`. Optional `align`, `icon`, `icon-position`. |
 | `<Link>` | `<Link>` | Defaults to `no-underline`. |
 | `<Img src="..." width="150">` | `<Img src="..." width="150">` | `width` is required. Adds `dark-src` and `motion-src` for variant images via `<picture>`. |
-| `<Hr>` | `<Hr>` | Maizzle's `<Hr>` is a styled `<div>` with default 1px gray bg + 24px vertical margin. Override with Tailwind classes (`bg-gray-200 my-8`) or props: `height`, `space-y`, `space-x`, `top`, `bottom`, `left`, `right`. Drop React Email's `border-solid border-*`. |
+| `<Hr>` | `<Hr>` | Maizzle's `<Hr>` is a styled `<div>` with defaults `h-px leading-px my-6 bg-slate-300`. Override via class: `bg-*`, `m*-*`, and `h-*` or `leading-*`. Drop React Email's `border-solid border-*`. |
 | `<CodeBlock code language="js" theme={dracula}>` | `<CodeBlock code="..." language="js" theme="github-light">` | Theme is a Shiki theme name (string), not an imported object. |
 | `<CodeInline>` | `<CodeInline>` | Same. |
 | `<Markdown>{content}</Markdown>` | `<Markdown>content</Markdown>` | Also accepts `src` for `.md` files. |
@@ -46,7 +46,7 @@ Vue templates need a colon prefix to bind dynamic values (`:href="resetUrl"`); s
 | Component | Purpose |
 |---|---|
 | `<Layout>` | Full document scaffold: `html` + `head` (charset/viewport/format-detection meta, MSO font reset, Tailwind import, Inter font, color-scheme meta) + `body` + `<div role="article">`. Replaces the `Html > Tailwind > Head + Body` chain. Props: `lang`, `dir`, `body-class`, `aria-label`, `double-head`, `outlook-fallback`. |
-| `<Spacer>` | Vertical or horizontal spacer. Props: `type` (`vertical`/`horizontal`), `height`, `width` (default 16), `mso-height`. Horizontal renders MSO-safe `mso-font-width` `<i>`. |
+| `<Spacer>` | Vertical or horizontal spacer. Props: `type` (`vertical`/`horizontal`), `width` (default 16, horizontal-only), `outlook-fallback`. Vertical sizing via class: `leading-*` or `h-*`; Outlook fine-tune via `mso-line-height-alt-*` utilities. Horizontal renders MSO-safe `mso-font-width` `<i>`. |
 | `<WithUrl>` | Scoped URL rewriting (base URL, UTM params) for descendant `href`/`src` attributes. |
 | `<NoWidows>` | Prevents orphaned last words in text. |
 | `<Outlook>` / `<NotOutlook>` | Render content only in (or only outside) Outlook. Outlook supports version filtering. |
@@ -182,8 +182,7 @@ export default defineConfig({
 
 ```vue
 <Hr class="bg-gray-200 my-5" />
-<!-- or with props -->
-<Hr space-y="20px" />
+<Hr class="h-0.5 bg-blue-300" />
 ```
 
 ### 9. Preheader

skills/maizzle/references/STYLING.md

@@ -142,10 +142,12 @@ Keep contrast above WCAG AA (4.5:1 for body text).
 
 ## Spacing & Dividers
 
-- `<Spacer height="32px" />` for vertical space (uses `mso-line-height-alt` on Outlook).
-- `<Hr />` for visible separators — defaults to 1 px / `#cbd5e1` / 24 px vertical margin. Override color via Tailwind `bg-*`:
+
+- `<Spacer class="leading-8" />` for vertical space. Pass `leading-*` or `h-*`. For Outlook fine-tune use `mso-line-height-alt-*`.
+- `<Hr />` for visible separators — defaults `h-px leading-px my-6 bg-slate-300`. Pass `h-*`, `bg-*`, `m*-*` to override:
   ```vue
   <Hr class="bg-gray-200 my-8" />
+  <Hr class="h-0.5 bg-indigo-300" />
   ```
 
 ## Responsive