@ericrisco/rsc 3.1.4 → 3.3.0

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

@@ -1,232 +0,0 @@
-# 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.23, 1, 0.32, 1);    /* decelerate; the default for UI */
-  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);   /* on-screen movement, A to B */
-  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);    /* iOS-like drawer / sheet (Ionic) */
-  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1); /* playful overshoot, sparingly */
-}
-```
-
-**Never `ease-in` on UI.** It starts slow, delaying the exact moment the user is watching most, so
-the interface feels sluggish — `ease-out` at 200ms *feels* faster than `ease-in` at 200ms. And the
-built-in CSS easings are too weak to read as intentional; the curves above are the ones to reach for.
-Need one that is not here? Take it from [easing.dev](https://easing.dev/), do not hand-roll it.
-
-The choice, in decision order: entering or exiting → `ease-out`; moving on screen → `ease-in-out`;
-hover or color → `ease`; constant motion (marquee, progress) → `linear`; unsure → `ease-out`.
-`../../motion-craft/SKILL.md` owns the duration ranges, the easing families and the never-animate list, and
-its diagnosis table maps the complaint — sluggish, cheap, janky — back to the cause.
-
-- **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: var(--ease-out);
-}
-.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.
-
-## Escalating past the native path
-
-Native `animation-timeline: view()` covers reveals, progress rails and parallax. Two effects it
-cannot express are **pinning** (a section holds still while its content advances) and a
-**horizontal pan** driven by vertical scroll. Those need a scroll library, and the improvised
-version is always wrong in the same three ways. Escalate deliberately:
-
-**Never listen to scroll directly.** `window.addEventListener('scroll')` fires off the main
-thread's budget, blows INP, and never gets a passive-listener or cleanup story right. The
-allowed inputs are `IntersectionObserver`, a scroll-driven CSS timeline, `useScroll()` from
-`motion/react`, or GSAP's ScrollTrigger. Nothing else.
-
-**Sticky stack** (pin a section, advance its layers):
-
-```ts
-// 'use client' leaf only. One trigger per pinned section, killed on unmount.
-const st = ScrollTrigger.create({
-  trigger: sectionRef.current,
-  start: "top top",          // pin the moment the section's top reaches the viewport top
-  end: () => `+=${panels.length * window.innerHeight}`,
-  pin: true,
-  pinSpacing: true,          // without this the next section slides under the pin
-  scrub: 1,                  // 1 = follow scroll with a 1s catch-up, not a hard 1:1 jump
-  invalidateOnRefresh: true, // recompute on resize, or the end point is stale on rotate
-});
-// cleanup is not optional: return () => st.kill();
-```
-
-**Horizontal pan** is the same trigger with `end: () => "+=" + track.scrollWidth` and the
-track moved via `x`, not `left` — `transform` is compositor-only, `left` triggers layout.
-
-Both are opt-in above a motion budget, both stay inside
-`@media (prefers-reduced-motion: no-preference)`, and both collapse to a plain vertical stack
-below `768px` rather than pinning on a phone.
-
-A **pre-rendered video scrubbed by scroll** (a camera flying through scenes, Apple-style) is not a
-timeline animation. The clips, the seams between them and the scrub engine are
-`../../scroll-film/SKILL.md`.
-
-## 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

@@ -1,154 +0,0 @@
-# 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).
-
-## Where to look
-
-`inspiration-sources.md` is the dated registry of where to browse: whole pages to beat, SaaS and
-conversion surfaces, real product flows (Mobbin, Page Flows — the bucket most people skip), single
-patterns like footers and empty states, and the design systems that are specification rather than
-inspiration. Extract principles, not pixels, and come back with a named page rather than a gallery.

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

@@ -1,148 +0,0 @@
-# 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/starting-point.md

@@ -1,75 +0,0 @@
-# Reference — proposing a starting point
-
-Three places promise to propose one: `../../design-loop/SKILL.md` phase 1 when the user says *skip*,
-the closing line of `brand-grounding.md` when a visual dimension has no direction, and
-`../../design-dna/SKILL.md`'s REUSE mode. This file is what they propose *from*. Without it the
-fallback is your own prior, which is the AI-template median — the thing the whole area exists to escape.
-
-## 0. What the project already owns wins
-
-**Look before you offer.** Run it; do not reason about it:
-
-```bash
-npx @ericrisco/rsc doctor --json   # read `designStartingPoint`
-```
-
-| State | What it means | What you do |
-| --- | --- | --- |
-| `owned` | An identity article or at least one legible style record exists | Propose **that**, by name, first. Offer nothing external until the user rejects it. More than one record → all of them are candidates, ordered as reported. Never pick one silently. |
-| `none` | Looked in both scopes, found nothing | Go to §1. |
-| `inconclusive` | Something could not be read | Say what, and ask for another route to it. **Do not propose past a blind spot** — a proposal made without looking is the defect this file exists to remove. |
-
-If the owned identity **contradicts** what the user is now asking for, name the conflicting rule and let
-them decide which wins. Same rule the loop's preflight already applies to a bar from outside.
-
-A record that `doctor` reports with a pair below its contrast floor is not offered as a starting point.
-
-## 1. What are you building → which bar
-
-At most **three** candidates. Each one gets a name, one line on why it fits *this* product, and one line
-on when it would be the wrong choice. Then **wait**. No answer → take the most demanding one and say so.
-
-Sources are in `inspiration-sources.md`; the tier-1 set and the dated-looking list are in
-`trends-2026.md`. **Only propose what you can actually open** — that registry marks several sources as
-bot-blocked, and a bar that cannot be fetched dies in the loop's preflight.
-
-| Building | Candidate bars | Wrong choice when |
-| --- | --- | --- |
-| SaaS marketing | Stripe · [SaaS Landing Page](https://saaslandingpage.com) browsed by section · Linear | The product is a daily tool, not a purchase decision — a marketing skin on a workhorse |
-| Dev tool | Linear · Vercel · Resend · [Primer](https://primer.style) | The audience is not technical: dev-tool restraint reads as unfinished to them |
-| Dashboard / internal tool | [Carbon](https://carbondesignsystem.com) · [Polaris](https://polaris.shopify.com) · [Mobbin](https://mobbin.com) flows | It is a landing page with a chart on it — density is not the job |
-| Portfolio / editorial | [Awwwards](https://www.awwwards.com) · [Recent](https://recent.design) · [One Page Love](https://onepagelove.com) | Anything with a conversion target: award craft routinely costs LCP and the 5s test |
-| E-commerce | [Minimal Gallery](https://minimal.gallery) for restraint · [Nicely Done](https://nicelydone.club) for real product surfaces | The catalogue is huge and the real problem is search and filtering, not the hero |
-| Docs | [Stripe docs](https://docs.stripe.com) · [Material 3](https://m3.material.io) on states | Reading is not the job — it is a reference table, so density beats calm |
-
-Nothing here fits what they are building? **Say so and interview.** Do not stretch the nearest row: a bar
-chosen because it was closest is the vague bar that makes the loop approve everything on round one.
-
-## 2. A proposal is not an answer
-
-1. **Open the reference.** No value is proposed from a page you did not fetch. Blocked → say so, pick
-   another. Never substitute a description from memory.
-2. **Measure it** — the loop's teardown already does this and writes 5 to 7 mechanisms. Those measured
-   values *are* the researched default this file was missing. They are not invented, and they come from
-   a page that already ships.
-3. **Check colour before writing it.** Any text pairing must measure **≥ 4.5:1** (≥ 3:1 for large text
-   and UI). Below that, it is **not proposed** — not proposed-with-a-warning.
-4. **Write it marked `propuesto`, naming the reference it came from.** Never as a confirmed value.
-5. A dimension that is proposed and not yet confirmed **does not count as complete** against
-   `brand-grounding.md`'s checklist. The hard STOP stays up for it. Otherwise the prefill becomes the
-   way to cross the gate with nobody having confirmed anything.
-6. Only what the user confirms becomes the project's identity.
-
-## 3. The base is the floor, not the concept
-
-A starting point gets you a defensible floor in one exchange. It does **not** satisfy the ONE signature
-element (`signature-and-craft.md` §2), and it never will: every project that picked the same bar would
-converge on the same page. If the only thing making this surface distinctive is the bar it started from,
-there is no concept yet.
-
-## See Also
-
-- `inspiration-sources.md` — the source registry, dated, with the bot-blocked entries marked.
-- `trends-2026.md` — the tier-1 set, and what currently reads as a template.
-- `brand-grounding.md` — the checklist this fills in, and the STOP it does not lift.
-- `signature-and-craft.md` — the part a starting point cannot give you.