hoomanjs 1.46.0 → 1.55.0

package/dist/core/skills/built-in/hooman-design/assets/tokens/signal-mono.css

@@ -0,0 +1,34 @@
+/* Direction tokens — signal-mono */
+:root {
+  --bg: #111111;
+  --surface: #1a1a1a;
+  --surface-2: #222222;
+  --ink: #fafafa;
+  --muted: #a3a3a3;
+  --border: #333333;
+  --accent: #ffe600;
+  --accent-soft: #2a2800;
+  --accent-ink: #111111;
+  --danger: #ff4d4d;
+  --success: #b8f25a;
+  --warning: #ffe600;
+  --focus: #ffe600;
+  --overlay: rgb(0 0 0 / 0.7);
+  --shadow: none;
+  --font-display: system-ui, -apple-system, sans-serif;
+  --font-body: system-ui, -apple-system, sans-serif;
+  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
+  --radius: 0;
+  --leading-body: 1.4;
+  --tracking-caps: 0.1em;
+  --text-body: 1rem;
+  --text-small: 0.875rem;
+  --space-1: 0.25rem;
+  --space-2: 0.5rem;
+  --space-3: 0.75rem;
+  --space-4: 1rem;
+  --space-5: 1.5rem;
+  --space-6: 2rem;
+  --space-7: 3rem;
+  --space-8: 4rem;
+}

package/dist/core/skills/built-in/hooman-design/assets/tokens/soft-product.css

@@ -0,0 +1,34 @@
+/* Direction tokens — soft-product (prefer brand hue over default blue when brief provides one). */
+:root {
+  --bg: #fafafa;
+  --surface: #ffffff;
+  --surface-2: #f4f4f5;
+  --ink: #18181b;
+  --muted: #71717a;
+  --border: #ececec;
+  --accent: #2563eb;
+  --accent-soft: #e8effc;
+  --accent-ink: #ffffff;
+  --danger: #dc2626;
+  --success: #16a34a;
+  --warning: #ca8a04;
+  --focus: #2563eb;
+  --overlay: rgb(24 24 27 / 0.4);
+  --shadow: 0 1px 2px rgb(24 24 27 / 0.05);
+  --font-display: system-ui, -apple-system, sans-serif;
+  --font-body: system-ui, -apple-system, sans-serif;
+  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
+  --radius: 0.5rem;
+  --leading-body: 1.55;
+  --tracking-caps: 0.05em;
+  --text-body: 1.0625rem;
+  --text-small: 0.875rem;
+  --space-1: 0.25rem;
+  --space-2: 0.5rem;
+  --space-3: 0.75rem;
+  --space-4: 1rem;
+  --space-5: 1.5rem;
+  --space-6: 2rem;
+  --space-7: 3rem;
+  --space-8: 4rem;
+}

package/dist/core/skills/built-in/hooman-design/assets/tokens/swiss-grid.css

@@ -0,0 +1,34 @@
+/* Direction tokens — swiss-grid */
+:root {
+  --bg: #ffffff;
+  --surface: #ffffff;
+  --surface-2: #f5f5f5;
+  --ink: #0a0a0a;
+  --muted: #525252;
+  --border: #e5e5e5;
+  --accent: #c8102e;
+  --accent-soft: #fce8eb;
+  --accent-ink: #ffffff;
+  --danger: #c8102e;
+  --success: #0a0a0a;
+  --warning: #a16207;
+  --focus: #0a0a0a;
+  --overlay: rgb(10 10 10 / 0.5);
+  --shadow: none;
+  --font-display: system-ui, -apple-system, sans-serif;
+  --font-body: system-ui, -apple-system, sans-serif;
+  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
+  --radius: 0;
+  --leading-body: 1.45;
+  --tracking-caps: 0.08em;
+  --text-body: 0.9375rem;
+  --text-small: 0.8125rem;
+  --space-1: 0.25rem;
+  --space-2: 0.5rem;
+  --space-3: 0.75rem;
+  --space-4: 1rem;
+  --space-5: 1.5rem;
+  --space-6: 2rem;
+  --space-7: 3rem;
+  --space-8: 4rem;
+}

package/dist/core/skills/built-in/hooman-design/assets/tokens/warm-atelier.css

