@nerdev/skillset 0.2.1

package/skills/ui/refero-design/references/visual-workflow.md

@@ -0,0 +1,105 @@
+# Visual Workflow
+
+Use this reference only when the task needs visual exploration, generated mockups,
+bitmap assets, or post-build visual QA. Keep the main Refero workflow research-first:
+styles for taste, screens for product patterns, flows for journeys.
+
+## Image Generation Capability
+
+Image generation is optional. Use it only when the current environment exposes an image
+tool, or when the user has approved a CLI/API image workflow. Refero must still work
+in Claude Code, Codex, Cursor, Gemini CLI, Lovable, and other MCP-compatible agents when
+no image tool exists.
+
+In Codex Desktop, use the built-in `image_gen` / Image Gen tool when it is available.
+Generate each visual direction or bitmap asset as its own image result. Do not use
+browser screenshots, CSS drawings, inline SVG, or placeholder shapes as a substitute for
+generated bitmap assets when the reference lock calls for real imagery.
+
+If image generation is unavailable, present written reference-locked directions and
+implementation-ready prompts instead. Do not assume another agent can call Codex
+Desktop's built-in image tool just because Codex is installed locally; verify the tool
+is exposed and user-approved first.
+
+## Three Visual Directions
+
+Use this only when exploration is useful: variants, a new visual language, major
+redesigns, landing pages, or other high-visibility surfaces with several plausible
+directions. Do not run it for small edits, obvious component work, or production fixes
+with a clear source.
+
+1. Research styles first; add screens/flows when structure or journey matters.
+2. Create three distinct reference-locked directions with a primary source, traits to
+   preserve, borrowed details, media strategy, and rejects, unless the user asks for a
+   different count.
+3. If image generation is available and worth the latency, generate one independent
+   image per direction. Otherwise provide written directions with implementation-ready
+   prompts.
+4. Stop and ask the user to choose. The selected option becomes the visual target for
+   build and QA.
+
+Example format only. Replace these names and directions for every task based on the
+current brief and Refero research:
+
+```text
+1. [Direction name] - [specific layout, style, product framing, and primary reference].
+2. [Direction name] - [specific layout, style, product framing, and primary reference].
+3. [Direction name] - [specific layout, style, product framing, and primary reference].
+```
+
+## Visual Target Gate
+
+Before coding substantial visual work, identify the build target and what must not drift:
+
+```text
+Build target: [existing UI / user screenshot / Figma frame / URL capture / selected generated mockup / approved reference lock]
+What must not drift: [canvas, typography, accent roles, layout, media, density]
+```
+
+If no target exists and the visual direction is material, explore options or ask the
+user to approve one reference-locked direction first.
+
+## Generated Assets
+
+Generate assets only when the reference lock needs bitmap media: hero/product imagery,
+illustrations, textures, thumbnails, cutouts, or required replacement assets. Do not use
+image generation for standard icons, editable SVG systems, code-native UI, or fake
+product evidence.
+
+Before generating, write a short asset lock:
+
+```text
+Asset role: [hero image / texture / illustration / thumbnail / cutout]
+Slot: [dimensions/aspect ratio/location]
+Art direction: [source, palette, subject, rendering, crop, density]
+Avoid: [wrong palette, extra text, brand drift, generic placeholders]
+```
+
+Generated assets must be placed into the implementation before handoff or documented as
+blocked.
+
+## Visual QA
+
+After implementation, run a visual QA pass for substantial UI/design work:
+
+```text
+Source truth: [reference lock / selected mockup / screenshot / Figma / URL capture]
+Implementation evidence: [local screenshot, deployed URL screenshot, or captured app state]
+Viewport/state: [desktop/mobile, route, theme, interaction state]
+Final result: [passed / blocked]
+```
+
+Check typography, spacing/layout, colors/tokens, imagery/assets, relevant component
+states, and product copy. Use the relevant craft references during QA when judging
+typography, color, motion, icons, accessibility, images, copy, and generic-design drift.
+
+Classify issues by severity:
+
+- `P0`: broken task, unreadable/overlapping UI, or severe accessibility issue
+- `P1`: major design drift or likely user-facing usability regression
+- `P2`: moderate visual mismatch, missing state, responsive issue, or asset drift
+- `P3`: polish that can follow after handoff
+
+Do not hand off visual work with unresolved P0/P1/P2 findings unless clearly blocked by
+missing source access, missing assets, or an unavailable tool. If blocked, say what
+evidence is missing and what should be checked next.

