@ericrisco/rsc 1.0.34 → 1.1.1

package/skills/design-loop/SKILL.md

@@ -34,7 +34,15 @@ website", "good SaaS design"), push once for the specific page or file: a critic
 reference invents the comparison and approves everything on round one.
 
 On *skip*, propose three candidate bars, one line each on why, and wait. No answer → take the
-hardest one and say so.
+hardest one and say so. **Where they come from:** `../design/references/starting-point.md` — run its
+step 0 first, because a bar the project already owns outranks anything you would pick from outside,
+and proposing from memory is how this promise used to resolve to the AI-template median.
+
+**Where to go looking.** For a whole page to beat, and for the flows and single patterns behind it:
+`../design/references/inspiration-sources.md`. For a component idea rather than a whole reference:
+`../pick-ui-library/references/component-galleries.md`. Browse for the technique, never to clone a
+competitor's exact grid — and come back with **a specific page you can open**, because a gallery
+is not a bar.
 
 ## Phase 2 — Preflight
 
@@ -46,6 +54,11 @@ A check, not a question. Run it before any work and report in one block.
   render for a doc.
 - **Name the generation tools the goal needs** (image, video, voice) and confirm they are connected.
 - **Confirm the input files exist**: design system, brand doc, script.
+- **Read the harness identity if it exists** — `02-DOCS/wiki/brand/`, reached from the root
+  `CLAUDE.md` `## Brand & voice` section, the same place `design`, `marketing` and
+  `presentations` read. A bar from outside cannot silently overrule the identity this project
+  already committed to: if the reference contradicts it, say which rule conflicts and let the
+  user decide which one wins. If no identity exists yet, say so — this run is what creates it.
 
 Then print what is working, what is missing, and **which critic goes blind** if something is
 missing. Never carry on quietly with a critic that cannot see — a verdict from a judge who cannot
@@ -64,7 +77,8 @@ Mechanisms, not adjectives. "Feels premium" is useless. These are useful:
 - whitespace above the fold is at least 40% of the frame
 
 Every line must be something a critic can check by looking. Show `bar.md` to the user before
-continuing.
+continuing — and where a mechanism contradicts the harness identity, mark the conflict rather
+than resolving it silently in favour of the reference.
 
 ## Phase 4 — Loop
 

package/skills/pick-ui-library/SKILL.md

