@ericrisco/rsc 1.0.26 → 1.0.28

package/skills/pick-ui-library/SKILL.md

@@ -0,0 +1,100 @@
+---
+name: pick-ui-library
+description: "Pick the frontend library for a task from a curated list: dialogs and popovers, command palette, toasts, one-time-password input, charts, virtualization, drag and drop, state, conditional classNames, variants, dark mode. Use instead of hand-rolling a component or installing an abandoned package."
+tags: [frontend, libraries, dependencies, react, ui]
+recommends: [react, nextjs, animate]
+profiles: [full]
+origin: emilkowalski (MIT, adapted)
+---
+
+# Picking The Right Library
+
+> **SDD gate.** If this fired on a **new, non-trivial feature or behaviour change** and there is
+> **no approved spec + plan** under `02-DOCS/wiki/sdd/`, hand off to `../specify/SKILL.md` first —
+> it runs brainstorm → spec → plan → tasks before any code, then routes back here once the plan is
+> approved. Build straight from here only for a genuinely one-line / low-risk change, or a bug fix
+> restoring intended behaviour. Method: `../sdd/SKILL.md`.
+
+**Hand-offs.** Animating what you install is `../animate/SKILL.md`'s. Sonner specifically has its own
+guide, `../ask-sonner/SKILL.md`. Framework-level architecture is `../react/SKILL.md`'s and
+`../nextjs/SKILL.md`'s — this skill picks the dependency, it does not design the app.
+
+A lookup skill. When invoked with a task ("I need toasts", "what should I use for drag and drop?"), match the task to the curated list below and recommend the library. These are deliberate, taste-driven picks — don't substitute alternatives outside this list unless the user asks for one or the task genuinely isn't covered.
+
+## How to use this
+
+1. **Identify the task**, not the library the user named. "I need to show a dropdown" is a UI-primitives task (base-ui), even if they asked about something else.
+2. **Check what's already installed.** Look at `package.json` first. If the project already uses a listed library, use it. If it uses a competitor (e.g. react-window instead of Virtuoso), flag the recommendation but don't churn the dependency without being asked.
+3. **Recommend one library**, state what it's for in one sentence, and install/wire it up if that's part of the request. Don't present a menu of options when the list has a clear answer.
+4. If the task isn't covered by the list, say so explicitly and recommend from your own knowledge — but be clear you've left the curated list.
+
+## The list
+
+### UI components & primitives
+
+| Task | Library |
+| --- | --- |
+| Unstyled, accessible UI components (dialogs, popovers, menus, selects…) | [base-ui](https://base-ui.com) |
+| Command menus (⌘K palettes) | [cmdk](https://cmdk.paco.me) |
+| Toasts / notifications | [Sonner](https://sonner.emilkowal.ski) |
+| One-time password / verification code inputs | [input-otp](https://input-otp.rodz.dev) |
+| Customizable GUIs / control panels | [Leva](https://github.com/pmndrs/leva) — [dialkit](https://joshpuckett.me/dialkit) is an alternative |
+
+### Motion & visuals
+
+| Task | Library |
+| --- | --- |
+| General-purpose animation (springs, layout animations, enter/exit) | [motion](https://motion.dev) (Framer Motion) |
+| Animating numbers (counters, prices, stats) | [NumberFlow](https://number-flow.barvian.me) |
+| Animated text components | [torph](https://torph.lochie.me/) |
+| 3D globes | [Cobe](https://cobe.vercel.app) |
+| Dynamic OG images (HTML/CSS → SVG/PNG) | [Satori](https://github.com/vercel/satori) |
+| Syntax highlighting | [shiki](https://shiki.style) |
+
+Reach for motion when you need springs, layout animations, exit animations, or gesture-driven values. A simple hover or fade doesn't need it — plain CSS transitions are the right tool there.
+
+### Charts
+
+| Task | Library |
+| --- | --- |
+| Real-time / streaming charts | [Liveline](https://github.com/benjitaylor/liveline) |
+| General charts (static or interactive dashboards) | [recharts](https://recharts.org) |
+
+The split: if data points arrive live and the chart scrolls with time, use Liveline. Everything else is recharts.
+
+### Interaction & performance
+
+| Task | Library |
+| --- | --- |
+| Drag and drop | [dnd kit](https://dndkit.com) |
+| Virtualization (long lists, large tables) | [Virtuoso](https://virtuoso.dev) |
+
+### State & styling
+
+| Task | Library |
+| --- | --- |
+| State management | [zustand](https://zustand.docs.pmnd.rs) |
+| Constructing `className` strings conditionally | [clsx](https://github.com/lukeed/clsx) |
+| Type-safe, variant-driven styling for Tailwind | [cva](https://cva.style) |
+| Theme switching / dark mode (no flash on load) | [next-themes](https://github.com/pacocoursey/next-themes) |
+
+The styling split: clsx for ad-hoc conditional classes; cva when a component has real variants (size, intent, state) that deserve a typed API. They compose — cva uses clsx-style inputs internally.
+
+## Common mismatches to catch
+
+- **Toasts built by hand or with a modal library** → Sonner exists for exactly this.
+- **A `<div>`-based dropdown/dialog with manual focus handling** → base-ui, which handles accessibility, focus trapping, and dismissal.
+- **Animating a number by re-rendering text** → NumberFlow handles digit transitions properly.
+- **Rendering a 1,000+ row list directly** → Virtuoso before reaching for pagination hacks.
+- **A `useState`-per-component web of props for shared state** → zustand.
+- **Template-literal className ternaries three conditions deep** → clsx (or cva if it's variant-shaped).
+
+---
+
+## Credit
+
+Adapted for the rsc catalog from **[emilkowalski/skills](https://github.com/emilkowalski/skills)**
+(MIT, commit `d23d7f8`) by Emil Kowalski — the design-engineering and animation philosophy behind
+[Sonner](https://sonner.emilkowal.ski), [Vaul](https://vaul.emilkowal.ski) and
+[animations.dev](https://animations.dev). The craft bar here is his; the routing, gates and evals
+that make it an rsc skill are not. Nothing in this body is a substitute for his course.

package/skills/pick-ui-library/evals/cases.yaml

@@ -0,0 +1,33 @@
+skill: pick-ui-library
+
+should_trigger:
+  - prompt: "What should I use for toasts in this React app?"
+    why: "A task-to-library lookup, the skill's core use case."
+  - prompt: "Which library for drag and drop? I don't want to hand-roll it."
+    why: "Named task with a curated answer; hand-rolling is the mismatch the skill catches."
+  - prompt: "I need a command palette like Raycast's — what do I install?"
+    why: "Command menus are an explicit row in the list."
+  - prompt: "This list has 5000 rows and it's crawling. What do people use for virtualization?"
+    why: "Virtualization is an explicit row, and the 1000+ row case is a named mismatch."
+  - prompt: "We need a one-time-password input for the verification screen."
+    why: "OTP inputs are an explicit row."
+  - prompt: "What's the right pick for charts in a dashboard, and does live data change the answer?"
+    why: "Charts, with the streaming-versus-static split the list makes explicit."
+
+should_not_trigger:
+  - prompt: "Animate the toast so it slides in and can be swiped away."
+    route_to: "animate"
+    why: "Motion on an already-chosen component."
+  - prompt: "Fix the toasts — they appear twice and lose their Tailwind classes."
+    route_to: "ask-sonner"
+    why: "Sonner-specific troubleshooting has its own guide."
+  - prompt: "Restructure where state lives across these React components and fix the re-render storm."
+    route_to: "react"
+    why: "App architecture, not a dependency choice."
+  - prompt: "Which Postgres extension should we use for vector search?"
+    route_to: "vector-db"
+    why: "Also a 'which library' question, but a data-layer one outside this list."
+
+capability:
+  - scenario: "The project's package.json already uses react-window, and the user asks what to use for virtualizing a large table."
+    expect: "Reads package.json first, names the curated pick, and flags that a competitor is already installed without churning the dependency unasked. If the task were genuinely outside the curated list, it says so explicitly instead of pretending the list covers it."

package/skills/prototype/SKILL.md

@@ -0,0 +1,113 @@
+---
+name: prototype
+description: "Build several genuinely different versions — variants, takes, options, directions — of one UI piece behind a visual picker, so you flip through them live and promote the winner. Use to explore a look before committing, or when you do not yet know what you want something to look like."
+tags: [design, variants, exploration, picker, ui]
+recommends: [design, animate, nextjs]
+profiles: [full]
+origin: emilkowalski (MIT, adapted)
+---
+
+# Prototyping Variants
+
+> **SDD gate.** If this fired on a **new, non-trivial feature or behaviour change** and there is
+> **no approved spec + plan** under `02-DOCS/wiki/sdd/`, hand off to `../specify/SKILL.md` first —
+> it runs brainstorm → spec → plan → tasks before any code, then routes back here once the plan is
+> approved. Build straight from here only for a genuinely one-line / low-risk change, or a bug fix
+> restoring intended behaviour. Method: `../sdd/SKILL.md`.
+
+**Hand-offs.** Once a variant wins, its motion should survive `../review-animations/SKILL.md`. The
+visual system the variants inherit is `../design/SKILL.md`'s. Dependencies belong to
+`../pick-ui-library/SKILL.md` — do not install a library to explore a layout.
+
+A divergence skill. It does ONE thing: take a described piece of UI ("a toast", "the pricing card", "a hold-to-delete button"), build several genuinely different versions of it, and put them behind a visual picker so the user can flip through them live and choose a winner. It does not review existing UI (that's `review-animations`), plan fixes for it (that's `improve-animations`), or choose dependencies (that's `pick-ui-library`).
+
+## Operating Posture
+
+You are a senior design engineer running a design exploration. The entire value of this skill is **divergence**: three tints of the same idea waste the picker — the user learns nothing by flipping between them. Each variant must be a direction you could defend shipping on its own, exploring a genuinely different answer to the same brief.
+
+Divergence is not an excuse to drop the craft bar. Every variant individually meets Emil Kowalski's standards — right easing (`ease-out` on entrances, never `ease-in`), sub-300ms UI motion, correct `transform-origin`, `transform`/`opacity` only, reduced-motion handled. A sloppy variant doesn't widen the exploration; it just loses on execution and teaches nothing about the direction it represents.
+
+## Hard Rules
+
+1. **Never touch production code during exploration.** Everything lives in an isolated prototype surface (see Phase 4). Integration happens only in Phase 6, only for the variant the user picked.
+2. **Variants diverge on a named axis** — layout, density, personality, motion, interaction model. Before building, you must be able to state each variant's axis in a phrase. Sharing the project's tokens is not convergence; variants *should* feel native to the product.
+3. **Every variant fully works.** Real interactions, real motion, realistic content — actual product-shaped copy, plausible names and numbers. No lorem ipsum, no dead buttons, no "imagine this part".
+4. **The picker is chrome, not a contestant.** Its exact markup, styles, and behavior are specified in [references/picker.md](references/picker.md) — copy them verbatim. Its look is not a design decision and never adapts to the project.
+5. **Clean up after the choice.** When a winner is promoted, delete the prototype surface unless the user asks to keep it.
+
+## Workflow
+
+### Phase 1 — Scope
+
+One thing per run. If the description spans multiple components ("the dashboard"), narrow it: pick the single highest-leverage piece, say which and why, and offer the rest as follow-up runs. Restate the brief in one sentence — what the thing is, where it will live, what it must do.
+
+### Phase 2 — Recon
+
+Before designing anything, map the ground the variants must stand on:
+
+- **Stack**: framework, styling system (Tailwind, CSS modules, vanilla), motion library if any.
+- **Tokens**: colors, radii, spacing, fonts, easing/duration variables. Variants use these — every variant should look like it could ship in this product tomorrow.
+- **Personality**: playful consumer app or crisp dashboard? This bounds how far the boldest variant may go.
+- **Context**: where the piece renders — against what background, beside what neighbors, at what sizes.
+
+If there is no project (empty directory, or the user is just exploring), skip to the standalone branch in Phase 4 and choose a restrained default look: neutral grays, one accent, system font stack.
+
+### Phase 3 — Choose directions
+
+Default **3 variants**; up to 5 when the user asks or the design space is genuinely wide. More than 5 dilutes the comparison.
+
+Before writing any code, list the set: a name and an axis for each. Names describe the direction — "Quiet", "Editorial", "Playful", "Dense" — never "Option A/B/C". If two proposed directions would differ only in accent color or copy, they are one direction; replace one with a real alternative (different layout, different interaction model, different motion story).
+
+**Completion criterion:** every variant has a name and a stated axis, and no two variants share an axis position.
+
+### Phase 4 — Build the picker harness
+
+Two branches, by what exists:
+
+- **In a project with a dev server** — an isolated route or page (`/prototypes/<slug>`, or the framework's equivalent), one file per variant plus a small harness file. Nothing imports from the prototype surface into production code.
+- **No project / static context** — a single self-contained HTML file (inline CSS/JS) the user can open directly in a browser.
+
+The picker's markup, styles, keyboard wiring, and placement come from [references/picker.md](references/picker.md), verbatim — load it now and build exactly that. Beyond the picker itself, the harness must render **one variant at a time, full size, in realistic surrounding context** — a toast needs a page behind it, a card needs siblings, a button needs a form. Side-by-side thumbnails distort spacing and scale; never judge UI at postage-stamp size. Switching is **instant** — flipping is a 100+/session action; by the frequency rule the variant swap gets no animation.
+
+### Phase 5 — Verify and hand off
+
+Run the harness. Confirm every variant renders, every interaction responds, and the console is clean — flip through all of them yourself before showing the user. If browser tooling is available, screenshot each variant.
+
+Then present the set and **stop — the choice belongs to the user**:
+
+| # | Variant | Axis | When it's the right choice | Its cost |
+| --- | --- | --- | --- | --- |
+| 1 | Quiet | Minimal motion, borders over shadows | The product is a daily-use tool | Least memorable |
+| 2 | Editorial | Large type, generous whitespace | The moment deserves weight | Eats vertical space |
+
+Close with where the picker is running (URL or file path) and the keys to flip.
+
+**Completion criterion:** every variant is reachable from the picker and behaves correctly; no console errors; the table names each variant's tradeoff honestly.
+
+### Phase 6 — Promote on selection
+
+When the user picks: integrate that variant where it belongs, following the project's existing conventions (file layout, naming, token usage), then delete the prototype surface per Hard Rule 5. If the user instead wants another round, keep the harness and run Phase 3 again, diverging *around* the direction they gravitated to.
+
+## Invocation Variants
+
+| Invocation | Behavior |
+| --- | --- |
+| `<description>` | Full workflow: scope → recon → 3 variants → picker → wait for choice |
+| `<description> x5` | Same, with that many variants (capped at 5) |
+| `riff <variant>` | New round: keep the harness, generate a fresh set diverging around the named variant's direction |
+| `keep <variant>` | Promote that variant into the codebase and delete the prototype surface |
+| `keep <variant>, leave the picker` | Promote, but keep the prototype surface around |
+
+## Tone
+
+Sell each variant honestly — one line on when it wins, one on what it costs. Never pre-pick a favorite in the table; if the user asks which you'd choose, answer with a reason rooted in the product's personality and frequency of use, not aesthetics alone. If two variants converged while you built them, cut one and say so: a picker with two truly distinct directions beats one padded to three.
+
+---
+
+## Credit
+
+Adapted for the rsc catalog from **[emilkowalski/skills](https://github.com/emilkowalski/skills)**
+(MIT, commit `d23d7f8`) by Emil Kowalski — the design-engineering and animation philosophy behind
+[Sonner](https://sonner.emilkowal.ski), [Vaul](https://vaul.emilkowal.ski) and
+[animations.dev](https://animations.dev). The craft bar here is his; the routing, gates and evals
+that make it an rsc skill are not. Nothing in this body is a substitute for his course.

package/skills/prototype/evals/cases.yaml

@@ -0,0 +1,31 @@
+skill: prototype
+
+should_trigger:
+  - prompt: "Build me three different versions of this pricing card so I can pick one."
+    why: "Several genuinely different versions behind a picker: the skill's core use case."
+  - prompt: "I don't know what I want this empty state to look like — show me some options I can click through."
+    why: "Divergent exploration with a live picker, which is what this skill builds."
+  - prompt: "Give me a few takes on the toast component and let me flip between them."
+    why: "'Flip between them' is the picker; a toast is a single, well-scoped piece."
+  - prompt: "Prototype four directions for the dashboard header, from quiet to bold."
+    why: "Named axis (restraint to boldness) with a variant count inside the cap."
+  - prompt: "Explore some designs for the hold-to-delete button before we commit to one."
+    why: "Exploration before commitment; production code stays untouched until a winner is picked."
+
+should_not_trigger:
+  - prompt: "Animate the toast we already chose, with the right curve and duration."
+    route_to: "animate"
+    why: "A single chosen target; there is nothing to diverge on."
+  - prompt: "Review the motion in the variant I picked."
+    route_to: "review-animations"
+    why: "Judging one implementation, not generating alternatives."
+  - prompt: "Design the whole marketing site — hero, pricing, footer, the works."
+    route_to: "design"
+    why: "A whole-page visual system, far past the one-piece-per-run scope."
+  - prompt: "Which drag-and-drop library should we install for this?"
+    route_to: "pick-ui-library"
+    why: "A dependency decision; this skill does not install libraries to explore a layout."
+
+capability:
+  - scenario: "User asks for three versions of a card in a project with existing Tailwind tokens and a crisp, dense dashboard personality."
+    expect: "States each variant's axis before building, and no two variants share an axis position — three tints of the same idea is the failure mode. Every variant uses the project's tokens, works for real with plausible content, and meets the motion bar individually. Presents the tradeoffs honestly and stops: the choice is the user's."

package/skills/prototype/references/picker.md

@@ -0,0 +1,197 @@
+# The Picker
+
+The picker's appearance is **not a design decision** — it is this spec. Copy the markup, CSS, and wiring below verbatim; the only values that change per run are the variant names and count. It stays identical across every project so it always reads as harness chrome, never as part of the design being judged. Do not restyle it with the project's tokens, fonts, or colors.
+
+It is a floating dark pill, bottom-center. Dark glass works on top of any page — light or dark — which is why it is not theme-aware.
+
+## Markup
+
+The sliding highlight span first, one button per variant, a hairline divider, then the replay button (only when at least one variant has motion to re-trigger):
+
+```html
+<nav class="proto-picker" aria-label="Prototype variants">
+  <span class="proto-picker-highlight" aria-hidden="true"></span>
+  <button class="proto-picker-item" data-active aria-current="true">Quiet</button>
+  <button class="proto-picker-item">Editorial</button>
+  <button class="proto-picker-item">Playful</button>
+  <span class="proto-picker-divider" aria-hidden="true"></span>
+  <button class="proto-picker-item proto-picker-replay" aria-label="Replay animation (R)">↻</button>
+</nav>
+```
+
+In a framework, keep the class names and structure; only the rendering syntax changes.
+
+## Styles
+
+```css
+.proto-picker {
+  position: fixed;
+  bottom: 24px;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 2147483647;
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  padding: 4px;
+  border-radius: 999px;
+  background: rgba(10, 10, 10, 0.82);
+  -webkit-backdrop-filter: blur(12px) saturate(1.4);
+  backdrop-filter: blur(12px) saturate(1.4);
+  box-shadow:
+    0 0 0 1px rgba(255, 255, 255, 0.08) inset,
+    0 8px 24px rgba(0, 0, 0, 0.24),
+    0 2px 6px rgba(0, 0, 0, 0.12);
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  font-size: 13px;
+  line-height: 1;
+  -webkit-font-smoothing: antialiased;
+  user-select: none;
+  -webkit-user-select: none;
+}
+
+.proto-picker-highlight {
+  position: absolute;
+  top: 4px;
+  left: 0;
+  height: 28px;
+  border-radius: 999px;
+  background: rgba(255, 255, 255, 0.12);
+  will-change: transform;
+}
+
+/* The slide is enabled only after first paint (data-ready), so load doesn't animate. */
+.proto-picker[data-ready] .proto-picker-highlight {
+  transition:
+    transform 250ms cubic-bezier(0.23, 1, 0.32, 1),
+    width 250ms cubic-bezier(0.23, 1, 0.32, 1);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .proto-picker[data-ready] .proto-picker-highlight { transition: none; }
+}
+
+.proto-picker-item {
+  position: relative; /* sits above the highlight */
+  display: flex;
+  align-items: center;
+  height: 28px;
+  padding: 0 12px;
+  border: 0;
+  border-radius: 999px;
+  background: transparent;
+  color: rgba(255, 255, 255, 0.55);
+  font: inherit;
+  cursor: pointer;
+  transition: color 150ms ease-out;
+}
+
+.proto-picker-item:hover {
+  color: rgba(255, 255, 255, 0.85);
+}
+
+.proto-picker-item:active {
+  transform: scale(0.97);
+}
+
+.proto-picker-item:focus-visible {
+  outline: 2px solid rgba(255, 255, 255, 0.4);
+  outline-offset: 2px;
+}
+
+.proto-picker-item[data-active] {
+  color: #fff;
+}
+
+.proto-picker-divider {
+  width: 1px;
+  height: 16px;
+  margin: 0 4px;
+  background: rgba(255, 255, 255, 0.12);
+}
+
+.proto-picker-replay {
+  padding: 0 10px;
+  font-size: 14px;
+}
+
+.proto-picker[data-position="top"] {
+  bottom: auto;
+  top: 24px;
+}
+```
+
+## Rules
+
+- **Verbatim.** These values are the spec. No project fonts, no brand colors, no theme switching, no extra shadows or borders.
+- **The highlight slides; the variant swap stays instant.** The active pill animates between buttons (250ms, strong ease-out) as spatial feedback on the picker itself — but the variant being previewed still switches with no transition. The `width` transition is a deliberate exception to the transform/opacity rule: the element is 28px tall, absolutely positioned, and has no layout dependents, so the paint cost is negligible.
+- **One allowed modification:** if a variant occupies the bottom-center of the screen (a toast stack, a bottom sheet, a dock), set `data-position="top"` so the picker never covers the work. Nothing else about it may move or change.
+- **Replay is conditional.** Render the replay button and its divider only when at least one variant has an entrance or state animation worth re-triggering; a static comparison gets a shorter pill.
+
+## Behavior contract
+
+The contract is fixed regardless of how the harness renders:
+
+- Number keys `1–N` and `←`/`→` switch variants; `R` replays. Ignore key events when focus is in an input, textarea, select, or contenteditable, or when a modifier is held.
+- Clicking an item switches to it; exactly one item carries `data-active` and `aria-current="true"` at all times, and the highlight slides to it.
+- Selection persists across reload via a URL param (`?v=2`), falling back to variant 1. The highlight takes its initial position without animating (`data-ready` is added after first paint).
+- Switching re-mounts the variant (so entrance animations re-run); the replay key re-mounts without switching.
+
+## Reference wiring
+
+Verbatim for the standalone-HTML branch; in a framework, keep the same behavior but express it idiomatically (state instead of `innerHTML`, a keyed re-mount instead of `requestAnimationFrame`, refs + a layout effect for the highlight measurement).
+
+```js
+// `variants` is an array of render functions, one per variant, in picker order.
+const stage = document.getElementById('stage');
+const picker = document.querySelector('.proto-picker');
+const highlight = picker.querySelector('.proto-picker-highlight');
+const items = [...picker.querySelectorAll('.proto-picker-item:not(.proto-picker-replay)')];
+const replay = picker.querySelector('.proto-picker-replay');
+let current = 0;
+
+function moveHighlight() {
+  const el = items[current];
+  highlight.style.width = el.offsetWidth + 'px';
+  highlight.style.transform = `translateX(${el.offsetLeft}px)`;
+}
+
+function mount(i) {
+  stage.innerHTML = '';
+  // Clear first, render next frame, so entrance animations re-run.
+  requestAnimationFrame(() => { stage.innerHTML = variants[i](); });
+}
+
+function setActive(i) {
+  if (i < 0 || i >= variants.length) return;
+  current = i;
+  items.forEach((el, j) => {
+    el.toggleAttribute('data-active', j === i);
+    if (j === i) el.setAttribute('aria-current', 'true');
+    else el.removeAttribute('aria-current');
+  });
+  moveHighlight();
+  const url = new URL(location);
+  url.searchParams.set('v', i + 1);
+  history.replaceState(null, '', url);
+  mount(i);
+}
+
+items.forEach((el, i) => el.addEventListener('click', () => setActive(i)));
+replay?.addEventListener('click', () => mount(current));
+window.addEventListener('resize', moveHighlight);
+
+document.addEventListener('keydown', (e) => {
+  if (/^(INPUT|TEXTAREA|SELECT)$/.test(e.target.tagName) || e.target.isContentEditable) return;
+  if (e.metaKey || e.ctrlKey || e.altKey) return;
+  const num = parseInt(e.key, 10);
+  if (num >= 1 && num <= variants.length) setActive(num - 1);
+  else if (e.key === 'ArrowRight') setActive((current + 1) % variants.length);
+  else if (e.key === 'ArrowLeft') setActive((current - 1 + variants.length) % variants.length);
+  else if (e.key === 'r' || e.key === 'R') mount(current);
+});
+
+setActive((parseInt(new URLSearchParams(location.search).get('v'), 10) || 1) - 1);
+// Enable the slide only after first paint, so load doesn't animate.
+requestAnimationFrame(() => requestAnimationFrame(() => picker.setAttribute('data-ready', '')));
+```

package/skills/react/SKILL.md

@@ -8,6 +8,12 @@ origin: risco
 
 # React + Vite SPA — Components, State, Data Fetching (React 19.2, 2026)
 
+**Hand-off — picking dependencies.** Which library to reach for (UI primitives, command menus,
+toasts, OTP inputs, charts, virtualization, drag and drop, state, styling, theming) is
+`../pick-ui-library/SKILL.md`'s — reach for it before hand-rolling a component. Animating what you
+install is `../animate/SKILL.md`'s.
+
+
 > Build or review a fast, typed, correctly-architected **client-side** React single-page app bundled by Vite. No server runtime, no RSC tree, no framework router. Server-rendered React (App Router, server actions, SSR/SSG) is not this skill — that is `../nextjs/SKILL.md`.
 
 **SDD gate — before writing feature code.** If this skill fired on a **new, non-trivial feature or behaviour change** and there is **no approved spec + plan** under `02-DOCS/wiki/sdd/`, stop and hand off to `../specify/SKILL.md`: it runs brainstorm → spec → plan → tasks, then routes back here once the plan is approved. Build directly only for a genuinely one-line / low-risk change. Method: `../sdd/SKILL.md`.

package/skills/react-native/SKILL.md

@@ -8,6 +8,11 @@ origin: risco
 
 # React Native (app code)
 
+**Hand-off — the app vs its motion.** Animation and gestures in a React Native app — Reanimated
+worklets on the UI runtime, gesture handoff, sheets, press feedback, haptics — are
+`../animate-expo/SKILL.md`'s, whose guidance applies to bare React Native as well as Expo.
+
+
 You write the code that runs *inside* the app: render, navigate, animate, list, persist, and author native modules. Mobile is split across two skills by **verb** — run the verb test before doing anything:
 
 | Verb in the request | Skill |

package/skills/review-animations/SKILL.md

@@ -0,0 +1,137 @@
+---
+name: review-animations
+description: "Review, critique or grade existing animation and motion code against a strict craft bar — easing, duration, transform-origin, interruptibility, GPU-only properties, reduced motion, enter/exit asymmetry, stagger. Default is to flag; approval is earned. Use on the transitions in a diff or a component."
+tags: [motion, animation, review, craft, ui]
+recommends: [animate, improve-animations, code-review]
+profiles: [full]
+origin: emilkowalski (MIT, adapted)
+---
+
+# Reviewing Animations
+
+**Hand-offs.** Reviewing a whole codebase's motion, and writing plans another agent can execute, is
+`../improve-animations/SKILL.md`'s — this skill's object is **one diff or one component**. Finding
+motion that is *missing* is `../find-animation-opportunities/SKILL.md`'s. General code review is
+`../code-review/SKILL.md`'s; decline non-motion code and point there.
+
+**The countable half of this bar is executable.** `scripts/verify.sh` in this skill carries the tell
+registry — `transition: all`, a `scale(0)` entrance, `ease-in` on UI, a centered popover origin, a
+layout-property transition, the Motion `x`/`y`/`scale` shorthands, and motion with no reduced-motion
+guard anywhere. Run it first (`bash scripts/verify.sh`, add `--strict` to fail on warnings), then
+spend your judgement on what it cannot see: frequency tier, purpose, cohesion, and whether the thing
+feels right. A finding the script already made is not a finding you discovered.
+
+A specialized review skill. It does ONE thing: review animation and motion code against a high craft bar. It does not write features, fix unrelated bugs, or review non-motion code. If asked to review general code, decline and point to a general review skill.
+
+## Operating Posture
+
+You are a senior design engineer with a brutal eye for craft. Your bias is toward **motion that feels right**, not motion that merely runs. A transition that "works" but feels sluggish, lands from the wrong origin, fires too often, or drops frames is a regression, not a pass. Default to flagging. Approval is earned, not assumed.
+
+The substantive bar comes from Emil Kowalski's animation philosophy (animations.dev). The review *method* — non-negotiable standards, escalation triggers, a remedial hierarchy, tiered output, and explicit approval criteria — is adapted from aggressive code-quality review.
+
+For the full rule catalog (easing curves, duration tables, spring config, gestures, clip-path, performance, a11y), see [references/standards.md](references/standards.md). Load it whenever a finding needs a precise value or citation.
+
+## The Ten Non-Negotiable Standards
+
+Every animation in the diff is measured against these. A violation is a finding.
+
+1. **Justified motion.** Every animation must answer "why does this animate?" — spatial consistency, state indication, feedback, explanation, or preventing a jarring change. "It looks cool" on a frequently-seen element is a block.
+
+2. **Frequency-appropriate.** Match motion to how often it's seen. Keyboard-initiated and 100+/day actions get **no** animation. Tens/day gets reduced motion. Occasional gets standard. Rare/first-time can have delight.
+
+3. **Responsive easing.** Entering/exiting elements use `ease-out` or a strong custom curve. `ease-in` on UI is a block — it delays the moment the user watches most. Built-in CSS easings are too weak; expect custom cubic-beziers.
+
+4. **Sub-300ms UI.** UI animations stay under 300ms; anything slower on a UI element needs justification or it's a finding. Per-element budgets live in [references/standards.md](references/standards.md).
+
+5. **Origin & physical correctness.** Popovers/dropdowns/tooltips scale from their trigger (`transform-origin`), not center. Never animate from `scale(0)` — start from `scale(0.9–0.97)` + opacity (Modals are exempt — they stay centered.)
+
+6. **Interruptibility.** Rapidly-triggered or gesture-driven motion (toasts, toggles, drags) must be interruptible — CSS transitions or springs that retarget from current state, not keyframes that restart from zero.
+
+7. **GPU-only properties.** Animate `transform` and `opacity` only. Animating `width`/`height`/`margin`/`padding`/`top`/`left` (or Framer Motion `x`/`y`/`scale` shorthands under load) is a performance finding.
+
+8. **Accessibility.** `prefers-reduced-motion` is honored (gentler, not zero — keep opacity/color, drop movement). Hover animations are gated behind `@media (hover: hover) and (pointer: fine)`.
+
+9. **Asymmetric enter/exit.** Deliberate actions (a press, a hold, a destructive confirm) animate slower; system responses snap. Symmetric timing on a press-and-release or hold interaction is a finding.
+
+10. **Cohesion.** Motion matches the component's personality and the rest of the product — playful can be bouncier, a dashboard stays crisp. Mismatched personality, or a jarring crossfade where a subtle blur would bridge two states, is a finding. When unsure whether motion feels right, the strongest move is often to delete it.
+
+## Aggressive Escalation Triggers
+
+Flag these on sight, hard:
+
+- `transition: all` (unbounded property animation)
+- `scale(0)` or pure-fade entrances with no initial transform
+- `ease-in` on any UI interaction; weak built-in easing on a deliberate animation
+- Animation on a keyboard shortcut, command-palette toggle, or 100+/day action
+- UI duration > 300ms with no stated reason
+- `transform-origin: center` on a trigger-anchored popover/dropdown/tooltip
+- Keyframes on toasts, toggles, or anything added/triggered rapidly
+- Animating layout properties (`width`/`height`/`margin`/`padding`/`top`/`left`)
+- Framer Motion `x`/`y`/`scale` props on motion that runs while the page is busy
+- Updating a CSS variable on a parent to drive a child transform (style recalc storm)
+- Missing `prefers-reduced-motion` handling on movement
+- Ungated `:hover` motion
+- Symmetric enter/exit timing on a press-and-release or hold interaction
+- Everything-at-once entrance where a 30–80ms stagger belongs
+
+## Remedial Preference Hierarchy
+
+When proposing fixes, prefer earlier moves over later ones:
+
+1. **Delete the animation** (high-frequency / no purpose / keyboard-triggered).
+2. **Reduce it** — shorter duration, smaller transform, fewer animated properties.
+3. **Fix the easing** — swap `ease-in`→`ease-out`/custom curve; use a strong cubic-bezier.
+4. **Fix the origin/physicality** — correct `transform-origin`; replace `scale(0)` with `scale(0.95)`+opacity.
+5. **Make it interruptible** — keyframes → transitions, or a spring for gesture-driven motion.
+6. **Move it to the GPU** — layout props → `transform`/`opacity`; shorthand → full `transform` string; WAAPI for programmatic CSS.
+7. **Asymmetric timing** — slow the deliberate phase, snap the response.
+8. **Polish** — blur to mask crossfades, stagger for groups, `@starting-style` for entry, spring for "alive" elements.
+9. **Accessibility & cohesion** — add reduced-motion + hover gating; tune to match the component's personality.
+
+## Required Output Format
+
+Two parts, in this order.
+
+### Part 1 — Findings table (REQUIRED)
+
+A single markdown table. One row per issue. Never a "Before:/After:" list.
+
+| Before | After | Why |
+| --- | --- | --- |
+| `transition: all 300ms` | `transition: transform 200ms ease-out` | Specify exact properties; `all` animates unintended properties off-GPU |
+| `transform: scale(0)` | `transform: scale(0.95); opacity: 0` | Nothing appears from nothing — `scale(0)` looks like it came from nowhere |
+| `ease-in` on dropdown | `ease-out` + custom curve | `ease-in` delays the moment the user watches most; feels sluggish |
+| `transform-origin: center` on popover | `var(--transform-origin)` (Base UI) | Popovers scale from their trigger, not center (modals are exempt) |
+
+### Part 2 — Verdict (REQUIRED)
+
+Group remaining commentary by impact tier, highest first. Omit empty tiers.
+
+1. **Feel-breaking regressions** — sluggish easing, comes-from-nowhere, fires on high-frequency/keyboard actions.
+2. **Missed simplifications** — animations that should be removed or drastically reduced.
+3. **Performance** — non-GPU properties, dropped-frame risks, recalc storms.
+4. **Interruptibility & timing** — keyframes where transitions/springs belong; symmetric timing that should be asymmetric.
+5. **Origin, physicality & cohesion** — wrong origin, mismatched personality, jarring crossfades.
+6. **Accessibility** — reduced-motion and pointer/hover gating.
+
+Close with an explicit decision:
+
+- **Block** — any feel-breaking regression, animation on a keyboard/high-frequency action, `scale(0)`/`ease-in` on UI, or a non-GPU animation with an easy GPU fix.
+- **Approve** — no feel-breaking regressions, no obvious motion that should be deleted, durations and easing within bounds, interruptibility handled where needed, reduced-motion respected.
+
+Be specific and cite `file:line`. When a value is needed (a curve, a duration, a spring config), pull the exact one from [references/standards.md](references/standards.md) rather than approximating.
+
+## Guidelines
+
+- Prefer CSS transitions/`@starting-style`/WAAPI for predetermined motion; JS/springs for dynamic, interruptible, gesture-driven motion.
+- When unsure whether motion feels right, recommend reviewing it in slow motion / frame-by-frame and with fresh eyes the next day rather than guessing.
+
+---
+
+## Credit
+
+Adapted for the rsc catalog from **[emilkowalski/skills](https://github.com/emilkowalski/skills)**
+(MIT, commit `d23d7f8`) by Emil Kowalski — the design-engineering and animation philosophy behind
+[Sonner](https://sonner.emilkowal.ski), [Vaul](https://vaul.emilkowal.ski) and
+[animations.dev](https://animations.dev). The craft bar here is his; the routing, gates and evals
+that make it an rsc skill are not. Nothing in this body is a substitute for his course.