@@ -0,0 +1,34 @@
+/* Direction tokens — warm-atelier */
+:root {
+  --bg: #f4efe6;
+  --surface: #fffaf2;
+  --surface-2: #ebe3d6;
+  --ink: #2c241b;
+  --muted: #6b5e4f;
+  --border: #ddd2c2;
+  --accent: #c45c26;
+  --accent-soft: #f3e0d4;
+  --accent-ink: #fffaf2;
+  --danger: #9b2c2c;
+  --success: #3d6b4f;
+  --warning: #b45309;
+  --focus: #c45c26;
+  --overlay: rgb(44 36 27 / 0.48);
+  --shadow: 0 1px 2px rgb(44 36 27 / 0.08);
+  --font-display: Georgia, "Times New Roman", ui-serif, serif;
+  --font-body: "Segoe UI", system-ui, sans-serif;
+  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
+  --radius: 0.375rem;
+  --leading-body: 1.55;
+  --tracking-caps: 0.07em;
+  --text-body: 1rem;
+  --text-small: 0.875rem;
+  --space-1: 0.25rem;
+  --space-2: 0.5rem;
+  --space-3: 0.75rem;
+  --space-4: 1rem;
+  --space-5: 1.5rem;
+  --space-6: 2rem;
+  --space-7: 3rem;
+  --space-8: 4rem;
+}

package/dist/core/skills/built-in/hooman-design/assets/waitlist-shell.html

@@ -0,0 +1,139 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Waitlist</title>
+    <style>
+      :root {
+        --bg: #f8fafc;
+        --ink: #0f172a;
+        --muted: #64748b;
+        --accent: #0f766e;
+        --surface: #ffffff;
+        --border: #e2e8f0;
+        --danger: #b91c1c;
+        --font-display: system-ui, -apple-system, sans-serif;
+        --font-body: system-ui, -apple-system, sans-serif;
+      }
+      * {
+        box-sizing: border-box;
+      }
+      body {
+        margin: 0;
+        min-height: 100vh;
+        display: grid;
+        place-items: center;
+        font-family: var(--font-body);
+        background: var(--bg);
+        color: var(--ink);
+        padding: 1.5rem;
+      }
+      .card {
+        width: min(100%, 26rem);
+        text-align: center;
+        background: var(--surface);
+        border: 1px solid var(--border);
+        border-radius: 0.375rem;
+        padding: 2rem 1.5rem;
+      }
+      .kicker {
+        margin: 0 0 0.75rem;
+        font-size: 0.75rem;
+        letter-spacing: 0.08em;
+        text-transform: uppercase;
+        color: var(--accent);
+        font-weight: 600;
+      }
+      h1 {
+        font-family: var(--font-display);
+        font-size: clamp(1.5rem, 3vw, 1.85rem);
+        letter-spacing: -0.02em;
+        margin: 0 0 0.5rem;
+        line-height: 1.2;
+      }
+      .lede {
+        margin: 0 0 1.5rem;
+        color: var(--muted);
+        font-size: 0.9375rem;
+        line-height: 1.5;
+      }
+      form {
+        display: flex;
+        flex-direction: column;
+        gap: 0.65rem;
+        text-align: left;
+      }
+      label {
+        display: flex;
+        flex-direction: column;
+        gap: 0.35rem;
+        font-size: 0.8125rem;
+        font-weight: 600;
+      }
+      input {
+        font: inherit;
+        padding: 0.65rem 0.75rem;
+        border: 1px solid var(--border);
+        border-radius: 0.375rem;
+      }
+      input:focus-visible {
+        outline: 2px solid var(--accent);
+        outline-offset: 1px;
+      }
+      .btn {
+        margin-top: 0.25rem;
+        padding: 0.7rem 1rem;
+        border: 0;
+        border-radius: 0.375rem;
+        background: var(--accent);
+        color: #fff;
+        font: inherit;
+        font-weight: 600;
+        cursor: pointer;
+      }
+      .btn:focus-visible {
+        outline: 2px solid var(--ink);
+        outline-offset: 2px;
+      }
+      .error {
+        color: var(--danger);
+        font-size: 0.8125rem;
+        font-weight: 400;
+      }
+      .social {
+        margin: 1rem 0 0;
+        font-size: 0.8125rem;
+        color: var(--muted);
+      }
+      [hidden] {
+        display: none !important;
+      }
+    </style>
+  </head>
+  <body>
+    <main class="card">
+      <p class="kicker">Early access</p>
+      <h1>Join the waitlist</h1>
+      <p class="lede">
+        One clear promise for what they get when invited. No fake “spots left”.
+      </p>
+      <form>
+        <label>
+          Work email
+          <input type="email" name="email" autocomplete="email" required />
+          <span class="error" hidden>Enter a valid email.</span>
+        </label>
+        <label>
+          Company
+          <span style="font-weight: 400; color: var(--muted)">(optional)</span>
+          <input name="company" autocomplete="organization" />
+        </label>
+        <button class="btn" type="submit">Request invite</button>
+      </form>
+      <p class="social">
+        We’ll email only about access. Replace with real policy.
+      </p>
+    </main>
+  </body>
+</html>

