revert(skill): revert 4 hyperframes files + CLAUDE.md to main

Per review feedback, these 5 files should not change in this stack:

- visual-styles.md — keep main's existing version
- house-style.md — keep main's light/dark prescription
- references/typography.md — keep main's tone + Banned/Guardrails framing
- references/video-composition.md — keep main's density guidance
- CLAUDE.md — drop the local-CLI Capture/Snapshot section added in
  this branch; the local-CLI dev-instruction block for adding CLI
  commands stays (was already on main, unrelated to skill prose).

Net: removes ~545 lines of churn from PR #991's diff.

Author: ukimsanov

CLAUDE.md

@@ -12,29 +12,6 @@ packages/
   studio/    → Browser-based composition editor UI
 ```
 
-## Local CLI
-
-The published `npx hyperframes` is a released version and does **not** include local changes. Use the local CLI for commands where changes are in flight:
-
-```bash
-# Local CLI (use instead of `npx hyperframes` for capture and snapshot):
-npx tsx packages/cli/src/cli.ts <command>
-
-# Examples:
-npx tsx packages/cli/src/cli.ts capture <URL> -o videos/<name>/capture
-npx tsx packages/cli/src/cli.ts snapshot videos/<name> --frames <N>
-```
-
-Commands with local changes: **capture** (paginated contact sheets, fit:contain, SVG root scan), **snapshot** (3-col contact sheet). All other commands (lint, validate, preview, render) can use `npx hyperframes` as-is.
-
-For **shader transitions**, copy the local build into the video project instead of using the CDN — the local build includes CSS crossfade mixing support and other fixes not yet published:
-
-```bash
-cp packages/shader-transitions/dist/index.global.js <project-dir>/hyper-shader-local.js
-```
-
-Then reference `hyper-shader-local.js` instead of the `@hyperframes/shader-transitions` CDN URL in `index.html`.
-
 ## Development
 
 ```bash

skills/hyperframes/house-style.md

@@ -1,6 +1,6 @@
 # House Style
 
-Creative direction for compositions when no `DESIGN.md` is provided. These are starting points — override anything that doesn't serve the content. When a `DESIGN.md` exists, its brand values take precedence; house-style fills gaps.
+Creative direction for compositions when no `design.md` is provided. These are starting points — override anything that doesn't serve the content. When a `design.md` exists, its brand values take precedence; house-style fills gaps.
 
 ## Before Writing HTML
 
@@ -24,7 +24,7 @@ If the content genuinely calls for one of these — centered layout for a solemn
 
 ## Color
 
-- Match light/dark to the brand, not the category. A wellness brand might be dark if its identity is sophisticated. A fintech might be light if it's consumer-first. Check the DESIGN.md or the user's direction before defaulting.
+- Match light/dark to content: food, wellness, kids → light. Tech, cinema, finance → dark.
 - One accent hue. Same background across all scenes.
 - Tint neutrals toward your accent (even subtle warmth/coolness beats dead gray).
 - **Contrast:** enforced by `hyperframes validate` (WCAG AA). Text must be readable with decoratives removed.
@@ -44,7 +44,7 @@ Ideas (mix and match, 2-5 per scene):
 
 All decoratives should have slow ambient GSAP animation — breathing, drift, pulse. Static decoratives feel dead.
 
-**Decorative count vs motion count.** The "2-5 per scene" count refers to decorative _elements_. If a project's `DESIGN.md` says "single ambient motion per scene", it means one looping motion applied to these decoratives (a shared breath/drift/pulse) — not one element total. A scene with 4 decoratives sharing one breathing motion is correct; a scene with 1 decorative is under-dressed.
+**Decorative count vs motion count.** The "2-5 per scene" count refers to decorative _elements_. If a project's `design.md` says "single ambient motion per scene", it means one looping motion applied to these decoratives (a shared breath/drift/pulse) — not one element total. A scene with 4 decoratives sharing one breathing motion is correct; a scene with 1 decorative is under-dressed.
 
 ## Motion
 

skills/hyperframes/references/typography.md

@@ -2,38 +2,34 @@
 
 The compiler embeds supported fonts — just write `font-family` in CSS.
 
-## Banned fonts
+## Banned
 
-These are the fonts every LLM reaches for. They produce monoculture across compositions even when nothing else about the compositions is similar:
+Training-data defaults that every LLM reaches for. These produce monoculture across compositions.
 
 Inter, Roboto, Open Sans, Noto Sans, Arimo, Lato, Source Sans, PT Sans, Nunito, Poppins, Outfit, Sora, Playfair Display, Cormorant Garamond, Bodoni Moda, EB Garamond, Cinzel, Prata, Syne
 
-**Syne in particular** is the most overused "distinctive" display font. When you see it, it reads as AI-generated before anything else about the composition registers.
+**Syne in particular** is the most overused "distinctive" display font. It is an instant AI design tell.
 
-If a brand's actual identity uses one of these fonts, that's a different situation — use the brand's font. The ban applies to the default-reach, not to the cases where the font is genuinely the right choice.
+## Guardrails
 
-## Defaults to watch for
+You know these rules but you violate them. Stop.
 
-These are the patterns that produce same-looking compositions even when the brands are different:
+- **Don't pair two sans-serifs.** You do this constantly — one for headlines, one for body. Cross the boundary: serif + sans, or sans + mono.
+- **One expressive font per scene.** You pick two interesting fonts trying to make it "better." One performs, one recedes.
+- **Weight contrast must be extreme.** You default to 400 vs 700. Video needs 300 vs 900. The difference must be visible in motion at a glance.
+- **Video sizes, not web sizes.** Body: 20px minimum. Headlines: 60px+. Data labels: 16px. You will try to use 14px. Don't.
 
