rsc-universal 0.1.1

package/skills/design/references/motion-and-interaction.md

@@ -0,0 +1,182 @@
+# Motion & Interaction
+
+Motion intent and budget, current-first. CSS is the default engine; reach for a JS library only when CSS cannot express the animation. Deep mechanics (springs, layout animations, `AnimatePresence` internals) live in the external *motion-ui* and *motion-foundations* references (not repo skills) — this skill owns intent + budget and defers mechanics outward.
+
+## Purpose gate
+
+Every animation must do one of three things: **guide** attention, **communicate** state, or **preserve** continuity between views. If it does none, delete it. Decorative motion costs performance budget and attention while adding no information.
+
+## Timing & easing tokens
+
+Define duration and easing as tokens; never hand-tune per element.
+
+```css
+@theme {
+  --dur-instant: 80ms;   /* checkbox tick, instant feedback */
+  --dur-fast:   180ms;   /* hover, small state changes */
+  --dur-normal: 280ms;   /* entrances, panel open */
+  --dur-slow:   600ms;   /* large hero / staged sequences */
+  --ease-out:   cubic-bezier(0.22, 1, 0.36, 1);   /* standard decelerate */
+  --ease-sharp: cubic-bezier(0.4, 0, 0.2, 1);     /* enter/exit symmetric */
+  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1); /* playful overshoot, sparingly */
+}
+```
+
+- **Enter vs exit asymmetry:** entrances are slower and softer (`--dur-normal`, `--ease-out`); exits are quicker and quieter (~150ms) so dismissals feel responsive.
+- **Press feedback:** `scale(0.97)` on `:active` gives a tactile button without distracting movement.
+
+```css
+/* Button press — explicit properties, never `transition: all` */
+.button {
+  transition-property: transform, background-color, box-shadow;
+  transition-duration: 150ms;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+}
+.button:active { transform: scale(0.97); }
+```
+
+## Micro-interactions
+
+CSS-first, state-driven, interruptible (CSS transitions retarget mid-flight when intent changes).
+
+```css
+/* Hover + focus affordance on a card */
+.card {
+  transition-property: transform, box-shadow;
+  transition-duration: 180ms;
+  transition-timing-function: var(--ease-out);
+}
+.card:hover { transform: translateY(-2px); box-shadow: var(--shadow-card); }
+.card:focus-visible { outline: 2px solid var(--color-brand-500); outline-offset: 2px; }
+```
+
+```css
+/* Icon cross-fade — fade + scale instead of an instant visibility toggle */
+.icon-swap { transition: opacity 150ms var(--ease-out), transform 150ms var(--ease-out); }
+.icon-swap[data-state="off"] { opacity: 0; transform: scale(0.8); }
+```
+
+```css
+/* Skeleton shimmer for loading state */
+.skeleton {
+  background: linear-gradient(90deg, oklch(0.9 0 0), oklch(0.95 0 0), oklch(0.9 0 0));
+  background-size: 200% 100%;
+  animation: shimmer 1.2s linear infinite;
+}
+@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
+```
+
+For **optimistic state** (toggle/like), flip the visual immediately on click and reconcile when the request resolves — the UI never waits on the network for feedback.
+
+## Scroll-driven, CSS-first
+
+Native `animation-timeline: view()` and `scroll()` are the default for scroll-linked animation: zero JS, no main-thread scroll handler, no CLS. Use them before any library.
+
+Guard scroll-driven animation behind a `@supports (animation-timeline: view())` feature query so the fallback is **explicit and visible**, not accidental. Elements start fully visible (`opacity: 1`); only inside the feature query — and only when motion is allowed — do they start hidden and animate in. A browser without scroll-timeline support (or a reduced-motion user) never enters the query, so content is never stuck invisible.
+
+```css
+/* Default: fully visible. No scroll-timeline support => content is never hidden. */
+.reveal { opacity: 1; }
+
+/* Progressive enhancement: only browsers WITH scroll-timeline opt in. */
+@supports (animation-timeline: view()) {
+  @media (prefers-reduced-motion: no-preference) {
+    .reveal {
+      animation: reveal linear both;
+      animation-timeline: view();
+      animation-range: entry 0% cover 30%;
+    }
+  }
+}
+@keyframes reveal {
+  from { opacity: 0; translate: 0 16px; }
+  to   { opacity: 1; translate: 0 0; }
+}
+```
+
+```css
+/* Parallax — element drifts as the page scrolls, driven by the scroll timeline */
+@supports (animation-timeline: scroll()) {
+  @media (prefers-reduced-motion: no-preference) {
+    .parallax {
+      animation: drift linear both;
+      animation-timeline: scroll(root block);
+    }
+  }
+}
+@keyframes drift { to { translate: 0 -40px; } }
+```
+
+Browser support note (verified June 2026): scroll-driven timelines (`animation-timeline` with `scroll()`/`view()`) now ship in Chromium (Chrome/Edge 115+) and Safari (18+, full support in Safari 26). Firefox has it implemented but still behind a flag (`layout.css.scroll-driven-animations.enabled`), so it is off by default for most users. That gap is exactly why the `@supports (animation-timeline: view())` query is load-bearing, not cosmetic: where the feature is unsupported (Firefox today, older engines), the feature query is skipped entirely and the element renders in its default (visible, un-drifted) state — a graceful, non-broken fallback. Always gate scroll-driven effects behind that `@supports` guard.
+
+## Performance budget
+
+- **Animate `transform`, `opacity`, `filter` only.** These run on the compositor and skip layout/paint.
+- **Never animate `width`, `height`, `top`, `left`, `margin`.** They trigger layout on every frame and jank.
+- **`will-change` sparingly** — only to fix a first-frame stutter on a compositor-friendly property, and remove it after. Never `will-change: all`.
+- **Scroll handlers cost INP.** Prefer scroll-driven CSS; if you must use JS, throttle and keep handlers passive.
+- **`content-visibility: auto`** on long offscreen sections skips their rendering work until they approach the viewport.
+
+## Accessibility
+
+Honor `prefers-reduced-motion` at both layers.
+
+```css
+/* CSS layer — kill non-essential motion globally */
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}
+```
+
+```ts
+// JS layer — branch behavior when motion must be coded
+const reduce = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+if (!reduce) {
+  // run the orchestrated entrance
+}
+```
+
+- **No motion-only meaning:** never convey state (error, success) by movement alone; pair it with color, icon, or text.
+- **Pause controls for loops:** any auto-playing or looping animation needs a way to stop it.
+- **Vestibular safety:** cut large translate and parallax for reduced-motion users — big movement triggers nausea for some people.
+
+## When to escalate to motion/react
+
+Stay in CSS for hover, press, reveal, and parallax. Escalate to `motion/react` only for what CSS cannot express: orchestrated sequences, layout animations (`layout` prop), and exit animations of unmounting components.
+
+```tsx
+"use client";
+import { motion, AnimatePresence } from "motion/react";
+// Use only for orchestration/exit that CSS can't express. Tokens + springs: motion-foundations.
+
+export function Toast({ open, message }: { open: boolean; message: string }) {
+  return (
+    <AnimatePresence>
+      {open && (
+        <motion.div
+          initial={{ opacity: 0, y: 12 }}
+          animate={{ opacity: 1, y: 0 }}
+          exit={{ opacity: 0, y: 12 }}
+          transition={{ duration: 0.18, ease: [0.22, 1, 0.36, 1] }}
+          role="status"
+        >
+          {message}
+        </motion.div>
+      )}
+    </AnimatePresence>
+  );
+}
+```
+
+Once you are in `motion/react`, defer the mechanics (spring config, variants, `layoutId` shared transitions) to the external *motion-foundations* and *motion-ui* references.
+
+## See Also
+
+- `visual-system.md` — the easing and duration tokens these animations consume.
+- *motion-ui* — production motion patterns and library mechanics (external reference, not a repo skill).
+- *motion-foundations* — spring physics and timing theory (external reference, not a repo skill).
+- `../../nextjs/SKILL.md` — Client vs Server Component boundaries for animated UI.

