@ericrisco/rsc 3.1.4 → 3.3.1

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

@@ -1,138 +0,0 @@
-# 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/design-systems.md

@@ -1,49 +0,0 @@
-# When the brief is a design system, not an aesthetic
-
-This skill's default is Tailwind v4 + Next.js, and for most briefs that is right. But some
-briefs correspond to a **maintained, official design system**, and there the correct answer is
-to install it. Recreating its CSS by hand produces something that looks like it, fails its
-accessibility work, and drifts on its next release.
-
-The list is deliberately short: only the cases where using the official package is
-**obligatory or strongly expected**, and where the default instinct would be to hand-roll it.
-Free choices (Bootstrap, Material for a non-Google product, Radix Themes, shadcn/ui) are not
-here — they are ordinary picks, and shadcn/ui in particular is already this skill's territory,
-where the rule is simply never to ship it in its default state.
-
-| The brief reads as | Install | Why it is not a choice |
-| --- | --- | --- |
-| A UK public-sector service | `govuk-frontend` | Expected by the Service Standard; deviating is a finding at assessment |
-| A US federal or trust-first public service | `uswds` | Same, under the US Web Design System |
-| A Shopify admin surface or embedded app | `@shopify/polaris` (or Polaris web components) | Required for admin UI to be accepted |
-| IBM-flavoured enterprise or dense analytics | `@carbon/react` + `@carbon/styles` | Mature data-density patterns you will otherwise reinvent badly |
-| An Atlassian / Jira-adjacent product surface | `@atlaskit/*` + `@atlaskit/tokens` | Official DS; token-driven theming |
-| A GitHub-style devtool or community page | `@primer/css`, or `@primer/react-brand` for marketing | Official Primer; the Brand variant is the marketing half |
-| A Microsoft / Fluent-flavoured product | `@fluentui/react-components` | Official Fluent, Microsoft tokens, accessibility already done |
-
-## The three rules that come with them
-
-1. **Do not recreate it.** If the brief names one of these, install the package. Importing its
-   tokens and then overriding ninety percent of them is the same mistake with extra steps.
-2. **One system per project.** No Fluent components inside a Carbon tree, no shadcn/ui
-   dropped into a Material app. Mixing two systems produces a third, worse one.
-3. **Name what is an approximation.** When the brief is an *aesthetic* rather than a system —
-   glassmorphism, bento tiles, brutalism, editorial, aurora gradients, kinetic type — there is
-   no official package, and saying so is part of the work. Apple's Liquid Glass is documented
-   for Apple platforms only: there is no official web implementation, so a web version is a
-   `backdrop-filter` approximation and must be labelled as one, in the code and to the user.
-
-## What still applies
-
-Everything in `../SKILL.md` that is not styling: the brand gate, the accessibility floor,
-the Core Web Vitals budget, the 5-second value-prop test, and the tell registry in
-`../scripts/verify.sh`. An official design system settles which components you use. It does
-not settle whether the page says anything.
-
-## Where to browse for component ideas
-
-When a surface needs an idea rather than a primitive, a gallery of shipped products
-names where to go — Aceternity for marketing effects, 21st.dev for breadth, React Bits for tunable
-animation — and what each is good for. Take the technique and rebuild it in this project's tokens;
-check the brand study for what it refuses first, because a component that contradicts a stated ban
-makes the page look less designed, not more.

package/skills/design/references/inspiration-sources.md

