@ericrisco/rsc 1.0.34 → 1.1.0

package/skills/design-loop/SKILL.md

@@ -46,6 +46,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 +69,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/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)                        |
+
+---