package/skills/design/references/research-method.md

@@ -0,0 +1,147 @@
+# Research-First Design Method
+
+The engine that keeps design output current and non-generic. Run it before you prescribe type, color, layout, or copy — every time.
+
+## Why re-research every project
+
+- **Trends churn quarterly.** What read as premium 18 months ago (neumorphism, heavy glassmorphism, blob backgrounds) now reads as dated. The reference set has a short half-life.
+- **Model taste skews to the AI-template median.** Your built-in aesthetic prior is the average of every scraped landing page — purple→blue gradients, centered hero over atmospheric mesh, oversized cards. That average is the slop you must escape.
+- **Competitors moved.** The benchmark is the current best work in *this* domain, not last year's. A dev tool that looked sharp against 2024 peers looks soft against 2026 peers.
+- **The domain dictates the reference set.** A fintech dashboard, a developer CLI, and a DTC skincare store have nothing in common. Pull references from the right neighborhood, not a generic "good design" bucket.
+
+Your built-in aesthetic prior is the problem this protocol fixes. Treat your first instinct as a hypothesis to be corrected by evidence, not as the answer.
+
+## The loop
+
+1. **Define 2–3 reference archetypes** from the DIRECTION BRIEF in `../SKILL.md`. Name them concretely: "Linear-grade dev tool, dark, type-led" beats "modern SaaS".
+2. **WebSearch award galleries + tier-1 product sites.** Query the galleries by domain and year; query named competitors by page.
+3. **WebFetch 3–5 exemplars,** prompting each for type, color, layout, motion, and copy voice. Demand concrete values, not adjectives.
+4. **Extract a pattern table** — the shared moves (what every exemplar does) and the differentiators (where they diverge). Shared moves are table stakes; differentiators are where you choose.
+5. **Synthesize a one-paragraph DESIGN DIRECTION** with citations: which URL contributed which decision.
+6. **Build** against the direction.
+7. **Re-check against references in QA** — open the exemplars side by side and confirm you matched the bar (density, type, motion restraint), not the pixels.
+
+```text
+WebSearch: "best <domain> landing page 2026 site:awwwards.com OR site:godly.website"
+WebSearch: "<competitor> pricing page design"
+WebFetch(url, "Extract: typeface pairing, color palette (approx OKLCH/hex),
+  layout system (grid/bento/asymmetry), motion (what animates, on what trigger),
+  hero copy voice. List concrete details, not adjectives.")
+```
+
+If WebSearch/WebFetch tools are unavailable in the current run, state that explicitly to the user, fall back to your strongest current knowledge of the named tier-1 sites, and flag the output as un-verified so it can be re-checked.
+
+### What to extract per exemplar
+
+Force every fetch to produce concrete, comparable data. Vague notes ("clean", "modern") are useless; you cannot build from an adjective.
+
+| Field | Capture | Example |
+| --- | --- | --- |
+| Typeface pairing | display + text faces, weights | Geist Semibold / Inter Regular |
+| Type scale | base size + ratio | 16px base, ~1.25 ratio |
+| Palette | bg / fg / accent in OKLCH or hex | near-black bg, single blue accent |
+| Layout | grid system, max-width, measure | centered hero, bento below, 1024px |
+| Motion | what animates, on what trigger, duration | bento cells reveal on scroll, ~280ms |
+| Copy voice | sentence length, hype level, verbs | short, no hype, imperative |
+| Hero structure | what is shown above the fold | terminal recording + one CTA |
+
+### Time-box the loop
+
+Research is a means, not the deliverable. Spend ~15–25 minutes: 3–5 exemplars, one pattern table, one synthesis paragraph. If you are still browsing after 30 minutes you are procrastinating the build — commit to a direction and start.
+
+## Source map
+
+| Source | Mine for |
+| --- | --- |
+| awwwards.com | Bold direction, motion, art direction |
+| godly.website | Current premium web aesthetics |
+| land-book.com | Landing-page structure + section order |
+| mobbin.com | Real app UI flows and patterns |
+| Refactoring UI | Spacing, hierarchy, color rules |
+| Linear | Restraint, dark UI, dense product surfaces |
+| Stripe | Docs + marketing balance, gradients done right |
+| Vercel | Type-led minimalism, dev-tool voice |
+| Cursor / Resend | Dev-tool landing conventions |
+
+Pick sources by domain. For a developer tool, weight Linear / Vercel / Cursor / Resend heavily and skip the expressive Awwwards entries. For an editorial or portfolio piece, invert that weighting.
+
+## Synthesis template
+
+Fill this block before writing markup. It is the contract the build must satisfy and the artifact QA checks against.
+
+```text
+DESIGN DIRECTION
+Archetype ...... <e.g. "Linear-grade dev tool, dark, type-led">
+Type pairing ... display=<face> / text=<face>, scale ratio <1.25>
+Palette ........ bg/fg/brand/accent in OKLCH (list values)
+Layout ......... <12-col | bento | asymmetric editorial>, max-width <px>, measure <ch>
+Motion budget .. <reveals on entry only | none | expressive>, timings
+Copy voice ..... <direct/compressed | warm | technical>; one-line value prop
+Citations ...... <url 1>, <url 2>, <url 3>  (what each contributed)
+```
+
+## Worked example
+
+Brief: a developer-tool landing page for **Driftway**, a fictional CLI that deploys preview environments from a Git branch in one command. Audience: backend and platform engineers. Tone: technical, dense, quiet.
+
+References fetched and what each contributed:
+
+- `https://linear.app` — dark, near-monochrome surface; tight type with a single accent; restraint as the whole aesthetic.
+- `https://vercel.com` — type-led hero with the product (a terminal) shown immediately; minimal motion; high-contrast mono code blocks.
+- `https://resend.com` — dev-tool voice in copy (verbs, no hype); a clean bento for feature → benefit; annual-default pricing.
+
+Extracted pattern table:
+
+| Dimension | Shared move | Differentiator chosen |
+| --- | --- | --- |
+| Type | One sans display + mono for code | Geist display, Geist Mono for CLI snippets |
+| Color | Dark bg, one cool accent | bg near-black, single blue brand accent |
+| Layout | Hero shows the product, then bento proof | Terminal recording as the hero visual |
+| Motion | Subtle entry reveals only | Scroll-reveal on bento cells, ≤ 280ms |
+| Copy | Outcome + "no X" phrasing | "Preview every branch — no staging queue" |
+
+Resulting filled direction (token values match the `@theme` block in `visual-system.md`):
+
+```text
+DESIGN DIRECTION
+Archetype ...... Linear-grade dev tool, dark, type-led, terminal-forward
+Type pairing ... display=Geist / text=Inter (mono=Geist Mono for code), scale ratio 1.25
+Palette ........ bg=oklch(0.17 0.01 256) fg=oklch(0.96 0.01 256)
+                 brand=oklch(0.62 0.19 256) accent=oklch(0.78 0.13 256)
+Layout ......... asymmetric bento under a centered hero, max-width 1024px, measure 65ch
+Motion budget .. entry reveals only via animation-timeline: view(), enter 280ms / exit 150ms
+Copy voice ..... direct, compressed, technical; value prop = "Preview every branch — no staging queue"
+Citations ...... linear.app (restraint + dark surface), vercel.com (product-forward hero),
+                 resend.com (dev voice + bento + annual pricing)
+```
+
+That direction now drives `visual-system.md` (tokens), `landing-anatomy-and-cro.md` (section order), and `copywriting-frameworks.md` (voice) with zero guesswork.
+
+## Anti-pattern
+
+Copying a reference pixel-for-pixel reproduces someone else's product constraints, not yours — and it shows. Extract *principles* (restraint, product-forward hero, one accent) and re-derive the specifics for your domain.
+
+```text
+Bad  — Clone Linear's exact gradient, spacing, and copy onto a skincare store.
+Good — Take Linear's PRINCIPLE (radical restraint, one accent, product-forward)
+       and re-derive a warm, editorial skincare palette + layout from it.
+```
+
+A second failure mode is **research theater**: fetching five sites, then ignoring them and building your default gradient hero anyway. The synthesis paragraph and its citations are the guardrail — if the built page does not visibly trace back to a cited decision, the research did not happen. In QA, open the exemplars beside the result and confirm each major decision (type, palette, layout, motion restraint) has a source.
+
+## Feeding the result into the build
+
+The filled DESIGN DIRECTION block is not a document for humans; it is the input to the rest of the skill:
+
+- **Palette + type + radius + shadow** → become the `@theme` tokens in `visual-system.md`. Do not invent new values at build time; promote the direction's values into tokens verbatim.
+- **Layout + section order** → drive the section stack in `landing-anatomy-and-cro.md`. The archetype decides whether you lead with a product shot (dev tool) or an editorial headline (portfolio).
+- **Copy voice + value prop** → seed the VOICE block and headline work in `copywriting-frameworks.md`.
+- **Motion budget** → sets the timing tokens and the reveal-or-not decision in `motion-and-interaction.md`.
+
+When the direction changes mid-project (new competitor, pivot), re-run the loop rather than patching the old tokens — a stale direction silently reintroduces the generic default you escaped.
+
+## See Also
+
+- `visual-system.md` — turn the filled direction into tokens.
+- `../../nextjs/SKILL.md` — implement the chosen direction on the App Router stack.
+- *frontend-design-direction* — product-domain direction judgment (external reference, not a repo skill).

