rsc-universal 0.1.1

package/skills/design/references/brand-grounding.md

@@ -0,0 +1,187 @@
+# Brand Grounding — Checklist, Question Script & Persistence (visual)
+
+The brand study is the source of truth every design decision is grounded in. This file holds the **completeness checklist** (the visual/design dimensions a brand study must cover before you paint a single pixel), the **question script** (how to interview the user, batched), and the **persistence format** (how to write it into `02-DOCS` and link it from `CLAUDE.md`). The runtime mechanism that invokes this — the hard STOP on an incomplete study — lives in `SKILL.md` under "Brand grounding (read this first)".
+
+This skill **co-owns the brand study with the `marketing` skill**. Marketing owns the *words* dimensions (positioning, audience, value prop, voice & tone, proof, offers, channels, SEO/GEO keywords — see `../../marketing/references/brand-grounding.md`). Design owns the *visual* dimensions below. They write into the **same** `02-DOCS/wiki/brand/` study and the **same** `## Brand & voice` section of root `CLAUDE.md` — never a parallel copy. If marketing already created the study, extend it with the visual articles; do not duplicate the words articles.
+
+## Where the brand study lives
+
+Following the `harness` Karpathy-wiki convention (compiled articles in `wiki/`, immutable raw inputs in `raw/`):
+
+```text
+02-DOCS/
+├── raw/brand/             ← immutable: pasted inputs (screenshots, palettes, competitor lists, mood refs)
+│   ├── inspiration-linear.png
+│   ├── existing-palette.txt
+│   └── …
+└── wiki/brand/            ← compiled brand study, one article per dimension
+    ├── index.md             ← positioning one-liner + links to every dimension article
+    ├── visual-identity.md   ← color (OKLCH), type pairing & scale, logo, radius/shadow/motion personality  [DESIGN]
+    ├── imagery.md           ← photography vs illustration mood, iconography, texture/grain  [DESIGN]
+    ├── layout.md            ← density, composition, dark-mode stance, reference/inspiration sites  [DESIGN]
+    ├── constraints.md       ← accessibility level, performance budget, existing design system/tokens  [DESIGN]
+    ├── audience.md          ← ICP, pains, desires  [MARKETING]
+    ├── value-proposition.md ← value prop, differentiation  [MARKETING]
+    ├── voice.md             ← tone, do/don't word lists, voice samples  [MARKETING]
+    ├── proof.md             ← credibility, metrics, customers  [MARKETING]
+    ├── offers.md            ← offers + primary/secondary CTA  [MARKETING]
+    ├── channels.md          ← active channels  [MARKETING]
+    └── seo.md               ← target keywords  [MARKETING]
+```
+
+Small projects may collapse the visual dimensions into one `visual-identity.md` with each dimension as a `##` heading — but every dimension below must still be present and filled.
+
+## Completeness checklist (visual dimensions)
+
+The visual side of the study is **COMPLETE** only when every dimension below is filled with real, specific content. Any empty, placeholder, or "TBD" dimension = **INCOMPLETE** = hard STOP, interview the user. (The words dimensions are checked by `marketing/references/brand-grounding.md`; design needs the voice/positioning articles present so copy and design agree, but design only *interviews* for the visual gaps.)
+
+- [ ] **V1. Color system** — brand hue(s) and neutrals expressed (or convertible) to OKLCH; a target ramp (50→900); the accent's role; the 60-30-10 intent. Capture any existing hex/brand colors so they can be converted to OKLCH tokens (OKLCH is the source of truth; sRGB hex is an approximation — see `visual-system.md`).
+- [ ] **V2. Typography** — display face + text face (and mono if code is shown), or a single superfamily with weight contrast; the modular scale ratio (e.g. 1.25); any licensed/owned fonts the brand must use. Never three+ families.
+- [ ] **V3. Logo & wordmark** — does one exist? light/dark variants, clear-space, min size, and whether a favicon/app icon is needed. If absent, note it as a gap (`[[NEEDS ASSET]]`) — never invent a logo silently.
+- [ ] **V4. Imagery & illustration mood** — photography vs 3D vs illustration vs abstract; realistic vs stylized; iconography style (line vs filled, corner radius); texture/grain/noise stance. This sets whether the hero shows a product screenshot, a render, or an editorial image.
+- [ ] **V5. Density & personality** — how the surface should *feel*: airy/editorial vs dense/utilitarian; the radius personality (sharp 0–4px vs soft 12px+); shadow personality (flat vs layered elevation); motion personality (still/quiet vs expressive). These become token values.
+- [ ] **V6. Reference / inspiration sites** — 2–5 sites the user loves and *why* (e.g. "Linear for restraint", "Stripe for gradients done right"). These anchor the research-first protocol's archetypes; without them you research blind.
+- [ ] **V7. Layout preferences** — composition leanings (centered hero vs asymmetric/bento vs editorial), max-width feel, any required sections or a sitemap, mobile-first vs desktop-first emphasis.
+- [ ] **V8. Dark-mode stance** — light-only, dark-only, or both with a token-swap; if both, which is the default. (Dark mode via semantic token swap, not per-component overrides — see `visual-system.md`.)
+- [ ] **V9. Accessibility & performance constraints** — target conformance (WCAG 2.2 AA is the floor here; AAA if mandated); Core Web Vitals budget (LCP/INP/CLS); locales/RTL; reduced-motion seriousness; any device/bandwidth constraints.
+- [ ] **V10. Existing design system / tokens** — is there a Tailwind `@theme`, a `tokens.json`, a Figma library, or component kit to extend? Reusing the system beats inventing a parallel one.
+- [ ] **V11. Voice & positioning present (cross-check)** — the marketing-owned `voice.md` and `value-proposition.md` articles exist and are filled, so copy and design agree. If absent, hand off to the `marketing` sibling skill (or interview for them too) — a premium surface with off-voice copy is not premium.
+
+## Question script (ask in batches, never all at once)
+
+Ask **one batch at a time**. Send the batch, wait for the answer, persist what you learned, then send the next batch. Skip questions a located-but-incomplete study already answers — only fill the gaps. Stop interviewing the moment every dimension is complete.
+
+### Batch 1 — references & feel
+
+```text
+1. Show me 2–5 sites or apps whose look you love — and for each, what specifically (the
+   restraint, the type, the color, the motion)? Paste links or screenshots.
+2. In three words, how should this feel? (e.g. calm/editorial, dense/technical,
+   playful/vivid, refined/luxury)
+3. Airy or dense? Should it breathe with whitespace, or pack information tightly?
+4. Light mode, dark mode, or both? If both, which is the default?
+```
+
+### Batch 2 — color & type
+
+```text
+5. Do you have brand colors already? Paste any hex/RGB values, a palette, or a brand guide —
+   I'll convert them to an OKLCH token ramp (I'll save the raw input under 02-DOCS/raw/brand/).
+6. If not: pick a brand hue direction (cool/blue, warm/orange, green, violet, near-neutral)
+   and how saturated it should read (muted vs vivid).
+7. Any required or owned fonts? If not, do you lean geometric-sans, humanist-sans, serif/
+   editorial, or mono-forward (dev tool)?
+8. How loud should the type be — understated, or oversized expressive headlines?
+```
+
+### Batch 3 — assets, imagery & layout
+
+```text
+9. Is there a logo/wordmark? Send light + dark versions if you have them. Need a favicon/app icon?
+10. What imagery direction — product screenshots, photography, 3D renders, illustration, or
+    abstract? Realistic or stylized? Any reference for the icon style?
+11. Radius/shadow/motion personality: sharp & flat, or soft & elevated? Still & quiet, or
+    expressive motion? (I'll bake these into tokens.)
+12. Any must-have sections or a required sitemap? Centered hero or asymmetric/bento?
+```
+
+### Batch 4 — constraints & system
+
+```text
+13. Accessibility target — is WCAG 2.2 AA enough, or is AAA / a specific standard mandated?
+    Any RTL/locale needs?
+14. Performance budget or device constraints I should design within? (slow networks, low-end
+    devices, a hard LCP target?)
+15. Is there an existing design system, Tailwind @theme, tokens.json, or Figma library to
+    extend rather than replace?
+```
+
+If the user can't answer a question, that dimension stays incomplete — note the gap, keep the STOP in place for that dimension, and offer to propose a researched default (from the research-first protocol / `trends-2026.md`) they can confirm, rather than silently defaulting to your generic prior.
+
+## Persistence format
+
+### Visual-identity wiki article template
+
+Each `02-DOCS/wiki/brand/*.md` article follows the harness wiki format:
+
+```markdown
+# Brand — Visual Identity
+
+> Sources: {user interview, YYYY-MM-DD}
+> Raw: [existing-palette](../../raw/brand/existing-palette.txt); [inspiration-linear](../../raw/brand/inspiration-linear.png)
+
+## Overview
+
+One paragraph: the visual personality and the ONE memorable detail.
+
+## Color (OKLCH source of truth)
+
+| Token | OKLCH | Role |
+| --- | --- | --- |
+| brand-500 | oklch(0.62 0.19 256) | primary accent (10% allocation) |
+| bg | oklch(0.99 0 0) | background (light) |
+| fg | oklch(0.21 0.01 256) | foreground |
+
+(Any sRGB hex the user gave is recorded as an approximation, not the source — see `visual-system.md`.)
+
+## Typography
+
+- Display: Geist Semibold · Text: Inter Regular · Mono: Geist Mono (code)
+- Scale ratio: 1.25 (major third), 16px base
+
+## Personality
+
+- Radius: soft (0.875rem cards) · Shadow: layered transparent elevation · Motion: quiet, entry reveals only
+
+## See Also
+
+- [Layout](layout.md)
+- [Constraints](constraints.md)
+```
+
+### Raw inputs
+
+Paste each user-provided input (palette text, competitor list, screenshots saved as files) under `02-DOCS/raw/brand/` with a one-line provenance header on text files:
+
+```markdown
+> Source: user-pasted, YYYY-MM-DD, origin: "current brand guide, page 3 palette"
+
+<the pasted values, unedited>
+```
+
+Binary inputs (screenshots, logo files) go in verbatim and are linked from the article's `> Raw:` line; never compiled or edited.
+
+### CLAUDE.md link
+
+Add (or **extend**, never duplicate) the shared `## Brand & voice` section in the root `CLAUDE.md`. Additive only — never delete existing sections. Create `CLAUDE.md` if absent. If `marketing` already created this section, append the visual links to it rather than writing a second section.
+
+```markdown
+## Brand & voice
+
+Design and marketing/landing copy are grounded in the brand study under
+`02-DOCS/wiki/brand/`. Read it before any user-facing design or copy:
+
+- [Positioning](02-DOCS/wiki/brand/index.md)
+- [Visual identity (color, type, personality)](02-DOCS/wiki/brand/visual-identity.md)
+- [Imagery & illustration](02-DOCS/wiki/brand/imagery.md)
+- [Layout & references](02-DOCS/wiki/brand/layout.md)
+- [Accessibility & performance constraints](02-DOCS/wiki/brand/constraints.md)
+- [Audience](02-DOCS/wiki/brand/audience.md)
+- [Value proposition](02-DOCS/wiki/brand/value-proposition.md)
+- [Voice & tone](02-DOCS/wiki/brand/voice.md)
+
+Raw inputs (palettes, screenshots, voice samples): `02-DOCS/raw/brand/`.
+The `design` skill owns the visual articles; `marketing` owns the words
+articles. Either stops to interview the user if its dimensions are missing.
+```
+
+Also update `02-DOCS/wiki/index.md` (add the new brand articles) and append a one-line entry to `02-DOCS/wiki/log.md` per the harness wiki protocol.
+
+## See Also
+
+- `../SKILL.md` — the runtime grounding mechanism (hard STOP) that uses this checklist.
+- `visual-system.md` — turns the captured color/type/personality into Tailwind v4 `@theme` tokens.
+- `research-method.md` — uses the reference sites (V6) as archetypes for the research loop.
+- `trends-2026.md` — researched defaults to offer when a visual dimension has no user direction.
+- `../../marketing/references/brand-grounding.md` — the co-owned words dimensions (incl. SEO/GEO) of the same study.
+- `../../harness/SKILL.md` — the canonical `02-DOCS` wiki protocol and article templates.