package/dist/core/skills/built-in/hooman-design/craft/accessibility-baseline.md

@@ -0,0 +1,32 @@
+# Accessibility baseline
+
+Target **WCAG 2.2 AA** as the working floor.
+
+## Contrast
+
+| Pair                                | Minimum |
+| ----------------------------------- | ------- |
+| Normal text                         | 4.5:1   |
+| Large text (≥24 px / ≥18.5 px bold) | 3:1     |
+| UI components / graphics            | 3:1     |
+| Focus vs adjacent                   | 3:1     |
+
+## Structure
+
+- One `h1` per view; heading levels do not skip
+- Buttons are `<button>`; links are `<a href>`
+- Form controls have visible labels (`<label for>`)
+- Images that convey meaning have `alt`; decorative images `alt=""`
+- Focus visible on all interactive controls; do not remove outlines without a replacement
+
+## Interaction
+
+- Hit targets ≥24×24 px (prefer 44×44 on touch)
+- Do not rely on color alone for status
+- Motion: respect `prefers-reduced-motion`
+- Keyboard: all primary actions reachable without a pointer
+
+## Language
+
+- Set `<html lang="...">`
+- Error text names the field and how to fix it

package/dist/core/skills/built-in/hooman-design/craft/anti-ai-slop.md

@@ -0,0 +1,27 @@
+# Anti-AI-slop rules
+
+Concrete rules that distinguish shipped product design from default LLM output.
+
+## Must-fix (P0)
+
+1. **Default Tailwind indigo as accent** — `#6366f1`, `#4f46e5`, `#4338ca`, `#3730a3`, `#8b5cf6`, `#7c3aed`, `#a855f7`. Use `DESIGN.md` / direction accent instead.
+2. **Two-stop "trust" gradient on the hero** — purple→blue, blue→cyan, indigo→pink. Prefer flat surfaces + intentional type.
+3. **Emoji as feature icons** — no `✨` `🚀` `🎯` `⚡` `🔥` `💡` as icons. Use monoline SVG with `currentColor`.
+4. **Generic Inter/Roboto display when a direction binds a serif** — honor `--font-display`.
+5. **Rounded card + colored left-border accent** — the canonical AI dashboard tile. Drop radius or the left border.
+6. **Invented metrics** — "10× faster", "99.9% uptime". Use real numbers or labelled placeholders.
+7. **Filler copy** — `lorem ipsum`, `feature one / two / three`, `placeholder text`.
+
+## Should-fix (P1)
+
+- Stock Unsplash / placehold.co / picsum heroes
+- More than ~12 raw hex values outside `:root`
+- Accent color used 6+ times on one screen (cap ~2 visible uses)
+- Identical "Hero → Features → Pricing → FAQ → CTA" with no variation
+
+## Polish (P2)
+
+- Decorative blob / wave backgrounds with no meaning
+- Perfect symmetry with no visual tension — vary density across sections
+
+Aim for ~80% proven patterns + ~20% distinctive choice (one bold type/color move, specific microcopy, one memorable micro-interaction).

package/dist/core/skills/built-in/hooman-design/craft/color-surfaces.md