-- **Two sans-serifs paired together** — one for headlines, one for body. The pairing has no tension because both fonts come from the same family of forms. Cross the boundary: serif + sans, or sans + mono. The pairing should embody some contradiction in the content.
-- **Two expressive fonts in one scene** — one will perform and the other will recede no matter what you do. Pick which font is doing the work and let the other be quiet.
-- **Weight contrast at 400 vs 700** — fine for web, invisible at video distance. Video needs more dramatic contrast: 300 vs 900, or 200 vs 800. The weight difference should be readable in motion at a glance.
-- **Web type sizes** — body text at 14–16px disappears on a 1920×1080 frame. Video minimums: body 20px+, headlines 60px+, data labels 16px+. If a font-size is under 20px in a composition, there should be a specific reason.
+## What You Don't Do Without Being Told
 
-## Principles
-
-What follows isn't a checklist — these are principles for thinking about type in video specifically:
-
-- **Tension should mean something.** When two fonts are paired, the pairing should embody some contradiction the content itself contains — mechanical vs human, public vs private, institutional vs personal. If you can't articulate the tension, the pairing is arbitrary and reads as such.
-- **Register switching.** Different fonts can carry different communicative modes — one voice for statements, another for data, another for attribution. This isn't hierarchy on a page; it's voices in a conversation. Each font is saying something different _about_ the content it carries.
-- **Tension can live inside a single font.** A font that looks familiar but is secretly strange creates tension with the viewer's expectations — no second font required. Some of the strongest type-driven compositions use one font confidently.
-- **One variable changed = dramatic contrast.** Same letterforms, monospaced vs proportional. Same family at different optical sizes. Changing only rhythm while everything else stays constant produces contrast without complexity.
-- **Double personality works when fonts share attitude.** Two expressive fonts can coexist if they share an underlying attitude (both irreverent, both precise, both eccentric) even when their visible forms are completely different.
-- **Time is hierarchy.** The first element to appear is the most important. In video, sequence replaces position — what would be top-of-page on the web is first-to-enter on screen.
-- **Motion is typography.** How a word enters carries as much meaning as the font it's set in. A 0.1s slam and a 2s fade say completely different things with the same letters.
-- **Fixed reading time.** Three seconds on screen means the line has to be readable in two. That forces fewer words and larger type than web type-setting habits assume.
-- **Tracking tighter than web.** Display sizes in video want `-0.03em` to `-0.05em` of letter-spacing. Video encoding compresses fine letter detail, and tighter tracking compensates.
+- **Tension should mean something.** Don't pattern-match pairings. Ask WHY these two fonts disagree. The pairing should embody the content's contradiction — mechanical vs human, public vs private, institutional vs personal. If you can't articulate the tension, it's arbitrary.
+- **Register switching.** Assign different fonts to different communicative modes — one voice for statements, another for data, another for attribution. Not hierarchy on a page. Voices in a conversation.
+- **Tension can live inside a single font.** A font that looks familiar but is secretly strange creates tension with the viewer's expectations, not with another font.
+- **One variable changed = dramatic contrast.** Same letterforms, monospaced vs proportional. Same family at different optical sizes. Changing only rhythm while everything else stays constant.
+- **Double personality works.** Two expressive fonts can coexist if they share an attitude (both irreverent, both precise) even when their forms are completely different.
+- **Time is hierarchy.** The first element to appear is the most important. In video, sequence replaces position.
+- **Motion is typography.** How a word enters carries as much meaning as the font. A 0.1s slam vs a 2s fade — same font, completely different message.
+- **Fixed reading time.** 3 seconds on screen = must be readable in 2. Fewer words, larger type.
+- **Tracking tighter than web.** -0.03em to -0.05em on display sizes. Video encoding compresses letter detail.
 
 ## Finding Fonts
 

skills/hyperframes/references/video-composition.md

@@ -12,17 +12,15 @@ design.md defines what the brand looks like: colors, fonts, personality, constra
 
 ## Density
 
-Density depends on the beat's purpose. A dramatic single-word reveal or a keynote-style hero moment can have 1-2 elements — that's intentional. A data showcase or feature grid should have 8-10. Match the storyboard's intent, not a number target.
+A beat with 3 elements looks empty. A beat with 8-10 feels alive.
 
 Every scene needs:
 
 - **Background texture** — radial glow, oversized ghost type, color panel, grain, grid. Never solid flat color.
 - **Midground content** — the actual message. Cards, stats, code blocks, images.
 - **Foreground accents** — dividers, labels, data bars, registration marks, monospace metadata. The details that make it feel produced, not generated.
 
-Every scene should have content at all three layers — background, midground, and foreground — even a sparse beat. A 1-element hero moment isn't really 1 element if the background has a radial glow and the foreground has a corner label; it's a 1-element _focal point_ with two layers around it doing quiet work. That's different from a frame with one element and nothing else, which reads as unfinished.
-
-Total element count follows from the storyboard's density spec for that beat. The thing to check for is whether all three layers are present, not whether the count hits a target.
+Aim for 8-10 visual elements per scene. Two of those should be decorative elements the user didn't ask for — you add them because empty frames look broken.
 
 ## Color Presence