package/skills/design/references/signature-and-craft.md

@@ -0,0 +1,148 @@
+# Signature & Craft — manufacturing the distinctive idea, then the finish that sells it
+
+A page that obeys every constraint in this skill and still feels generic is the default failure mode.
+Constraints get you to *competent*. They do not get you to *premium*. The difference is a **visual
+concept** — one defensible idea the whole surface commits to — plus the **craft moves** that make the
+rendered artifact read as authored rather than assembled. This reference is the method for both. Use it
+whenever the output has to be genuinely good, not merely compliant.
+
+## Why compliant output still scores ~7.7
+
+The checklist tells you the page *ships*. It cannot tell you the page is *good*, because every defect it
+catches is an absence (no missing `<h1>`, no `transition: all`, contrast passes). Premium is a presence:
+a point of view. The common shortfalls that keep correct work at "competent" are predictable — fix these
+and the output moves up a band:
+
+| Symptom of generic output | Root cause | The move |
+| --- | --- | --- |
+| "Looks like a nice template" | No visual concept; defaults filled every slot | Commit to ONE signature idea (below) |
+| Tonally flat — everything medium-sized | No scale contrast; safe type ramp | Force a dominant element 3–5× the body (below) |
+| Sections blur into one stripe | No rhythm; identical `py`, identical card grids | Vary section format + background + density (below) |
+| Hero is a centered headline + gradient | The default the model reaches for under-specified | Show the product doing the job; earn the layout |
+| Correct but forgettable color | Brand hue used like everyone's brand hue | One owned accent move, applied with restraint |
+| Everything is rounded cards on white | One container idiom repeated | Mix surface treatments; let some content breathe edge-to-edge |
+
+## Step 1 — Choose a visual concept (do this before any markup)
+
+A visual concept is a single sentence the entire page can be checked against. It is NOT a color or a font;
+it is an organizing idea that dictates layout, type, color, motion, and imagery together. Write it down,
+then make every section answer to it.
+
+> Concept = `[adjective of feeling]` + `[structural metaphor]` for `[audience doing job]`.
+> e.g. "Quiet, instrument-panel precision for ops engineers who live in this all day."
+> e.g. "Confident editorial broadsheet for a brand that wants to feel like a publication, not an app."
+> e.g. "Tactile, mechanical-keyboard heft for a dev tool that should feel engineered."
+
+Pick the concept from the DIRECTION BRIEF + brand study + research exemplars — never from your prior. If
+you cannot say in one sentence what makes this surface different from the median SaaS page, you have not
+chosen a concept yet, and the output will default to generic.
+
+## Step 2 — Manufacture the signature element (the "ONE idea")
+
+Every premium page has one element you would describe first to a friend. The brief asks for it; this is how
+to actually generate it instead of defaulting to a gradient. Pick **exactly one** primary signature (a
+second, quieter echo is fine; three competing signatures is noise). Choose from this vocabulary, biased by
+the concept and domain:
+
+- **A hero that demonstrates, not describes** — the product mid-task: a real terminal session, a live
+  chart updating, an actual diff, a populated dashboard. The single highest-leverage move for dev tools and
+  SaaS; it passes the 5s test by *showing* the value instead of claiming it.
+- **An owned type moment** — one oversized display setting (a 96–160px headline, a tight-tracked all-caps
+  eyebrow, a serif/grotesk pairing with real contrast) that no template ships by default.
+- **A structural signature** — an unexpected but legible layout: a horizontal-scroll feature rail, an
+  asymmetric split hero, a numbered editorial index, a sticky side-rail that tracks the section.
+- **A material signature** — a consistent, restrained physical treatment: hairline grid lines, a single
+  grain/noise pass, a duotone photographic style, a precise mono-spaced data aesthetic.
+- **A motion signature** — one purposeful move that recurs (a scroll-driven reveal cadence, a hover that
+  uncovers state) — only if it earns its INP/CLS budget.
+- **A data/proof signature** — a real number rendered as the visual centerpiece (a live metric, a benchmark
+  bar, a before/after). Strongest when the proof IS the product's claim.
+
+Rule: the signature must be *true to the product*. A fintech dashboard's signature is precision and density;
+a creative tool's is expression. A signature borrowed from the wrong domain reads as costume. Cite which
+research exemplar inspired the move (e.g. "feature rail per linear.app/changelog") so it is grounded, not
+invented.
+
+## Step 3 — Force scale contrast (the fastest fix for "flat")
+
+Generic pages are tonally flat: the headline, the section titles, and the body are all within ~1.5× of each
+other, so nothing dominates and the eye has nowhere to land. Premium pages have a **dramatic range**.
+
+- Establish a clear **hero dominant**: the largest single element on the page (a headline or product visual)
+  should be **3–5× the body size**, not 2×. Commit to it.
+- Then **demote ruthlessly**: eyebrows, labels, and metadata go *smaller and quieter* (13–14px, muted,
+  tracked) than you instinctively want. Contrast is created by the small things being genuinely small.
+- One **focal point per viewport**. If two things compete for "biggest", neither wins — shrink one.
+- Apply the same logic to weight (one heavy display weight against a regular body), and to color (the 10%
+  accent appears once or twice per viewport, never spread thin).
+
+If a section feels flat, the fix is almost always *more* contrast, not more elements.
+
+## Step 4 — Give the page rhythm (sections must not blur)
+
+A landing page that is ten identical white sections with `py-24` and a 3-up card grid reads as one long
+stripe. Authored pages have a **beat**: the eye is paced. Vary, section to section, at least one of:
+
+- **Format** — full-bleed vs. contained; centered vs. asymmetric; grid vs. single statement; media-left vs.
+  media-right (alternate, don't repeat one side).
+- **Background** — alternate base / subtly tinted / inverted (a dark section between two light ones is a
+  classic rhythm device and creates a natural CTA anchor).
+- **Density** — a breathing, near-empty statement section after a dense feature grid resets the eye.
+- **Container idiom** — don't make *everything* a bordered card on white. Let a hero visual run edge-to-edge;
+  let one statement sit in open space with no container at all.
+
+Spacing rhythm is load-bearing here: section padding should step on the scale (e.g. 64 → 96px), and the
+*gap between sections* should be visibly larger than the gap *within* a section, so groups read as groups.
+A flat `py` on every section is the tell of generated output.
+
+## Step 5 — The craft finish (compounding micro-decisions)
+
+These are in the SKILL's "Premium details" table; apply them as a deliberate pass, not by accident:
+
+- Concentric radius (`outer = inner + padding`); never same-radius nesting.
+- Layered transparent OKLCH shadows; hairline `fg/10` borders for separation, shadow only for true float.
+- `text-wrap: balance` on headings, `pretty` on body; `tabular-nums` on any changing number/price.
+- Optical alignment: trust the eye over the math for icon centering and cap-height padding.
+- Restraint: glass on floating surfaces only; gradient as seasoning on one surface; one accent, used rarely.
+
+## Step 6 — Self-critique before you claim done (the senior-designer pass)
+
+Before shipping, interrogate your own output with the questions a senior designer would ask in a crit. Answer
+them honestly in your own head (or out loud to the user); if any answer is weak, iterate before delivering.
+
+1. **What is the one idea here?** If you cannot name it in a sentence, there is no concept — go to Step 1.
+2. **Would this place on Awwwards / Godly, or just pass review?** If "just pass", it is at ~7; name the
+   single most generic element and replace it.
+3. **What's the most generic thing on this page right now?** (Usually: the hero, the gradient, the 3-up card
+   grid, or the stock-feeling copy.) Fix that one thing first — it has the highest leverage.
+4. **Where does the eye land first, and is that the thing that should win?** If not, fix scale contrast.
+5. **If I deleted the logo, would anyone know whose product this is?** If not, the concept/signature is too
+   timid.
+6. **Does every section earn its place, or is one there out of habit?** Cut the weakest section entirely;
+   removal is a design decision.
+7. **Is the copy carrying a specific, verifiable claim, or vibes?** Swap one vague benefit for a concrete,
+   quantified one.
+
+The point of the pass is not to pass it — it is to make at least one concrete change as a result. A surface
+that survives this crit unchanged on the first try usually means the crit was not honest.
+
+## Worked example — generic → signature (dev-tool hero)
+
+**Generic (≈7, competent):** centered `<h1>` "Ship faster with our developer platform", subhead, two buttons,
+purple→blue gradient blob behind it, 3-up feature cards below, all sections `py-24` on white.
+
+**Signature (≈9, premium):**
+- *Concept:* "Engineered precision — this tool should feel like instrumentation."
+- *Signature element:* the hero IS a live, syntax-highlighted terminal session running the actual command,
+  output streaming — the product demonstrates the value (Step 2, "demonstrate not describe").
+- *Scale contrast:* a tight-tracked 13px mono eyebrow ("v2.4 — now with preview environments"), a 72px
+  display headline with one concrete claim ("Spin up a preview in 4s"), demoted everywhere else (Step 3).
+- *Rhythm:* light hero → dark proof section with a real benchmark bar → light asymmetric feature split
+  (media alternating sides) → dark final CTA (Step 4).
+- *Finish:* hairline grid lines as the material signature, mono `tabular-nums` on the benchmark, concentric
+  radius on the terminal chrome, one accent used only on the active prompt and the primary CTA (Step 5).
+- *Crit result:* "the live terminal" is the one idea; logo-removed it still reads as this product; eye lands
+  on the streaming output, which is the value (Step 6 passed honestly).
+
+Same constraints, same tokens, same stack — the difference is concept + signature + contrast + rhythm +
+honest crit. That is the gap between 7.7 and premium.