@@ -0,0 +1,45 @@
+# Color and surfaces craft rules
+
+`DESIGN.md` / directions own the palette. This file governs how surfaces behave.
+
+## Roles (name them in `:root`)
+
+| Role                                   | Purpose                                                  |
+| -------------------------------------- | -------------------------------------------------------- |
+| `--bg`                                 | Page / slide canvas                                      |
+| `--surface`                            | Raised panel / card                                      |
+| `--surface-2`                          | Nested elevation (use sparingly)                         |
+| `--ink`                                | Primary text                                             |
+| `--muted`                              | Secondary text (still ≥ 4.5:1 on `--bg` / `--surface`)   |
+| `--border`                             | Hairlines, dividers                                      |
+| `--accent`                             | Primary action / sparse emphasis                         |
+| `--accent-soft`                        | Tinted chip / selected row / soft badge fill             |
+| `--accent-ink`                         | Text/icon on solid `--accent`                            |
+| `--danger` / `--success` / `--warning` | Status only                                              |
+| `--focus`                              | Focus ring / outline (often matches accent)              |
+| `--overlay`                            | Modal / dialog scrim                                     |
+| `--shadow`                             | Optional elevation (`none` when borders carry structure) |
+| `--leading-body` / `--tracking-caps`   | Body leading + ALL CAPS tracking                         |
+| `--text-body` / `--text-small`         | Default body / small sizes                               |
+
+## Rules
+
+1. **Flat first** — prefer solid fills over gradients. If a gradient exists, one subtle stop pair max, never as the only brand signal.
+2. **Accent budget** — ~2 strong accent moments per screen/slide (CTA + one highlight). Links can use a quieter tint.
+3. **Borders over shadows** for structure in product UI; soft shadows only when elevation must read on a busy canvas.
+4. **No raw hex sprawl** — new colors go in `:root`; components reference tokens.
+5. **Dark surfaces** — raise with border + slight luminance step, not heavy white glow.
+6. **Status color** — pair with icon or label; never color alone.
+
+## Contrast quick checks
+
+- Body on `--bg` / `--surface`: ≥ 4.5:1
+- Muted text: still readable; if it fails, lighten/darken `--muted`, don’t shrink type to “fix” it
+- Accent-on-accent text (e.g. white on teal): verify large and small sizes
+
+## Anti-patterns
+
+- Purple/indigo default stacks when direction specifies otherwise
+- Glassmorphism stacks (blur + translucency + border + shadow)
+- Every card a different pastel wash
+- Light gray text on colored badges that fails AA

package/dist/core/skills/built-in/hooman-design/craft/data-viz.md

@@ -0,0 +1,24 @@
+# Data visualization craft rules
+
+Charts exist to answer a question — not to decorate a dashboard.
+
+## Must
+
+1. **Real or labelled data** — if numbers are placeholders, mark them (`Sample`, `Fixture`) — never invent “+340% MoM”.
+2. **One question per chart** — title states the takeaway.
+3. **Axes and units** — labelled; don’t hide scale tricks.
+4. **Color** — categorical ≤ 5–6 hues from the direction palette; sequential for magnitude; never rainbow defaults.
+5. **Non-color cues** — pattern, labels, or shape when status matters (a11y).
+
+## Prefer
+
+- Simple bar / line / sparklines over 3D, donut stacks, or dual-axis confusion
+- Tables when precision > trend
+- Empty and loading treatments for chart panels (`state-coverage.md`)
+
+## Avoid
+
+- Chart.js / Recharts defaults with purple fills when the direction forbids them
+- Pie charts with >4 slices
+- Animating every redraw
+- Dashboards that are only charts with no written insight

package/dist/core/skills/built-in/hooman-design/craft/deck-slides.md

@@ -0,0 +1,46 @@
+# Deck / slide craft rules
+
+For HTML decks under `.hooman/design/<slug>/` with `[data-slide]`.
+
+## Frame
+
+- Each slide is a **fixed frame**: typically `width: 100vw; height: 100vh` (or 1280×720 logical for export fidelity)
+- Content lives in an inner stack with **safe padding** (≥ 6–8% of the short side, or `--space-7` / `--space-8`)
+- Use `display: flex; flex-direction: column;` on the slide; put scrollable regions only inside a designated body that still fits the frame
+
+## Chrome
+
+Reserve bands so body copy never collides:
+
+| Band   | Typical content                                     |
+| ------ | --------------------------------------------------- |
+| Top    | Section kicker, confidentiality, logo wordmark      |
+| Body   | Title, lede, cards/grid                             |
+| Bottom | Source line, slide index `03 / 08`, footer wordmark |
+
+Bottom chrome height is sacred — titles and cards must clear it.
+
+## One job per slide
+
+- One headline idea; supporting copy ≤ ~2 short paragraphs or a tight list
+- Prefer 2–3 cards over 6 cramped tiles
+- If content does not fit after type/spacing pass: **split the slide**
+
+## Type on slides
+
+- Display titles: `clamp()` with a **max** that still fits with chrome (often ≤ ~3.2rem at 720p-class frames)
+- Body on slides often 15–18 px; avoid marketing-site 24 px body inside a fixed frame
+- ALL CAPS kickers: tracking `0.08em`+
+
+## Capture / export
+
+- Mark every slide root `[data-slide]`
+- Run `export_design` (`format: "images"`) → `launch_subagent` (`kind: "design-review"`, binary) before delivery `export_design` (`pdf` / `images-to-pdf` / `pptx` / `figma` / `figma-deck` / `sketch`)
+- Prefer `figma-deck` when the handoff is Figma Slides; `sketch` when the handoff is Sketch; PDF/PPTX when the handoff is print/share-only. All of `figma` / `figma-deck` / `sketch` / `pptx` are screenshot-backed.
+- Fix P0 overflow/overlap before calling export
+
+## Anti-patterns
+
+- Long scrolling “slides” that are really pages (breaks PPTX pagination)
+- Absolute-positioned footers over flex content without padding-bottom compensation
+- Decorative full-bleed images that crush text contrast