package/skills/ui/style-animaxxing/SKILL.md

@@ -0,0 +1,48 @@
+---
+name: style-animaxxing
+description: "Apply the Animaxxing art direction: monochrome editorial design, Rethink Sans and JetBrains Mono, poster type, hairlines, and a curated motion treatment. Use for 'animaxx it', the Animaxxing aesthetic, or a requested Swiss-style monochrome redesign. Use animaxxing for reusable effects while preserving another brand. Not for framework routing or isolated GSAP API questions."
+license: MIT
+metadata:
+  short-description: The Animaxxing look and its motion art direction
+---
+
+# Animaxxing Style
+
+The look of [Animaxxing](https://github.com/johnpolacek/animaxxing): black, white, neutral gray, oversized sans against small uppercase mono, hairline rules, scattering letters, and particle-assembled controls.
+
+This skill owns visual design and selects how motion supports it. `animaxxing` supplies the reusable vanilla TypeScript and GSAP recipes. The matching `gsap-<framework>` skill (including `gsap-vanilla`) owns **mount → initial state → intro → settled → outro → end state → unmount**, navigation, interruption, and cleanup timing.
+
+## Choose the scope
+
+- Apply a full restyle only when the request authorizes it; preserve an existing brand otherwise. An explicit Animaxxing redesign needs no further confirmation.
+- For the full treatment, install and load `animaxxing` and the matching framework skill, then use the surface choices below. If either is unavailable, identify the missing skill; do not invent its recipes or lifecycle guidance.
+- For the design with minimal or no animation, apply the tokens and layout and reduce or omit display effects. Do not require a motion skill or GSAP for a static restyle.
+- For effects on another brand, use `animaxxing` directly without applying these fonts, colors, or layout rules.
+
+## Apply and load progressively
+
+For a full restyle, work in this order; for a focused change, load only the relevant reference.
+
+| Task | Reference |
+|---|---|
+| Colors, fonts, scales, spacing, focus, light/dark themes | [Tokens](references/tokens.md) |
+| Poster/Statement/Label/Annotation/BodyCopy roles; header, grid, rail, ledgers, cards | [Typography and layout](references/typography-and-layout.md) |
+| Choose effects, map them to surfaces, set the Animaxxing pacing | [Motion art direction](references/motion-vocabulary.md), then the selected references in `animaxxing` |
+| Check the changed look | [Verification](references/verification.md); for motion, also use the motion and framework skills' relevant checks |
+
+## Design constraints
+
+- Load variable Rethink Sans (400–800) and JetBrains Mono (100–800) through the project's font pipeline. Use plain CSS tokens, or their Tailwind v4 mapping if the project uses it.
+- Neutral token colors only; no decorative shadows or gradients. Use hairlines by default, 2px borders for controls/cards, and tight radii.
+- Flush left, ragged right. Poster type may crop deliberately; reading text and annotations never crop. Annotations stay at least 11px; uppercase mono is for metadata, not body copy.
+- Reading text stays still. Display text can scatter, split, or wave; the hero subhead is the speak-in exception for the full treatment.
+- Ordinary UI motion uses the duration/ease/distance values in the tokens reference; display effects deliberately use larger moves. The motion skill owns implementation and text stability checks.
+- Motion is part of this art direction, but the requested intensity takes precedence. Keep the composition readable with all effects omitted and under reduced motion.
+
+## Composition boundary
+
+Select and configure effects; do not copy their implementations into this skill. Load recipe files from the installed `animaxxing` skill by name, without assuming skill folders are siblings on disk. The framework controller calls the selected builders and owns their phase state and cleanup handles. This skill never installs routing hooks, owns a navigation wait, or decides mount, unmount, or replay timing.
+
+## Readable design
+
+Static styles keep meaningful content readable. Invisible entrances use the matching installed framework skill’s `references/initialization.md`; effect rollback belongs to `animaxxing`’s `references/effect-restoration.md`. Do not add unconditional hiding, readiness timers, or route recovery to this style. Preserve the selected choreography when initialization succeeds.

package/skills/ui/style-animaxxing/agents/openai.yaml

@@ -0,0 +1,7 @@
+interface:
+  display_name: "Animaxxing Style"
+  short_description: "The Animaxxing look and its motion art direction"
+  default_prompt: "Use $style-animaxxing to restyle this site in the Animaxxing look, composing animaxxing and the matching GSAP framework skill when animation is requested."
+
+policy:
+  allow_implicit_invocation: true

package/skills/ui/style-animaxxing/references/motion-vocabulary.md

@@ -0,0 +1,51 @@
+# Motion art direction
+
+Motion is part of the Animaxxing look: big display gestures, quiet reading text, and controls that assemble from particles. This file selects and configures effects. Load `animaxxing` for their implementation and the matching framework skill for **mount → initial state → intro → settled → outro → end state → unmount**.
+
+## Intensity
+
+- **Full treatment:** use the surface mapping below. One ambient effect per display surface; reading copy stays still, with the hero subhead as the speak-in exception.
+- **Minimal motion:** keep tokens, typography, and composition. Prefer brief fades or rises and omit scattering, speak-in, waves, particles, and blast-off. Ordinary reading text remains immediately readable.
+- **No animation:** render the same settled composition without splits, canvases, or GSAP. Do not add initial hiding or phase markers for effects that will not run.
+
+The user's requested intensity takes precedence. System or app reduced motion also suppresses display and ambient effects; the motion skill and framework controller own readable endpoints and completion behavior.
+
+## Recipe selection
+
+Install and load `animaxxing`, then read only the selected reference inside that skill. Do not assume its installation directory is adjacent to this one.
+
+| Visual choice | Reference in `animaxxing` |
+|---|---|
+| Ordinary fade/rise/wipe pairs and route marker values | `references/motion-vocabulary.md` |
+| Masked display entrance; elastic wordmark | `references/recipes/split-entrances.md` |
+| Scattering headline and coordinated page items | `references/recipes/route-letters.md` |
+| Spoken hero subhead | `references/recipes/speak-in.md` |
+| Ambient heading wave | `references/recipes/wave.md` |
+| Hero dispersal | `references/recipes/blast-off.md` |
+| Button/card/link/field treatments | `references/recipes/particle-effects.md` and `particle-field.md` in the same directory |
+
+## Configuration for this look
+
+Use the ordinary motion values in [tokens](tokens.md#motion-tokens). The motion recipes carry matching example defaults; when composing them, keep the selected values in the consuming app's motion module. Display recipes deliberately use longer sequences and larger spreads.
+
+Rethink Sans display type rests at 800, so the wave's example dips through 400–500 and returns to 800. Speak-in's `broken` finish uses 400–800. These are settings for this style; the reusable recipes can use other supported font ranges. Particle canvases use `color: var(--foreground)` from the theme, with sufficient contrast against the surface.
+
+Use the route recipe's `letters` treatment for the main display headline and standard rise for supporting page items. The framework controller applies the recipe's target markers, initial visibility, and cleanup; this style does not add a second readiness or navigation mechanism.
+
+## Surface effects
+
+For the full treatment, select these recipes from `animaxxing`. These are art-direction choices mapped onto the framework skill's phases; its controller owns execution timing.
+
+| Surface | Intro | Settled | Outro |
+|---|---|---|---|
+| Hero headline | route `letters` | `startWave(heading, { period: 1.5 })` | `blastOff` (on a call to action) or route exit |
+| Hero subhead | `speakIn(el, { emphasis, delay: 0.3 })` after the letters land | finishes persist | `blastOff` throws the words |
+| Primary call to action | `reactor.enter(delay)` | embers | `blast()` when pressed, `exit()` on route exit |
+| Secondary call to action | `marquee.enter(delay)` | runners | same |
+| Card | `resolve.enter(index * 0.09)` on idle | one runner, glints | `exit()` |
+| Onward link | `slipstream.enter()` on idle | drifting hairlines | `blast()` when pressed |
+| Command block or giant field | `ignite.enter(0.75 + index * 0.25)` on entering | embers off the rule | `blast()` on copy or submit, `exit()` on route exit |
+| Wordmark | `charsSpringIn` plus underline `scaleX 0 → 1` | still | none when the framework keeps the shell persistent |
+| Everything else | route standard rise | still | route exit |
+
+Timing on the hero, for reference: letters land from 0.75s; the subhead starts speaking at 1.05s; the buttons enter at speak start plus 0.2s and 0.35s; the wave starts on `idle`. The blast-off visual disperses the hero; its completion handle belongs to the framework controller. Do not substitute a fixed navigation timer for completion.

package/skills/ui/style-animaxxing/references/tokens.md

@@ -0,0 +1,288 @@
+# Tokens
+
+Read this to set up colors, fonts, type scale, spacing, radii, borders, focus, and selection. Two forms are given: plain CSS custom properties, and the Tailwind v4 `@theme inline` mapping that turns them into utilities.
+
+## Colors
+
+Monochrome only. Twelve semantic tokens, in a light and a dark scheme. Components consume them by name and never by hex.
+
+Scheme precedence, highest first:
+
+1. `data-theme="dark"` or `data-theme="light"` on `<html>`: an explicit user choice, written by a toggle and persisted (localStorage is fine).
+2. `prefers-color-scheme`: the operating-system setting, used when no explicit choice exists.
+3. Light.
+
+```css
+:root {
+  color-scheme: light;
+
+  --canvas: #ffffff;
+  --foreground: #171717;
+  --muted: #525252;
+  --border: #d4d4d4;
+  --surface: #fafafa;
+  --surface-hover: #f0f0f0;
+  --inverse: #171717;
+  --inverse-hover: #404040;
+  --inverse-foreground: #ffffff;
+  --focus: #171717;
+  --selection: #171717;
+  --selection-foreground: #ffffff;
+}
+
+/* The operating-system setting, unless the user pinned the light scheme. */
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme="light"]) {
+    color-scheme: dark;
+
+    --canvas: #0a0a0a;
+    --foreground: #ededed;
+    --muted: #a3a3a3;
+    --border: #262626;
+    --surface: #171717;
+    --surface-hover: #262626;
+    --inverse: #ededed;
+    --inverse-hover: #d4d4d4;
+    --inverse-foreground: #0a0a0a;
+    --focus: #ededed;
+    --selection: #ededed;
+    --selection-foreground: #0a0a0a;
+  }
+}
+
+/* An explicit user choice wins at any operating-system setting. */
+:root[data-theme="dark"] {
+  color-scheme: dark;
+
+  --canvas: #0a0a0a;
+  --foreground: #ededed;
+  --muted: #a3a3a3;
+  --border: #262626;
+  --surface: #171717;
+  --surface-hover: #262626;
+  --inverse: #ededed;
+  --inverse-hover: #d4d4d4;
+  --inverse-foreground: #0a0a0a;
+  --focus: #ededed;
+  --selection: #ededed;
+  --selection-foreground: #0a0a0a;
+}
+
+body {
+  background: var(--canvas);
+  color: var(--foreground);
+  font-family: var(--font-sans);
+}
+```
+
+Roles:
+
+| Token | Role |
+|---|---|
+| `canvas` | The page ground. |
+| `foreground` | Text and rules at full strength. |
+| `muted` | Supporting copy, labels, annotations. Meets AA on canvas and surface. |
+| `border` | Hairlines and quiet outlines. |
+| `surface`, `surface-hover` | Cards and panels one step off the canvas. |
+| `inverse`, `inverse-hover`, `inverse-foreground` | The solid button and any inverted band. Supporting copy on an inverted band uses `inverse-foreground` at 75% opacity, because `muted` falls below AA there. |
+| `focus` | The keyboard focus ring. |
+| `selection`, `selection-foreground` | Text selection, inverted. |
+
+Particle canvases read their color from `color` on the canvas element, so give the canvas `color: var(--foreground)` and they follow the scheme.
+
+Blend colors only while the scheme switches, so a toggle does not flash. Add `theme-transitioning` to `<html>` for the switch and remove it 250ms later:
+
+```css
+:root.theme-transitioning,
+:root.theme-transitioning *,
+:root.theme-transitioning *::before,
+:root.theme-transitioning *::after {
+  transition-duration: 0.25s !important;
+  transition-property: background-color, border-color, color, fill, outline-color, stroke, text-decoration-color !important;
+  transition-timing-function: linear !important;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :root.theme-transitioning,
+  :root.theme-transitioning *,
+  :root.theme-transitioning *::before,
+  :root.theme-transitioning *::after {
+    transition-duration: 0s !important;
+  }
+}
+```
+
+## Fonts
+
+| Token | Face | Axis | Use |
+|---|---|---|---|
+| `--font-sans` | Rethink Sans, variable | `wght` 400 to 800 | Everything that is read, and all display type. |
+| `--font-mono` | JetBrains Mono, variable | `wght` 100 to 800 | Labels, annotations, figures, code. |
+
+800 is the top of Rethink Sans's axis. Asking for 900 clamps to the same rendering, so the system names the weight it gets: `font-weight: 800` for display, 600 for emphasis, 400 at rest. Animated weight stays inside 400 to 800.
+
+Disable ligatures in code so figures stay tabular:
+
+```css
+code, pre { font-variant-ligatures: none; }
+```
+
+## Type scale
+
+The two poster sizes are fluid and measured in `cqi`, so they respond to whatever column or frame they sit in and fall back to the viewport when no container is declared. Put `container-type: inline-size` on the column that owns a poster.
+
+| Token | Size | Line height | Letter spacing | Role |
+|---|---|---|---|---|
+| `poster` | `clamp(3.25rem, 18cqi, 15rem)` | 0.84 | -0.045em | Structural graphic type. May be cropped. |
+| `statement` | `clamp(2.75rem, 7cqi, 4.5rem)` | 0.95 | -0.03em | One size down; still reads as a sentence. Measure 18ch. |
+| `display` | 2.25rem | 2.5rem | -0.02em | Card and section headings. |
+| `title` | 1.5rem | 2rem | -0.01em | Subheadings. |
+| `lead` | 1.125rem | 1.75rem | | Intro copy. |
+| `body` | 1rem | 1.5rem | | Body copy. Measure 68ch, or 42ch narrow. |
+| `caption` | 0.75rem | 1rem | 0.02em | Mono labels. |
+| `annotation` | 0.6875rem | 1rem | 0.08em | Mono margin notes. The floor. |
+
+## Spacing, radii, borders
+
+| Token | Value |
+|---|---|
+| `--spacing-gutter` | 1.5rem |
+| `--spacing-gutter-lg` | 2.5rem |
+| `--spacing-section` | 4rem |
+| `--radius-xs` | 0.125rem |
+| `--radius-sm` | 0.25rem |
+| `--radius-md` | 0.375rem |
+| `--radius-lg` | 0.5rem |
+| `--radius-xl` | 0.75rem |
+| `--border-width-hairline` | 1px |
+| `--border-width-strong` | 2px |
+
+Radii are deliberately tight to keep the system editorial. Hairline is the default separator; strong is for chips, buttons, and cards.
+
+## Focus and selection
+
+```css
+:focus-visible {
+  outline: var(--border-width-strong) solid var(--focus);
+  outline-offset: 2px;
+}
+
+::selection {
+  background: var(--selection);
+  color: var(--selection-foreground);
+}
+
+button { cursor: pointer; }
+```
+
+Interactive elements that sit on a canvas of their own use a wider offset so the ring clears the particles: `outline-offset: 4px`.
+
+## Hatch
+
+A fill made of diagonal hairlines cut out of a solid block. Used where a texture is needed without a second color.
+
+```css
+.hatch {
+  background-color: var(--foreground);
+  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath d='M-1 9L9-1M-1 1L1-1M7 9L9 7' stroke='black' stroke-width='1'/%3E%3C/svg%3E");
+  mask-size: 8px 8px;
+  mask-repeat: repeat;
+}
+```
+
+## Tailwind v4 mapping
+
+With Tailwind, the same tokens become utilities (`bg-canvas`, `text-muted`, `border-border`, `bg-inverse`, `text-poster`, `px-gutter`, `rounded-lg`, `border-hairline`):
+
+```css
+@import "tailwindcss";
+
+@theme inline {
+  --color-canvas: var(--canvas);
+  --color-foreground: var(--foreground);
+  --color-muted: var(--muted);
+  --color-border: var(--border);
+  --color-surface: var(--surface);
+  --color-surface-hover: var(--surface-hover);
+  --color-inverse: var(--inverse);
+  --color-inverse-hover: var(--inverse-hover);
+  --color-inverse-foreground: var(--inverse-foreground);
+  --color-focus: var(--focus);
+  --color-selection: var(--selection);
+  --color-selection-foreground: var(--selection-foreground);
+
+  --font-sans: var(--font-rethink-sans);
+  --font-mono: var(--font-jetbrains-mono);
+
+  --spacing-gutter: 1.5rem;
+  --spacing-gutter-lg: 2.5rem;
+  --spacing-section: 4rem;
+
+  --radius-xs: 0.125rem;
+  --radius-sm: 0.25rem;
+  --radius-md: 0.375rem;
+  --radius-lg: 0.5rem;
+  --radius-xl: 0.75rem;
+
+  --border-width-hairline: 1px;
+  --border-width-strong: 2px;
+
+  --text-poster: clamp(3.25rem, 18cqi, 15rem);
+  --text-poster--line-height: 0.84;
+  --text-poster--letter-spacing: -0.045em;
+
+  --text-statement: clamp(2.75rem, 7cqi, 4.5rem);
+  --text-statement--line-height: 0.95;
+  --text-statement--letter-spacing: -0.03em;
+
+  --text-annotation: 0.6875rem;
+  --text-annotation--line-height: 1rem;
+  --text-annotation--letter-spacing: 0.08em;
+
+  --text-caption: 0.75rem;
+  --text-caption--line-height: 1rem;
+  --text-caption--letter-spacing: 0.02em;
+
+  --text-body: 1rem;
+  --text-body--line-height: 1.5rem;
+
+  --text-lead: 1.125rem;
+  --text-lead--line-height: 1.75rem;
+
+  --text-title: 1.5rem;
+  --text-title--line-height: 2rem;
+  --text-title--letter-spacing: -0.01em;
+
+  --text-display: 2.25rem;
+  --text-display--line-height: 2.5rem;
+  --text-display--letter-spacing: -0.02em;
+}
+```
+
+`--font-rethink-sans` and `--font-jetbrains-mono` are whatever variables the project's font loader emits. Without a loader, set them from `@font-face` or the Google Fonts stylesheet: `--font-rethink-sans: "Rethink Sans", system-ui, sans-serif; --font-jetbrains-mono: "JetBrains Mono", ui-monospace, monospace;`.
+
+## Motion tokens
+
+Art-direction defaults for this look. Configure the selected `animaxxing` recipes with these values; its recipes remain usable without this token file. Keep the selected values in one module in the consuming app.
+
+```ts
+export const DURATION = { micro: 0.14, component: 0.2, page: 0.28 } as const;
+
+export const EASE = {
+  /** Entrances decelerate: fast at first, settled at the end. */
+  entrance: "power2.out",
+  /** Exits accelerate away and feel shorter than entrances. */
+  exit: "power2.in",
+  /** Position or state shifts that start and end at rest. */
+  shift: "power2.inOut",
+} as const;
+
+export const SHIFT = { micro: 4, component: 8, page: 16 } as const;
+
+export const STAGGER = { tight: 0.03, loose: 0.05 } as const;
+
+/** Rethink Sans's whole animatable range. Above 800 clamps and renders identically. */
+export const WEIGHT = { rest: 400, emphasis: 600, display: 800 } as const;
+```
+
+Micro motion runs 100 to 180ms, components 160 to 240ms, pages and major panels 220 to 320ms. A coordinated sequence rarely exceeds 500ms, which is why staggers are small. Display effects in the recipes run longer on purpose and are the exception, not the rule.

package/skills/ui/style-animaxxing/references/typography-and-layout.md

@@ -0,0 +1,149 @@
+# Typography and layout
+
+Read this to compose pages. The system runs on International Typographic Style contrast: oversized Rethink Sans statements against compact supporting copy, everything flush left and ragged right on a twelve-column grid ruled with hairlines.
+
+Class strings below are Tailwind v4 against the tokens reference. Each carries a plain-CSS equivalent in prose where the mapping is not obvious.
+
+## Type roles
+
+Five roles name the contrast so compositions can be assembled without a hero component baking one arrangement in.
+
+| Role | Element | Classes | Notes |
+|---|---|---|---|
+| Poster | `p` or heading | `font-sans text-poster font-extrabold text-balance` | Structural graphic type, fluid to its container. Never for text that must be read in full. Add `[margin-inline-start:-0.055em]` to pull the left side-bearing off so the glyph edge, not the box, aligns to the grid. |
+| Statement | `p` or heading | `max-w-[18ch] font-sans text-statement font-extrabold text-balance` | One size down: an oversized statement that still reads as a sentence. |
+| Label | `span` | `font-mono text-caption uppercase text-muted` | The metadata voice. Anchors a grid cell; never competes with it. |
+| Annotation | `p` | `max-w-[46ch] font-mono text-annotation uppercase text-muted` | The smallest type. Kept above 11px, never cropped. |
+| BodyCopy | `p` | `font-sans text-body text-pretty max-w-[68ch]` | Supporting copy at a comfortable measure. `max-w-[42ch]` for the narrow measure. |
+
+Support tone: `text-muted` on canvas and surface; `text-inverse-foreground/75` on an inverted band.
+
+**Crop.** Oversized type is clipped at a deliberate boundary instead of shrunk: wrap it in `overflow-hidden` (and `flex justify-end` to crop the start edge). Only display type is ever cropped.
+
+## The display setting
+
+Card headings, story titles, and any heading below poster scale share one setting:
+
+```
+DISPLAY = "font-sans font-extrabold leading-[0.84] tracking-[-0.045em]"
+```
+
+Plain CSS: `font-weight: 800; line-height: 0.84; letter-spacing: -0.045em`. For character-animated targets, follow the character animation guidance below.
+
+Card headings: `font-sans text-4xl font-extrabold uppercase tracking-[-0.03em] sm:text-5xl`.
+
+## Character animation
+
+When character motion is selected, load `animaxxing` and its `references/text-stability.md` before splitting. That reference owns kerning, font readiness, mask clearance, and split/revert checks. Omit `text-balance` on split targets and use stable normal wrapping. Preserve the design's font, scale, and tracking; choose words or lines if character splitting would compromise them.
+
+## Mono vocabulary
+
+```
+MONO_LABEL = "font-mono text-caption font-bold uppercase tracking-[0.08em]"
+MONO_NOTE  = "font-mono text-annotation uppercase tracking-[0.08em]"
+FIGURE     = MONO_NOTE + " tabular-nums"
+```
+
+Numbers in a ledger are `FIGURE`. Section numbers are two digits: `01 · Wikipedia`, `Ch. 01 / 04`. The middle dot is a real `·` with spaces either side.
+
+## Chips and buttons
+
+Strong border, tight radius, uppercase extrabold sans at a small size.
+
+```
+CHIP         = "inline-flex h-12 items-center gap-2.5 rounded-xl border-2 px-5 font-sans text-[13px] font-extrabold uppercase tracking-[0.04em] transition-colors"
+CHIP_SOLID   = CHIP + " border-inverse bg-inverse text-inverse-foreground hover:bg-inverse-hover"
+CHIP_OUTLINE = CHIP + " border-foreground text-foreground hover:bg-surface-hover"
+CHIP_QUIET   = CHIP + " border-border text-muted hover:border-foreground hover:text-foreground"
+SMALL_CHIP   = "inline-flex h-10 items-center rounded-lg border-2 border-foreground px-4 font-sans text-caption font-extrabold uppercase tracking-[0.04em] text-foreground transition-colors hover:bg-surface-hover"
+```
+
+Calls to action are the same shape at display size:
+
+```
+BUTTON_SOLID   = "inline-flex cursor-pointer items-center rounded-lg bg-inverse px-6 py-3 font-sans text-4xl font-extrabold uppercase tracking-[-0.02em] text-inverse-foreground transition-colors hover:bg-inverse-hover focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-focus sm:px-8 sm:py-4 sm:text-5xl"
+BUTTON_OUTLINE = same, with "border-2 border-foreground bg-transparent text-foreground hover:bg-surface-hover" in place of the inverse fill
+```
+
+For the full motion treatment, the primary action is solid and gets `reactor`; the secondary is outlined and gets `marquee` from `animaxxing`. With minimal or no motion, keep the same button styling. Only one solid button per composition.
+
+The `transition-colors` on chips and buttons is the one CSS transition in the system. GSAP never animates `color`, so they do not collide.
+
+## Page grammar
+
+### Site shell
+
+Site chrome: a header with the wordmark, then the page, then a hairline-ruled footer. The wordmark is lowercase mono, tracked out, muted, with a 1px underline drawn by `scaleX` on entrance. The footer carries the credit and the theme toggle at `text-caption` mono.
+
+```
+header: "px-gutter pt-gutter-lg sm:px-gutter-lg" > "mx-auto flex min-h-9 w-full max-w-7xl items-center justify-between gap-4"
+wordmark: "relative inline-block font-mono text-base uppercase tracking-[0.08em] text-muted sm:text-lg"
+footer: "mt-auto border-t border-border px-gutter py-10 sm:px-gutter-lg"
+```
+
+Where the framework controller keeps the shell persistent, give it the first-load entrance from the motion vocabulary; the framework skill owns persistence and replay timing.
+
+### Page section
+
+```
+main: "flex flex-1 flex-col"
+section: "px-gutter pt-10 pb-16 sm:px-gutter-lg" > "mx-auto w-full max-w-7xl"
+```
+
+### Sticky header strip
+
+A redesigned site's own chrome, inside the page:
+
+```
+header: "sticky top-0 z-30 -mx-gutter border-b border-border bg-canvas px-gutter sm:-mx-gutter-lg sm:px-gutter-lg"
+row:    "flex min-h-14 items-center gap-x-8 py-2"
+```
+
+Left to right: the site's name as `MONO_LABEL` in foreground, a nav of `MONO_NOTE` links in muted that turn foreground on hover, a `FIGURE` clock or meta pushed right, and one `SMALL_CHIP` action. Below `md`, the nav hides and the chip takes the right edge.
+
+### Twelve-column grid and the chapters rail
+
+```
+grid: "mt-8 grid grid-cols-12 gap-x-6 gap-y-8"
+rail: "col-span-12 lg:col-span-1"
+body: "col-span-12 lg:col-span-11"
+```
+
+The rail lists the page's chapters, numbered `01` to `04`. At `lg` it turns on its side: `lg:sticky lg:top-20 lg:h-[calc(100vh-6rem)] lg:rotate-180 lg:border-l lg:border-border lg:pl-3 lg:[writing-mode:vertical-rl]`. Below `lg` it is a row of chips that scrolls horizontally. The current chapter carries `aria-current="page"` and foreground color; the rest are muted.
+
+```
+RAIL_LINK = MONO_LABEL + " inline-flex shrink-0 items-center gap-2 rounded-lg px-2.5 py-2 transition-colors lg:py-2.5"
+```
+
+Poster headlines take eight columns; a photograph takes four and is cropped at the gutter.
+
+### Ledgers
+
+Dense lists are hairline-ruled rows, figures right, no zebra striping:
+
+```
+ROW = "grid grid-cols-[3rem_minmax(0,1fr)] items-start gap-x-6 border-b border-border py-3 lg:min-h-10 lg:grid-cols-[4rem_minmax(0,1fr)_14.5rem_5.5rem_5.5rem_4.5rem] lg:items-center lg:py-2.5"
+```
+
+The first story or item is set in `DISPLAY` type over its actions; the rest are rows. Below `lg` each row folds its figures into one `FIGURE` line under the title.
+
+### Cards
+
+```
+card: "group block h-full cursor-pointer rounded-lg border-2 border-border bg-surface p-6 transition-colors hover:border-foreground hover:bg-surface-hover focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-focus sm:p-8"
+```
+
+Anatomy, top to bottom: a `Label` row (`01 · Source` left, `Soon` right when the card is a placeholder), the heading in the card display setting at `mt-8`, a `BodyCopy` blurb in muted at `mt-4` and `max-w-[36ch]`, and an `Annotation` call to action in foreground at `mt-8` ending in ` →`. The whole card is the link. Cards sit in `grid gap-6 sm:grid-cols-2 lg:grid-cols-3`.
+
+### Forms
+
+A text field is a rule, not a box: `block w-full border-b-[3px] border-foreground bg-transparent py-3 font-sans font-extrabold text-foreground placeholder:text-border outline-none!`, at whatever poster size the column allows. The keyboard ring is handled by the field's own `focus-visible` or by the particle treatment; suppress the browser outline only when one of those replaces it. Labels stay in the DOM as `sr-only` when the placeholder carries the visible label.
+
+## Composition rules
+
+- Flush left, ragged right. No justified text, no centered blocks.
+- One poster or statement per view. Everything else supports it.
+- Hairlines rule; strong borders outline interactive things.
+- Numbers are tabular mono. Dates, times, counts, and chapter marks all read as figures.
+- Photographs are monochrome, cropped hard at the grid, never rounded beyond `rounded-lg`.
+- Empty space is a material. Section spacing is `--spacing-section`; do not fill it.