package/skills/design/references/trends-2026.md

@@ -0,0 +1,80 @@
+# 2026 UX/UI Trends — Dated Snapshot (re-verify per project)
+
+This is a **point-in-time snapshot**, last verified **June 2026**. Trends churn quarterly and your built-in aesthetic prior is the AI-template median — so this file is a starting reference, not a substitute for live research. **Re-run WebSearch/WebFetch per project** (per `research-method.md`) and refresh this file when you do; cite sources with their dates. Treat anything here older than ~3 months as suspect.
+
+## How to use this file
+
+- When the brand study (`brand-grounding.md`) leaves a visual dimension with no user direction, or the user asks for "modern" / "2026" / "premium", pull current trends and fold the findings into the output **with citations + dates**.
+- Extract *principles*, not pixels. "Bento for feature sections" is a principle; cloning a competitor's exact grid is theater.
+- Cross-check every trend against the non-negotiables in `SKILL.md` — a trend that breaks contrast, CWV, or the 5s test is out, however current.
+
+## Stack currency (verified June 2026)
+
+| Tool | Current | Notes |
+| --- | --- | --- |
+| Tailwind CSS | v4.3 (2026-05-08) | OKLCH-native `@theme`, no `tailwind.config.js`; v4.2 added scrollbar/logical-property utilities and new palettes. |
+| Next.js | 15 stable (16 released; this skill targets 15 + App Router) | Async request APIs, Turbopack stable, React 19 required for App Router. |
+| React | 19.2.x (19.2.6, 2026-05-06) | Stable in Next.js 15.1+. |
+
+Sources: [Tailwind v4.3 / v4.2 release notes](https://tailwindcss.com/blog), [InfoQ — Tailwind 4.2](https://www.infoq.com/news/2026/04/tailwind-css-4-2-webpack/), [Next.js 15 blog](https://nextjs.org/blog/next-15), [React versions](https://react.dev/versions). Re-verify before quoting a version.
+
+## Typography (2026)
+
+- **Type as the hero, not decoration.** Oversized headlines, expressive display faces, and variable fonts that respond to interaction/context. Serif and ledger-style numerals are back for editorial weight where the brand allows.
+- **Kinetic typography** — headlines that animate on scroll — but only behind a purpose gate and reduced-motion guard (see `motion-and-interaction.md`); decorative letter-jelly is out.
+- **Still true:** modular scale, ≤2 families, 45–75ch measure, `text-wrap: balance` on headings. Trends do not override the fundamentals in `visual-system.md`.
+
+Source: [Figma — Web design trends](https://www.figma.com/resource-library/web-design-trends/) (2026), [Tubik — UI trends 2026](https://blog.tubikstudio.com/ui-design-trends-2026/) (2026).
+
+## Color (2026)
+
+- **Two poles this cycle:** (1) high-energy / "dopamine" — deep blacks layered with electric neon, sunset coral, holographic accents (Y2K-adjacent); (2) calm/adaptive — light "morning", low-contrast "focus", warm "evening" modes. Pick the pole the *brand* dictates; do not default to the loud one.
+- **OKLCH is the production default** for ramps and dark-mode token swaps (perceptually even lightness, wider P3 gamut). Build ramps by holding hue+chroma and stepping L (see `visual-system.md`).
+- **Adaptive / time-of-day theming** is emerging beyond binary light/dark — only worth it when the audience benefits; otherwise it is complexity for its own sake.
+- **Still true:** 60-30-10 allocation, text ≥ 4.5:1, the brand color earns attention by being rare. Vivid palettes raise the contrast-failure risk — verify, never eyeball.
+
+Source: [Envato — UX/UI trends 2026](https://elements.envato.com/learn/ux-ui-design-trends) (2026), [Figma](https://www.figma.com/resource-library/web-design-trends/) (2026).
+
+## Layout (2026)
+
+- **Bento** remains the standard for feature → benefit sections: asymmetric grid, one focal cell the eye lands on first.
+- **Visible grids / wireframe logic as foreground** — exposed columns and structural lines used as decoration, not hidden scaffolding.
+- **Experimental navigation** (radial menus, drawers, nonlinear journeys) and maximalist/collage layering — high-risk; only where the brand is expressive and it does not cost the 5s test or accessibility.
+- **Container queries** (`@container`, core in Tailwind v4) for components that adapt to their slot, not just the viewport.
+- **Still true:** clear focal point, max-width ~1024–1200px, body measure ~65ch.
+
+Source: [Figma](https://www.figma.com/resource-library/web-design-trends/) (2026), [Index.dev — 12 UI/UX trends 2026](https://www.index.dev/blog/ui-ux-design-trends) (2026).
+
+## Motion (2026)
+
+- **Motion earns its keep by guiding, not flashing.** The cycle has moved away from bouncy micro-interactions toward *believable* motion: progress that reports real wait time, transitions that preserve continuity.
+- **Native CSS scroll-driven animation** (`animation-timeline: view()/scroll()`) is the default engine — zero JS, no CLS — behind an `@supports (animation-timeline: view())` feature query and a `prefers-reduced-motion` guard (see `motion-and-interaction.md`). As of June 2026 it ships in Chromium (115+) and Safari (18+, full in Safari 26); Firefox has it implemented but still behind a flag, so the `@supports` query is load-bearing for the graceful fallback.
+- **Still true:** purpose gate (guide / communicate / preserve), compositor-only properties (`transform`/`opacity`/`filter`), enter ~250ms / exit ~150ms, reduced-motion honored.
+
+Source: [Tubik — UI trends 2026](https://blog.tubikstudio.com/ui-design-trends-2026/) (2026), [Envato](https://elements.envato.com/learn/ux-ui-design-trends) (2026).
+
+## Tier-1 reference set (re-fetch live)
+
+The benchmark for premium product/landing work this cycle — fetch the live sites in the research loop rather than trusting memory of them:
+
+- **Linear** — radical restraint, dark near-monochrome, one accent, product-forward.
+- **Stripe** — docs + marketing balance, gradients used as restrained seasoning.
+- **Vercel** — type-led minimalism, dev-tool voice, product shown immediately.
+- **Resend** — dev-tool voice in copy, clean bento, annual-default pricing.
+- **Awwwards / Godly / Land-book / Mobbin** — galleries for direction, motion, and section order; weight by domain (skip the expressive entries for a dense dev tool).
+
+## What now reads as dated / AI-generic (avoid)
+
+- Purple→blue gradient on every surface; centered headline over an atmospheric mesh with the product hidden below the fold.
+- Heavy glassmorphism / neumorphism everywhere; blob backgrounds.
+- Cards-inside-cards; one hard `0 4px 8px #000` drop shadow on everything.
+- Bouncy jelly micro-interactions with no informational purpose.
+
+These are the AI-template median the research-first protocol exists to escape (`research-method.md`).
+
+## See Also
+
+- `research-method.md` — the live research loop that refreshes this snapshot.
+- `brand-grounding.md` — offer these researched defaults when a brand dimension has no direction.
+- `visual-system.md` — fundamentals these trends sit on top of (and never override).
+- `motion-and-interaction.md` — the scroll-driven / reduced-motion implementation referenced above.