package/dist/core/skills/built-in/hooman-design/craft/forms-validation.md

@@ -0,0 +1,35 @@
+# Forms and validation craft rules
+
+Forms are products. Treat every field as a state machine.
+
+## Structure
+
+- Visible `<label for>` (or wrapping label) on every control
+- Group related fields with `<fieldset>` / `<legend>` when it helps
+- One primary submit; secondary actions are quieter
+- Preserve user input on error — never wipe the form
+
+## Validation timing
+
+| Moment       | Behavior                                    |
+| ------------ | ------------------------------------------- |
+| Untouched    | No error chrome                             |
+| Blur (dirty) | Validate that field                         |
+| Submit       | Validate all; focus first invalid           |
+| Pending      | Disable submit; show progress on the button |
+
+## Messages
+
+- Name the field and how to fix it (“Email needs an @ domain”)
+- Place errors adjacent to the field (`aria-describedby`)
+- Don’t rely on color alone — icon or text prefix
+
+## Layout
+
+- Single column for auth / checkout unless desktop comparison needs two
+- Consistent label → control → hint/error vertical rhythm (`--space-2` / `--space-3`)
+- Password / OTP: support paste; show show/hide when useful
+
+## States to prototype
+
+Empty, filled, focus, error, disabled, read-only, pending submit — at least show error + pending slots in HTML shells (`hidden` toggles are fine).

package/dist/core/skills/built-in/hooman-design/craft/iconography.md

@@ -0,0 +1,19 @@
+# Iconography craft rules
+
+Icons support meaning; they are not decoration filler.
+
+## Rules
+
+1. **One system per artifact** — monoline SVG with `currentColor`, consistent viewBox (prefer `0 0 24 24`), 1.5–2 px stroke.
+2. **No emoji as icons** — see `anti-ai-slop.md`.
+3. **Optical size** — UI icons 16–20 px; marketing feature icons 24–32 px; never mix scales in one row without intent.
+4. **Align to type** — center icons on the text cap-height of adjacent labels; use flex `align-items: center` + gap from the spacing scale.
+5. **Accessible name** — decorative icons: `aria-hidden="true"`. Meaningful icons without visible text: `aria-label` on the control.
+6. **Touch** — icon-only buttons still need ≥24×24 px hit target (prefer 44×44 on touch).
+
+## Anti-patterns
+
+- Random Lucide + Heroicons + emoji in one screen
+- Filled + outlined mixed without hierarchy
+- Colored icons that fail contrast on the surface
+- Icon grids of 6+ “features” with generic metaphors (rocket, lightning, target)

package/dist/core/skills/built-in/hooman-design/craft/layout-overflow.md

@@ -0,0 +1,31 @@
+# Layout overflow craft rules
+
+Visual QA exists because source review cannot see these failures. Treat them as **P0 Must-fix**.
+
+## Must-fix (P0)
+
+1. **Text clipped by a fixed box** — descenders or last lines cut at `overflow: hidden`, card bottoms, or slide edges.
+2. **Overlapping layers** — headings through footers, body through badges, counters through copy, absolute chrome over content.
+3. **Fixed slide / viewport height with unbounded content** — `[data-slide]` at `100vh` / `100dvh` must fit **all** content with padding; shrink type, reduce blocks, or split slides — never let content spill.
+4. **Insufficient padding to chrome** — content closer than ~24–32 px to slide header, footer, or page counter.
+5. **Flex/grid children that cannot shrink** — long words / URLs without `overflow-wrap` / `min-width: 0`.
+
+## Should-fix (P1)
+
+- Cards with uneven internal padding (cramped bottom, airy top)
+- Multi-column rows where one cell wraps into another’s badge/meta
+- Sticky headers that cover focused content when scrolled
+- `line-clamp` without a real truncation strategy (tooltip / expand)
+
+## Deck / fixed-frame checklist
+
+Before capture:
+
+- [ ] Every `[data-slide]` content fits inside padding box at target viewport (default 1280×720 capture)
+- [ ] Footer / kicker / `01 / 08` never intersect body type
+- [ ] Card grids use consistent gaps; no badge-on-text collisions
+- [ ] Large display type has room for descenders + next element
+
+## After capture
+
+Read every `reviews/*.png` with `binary: true`. If any P0 appears, fix CSS/structure and re-capture — do not export.