package/skills/design/references/copywriting-frameworks.md

@@ -0,0 +1,138 @@
+# Conversion Copywriting Frameworks
+
+The marketing-copy engine. Copy carries the value prop — the prettiest hero fails if the words are vague. Write benefit-led, specific, and human. The `marketing` skill is the canonical owner of the WORDS (voice, full landing copy, launch, channel adaptation) and grounds them in the same `02-DOCS/wiki/brand/` study; this file is the design-side quick reference that makes on-page copy convert and keeps it in sync with the design. For anything beyond the hero/section copy, hand off to `marketing`.
+
+## The 5s value-prop test
+
+A stranger reads the hero and, within 5 seconds, can answer: **what is it, who is it for, why is it better?** If any answer is missing, the copy fails — rewrite before you touch the layout.
+
+Build the value prop from a value-proposition canvas: map the customer's jobs/pains/gains, then your pain-relievers/gain-creators, then compress the strongest match into a headline.
+
+```text
+VALUE-PROP CANVAS — Driftway (preview-environment CLI)
+Customer jobs ...... ship a branch for review without breaking staging
+Customer pains ..... staging is a shared queue; manual env setup eats an afternoon
+Customer gains ..... reviewers click a link and see the real change
+Pain relievers ..... one CLI command spins an isolated env; auto-teardown
+Gain creators ...... every PR gets a live preview URL automatically
+Headline ........... "Preview every branch — no staging queue"
+Subhead ............ "One command gives every pull request a live URL. For platform teams who are done babysitting staging."
+```
+
+## Frameworks with picker
+
+Pick the framework by traffic temperature and funnel position.
+
+- **PAS (Problem-Agitate-Solution)** — pain-aware cold traffic that already feels the problem.
+- **AIDA (Attention-Interest-Desire-Action)** — broad / top-of-funnel where you must earn attention first.
+- **FAB (Feature-Advantage-Benefit)** — feature sections; translate capability into outcome.
+- **BAB (Before-After-Bridge)** — show the transformation; strong for case studies.
+- **JTBD (Jobs To Be Done)** — frame the product as the tool that gets a specific job done.
+
+```text
+PAS rewrite
+Bad  — "Our platform streamlines environment management."
+Good — "Staging is a queue. Every merge waits behind someone else's broken branch.
+        Driftway gives each PR its own environment — no queue, no waiting."
+```
+
+```text
+AIDA rewrite
+Bad  — "Sign up for our developer tool today."
+Good — "See your branch live in 30 seconds (Attention). It runs as one CLI step in
+        your existing pipeline (Interest). Reviewers click a real URL, not a screenshot
+        (Desire). Start free — no credit card (Action)."
+```
+
+```text
+FAB rewrite
+Bad  — "Includes automatic environment teardown."
+Good — "Environments tear down automatically when the PR merges (Feature → Advantage),
+        so you never pay for idle infra or clean up by hand (Benefit)."
+```
+
+```text
+BAB rewrite
+Bad  — "Improve your review workflow."
+Good — "Before: reviewers guess from a diff (Before). After: they click a live URL and
+        test the real thing (After). Driftway builds that URL on every push (Bridge)."
+```
+
+```text
+JTBD rewrite
+Bad  — "A powerful preview platform for modern teams."
+Good — "When a teammate opens a PR, you want to test the actual change in seconds —
+        Driftway gives that PR a live environment automatically."
+```
+
+## Headline formulas
+
+| Formula | Pattern | Example |
+| --- | --- | --- |
+| Outcome + timeframe | `<Outcome> in <time>` | "Preview every branch in 30 seconds" |
+| X without Y | `<Gain> without <pain>` | "Live previews without a staging queue" |
+| JTBD | `When <trigger>, <product> <gets job done>` | "When you open a PR, get a live URL automatically" |
+| Specificity | Replace adjectives with numbers | "Cut review setup from 20 min to 30 sec" |
+
+The subhead's job: state **who** it's for, **how** it works in one clause, and **proof** if you have it. Specificity beats cleverness — a clear claim outconverts a clever pun every time.
+
+## Benefit-led specificity
+
+Climb the ladder feature → benefit → proof. Stop at the rung the visitor cares about (the benefit), and back it with the proof rung.
+
+```text
+Feature ... "Isolated per-branch environments."
+Benefit ... "Reviewers test the real change, not a screenshot."
+Proof ..... "Northwind cut review setup from 20 min to 30 sec across 40 engineers."
+```
+
+Numbers and receipts outperform adjectives. "Fast" is a claim; "30 seconds" is evidence.
+
+## Microcopy & CTA copy
+
+Buttons use value verbs; forms label clearly; states stay human.
+
+| Context | Bad | Good |
+| --- | --- | --- |
+| Primary CTA | "Submit" | "Start free" |
+| Secondary CTA | "Learn more" | "See a 2-min demo" |
+| Form label | "Email" placeholder only | "Work email" with persistent label |
+| Empty state | "No data" | "No previews yet — push a branch to create one" |
+| Loading | "Loading..." | "Spinning up your environment…" |
+| Error | "Something went wrong" | "Couldn't reach the API. Retry, or check status.acme.example." |
+
+## Voice/tone system
+
+Define a reusable VOICE block once and apply it everywhere. If a brand study exists under `02-DOCS/wiki/brand/voice.md` (owned by `marketing`), consume its profile verbatim; otherwise fill this and persist it back to the brand study:
+
+```text
+VOICE
+Persona ...... a senior engineer who respects your time
+Tone sliders . formal ⟵───●──── casual | serious ●──────── playful | dense ───●───── airy
+Do ........... lead with the outcome; use concrete numbers; short sentences; active voice
+Don't ........ hype words; bait questions; em-dash-stacked run-ons; forced lowercase
+Reading level  8th–10th grade; one idea per sentence
+```
+
+## The ban-list
+
+State once, enforce everywhere. These signal AI-template copy and erode trust:
+
+`revolutionary` · `game-changer` · `cutting-edge` · "In today's landscape" · `unlock` · `seamless` · `elevate` · `supercharge` · bait questions ("Tired of slow deploys?") · "not X, just Y" · forced lowercase as a style · "Excited to share".
+
+The `marketing` skill is the canonical owner of voice and distribution; this ban-list is the on-page enforcement of its rules.
+
+## SEO-aware copy
+
+A structural constraint, not a keyword strategy — defer depth (keyword research, GEO, technical SEO) to the `marketing` sibling skill, which carries SEO/GEO.
+
+- Title 50–60 characters; meta description 120–160.
+- Put the primary keyword in the `<h1>` naturally, not stuffed.
+- Use scannable `<h2>`/`<h3>` subheads that double as answers to likely queries.
+- Front-load the benefit in the first 160 characters so search snippets read well.
+
+## See Also
+
+- `landing-anatomy-and-cro.md` — where each piece of copy lands on the page.
+- `brand-grounding.md` — where the voice/positioning that drives this copy is captured and persisted.
+- `../../marketing/SKILL.md` — canonical owner of voice, full landing copy, launch, channel adaptation, and SEO/GEO + keyword research.

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

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