@ericrisco/rsc 1.0.24 → 1.0.25

package/manifest.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.0.24",
+  "version": "1.0.25",
   "counts": {
     "skills": 264
   },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ericrisco/rsc",
-  "version": "1.0.24",
+  "version": "1.0.25",
   "description": "Eric Risco's agent-skills catalog as a granular, self-recommending CLI installer.",
   "type": "module",
   "bin": {

package/skills/design/SKILL.md

@@ -234,6 +234,36 @@ img  { outline: 1px solid oklch(0 0 0 / 0.1); outline-offset: -1px; }
 
 Depth recipes, glass, noise, concentric math → `references/visual-system.md`.
 
+## The three locks, and who checks them
+
+A long page generated in passes drifts against itself. Three things must be **one** thing for
+the whole page, and they are not preferences — a page that breaks one of them is defective:
+
+1. **Theme lock.** One theme for the page (light, dark, or auto). No section flipping to
+   inverted halfway down because it looked good alone.
+2. **Accent lock.** One accent, used identically in every section. **This one is judgement**:
+   deciding which token is the accent needs to read the system's intent, so no script claims
+   to check it — you do, before you claim done.
+3. **Radius lock.** One radius system. Four different `rounded-*` scales in one tree means
+   there is no system, and `scripts/verify.sh` counts them.
+
+## The tells the script owns, and the ones you own
+
+`scripts/verify.sh` carries a **registry of mechanical tells** and reports each with file and
+line: dashes in rendered copy, scroll cues, numbered eyebrows, build stamps on marketing
+pages, unstable viewport heights, middot chains, hype words, plus counted ratios (eyebrows
+against sections, double-bordered rows, radius scales). Run it; do not re-derive that list
+from memory, and do not treat its silence as a design review.
+
+What it cannot see is the other half: fabricated substance (a product UI built from divs,
+invented photo credits, the Jane Doe cast), decoration posing as information, labels that say
+nothing, and composition habits like three identical feature cards. That half is
+`references/ai-tells.md`, and it is read with your eyes on the page.
+
+When the brief corresponds to an official, maintained design system rather than an aesthetic —
+UK or US public sector, Shopify admin, Carbon, Atlassian, Primer, Fluent — install the
+official package instead of approximating it: `references/design-systems.md`.
+
 ## Anti-patterns
 
 | Rationalization | Reality / Fix |
@@ -314,6 +344,6 @@ Score = Σ(dimension × weight), max 115 (normalize to /100 by ×100/115 if you
 Two records, both indexed in `02-DOCS/wiki/index.md` (the Knowledge map; root `CLAUDE.md` keeps only a short pointer to it), both read first on every use so outputs stay consistent with them:
 
 - The **brand study** at `02-DOCS/wiki/brand/` — the hard gate above: missing or incomplete → ask until complete before designing.
-- The **design-system decisions** at `02-DOCS/wiki/stack/design.md` — the chosen tokens (color/OKLCH, type scale, spacing, radius, shadow, motion), the 2026 direction picked, and the reference sites. Recorded, not gated; create/update it as decisions are made.
+- The **design-system decisions** at `02-DOCS/wiki/stack/design.md` — the chosen tokens (color/OKLCH, type scale, spacing, radius, shadow, motion), the 2026 direction picked, and the reference sites. Recorded, not gated; create/update it as decisions are made. **Read it before fixing type and palette on a new surface**, and either reuse what is there or state why you are departing — otherwise every surface of the project drifts into a different design. (Across *different* projects this record cannot help: it lives inside each one. Distrusting your own second default is the only guard there — see the repetition note in `references/ai-tells.md`.)
 
 The wiki article protocol both follow is `../harness/SKILL.md`'s.

package/skills/design/evals/cases.yaml

@@ -49,7 +49,7 @@ capability:
   - scenario: "User asks: 'Here's our current pricing page — do a design review and tell me how good it actually is.'"
     must_include:
       - "Applies the design-review QA checklist (value prop in 5s, contrast >= 4.5:1, visible focus, one <h1>, semantic landmarks, LCP image priority, next/font, no transition: all, tokens not magic numbers, ban-list-clean copy, 360px fit, empty/loading/error states)."
-      - "Scores the 10-dimension visual-audit rubric 0-10 with weights and reports a weighted total out of 100, mapped to a band (<60 generic / 60-79 competent / 80-94 premium / 95+ award-tier)."
+      - "Scores the 11-dimension visual-audit rubric 0-10 with weights and reports the weighted total on its /115 scale, mapped to a band (<69 generic / 69-91 competent / 92-108 premium / 109+ award-tier)."
       - "For each dimension scoring below 8, gives a concrete actionable fix (e.g. exact spacing/token change), not a vague 'improve spacing'."
       - "Checks copy against the ban-list and flags hype/vague value props that fail the 5s test."
       - "Flags any transition: all, magic hex/px, cards-in-cards, or purple->blue everything gradient as defects, not preferences."

package/skills/design/references/ai-tells.md

@@ -0,0 +1,75 @@
+# AI tells — the ones only a reader can catch
+
+The mechanical tells are **not here**. `scripts/verify.sh` carries a registry of them and
+flags them with file and line, so re-teaching them as prose would be paying twice for the
+same rule. This file holds only what a `grep` cannot decide: presences you have to *look* at
+the page to see.
+
+Part of this corpus is adapted from [Leonxlnx/taste-skill](https://github.com/Leonxlnx/taste-skill)
+(MIT), whose lists came out of real production tests. The split into checkable-vs-judged, the
+thresholds, and the wording are ours.
+
+Every item below is a **default**, overridable by a brief that explicitly asks for it. What
+makes them tells is that they show up *unasked*, as the model's idea of "looking designed".
+
+## Fabricated substance
+
+- **A product UI built out of divs.** A fake task list, fake terminal or fake dashboard
+  assembled from styled rectangles is the single most reliable signature of generated work.
+  Use a real screenshot, a real component, a generated image, or show nothing.
+- **Hand-rolled decorative SVG.** Abstract squiggles and blobs authored inline to fill space.
+  Icons come from a maintained set; decoration comes from a real asset or not at all.
+- **The Jane Doe cast.** "John Doe", "Sarah Chan", egg avatars, `99.99%`, `50%`, round
+  thousands, and startup-slop brand names ("Acme", "Nexus", "SmartFlow"). Real work has
+  specific, slightly awkward names and messy numbers (`47.2%`, not `50%`).
+- **Testimonials nobody said.** A quote with no attributable person, or five quotes with the
+  same cadence, reads as filler. One real quote beats three invented ones.
+
+## Decoration wearing the costume of information
+
+- **Atmospheric locale strips.** A city, a timezone, a temperature in the nav or footer. Only
+  earns its place for a genuinely distributed studio, a travel brand, or a physical venue.
+- **Status dots with no status.** A coloured dot before nav items, list rows or badges. Keep
+  it only where it reports real state, and then only once per section.
+- **Invented photo credits.** `Field study no. 12 · Ines Caetano` under a stock image.
+  Credit a real photographer or write a functional caption.
+- **Pills laid over images.** Tags floated on top of a photo. Either the image speaks alone,
+  or the caption sits below it, outside the frame.
+- **Decoration strips under the hero.** `BRAND. MOTION. SPATIAL.` in small mono caps. Only
+  legitimate when those words are real navigation or real status.
+
+## Labels that say nothing
+
+- **Poetic section labels.** "Field notes", "From the field", "On our desks", "Currently on
+  the bench". Use the functional name ("Testimonials", "Latest writing") or no label.
+- **Generic step labels.** "Stage 1 / Stage 2", "Phase 01 / 02". The step content *is* the
+  label: "Install", "Configure", "Ship".
+- **Mock-humble asides** and micro-meta sentences under a heading ("The list will stay short
+  on purpose"). Eyebrow, headline, body. Nothing else.
+- **"Quietly trusted by".** Say "Used at", "Customers include", or let the logos speak.
+
+## Composition habits
+
+- **Three identical feature cards.** The default feature row. Reach for a two-column zig-zag,
+  an asymmetric grid, or a horizontal rail instead — and do not run the same split three
+  sections in a row.
+- **The corner floater.** A giant left-aligned headline with a small explainer paragraph
+  floating in the section's top-right, aligned to nothing. Stack it, or build a real
+  two-column header.
+- **Rotated vertical text** and crosshair grid lines drawn only to look designed. Both are
+  agency-portfolio clichés unless they organise real content.
+- **A bento with empty cells.** N items means N cells, and at least two cells need real
+  visual variation — otherwise it is a white card grid with extra steps.
+
+## The second default (repetition)
+
+Obeying every rule produces correct pages that all look the same. Before fixing type and
+palette, read the project's recorded design decisions and either reuse them deliberately or
+say why you are departing. Two specific defaults to distrust: reaching for the same display
+serif again, and answering every premium-consumer brief with the beige/brass/oxblood family.
+
+## Surface treatments to distrust by default
+
+Outer glows and neon; pure `#000000` (use an off-black); oversaturated accents that refuse to
+sit with the neutrals; gradient fills on large headings; custom cursors (outdated, hostile to
+accessibility and to performance); glass on every surface rather than on floating ones.

package/skills/design/references/design-systems.md

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

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

@@ -174,6 +174,41 @@ export function Toast({ open, message }: { open: boolean; message: string }) {
 
 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.

package/skills/design/scripts/verify.sh

@@ -7,9 +7,17 @@
 #      performance + accessibility audit and checks Core Web Vitals against the
 #      skill's hard thresholds (LCP < 2.5s, CLS < 0.1, INP proxy via TBT < 200ms,
 #      a11y score >= 0.9).
-#   2. Always runs static, network-free design-review grep checks (one <h1>,
-#      no `transition: all`, hardcoded hex vs tokens, missing image alt, missing
-#      prefers-reduced-motion, marketing ban-list words).
+#   2. Always runs static, network-free design-review checks, in three groups:
+#      - four judgement-shaped ones (more than one <h1>, image without alt,
+#        hardcoded hex despite a token system, animation with no reduced-motion
+#        guard) — see static_checks();
+#      - the tell registry: one row per checkable AI tell, iterated generically
+#        (dashes in rendered copy, scroll cues, numbered eyebrows, build stamps,
+#        unstable viewport heights, middot chains, transition-all, hype words)
+#        — see tell_table(); every row has a fixture in the repo's test suite;
+#      - three counters that need a ratio rather than a match (eyebrows against
+#        sections, double-bordered rows, radius scales) — see counter_checks().
+#      Everything here WARNS. Nothing here fails, unless --strict is passed.
 #   3. If Lighthouse did not run, prints the manual QA checklist. For a graded
 #      0-10 critique, use the visual-audit rubric in SKILL.md instead.
 #
@@ -78,7 +86,10 @@ have() { command -v "$1" >/dev/null 2>&1; }
 SELF_NAME="$(basename "$0")"
 search() {
   [ "$#" -gt 0 ] || return 1
-  if have rg; then
+  # VERIFY_FORCE_GREP=1 pins the grep branch. It exists so the test suite can prove BOTH
+  # engines agree on the multibyte patterns (em-dash, middot) on any machine, instead of
+  # only exercising whichever one happens to be installed.
+  if have rg && [ -z "${VERIFY_FORCE_GREP:-}" ]; then
     # rg already ignores .gitignore'd paths (node_modules, .next, dist); also skip self.
     rg -n --no-heading --glob "!$SELF_NAME" "$@"
   else
@@ -165,6 +176,102 @@ run_lighthouse() {
   fi
 }
 
+# --- the tell registry ------------------------------------------------------
+# One row per checkable AI tell. A row is DATA, not code, so the test suite can enumerate
+# every row and demand a fixture for each: a check nobody has ever seen fire cannot ship.
+# Add a tell by adding a row plus tests/fixtures/design-tells/tells/<id>.tsx — nothing else.
+#
+# Columns, delimited by %% (the pattern column needs `|` for ERE alternation):
+#   id %% sev %% extensions %% POSIX-ERE pattern %% what to do instead / the legit exception
+#
+# Patterns are POSIX ERE: no lookahead, no \b, no \s — they must behave identically under rg
+# and under grep -E. Part of the corpus is adapted from Leonxlnx/taste-skill (MIT).
+tell_table() {
+  cat <<'TELLS'
+em-dash%%warn%%tsx,jsx,html,vue,svelte,mdx%%—|–%%em-dash or en-dash in rendered copy is the loudest AI tell. Use a period, a comma, a colon or parentheses instead
+scroll-cue%%warn%%tsx,jsx,html,vue,svelte%%[Ss]croll to (explore|walk|discover|see|begin)|↓ *[Ss]croll%%a scroll cue explains scrolling to someone already looking at the hero. Delete it, or use a real anchor link instead
+numbered-eyebrow%%warn%%tsx,jsx,html,vue,svelte%%(^|[^0-9A-Za-z])[0-9]{2,3} +(·|/) +[A-Za-z]%%numbered section eyebrow (001 · Capabilities). Name the topic in plain language instead
+version-stamp%%warn%%tsx,jsx,html,vue,svelte%%v[0-9]+\.[0-9]+\.[0-9]+|Build [0-9]{3,4}%%a build or version stamp is devtool furniture on a marketing page. Delete it. Legitimate exception: a real devtool footer, a changelog or a release page
+viewport-unit%%warn%%tsx,jsx,html,vue,svelte,css%%h-screen%%h-screen jumps when mobile browser chrome slides away. Use min-h-[100dvh] instead
+middot-chain%%warn%%tsx,jsx,html,vue,svelte%%·[^·]*·%%more than one middot on a line is decoration pretending to be metadata. Use line breaks, columns or a hairline instead
+transition-all%%warn%%tsx,jsx,css,html,vue,svelte%%transition:[[:space:]]*all|transition-all%%transition-all animates layout properties and janks. List the exact properties instead
+ban-list%%warn%%tsx,jsx,html,md,mdx%%revolutionary|game-?changer|cutting-edge|supercharge|seamless|unlock%%hype words carry no value prop. Use the concrete benefit and a real number instead
+TELLS
+}
+
+run_tell_table() {
+  local line id sev globs pat msg hits exts rest
+  # NOT `IFS='%%'`: IFS is a set of characters, so it would split on a single `%` and put an
+  # empty field between every pair. Parameter expansion splits on the two-character
+  # delimiter exactly, which is what the pattern column needs to keep its ERE `|`.
+  while IFS= read -r line; do
+    case "$line" in ''|'#'*) continue ;; esac
+    id="${line%%"%%"*}";    rest="${line#*"%%"}"
+    sev="${rest%%"%%"*}";   rest="${rest#*"%%"}"
+    globs="${rest%%"%%"*}"; rest="${rest#*"%%"}"
+    pat="${rest%%"%%"*}";   msg="${rest#*"%%"}"
+    exts="${globs//,/|}"
+    # Two post-filters, both learned from a real run over this repo:
+    #   1. keep only the extensions the row declares (anchored before the first colon, so it
+    #      behaves the same under rg and grep and never matches content that names a file);
+    #   2. drop lines whose match sits in a code comment. A dash in `/* tokens — lifted */`
+    #      is not rendered copy, and flagging it trains the reader to ignore the tool.
+    hits="$(search "$pat" 2>/dev/null \
+      | grep -E "^[^:]*\.($exts):" \
+      | grep -vE "^[^:]*:[0-9]+:[[:space:]]*(//|/\*|\*[^a-zA-Z]|#|<!--|\{/\*)" || true)"
+    if [ -n "$hits" ]; then
+      # The sev column is real, not decoration: anything other than `warn` breaks the build.
+      case "$sev" in
+        warn) warn "$id: $msg" ;;
+        *)    fail "$id: $msg" ;;
+      esac
+      printf '%s\n' "$hits" | head -n 5
+    fi
+  done <<EOF
+$(tell_table)
+EOF
+}
+
+# --- counters: the tells that are a ratio or a repetition, not a pattern -----
+# These cannot be table rows because one match proves nothing — it takes a count. Each one
+# carries its own named test instead of riding the generic row mechanism.
+counter_checks() {
+  local eyebrows sections ceiling hits variants v
+
+  # Eyebrow ceiling. Threshold ceil(sections/3) is BORROWED from taste-skill and has never
+  # been calibrated against a page of ours — the warning says so rather than implying rigour.
+  eyebrows="$(search 'uppercase[^"]*tracking|tracking[^"]*uppercase' 2>/dev/null | grep -cE '^[^:]*\.(tsx|jsx|html|vue|svelte):' || true)"
+  sections="$(search '<section' 2>/dev/null | grep -cE '^[^:]*\.(tsx|jsx|html|vue|svelte):' || true)"
+  [ -z "$eyebrows" ] && eyebrows=0
+  [ -z "$sections" ] && sections=0
+  if [ "$sections" -eq 0 ]; then
+    if [ "$eyebrows" -gt 0 ]; then
+      skip "eyebrow ceiling: no <section> found, so there is no denominator — not guessing one"
+    fi
+  else
+    ceiling=$(( (sections + 2) / 3 ))
+    if [ "$eyebrows" -gt "$ceiling" ]; then
+      warn "eyebrow count $eyebrows exceeds the ceiling $ceiling for $sections sections (uncalibrated threshold, borrowed): drop the uppercase micro-labels, or let the headline carry it instead"
+    fi
+  fi
+
+  # A hairline above AND below every row of a long list is the laziest possible layout.
+  hits="$(search 'border-t[^"]*border-b|border-b[^"]*border-t' 2>/dev/null | grep -cE '^[^:]*\.(tsx|jsx|html|vue|svelte):' || true)"
+  [ -z "$hits" ] && hits=0
+  if [ "$hits" -gt 3 ]; then
+    warn "double border on $hits list rows: pick one edge, or use spacing instead of hairlines"
+  fi
+
+  # More than two radius scales in one tree means no radius system at all.
+  variants=0
+  for v in none sm md lg xl 2xl 3xl full; do
+    if search "rounded-$v" >/dev/null 2>&1; then variants=$((variants + 1)); fi
+  done
+  if [ "$variants" -gt 2 ]; then
+    warn "$variants different radius scales in use: one radius system per project — use a --radius-* token instead"
+  fi
+}
+
 # --- static design-review checks (always run, no network) -------------------
 static_checks() {
   local hits
@@ -182,9 +289,8 @@ static_checks() {
     done < <(grep -rl --exclude-dir=node_modules --exclude-dir=.git --exclude-dir=.next '<h1' . 2>/dev/null || true)
   fi
 
-  # 2. transition: all / transition-all  ([[:space:]] is POSIX; \s is not portable in ERE)
-  hits="$(search 'transition:[[:space:]]*all|transition-all' 2>/dev/null || true)"
-  if [ -n "$hits" ]; then warn "transition: all / transition-all found:"; printf '%s\n' "$hits" | head -n 5; fi
+  # 2. (moved) `transition: all` is now a row in tell_table() — it is a plain pattern, so it
+  #    gets the generic mechanism and its fixture for free.
 
   # 3. hardcoded hex when a token system exists (\b is not portable in ERE; a
   #    3-8 char hex run after # is a sufficient heuristic without the boundary).
@@ -209,9 +315,7 @@ static_checks() {
     fi
   fi
 
-  # 6. ban-list marketing words in copy
-  hits="$(search 'revolutionary|game-?changer|cutting-edge|supercharge|seamless|unlock' 2>/dev/null | grep -iE '\.(tsx|jsx|html|md|mdx)' || true)"
-  if [ -n "$hits" ]; then warn "ban-list marketing words found in copy:"; printf '%s\n' "$hits" | head -n 5; fi
+  # 6. (moved) the marketing ban-list is now a row in tell_table(), same reason as #2.
 }
 
 # --- fallback manual checklist ----------------------------------------------
@@ -239,6 +343,8 @@ EOF
 # --- run --------------------------------------------------------------------
 run_lighthouse
 static_checks
+run_tell_table
+counter_checks
 [ "$LH_RAN" -eq 0 ] && print_checklist
 
 printf '\nok=%d skip=%d warn=%d fail=%d\n' "$ok_count" "$skip_count" "$warn_count" "$fail_count"