package/dist/core/skills/built-in/hooman-design/craft/motion.md

@@ -0,0 +1,41 @@
+# Motion craft rules
+
+Motion supports hierarchy; it is not decoration.
+
+## Defaults
+
+- Duration: 120–200 ms for UI chrome; 200–320 ms for larger layout shifts
+- Easing: `cubic-bezier(0.2, 0.8, 0.2, 1)` or `ease-out` — avoid bounce/elastic on product UI
+- Prefer opacity + transform (`translate` / `scale`) over layout-thrashing properties
+
+## Must respect
+
+```css
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+}
+```
+
+## Allowed
+
+- Focus / hover state transitions on controls
+- Subtle enter for toasts, dialogs, drawers
+- Progress indicators that communicate wait time
+
+## Avoid
+
+- Continuous decorative loops (floating blobs, shimmer forever on static marketing)
+- Parallax that fights scroll reading
+- Auto-playing carousels without pause/controls
+- Motion as the only way to notice a state change
+
+## Decks
+
+Keep slide transitions minimal or none in HTML preview (scroll / snap is enough). Export screenshots are static — do not rely on animation to hide overflow.

package/dist/core/skills/built-in/hooman-design/craft/print.md

@@ -0,0 +1,37 @@
+# Print craft rules
+
+For one-pagers, handouts, and PDF via print CSS (not only screenshot PDF).
+
+## Setup
+
+```css
+@page {
+  size: A4;
+  margin: 16mm;
+}
+@media print {
+  .no-print {
+    display: none !important;
+  }
+  a[href]::after {
+    content: none; /* or show URL deliberately */
+  }
+  body {
+    background: #fff;
+    color: #000;
+  }
+}
+```
+
+## Rules
+
+1. **Ink-friendly** — flat blacks/grays; avoid large dark fills that waste toner unless brand requires it.
+2. **Page breaks** — `break-inside: avoid` on cards/figures; keep heading with following paragraph.
+3. **Hide chrome** — nav, sticky CTAs, cookie banners: `.no-print`.
+4. **Links** — either visible URL footnotes or clean text; don’t dump raw URLs after every word.
+5. **Decks** — prefer `export_design` with `format: "images-to-pdf"` or `"pptx"` for print/share, or `format: "figma-deck"` / `"sketch"` / `"figma"` for screenshot-backed Figma/Sketch handoffs; `format: "pdf"` (Chromium print) is for document-like HTML.
+6. **Print shells** — start from `resume-shell`, `business-card-shell`, `invite-shell`, or `flyer-shell` when the brief is a CV, card, invite, or handout.
+
+## Check
+
+Print-preview once (or export) before calling the artifact done when the deliverable is a PDF handout.

package/dist/core/skills/built-in/hooman-design/craft/responsive.md

@@ -0,0 +1,30 @@
+# Responsive craft rules
+
+Design for a primary viewport, then prove the critical breakpoints.
+
+## Breakpoints (suggested)
+
+| Name | Width   | Use                                       |
+| ---- | ------- | ----------------------------------------- |
+| `sm` | ≥640px  | Comfortable phone landscape / large phone |
+| `md` | ≥768px  | Tablet / split nav                        |
+| `lg` | ≥1024px | Desktop shell                             |
+| `xl` | ≥1280px | Wide marketing / dashboards               |
+
+Pick **one** primary (usually `lg` for product, `sm` for mobile-frame shells) and test one step down.
+
+## Patterns
+
+- Fluid type with `clamp()` for display; fixed steps for dense UI
+- Grid → single column before cards crush (`minmax(0, 1fr)` + `min-width: 0`)
+- Nav: collapse to disclosure / bottom bar rather than microscopic links
+- Decks: fixed `[data-slide]` frames are **not** responsive documents — design at capture size (e.g. 1280×720); don’t pretend mobile reflow
+
+## Touch vs pointer
+
+- Comfortable hit targets on small viewports
+- Hover-only affordances need a non-hover equivalent
+
+## Check
+
+Before capture on multi-breakpoint prototypes, resize once to the secondary width and fix overflow — then re-capture the primary.