@ericrisco/rsc 3.1.3 → 3.3.0

package/skills/design/references/landing-anatomy-and-cro.md

@@ -1,202 +0,0 @@
-# Landing Anatomy & Conversion (CRO)
-
-The CRO playbook. Every section earns its place by doing one job that moves a visitor toward conversion. Pair this with `copywriting-frameworks.md` for the words and `visual-system.md` for the tokens.
-
-## Above the fold
-
-The first viewport decides whether the visitor stays. It must pass the **5-second test**: a stranger reads it and can say what it is, who it's for, and why it's better.
-
-- **F-pattern** for text-dense pages (docs, blogs): the eye sweeps the top line, drops, sweeps again. Put the value prop and primary CTA on the first horizontal sweep.
-- **Z-pattern** for sparse hero layouts: top-left brand → top-right nav/CTA → diagonal to the headline → bottom-right primary action.
-- **Must be visible without scrolling:** the value prop (headline + subhead), the primary CTA, one proof signal (logo strip or a hard metric), and the product itself (screenshot, terminal, or short loop) — not a stock gradient.
-
-```text
-Bad  — Centered headline over an atmospheric gradient; product hidden below fold.
-Good — Headline + subhead + "Start free" CTA + a real product screenshot, all above the fold.
-```
-
-## Section-by-section anatomy
-
-Each section has a job, a copy framework, an accessibility note, and the conversion principle it serves.
-
-| Section | Job | Copy framework | Conversion principle |
-| --- | --- | --- | --- |
-| Hero | State the value prop; pass the 5s test | Outcome + timeframe headline | Clarity beats cleverness |
-| Logo / social-proof strip | Borrow credibility instantly | "Trusted by N teams" | Social proof / authority |
-| Problem / agitation | Name the pain in the reader's words | PAS (Problem-Agitate) | Loss aversion |
-| Solution | Show the product doing the job | FAB (feature→benefit) | Concreteness over claims |
-| Features → benefits (bento) | Translate capability into outcome | JTBD per cell | Self-relevance |
-| How-it-works | Reduce perceived effort | 3-step sequence | Effort reduction |
-| Testimonials / case studies | Prove it works for people like them | Quantified quote | Similarity + proof |
-| Objection handling | Preempt the top "no" | "X without Y" | Risk reduction |
-| Pricing | Make the choice easy | Value framing, anchored | Anchoring + decoy |
-| FAQ | Answer real blockers | Question→direct answer | Friction removal |
-| Final CTA | One clear action | Value-on-the-button | Single decision |
-| Footer | Navigation, legal, trust | Scannable links | Trust + completeness |
-
-Accessibility note for every section: give each `<section>` an accessible name via `aria-labelledby` (pointing at its heading) or `aria-label`, and keep the heading order linear (`h1` → `h2` → `h3`, no skips).
-
-## Full landing skeleton
-
-One complete, copy-pasteable Next.js 15 App Router page: semantic landmarks, exactly one `<h1>`, the Metadata API, and valid JSON-LD.
-
-```tsx
-// app/page.tsx — semantic landing skeleton (Next.js 15 App Router)
-import type { Metadata } from "next";
-
-export const metadata: Metadata = {
-  title: "Deploy in minutes — Acme",            // 50–60 chars
-  description: "Ship a fix in 4 minutes with no YAML and no on-call page. Free to start.", // 120–160
-};
-
-export default function Page() {
-  return (
-    <main>
-      <section aria-labelledby="hero-h">
-        <h1 id="hero-h">Ship a fix in 4 minutes</h1>
-        {/* subhead, primary CTA, product screenshot */}
-      </section>
-      <section aria-label="Trusted by">{/* logo strip */}</section>
-      <section aria-labelledby="pricing-h">
-        <h2 id="pricing-h">Pricing</h2>
-        {/* 3-tier table */}
-      </section>
-      <section aria-labelledby="faq-h">
-        <h2 id="faq-h">FAQ</h2>
-        {/* question/answer list */}
-      </section>
-      <script
-        type="application/ld+json"
-        dangerouslySetInnerHTML={{ __html: JSON.stringify({
-          "@context": "https://schema.org",
-          "@type": "Organization",
-          name: "Acme",
-          url: "https://acme.example",
-        }) }}
-      />
-    </main>
-  );
-}
-```
-
-## CTA strategy
-
-- **One primary action per viewport.** A secondary action (ghost button, text link) may accompany it, but never two equal-weight primaries competing for the click.
-- **Placement cadence:** above the fold + after the value is established + after pricing + a sticky bar on mobile. Visitors convert at different scroll depths; meet each one.
-- **Value on the button:** "Start free", "Get my estimate", "See it live" — never "Submit" or "Click here".
-
-```tsx
-// components/sticky-cta.tsx — sticky mobile CTA, hidden on desktop (Client Component)
-"use client";
-
-export function StickyCta() {
-  return (
-    <div className="fixed inset-x-0 bottom-0 z-50 border-t border-fg/10 bg-bg/90 p-3 backdrop-blur md:hidden">
-      <a
-        href="#start"
-        className="flex min-h-11 items-center justify-center rounded-card bg-brand-500 font-medium text-white"
-      >
-        Start free
-      </a>
-    </div>
-  );
-}
-```
-
-## Pricing psychology
-
-- **Anchoring:** show the highest tier near the recommended one so the middle reads as reasonable.
-- **3 tiers, highlighted middle:** the middle tier is the intended default; mark it with a ring and a "Most popular" badge.
-- **Annual default:** show annual pricing first with the monthly equivalent ("$20/mo billed annually") — frames the lower number.
-- **Value framing, not feature dumps:** lead each tier with the outcome the buyer gets, then list features.
-- **Decoy effect:** a deliberately less attractive tier makes the target tier look better.
-- **Risk reversal:** money-back guarantee, free trial, no credit card — lowers the cost of saying yes.
-
-```html
-<!-- 3-tier pricing, middle tier highlighted -->
-<div class="mx-auto grid max-w-5xl grid-cols-1 gap-6 md:grid-cols-3">
-  <article class="rounded-card border border-fg/10 p-6">
-    <h3 class="font-semibold">Starter</h3>
-    <p class="price mt-2 text-3xl font-semibold">$0</p>
-  </article>
-  <article class="rounded-card border border-brand-500 p-6 ring-2 ring-brand-500">
-    <p class="text-xs font-medium text-brand-500">Most popular</p>
-    <h3 class="font-semibold">Team</h3>
-    <p class="price mt-2 text-3xl font-semibold">$20<span class="text-base text-fg/60">/mo</span></p>
-  </article>
-  <article class="rounded-card border border-fg/10 p-6">
-    <h3 class="font-semibold">Enterprise</h3>
-    <p class="mt-2 text-3xl font-semibold">Custom</p>
-  </article>
-</div>
-```
-
-## Social proof
-
-Logos, quantified testimonials, metrics, and trust badges — each placed where it answers the visitor's current doubt. Logos near the hero borrow authority early; a quantified case study near pricing closes the deal.
-
-```text
-Bad  — "This tool is amazing, it changed everything for us!" — Happy Customer
-Good — "Cut our deploy time from 22 min to 90 sec." — Priya R., Staff Eng, Northwind
-```
-
-Quantified, attributed, specific. A vague rave is worth less than one hard number.
-
-## Objection handling + FAQ
-
-Surface the real reasons a visitor hesitates (price, migration cost, lock-in, security) and answer them directly. Add `FAQPage` JSON-LD **only** when the on-page content matches the markup — fabricated FAQ structured data is a guidelines violation.
-
-```json
-{
-  "@context": "https://schema.org",
-  "@type": "FAQPage",
-  "mainEntity": [
-    {
-      "@type": "Question",
-      "name": "Do I need to change my CI pipeline?",
-      "acceptedAnswer": {
-        "@type": "Answer",
-        "text": "No. Driftway runs as a single CLI step inside your existing pipeline."
-      }
-    },
-    {
-      "@type": "Question",
-      "name": "Is there a free tier?",
-      "acceptedAnswer": {
-        "@type": "Answer",
-        "text": "Yes. Solo projects are free; paid tiers start at $20/mo billed annually."
-      }
-    }
-  ]
-}
-```
-
-## A/B mindset + instrumentation
-
-- **One hypothesis at a time.** Change the headline OR the CTA color, not both — otherwise you cannot attribute the lift.
-- **Measure:** conversion rate (primary), scroll depth (do they reach pricing?), and INP at the CTA (a janky button costs clicks).
-- **Event-hook sketch:** fire a typed event on the primary action so the funnel is measurable.
-
-```ts
-// lib/track.ts — minimal typed conversion event
-type Event = "cta_click" | "pricing_view" | "signup_start";
-export function track(event: Event, props: Record<string, string | number> = {}) {
-  // forward to your analytics provider
-  window.dispatchEvent(new CustomEvent("analytics", { detail: { event, ...props } }));
-}
-```
-
-## SEO-aware structure constraint
-
-Enforce the structural constraints here; defer keyword research, GEO, and technical audits to the `../marketing/SKILL.md` sibling (it carries SEO/GEO + keyword intent).
-
-- Exactly one `<h1>`; linear heading order.
-- Semantic landmarks (`header`/`nav`/`main`/`section`/`footer`).
-- Metadata API: title 50–60 chars, description 120–160 chars.
-- JSON-LD presence appropriate to the page: `Organization` sitewide, `Product` on a product page, `BreadcrumbList` for nested routes, `Article` for content, `FAQPage` only when FAQ content matches.
-
-## See Also
-
-- `copywriting-frameworks.md` — the words for every section above.
-- `../../marketing/SKILL.md` — deep SEO/GEO, keyword research, and SEO-aware copy structure.
-- `../../nextjs/SKILL.md` — App Router Metadata API and rendering specifics.

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

@@ -1,228 +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.
-
-## 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.