@@ -27,6 +27,7 @@ A lookup skill. When invoked with a task ("I need toasts", "what should I use fo
 2. **Check what's already installed.** Look at `package.json` first. If the project already uses a listed library, use it. If it uses a competitor (e.g. react-window instead of Virtuoso), flag the recommendation but don't churn the dependency without being asked.
 3. **Recommend one library**, state what it's for in one sentence, and install/wire it up if that's part of the request. Don't present a menu of options when the list has a clear answer.
 4. If the task isn't covered by the list, say so explicitly and recommend from your own knowledge — but be clear you've left the curated list.
+5. **Need an idea rather than a library?** Go and look: `references/component-galleries.md` names where to browse for component ideas (Aceternity for marketing effects, 21st.dev for breadth, React Bits for tunable animation) and what each is good for. Take the technique, build it in the project's own tokens.
 
 ## The list
 

package/skills/pick-ui-library/references/component-galleries.md

@@ -0,0 +1,59 @@
+# Reference — where to go looking for component ideas
+
+> Last verified: **2026-08-24** — all three returned HTTP 200 on that date.
+
+**Go and look.** When you need a component idea and your own prior is the median of every AI template
+ever scraped, these are the places to browse instead of inventing from memory. Open them, see what
+exists, come back with something specific.
+
+## Where to go, and for what
+
+### [Aceternity UI](https://ui.aceternity.com/components) — effects for a surface that must stop the scroll
+
+Go here for **motion and atmosphere on a marketing surface**, not for primitives. What's there:
+
+- **Backgrounds:** Aurora, Beams, Vortex, Sparkles, gradient fields
+- **Cards:** 3D tilt, hover reveal, card stack, spotlight
+- **Text:** typewriter, flip, encrypted/scramble, generate-in, canvas text
+- **Scroll:** sticky scroll, container scroll, hero parallax
+- **Navigation:** floating navbar, floating dock, sidebar, notch, tabs
+- **Buttons:** magnetic, moving border, hover gradient
+- **Data as spectacle:** globe, timeline, world map, before/after compare
+- **Whole sections:** hero, pricing, testimonials, CTA, feature blocks
+
+Best used when you can name the feeling you want and need to see how someone already built it.
+
+### [21st.dev](https://21st.dev/community/components) — breadth, ranked by what people actually use
+
+A community registry rather than a curated library, so it's the widest net of the three. Marketing
+blocks *and* real UI — buttons, cards, forms, modals, inputs, tables — plus Shaders and ASCII art.
+Sortable by popular and newest, with view counts.
+
+Go here when you don't know what you're looking for yet and want to see the range. Read the code of
+anything you like: community means unvetted, and popularity is not review.
+
+### [React Bits](https://reactbits.dev/get-started/index) — animated interactions, deeply customizable
+
+~46k stars. Animations, 3D, CSS effects, built to be tuned rather than dropped in.
+
+Go here when Aceternity's version of an effect is close but you need to control it.
+
+## Two things to carry with you
+
+**Ideas travel; code stays there.** Take the technique, the ratio, the interaction — then build it in
+the project's own tokens. Never vendor a gallery's source into this catalog: rsc ships publicly (P9),
+and React Bits' licence (MIT + Commons Clause) forbids redistributing its components outright. In the
+user's own project, installing any of the three is fine.
+
+**Identity outranks the gallery.** Check `02-DOCS/wiki/brand/` for what this project refuses before
+pulling an idea. A lot of what these galleries do best — aurora and gradient-mesh backgrounds,
+glassmorphism, neon, blobs, decorative 3D — is also on the AI-tell list in
+`../../design/references/ai-tells.md`, and some brand studies veto it by name. And run the frequency gate
+from `../../animate/SKILL.md`: a spotlight card earns its place on a hero someone sees once, and never on
+a table they open forty times a day.
+
+## Not a substitute for the primitives
+
+A dialog still comes from `base-ui`, a toast from Sonner, a command palette from cmdk. Focus trapping,
+dismissal and accessibility are solved; an animated card does not replace a solved primitive. Use
+`SKILL.md`'s list for the task, and this file for the look.

package/skills/review-animations/SKILL.md

@@ -135,3 +135,54 @@ Adapted for the rsc catalog from **[emilkowalski/skills](https://github.com/emil
 [Sonner](https://sonner.emilkowal.ski), [Vaul](https://vaul.emilkowal.ski) and
 [animations.dev](https://animations.dev). The craft bar here is his; the routing, gates and evals
 that make it an rsc skill are not. Nothing in this body is a substitute for his course.
+---
+
+# Craft reference, inherited from the umbrella
+
+*Moved here from `design-eng` (spec: `design-area-cleanup`), which routes and no longer teaches.
+This is the same material by the same author; where it overlaps a rule stated above, the above is
+the summary and this is the reasoning.*
+
+## Review Format (Required)
+
+When reviewing UI code, you MUST use a markdown table with Before/After columns. Do NOT use a list with "Before:" and "After:" on separate lines. Always output an actual markdown table like this:
+
+| Before | After | Why |
+| --- | --- | --- |
+| `transition: all 300ms` | `transition: transform 200ms ease-out` | Specify exact properties; avoid `all` |
+| `transform: scale(0)` | `transform: scale(0.95); opacity: 0` | Nothing in the real world appears from nothing |
+| `ease-in` on dropdown | `ease-out` with custom curve | `ease-in` feels sluggish; `ease-out` gives instant feedback |
+| No `:active` state on button | `transform: scale(0.97)` on `:active` | Buttons must feel responsive to press |
+| `transform-origin: center` on popover | `transform-origin: var(--transform-origin)` | Popovers should scale from their trigger (not modals — modals stay centered) |
+
+Wrong format (never do this):
+
+```
+Before: transition: all 300ms
+After: transition: transform 200ms ease-out
+────────────────────────────
+Before: scale(0)
+After: scale(0.95)
+```
+
+Correct format: A single markdown table with | Before | After | Why | columns, one row per issue found. The "Why" column briefly explains the reasoning.
+
+## Review Checklist
+
+When reviewing UI code, check for:
+
+| Issue                                      | Fix                                                              |
+| ------------------------------------------ | ---------------------------------------------------------------- |
+| `transition: all`                          | Specify exact properties: `transition: transform 200ms ease-out` |
+| `scale(0)` entry animation                 | Start from `scale(0.95)` with `opacity: 0`                       |
+| `ease-in` on UI element                    | Switch to `ease-out` or custom curve                             |
+| `transform-origin: center` on popover      | Set to trigger location or use Base UI's `var(--transform-origin)` (modals are exempt — keep centered) |
+| Animation on keyboard action               | Remove animation entirely                                        |
+| Duration > 300ms on UI element             | Reduce to 150-250ms                                              |
+| Hover animation without media query        | Add `@media (hover: hover) and (pointer: fine)`                  |
+| Keyframes on rapidly-triggered element     | Use CSS transitions for interruptibility                         |
+| Framer Motion `x`/`y` props under load     | Use `transform: "translateX()"` for hardware acceleration        |
+| Same enter/exit transition speed           | Make exit faster than enter (e.g., enter 2s, exit 200ms)         |
+| Elements all appear at once                | Add stagger delay (30-80ms between items)                        |
+
+---