@@ -1,96 +0,0 @@
-# Reference — where to go looking for a bar
-
-> Last verified: **2026-08-24**. Every URL below was requested on that date and answered.
-> Four sites block automated requests (403/429) but are alive in a browser — marked *(bot-blocked)*.
-> A source with no date does not exist. Re-check before quoting one as current.
-
-**Go and look.** Your built-in aesthetic prior is the median of every template ever scraped, so the
-fastest way past it is to open real work and name what it does. This file is where to open.
-
-Two rules that make the browsing worth anything:
-
-- **Come back with a specific page, not a gallery.** `../../design-loop/SKILL.md` needs a bar you can
-  open — one URL, one screenshot. "Something like Awwwards" is not a bar; a named site from it is.
-- **Extract principles, not pixels.** "Headline is 8× the body, one accent at 3% coverage" travels to
-  your project. Cloning a competitor's exact grid is theatre, and `research-method.md` says so.
-
-## A whole page to beat
-
-The default bucket. Use it when the goal is a site or landing and you need something to converge on.
-
-| Source | Go here for |
-|---|---|
-| [Awwwards](https://www.awwwards.com) | The award tier. Ambitious, often over-built — take the craft, leave the load time. |
-| [Recent](https://recent.design) | Formerly **Godly**; `godly.website` now 301s here. Curated modern web, strong signal-to-noise. |
-| [SiteInspire](https://www.siteinspire.com) *(bot-blocked)* | Long-running, filterable by style, type and subject. Calmer taste than Awwwards. |
-| [Land-book](https://land-book.com) *(bot-blocked)* | Landing pages at volume, filterable by industry and style. |
-| [Httpster](https://httpster.net) | Opinionated and current, less polished-agency than the rest. |
-| [Minimal Gallery](https://minimal.gallery) | When the brief is restraint and you need proof it can still sell. |
-| [Curated Design](https://curated.design) | Aggregated across galleries — a fast first sweep. |
-| [Nicely Done](https://nicelydone.club) | Real product sites and app UI rather than portfolios. |
-| [Lapa Ninja](https://lapa.ninja) *(bot-blocked)* | Large landing archive, free, categorised. |
-| [One Page Love](https://onepagelove.com) | Single-page sites specifically — the constraint is the point. |
-
-## SaaS and conversion surfaces
-
-| Source | Go here for |
-|---|---|
-| [SaaS Landing Page](https://saaslandingpage.com) | Real SaaS landings, browsable **by section** (hero, pricing, testimonials, footer) — the most useful axis when you are building one section at a time. |
-| [Landingfolio](https://www.landingfolio.com) | Landings and page sections, heavy on conversion patterns. |
-
-## Real product, real flows — not portfolios
-
-The most under-used bucket. Portfolio galleries show the hero; these show what happens after the click.
-
-| Source | Go here for |
-|---|---|
-| [Mobbin](https://mobbin.com) | Screens and full flows from shipped apps, mobile and web. The reference for "how does a real onboarding actually go". |
-| [Page Flows](https://pageflows.com) | Recorded user flows end to end — signup, checkout, cancellation. Video, so you see the motion too. |
-| [Screensdesign](https://screensdesign.com) | Mobile app screens with an emphasis on what is currently shipping. |
-| [Refero](https://refero.design) | UI/UX inspiration organised for browsing by pattern. |
-
-## One section, one pattern
-
-Use when the piece is small and named: `design-loop` splits a goal into three or four pieces, and
-these are for when a piece is "the footer" or "the empty state".
-
-| Source | Go here for |
-|---|---|
-| [Footer.design](https://www.footer.design) | Footers only. Narrow on purpose, and the narrowness is why it is good. |
-| [Collect UI](https://collectui.com) | Daily-UI-style collections by component and pattern. |
-| [UI Garage](https://uigarage.net) | Patterns tagged by element and by industry. |
-| [UI Movement](https://uimovement.com) | Motion and interaction specifically — pair with the frequency gate in `../../motion-craft/SKILL.md` before copying anything. |
-| [Dark.design](https://dark.design) · [Dark Mode Design](https://darkmodedesign.com) | Dark interfaces done properly, which is a different problem from inverting a light one. |
-| [Scrnshts](https://scrnshts.club) | App Store screenshot design — a real discipline of its own. |
-
-## Design systems as the canonical answer
-
-Not inspiration: **specification**. When the question is "what is the correct behaviour for this
-component", these outrank any gallery.
-
-| Source | Go here for |
-|---|---|
-| [Material 3](https://m3.material.io) | Google's system. Exhaustive on states, motion and tokens. |
-| [Apple HIG](https://developer.apple.com/design/human-interface-guidelines) | The reference for platform behaviour and for what *not* to invent on Apple platforms. |
-| [Shopify Polaris](https://polaris.shopify.com) | Dense, commerce-grade product UI with unusually good content guidance. |
-| [IBM Carbon](https://carbondesignsystem.com) | Enterprise density and data-heavy patterns. |
-| [GitHub Primer](https://primer.style) | Developer-tool UI, which is the closest analogue for most rsc projects. |
-| [The Component Gallery](https://component.gallery) *(bot-blocked)* | The same component compared **across** design systems — the fastest way to see the range of correct answers. |
-| [Adele](https://adele.uxpin.com) | Index of public design systems and their pattern libraries. |
-| [Designsystems.com](https://www.designsystems.com) | Essays on building and maintaining a system, not a system itself. |
-
-## Niche, but the right answer when it fits
-
-| Source | Go here for |
-|---|---|
-| [Interface In Game](https://interfaceingame.com) | Game UI. Useful well beyond games for diegetic and high-density HUD ideas. |
-| [Mobile.design](https://mobile.design) | Mobile-first patterns collected on their own terms. |
-
-## Housekeeping
-
-- **[Bestfolios](https://www.bestfolios.com) returned 502 on 2026-08-24** and is excluded until it
-  comes back. Do not cite it.
-- **Component ideas**, as opposed to whole pages, live in
-  Component galleries — Aceternity, 21st.dev, React Bits.
-- **Identity outranks all of this.** Check `02-DOCS/wiki/brand/` for what the project refuses before
-  bringing an idea back. A gallery cannot know what your brand vetoed.

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.