30x-web-to-video 1.0.1

package/README.md

@@ -0,0 +1,19 @@
+# 30x-web-to-video
+
+**One URL in, an agency-grade brand launch video out.**
+
+```bash
+npx 30x-web-to-video https://your-brand.com
+```
+
+Harvests the real site (colors, fonts, copy, logo, screenshots, BGM), scaffolds a Remotion project, installs the **30x-web-to-video** Claude Code skill into your project, and hands the five-act design to Claude under a battle-tested taste codex — validated across 10 brands in one night, each producing a visually distinct world.
+
+- Asset-audit gates (file names lie; every image gets looked at)
+- Claim→World artifact selection (20+ proven visual families + rotation ledger)
+- Word-timestamp narration sync (ElevenLabs, or zero-key Kokoro fallback)
+- 7 transition families, GPU shader textures, word-timed captions
+- Evidence-frame QC: Claude renders and *looks at* every act before you do
+
+Requires node 20+ and [Claude Code](https://claude.com/claude-code). System tools (ffmpeg/yt-dlp/playwright) auto-install during harvest.
+
+MIT © Nora He

package/cli.mjs

@@ -0,0 +1,109 @@
+#!/usr/bin/env node
+/**
+ * 30x-web-to-video — one URL in, a launch video project out.
+ *
+ * Stage 1 (deterministic): harvest the brand site + scaffold a Remotion
+ *   project via the bundled orchestrator.
+ * Stage 2 (agentic taste): install the bundled skill into the project's
+ *   .claude/skills/ and hand off to Claude Code, which designs the five
+ *   acts under the battle-tested rules (10-brand validated codex).
+ */
+import { spawnSync } from "node:child_process";
+import { cpSync, existsSync, mkdirSync } from "node:fs";
+import { createRequire } from "node:module";
+import { dirname, join, resolve } from "node:path";
+import { fileURLToPath } from "node:url";
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+const require = createRequire(import.meta.url);
+
+const args = process.argv.slice(2);
+const flags = new Set(args.filter((a) => a.startsWith("--")));
+const url = args.find((a) => !a.startsWith("--"));
+
+const HELP = `
+30x-web-to-video — one URL in, an agency-grade launch video out.
+
+Usage:
+  npx 30x-web-to-video <brand-url> [--out <dir>] [--agent] [--no-harvest]
+
+Options:
+  --out <dir>    Output project directory (default: ./<brand>-launch-video)
+  --agent        After harvest, launch Claude Code on the build prompt
+                 (requires the \`claude\` CLI; agent time/tokens are yours)
+  --no-harvest   Skip harvest; only (re)install the skill + print next steps
+  -h, --help     Show this help
+
+What you get:
+  1. Brand harvest: real colors/fonts/copy/logo/screenshots/BGM from the site
+  2. A Remotion project scaffold wired with the evidence
+  3. The 30x-web-to-video skill installed into ./.claude/skills/ — Claude Code
+     picks it up automatically and designs the five acts under its taste codex
+     (asset-audit gates, Claim→World artifact selection, small-text budget,
+     transition families, word-timestamp narration sync, BGM variety mandate)
+
+Requirements: node 20+. ffmpeg/yt-dlp/playwright auto-install during harvest.
+Optional: ELEVENLABS_API_KEY in the project .env for premium narration
+(falls back to Kokoro local TTS — zero keys needed).
+`;
+
+if (!url || flags.has("--help") || flags.has("-h")) {
+  console.log(HELP.trim());
+  process.exit(url ? 0 : 1);
+}
+
+const slug = (() => {
+  try {
+    return new URL(url.startsWith("http") ? url : `https://${url}`).hostname
+      .replace(/^www\./, "")
+      .split(".")[0];
+  } catch {
+    return "brand";
+  }
+})();
+const outIdx = args.indexOf("--out");
+const outDir = resolve(outIdx > -1 && args[outIdx + 1] ? args[outIdx + 1] : `./${slug}-launch-video`);
+
+// ── 1) install the skill into the project-local .claude/skills ──────────
+const skillSrc = join(__dirname, "skill");
+const skillDst = join(process.cwd(), ".claude", "skills", "30x-web-to-video");
+mkdirSync(dirname(skillDst), { recursive: true });
+cpSync(skillSrc, skillDst, { recursive: true });
+console.log(`✔ skill installed → ${skillDst}`);
+
+// ── 2) deterministic harvest + scaffold ─────────────────────────────────
+if (!flags.has("--no-harvest")) {
+  const tsxCli = require.resolve("tsx/cli");
+  const orchestrator = join(skillSrc, "scripts", "url-to-video.ts");
+  console.log(`⛏ harvesting ${url} → ${outDir}\n`);
+  const r = spawnSync(process.execPath, [tsxCli, orchestrator, url, "--out", outDir, "--yes"], {
+    stdio: "inherit",
+  });
+  if (r.status !== 0) {
+    console.error(
+      "\n✖ harvest failed. If the site blocks scrapers (403), open Claude Code and say:\n" +
+        `  "用 30x-web-to-video skill 的 403 playbook 给 ${url} 人工采收后出片"`,
+    );
+    process.exit(r.status ?? 1);
+  }
+}
+
+// ── 3) hand off to the agent ─────────────────────────────────────────────
+const prompt = `用 30x-web-to-video skill 完成 ${outDir} 的 launch video：先读 SKILL.md 与 rules/（尤其 artifact-catalog 选型优先级、taste、typography、narration-sync），Gate 1 逐张审计素材，然后设计五幕、配音配乐、每幕渲证据帧自检，最后开 remotion studio 给我预览。`;
+
+const hasClaude = spawnSync("claude", ["--version"], { stdio: "ignore" }).status === 0;
+if (flags.has("--agent") && hasClaude) {
+  console.log("\n🤖 handing off to Claude Code…\n");
+  const a = spawnSync("claude", [prompt], { stdio: "inherit", cwd: outDir });
+  process.exit(a.status ?? 0);
+}
+
+console.log(`
+── next step ────────────────────────────────────────────────
+${hasClaude ? "Run:" : "Install Claude Code (https://claude.com/claude-code), then run:"}
+
+  cd ${outDir}
+  claude "${prompt.replace(/"/g, '\\"')}"
+
+(or re-run with --agent to launch it automatically)
+─────────────────────────────────────────────────────────────`);

package/package.json

@@ -0,0 +1,36 @@
+{
+  "name": "30x-web-to-video",
+  "version": "1.0.1",
+  "description": "One URL in, an agency-grade brand launch video out. Harvests the site, scaffolds a Remotion project, and hands Claude Code a battle-tested taste codex (10-brand validated) to design the five acts.",
+  "type": "module",
+  "license": "MIT",
+  "author": "Nora He",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/norahe0304-art/30x-video"
+  },
+  "homepage": "https://github.com/norahe0304-art/30x-video#readme",
+  "keywords": [
+    "remotion",
+    "video",
+    "claude-code",
+    "skill",
+    "marketing",
+    "launch-video",
+    "agent"
+  ],
+  "bin": {
+    "30x-web-to-video": "cli.mjs"
+  },
+  "files": [
+    "cli.mjs",
+    "skill/",
+    "README.md"
+  ],
+  "engines": {
+    "node": ">=20"
+  },
+  "dependencies": {
+    "tsx": "^4.7.0"
+  }
+}

package/skill/AGENTS.md

@@ -0,0 +1,37 @@
+# remotion-video-skill/
+> L2 | 父级: ../AGENTS.md
+
+Claude Code 原生 skill。主链保持 `SKILL.md -> rules -> scaffold -> scripts`，V2 额外加入 `benchmarks/` 作为稳定评测面。外部设计资料只允许增强判断，不允许取代真实品牌证据或现有生产经验。
+
+## 成员清单
+
+- `SKILL.md`: 主入口；定义触发条件、总流程、门禁、引用地图。
+- `README.md`: 对外安装与使用说明；解释 skill 的定位与能力边界。
+- `FUSION-REPORT.md`: 融合决策记录 — 对 hyperframes/claude-shorts/super-video-maker/video-editing-skill 各候选核心的 ADOPT/ADAPT/REJECT 判断与发布差异点；差异化说明书底稿。
+- `rules/`: 设计法则与工作流主脑；包含抓取、叙事、taste、archetype、finish gate、证据型 qc-gates。
+- `references/`: 可复制的 Remotion 模式与组件参考；只做证据库，不主导流程。
+- `remotion-best-practices/`: Bundled Remotion API knowledge；低层实现参考。
+- `scaffold/`: Ready-to-run Remotion project template；承接 scene constitution 与 generated project data，不承接风格决策。
+- `scripts/`: Music-map analyzer (analyze-audiomap.py，librosa 自装 preflight + aubiotrack 降级)、beat sync (legacy 脉冲常量)、timing audit、visual audit、benchmark suite、URL intake orchestrator、scene constitution generator、project blueprint writer。
+- `benchmarks/`: URL-to-video V2 benchmark suite；定义 canonical URL 集与评测产物契约。
+
+## 依赖关系
+
+```text
+SKILL.md -> rules/ -> scaffold/
+SKILL.md -> scripts/ -> scaffold/
+SKILL.md -> benchmarks/
+SKILL.md -> references/ + remotion-best-practices/
+rules/workflow.md -> rules/archetypes.md -> rules/taste.md + rules/finish-gate.md
+SKILL.md step 4 -> rules/composition.md -> scaffold Atmosphere.tsx + rules/qc-gates.md Gate 2
+rules/motion.md -> ~/.claude/skills/remotion-motion/ (organic AE vocabulary, 按需深读)
+SKILL.md steps 2.5/4/7.5/8 -> rules/qc-gates.md -> scripts/iterate.ts + scripts/render-qa.ts
+SKILL.md step 4 (narrated only) -> rules/narration-sync.md -> rules/qc-gates.md Gate 4
+SKILL.md step 4 (bgm) -> scripts/analyze-audiomap.py -> audiomap.json -> rules/beat-sync.md
+scripts/url-to-video.ts -> evidence-model.ts + scene-constitution.ts + project-blueprint.ts
+scripts/benchmark-suite.ts -> benchmarks/manifest.json + scripts/url-to-video.ts
+scripts/ -> scaffold/ output verification
+benchmarks/manifest.json -> orchestrator regression coverage
+```
+
+[PROTOCOL]: 变更时更新此头部，然后检查 AGENTS.md

package/skill/FUSION-REPORT.md

@@ -0,0 +1,77 @@
+<!--
+[INPUT]: 四个已克隆竞品/邻品仓库的实读 (hyperframes, claude-shorts, super-video-maker-skill, video-editing-skill) + hyperframes-caylent 实测笔记; 第二轮: hyperframes music-to-video 的 analyze-beatgrid.py + 卡点创作规则
+[OUTPUT]: 每个候选核心的 ADOPT/ADAPT/REJECT 判断与落点; 发布版三大杀手差异点 — 差异化说明书底稿
+[POS]: skill 根目录的融合决策记录; 说明 rules/qc-gates.md、rules/narration-sync.md、scripts/render-qa.ts 从哪来、为什么要、以及什么被有意拒绝
+[PROTOCOL]: 变更时更新此头部，然后检查 AGENTS.md
+-->
+
+# Fusion Report — what we took, what we refused, and why
+
+Decision record for the pre-release fusion pass (2026-07). Principle: **fusion is not accumulation.** Every candidate got a verdict; only capabilities that raise release competitiveness were wired in — into existing workflow steps, never as parallel side-pipelines.
+
+## Verdicts
+
+### From hyperframes `website-to-video` (field-tested against caylent.com, see TEST-NOTES)
+
+| Candidate | Verdict | Landing | Reason |
+|---|---|---|---|
+| Asset Audit gate (contact sheet + USE/SKIP per asset) | **ADOPT** | `rules/qc-gates.md` Gate 1 → SKILL Step 2.5 | In field test it caught real bugs: padded logo art, portrait-in-landscape-slot, mislabeled file formats. Kills "downloaded but never viewed." |
+| Per-beat evidence blocks (read the artifact, write structured evidence) | **ADAPT** | Gate 2 → SKILL Step 4, per act | Hyperframes reads beat HTML; we verify the *rendered frame* instead (`remotion still` + Read) — pixels are the artifact TypeScript can't fake. |
+| DoD + critic sub-agent | **ADAPT** | Gate 3 → SKILL Step 7.5 | We already had `iterate.ts`; the fusion move was promoting it from post-render optional to pre-render recommended path, chained after Gates 1-2. |
+| Honest disclosure ("What I did NOT verify") | **ADOPT** | Gate 4 → SKILL Step 8 delivery | In field test this section carried a real pronunciation bug ("Kalent") to the user. Cheapest trust-builder in the whole pipeline. |
+| `w2h-verify.mjs` static verify script | **REJECT** | — (codified as the "Evidence, Never Grep" rule in qc-gates.md) | Field-tested failure: its coverage checker only saw literal `duration: <number>`, flagged idiomatic `duration: BEAT`, and forced code changes purely to satisfy the checker. A check fooled by renaming a variable is not a check. |
+| Intent routing table (route "make a video" across 11 workflow skills) | **REJECT** | — (added a slim "NOT for" scope note in SKILL.md) | Routing tables pay off for a skill *family*; remotion-video is deliberately single-purpose (brand URL → launch video). A boundary note buys the discoverability without the surface area. |
+| `media-use` catalog resolver (frozen file + ledger + one-line resolve) | **REJECT** | — | Hard-depends on the HeyGen CLI + API key; our orchestrator already auto-resolves logo/screenshots/BGM, and the new `asset-audit.md` covers the review/provenance need. Field test also showed the capture side produced ~85% duplicate assets — the ledger doesn't fix that. |
+
+### From `claude-shorts`
+
+| Candidate | Verdict | Landing | Reason |
+|---|---|---|---|
+| Claude caption-cleanup layer (fix brand words + filler, timestamps untouched) | **ADOPT** | `rules/narration-sync.md` Rule 2 → SKILL Step 4 | Directly answers the field-test bug class: whisper wrote "Kalent" for "Caylent". Doubles as a pronunciation warning feeding Gate 4. |
+| `snap_boundaries.py` audio-aware boundary snapping | **ADAPT** | `rules/narration-sync.md` Rule 3 | Concept ported (sentence-end + pad, silencedetect confirmation, narration-beats-BGM priority), not the script — our cuts are frame-computed in TSX, not ffmpeg segment cuts, so a Python dependency would be dead weight. |
+
+### From `super-video-maker-skill`
+
+| Candidate | Verdict | Landing | Reason |
+|---|---|---|---|
+| Rule #14 beat-lock (all visual changes pinned to whisper word timestamps) | **ADOPT** | `rules/narration-sync.md` Rule 1 → SKILL Step 4 | The single highest-leverage rule for narrated videos: "timing estimated from the script" is how narrated cuts ship broken. Made conditional — BGM-only videos skip it. |
+| Rule #10 synthetic-presenter disclosure | **ADAPT** | `rules/qc-gates.md` Gate 4 bullet | Their rule is avatar-specific (baked-in spoken line + PiP badge). We have no avatars; the honest kernel — tell the user the voice is synthetic + provider/voice ID — became a Gate 4 disclosure item. The user decides about on-screen disclosure. |
+
+### From `video-editing-skill` (maxazure)
+
+| Candidate | Verdict | Landing | Reason |
+|---|---|---|---|
+| `render_qa.py` post-render machine QC (blackdetect / freezedetect / silencedetect / stream checks) | **ADOPT (ported)** | `scripts/render-qa.ts` → SKILL Step 8, blocking | Our biggest release gap: rendered MP4s had zero machine verification. Ported to TypeScript (matches every other script here), thresholds retuned for this skill's language (freeze ≥3s = review window, not failure — hold-then-snap is intentional; BGM silence >3s = fail — BGM is mandatory). Tested against synthetic pass/fail videos. |
+| `content_guard.py` platform lint (广告法极限词 / 引流 / 医疗词) | **REJECT** | — | Rule bank is Xiaohongshu/抖音-policy-specific; this skill delivers a brand launch MP4, not a Chinese social post package. Importing another platform's policy list is a maintenance liability with near-zero hit rate here. Revisit only if social-variant export becomes a target. |
+| Five-field narrative rewrite (hook/pain/turn/value/cta) | **REJECT** | — | Duplicate of our existing 5-act structure (`rules/narrative.md` + industry templates), and tuned for 口播 short video, not brand launch pacing. Two competing narrative skeletons in one skill = incoherence. |
+
+### From hyperframes `music-to-video` (second fusion pass, 2026-07 — music-map analysis)
+
+| Candidate | Verdict | Landing | Reason |
+|---|---|---|---|
+| `analyze-beatgrid.py` music-map analyzer (bpm/beats + energy phases/density + onsets + rolls + silences + hard stops) | **ADOPT (ported)** | `scripts/analyze-audiomap.py` → SKILL Step 4 → `rules/beat-sync.md` | Our beat-sync was aubiotrack BPM + first-beat offset — a metronome. The audiomap lets transitions breathe with energy and phrasing instead of counting beats. Ported slim: per-event drum classification / metrical grid / phrase budgets dropped (they serve hyperframes' per-frame sub-agent dispatch, dead weight for a 5-act launch video); added a `ROLL_MAX_BEATS` guard so a uniformly dense groove can't register as one track-long "roll". |
+| "One analyzer, trust it unconditionally" + rhythm-trust design law (bpm/beats_sec reliable only on genuinely rhythmic music) | **ADOPT** | `rules/beat-sync.md` Laws 1–2 | The two ideas that make the analyzer safe: no second-sourcing beats (kills drift arguments), and an explicit machine `rhythmic: true/false` verdict (beat CV ≤ 0.12 + ≥50% beat-onset support + ≥0.8 onsets/s) instead of hyperframes' per-frame LLM pacing call — this skill has no per-frame sub-agents, so the verdict must be computed, not judged. Non-rhythmic → energy-phase/silence pacing, hard cuts to the grid forbidden. |
+| beat-direction / kinetic-beat-slam creative kernels (one shared beat array drives every element; energy peaks earn the hit) | **ADAPT** | `rules/beat-sync.md` Law 3 + `references/audio.md` beats.ts note | Kernel kept: BEATS come from the audiomap verbatim (never BPM arithmetic), hold-then-snap resolves on `key_moments` SURGEs, rolls are cascade cues, `hard_stops` are the only earned smash cuts. HyperFrames/GSAP-specific mechanics (metronome chrome, GSAP ease table) not imported — Remotion springs already cover them via rules/motion.md. |
+| librosa dependency handling | **ADAPT** | self-preflight inside `analyze-audiomap.py` | Wiring librosa into url-to-video.ts TOOLCHAIN would violate the "orchestrator untouched" red line; the analyzer pip-installs its own deps (plain → `--break-system-packages` → `--user`) and degrades to aubiotrack when install fails: audiomap then carries bpm+beats only, all other fields null, `rhythmic: false` — downstream treats the grid as untrusted. Verified both paths against a 30.9s MusicGen track (librosa: 123 BPM / 59 beats / rhythmic; fallback: 125.8 BPM / 56 beats / untrusted). |
+
+## Score: 5 adopted/adapted in, 5 rejected (pass 1) · 4 adopted/adapted in (pass 2, music-map)
+
+Pass-1 surface: 2 rule files (`qc-gates.md`, `narration-sync.md`), 1 script (`render-qa.ts`), 1 workflow step (2.5), 1 step repositioned (8.5 → 7.5). Pass-2 surface: 1 script (`analyze-audiomap.py`), 1 rule file (`beat-sync.md`), wired into existing Step 4 — orchestrator (`url-to-video.ts`) untouched, `beat-sync.ts` demoted to legacy pulse carrier. Everything on the existing 8-step spine; no parallel pipelines.
+
+## Composition-debt repair (pass 3, 2026-07-03 — field failure driven)
+
+Trigger: a happy-model launch first cut was killed by the user ("写死了，每次都是那几个动态") — every act was spring logo + shimmer / hub-and-spoke pill diagram / hollow-card triptych / CountUp row, all floating dead-center on bare `#000`. Root cause was structural, not per-project: the scaffold's compositional vocabulary was too narrow (one skeleton — `padding + eyebrow + headline + centered box` — worn by every act), the root atmosphere was near-invisible (GradientMesh 0.2 + grid 0.035), and no rule governed how content OCCUPIES the frame (taste.md bans elements, nothing banned compositions).
+
+| Fix | Landing | Source |
+|---|---|---|
+| Bespoke Composition Law — 五铁律 (zero vacuum / full-bleed moment / editorial 200-320px type / real assets first / composition diversity) + compositional SLOP BLACKLIST with named replacements + thin-evidence playbook (score < 40 → grow a brand world from logo geometry, never empty cards) | **`rules/composition.md`** (new) → SKILL.md Step 4 reads it FIRST; Gate 2 evidence block gained a four-law Composition self-check line ("敢不敢把这一帧发给骂过你丑的人") | Generalized from the user-approved happy-model ART-DIRECTION v2 + the hyperframes-caylent benchmark's full-bleed/size-driven grammar |
+| `Atmosphere` primitive — composed zero-vacuum base (VolumetricLight multi-layer radial glow eating `theme.color.primary` + GridHorizon perspective wireframe floor + DriftParticles deterministic sin-hash drift + optional grain), default-on at MainVideo root replacing the anemic GradientMesh/GridOverlay pair | **`scaffold/src/components/Atmosphere.tsx`** (new), wired in `scaffold/src/MainVideo.tsx` root | ART-DIRECTION v2 铁律 1 (氛围底座), parameterized for any brand |
+| Organic motion vocabulary wiring — wiggle / inertia-overshoot / idle float / stagger-follow / loop / lookAt / exponential approach, as a when-to-use-which table with a pointer to the source skill for code + determinism rules | **`rules/motion.md`** new top section → `~/.claude/skills/remotion-motion/` | remotion-motion skill existed all along but was never wired in — idle ammunition |
+
+Discipline note: no new scripts, no new gates — the five laws ride existing Step 4 + Gate 2; scaffold verified with a clean `tsc --noEmit` after the Atmosphere wiring.
+
+## Three killer differentiators vs hyperframes (release positioning)
+
+1. **Closed-loop taste iteration, pre-render.** Hyperframes' critic sub-agent produces a report a human applies. Our Step 7.5 critic *acts*: vision-LLM scores every act → rewrites the weakest scene → `tsc --noEmit` guard with auto-rollback → re-renders stills → repeats to threshold. The first MP4 the user sees is the post-critic cut.
+2. **Machine QC on the actual output file.** Hyperframes' machine verification layer misfired in field test (animation-map broken, w2h-verify fighting idiomatic code); final-MP4 checking was manual frame reads. We ship `render-qa.ts`: black/freeze/silence/clipping/stream checks on the rendered file, blocking, with review windows a human (Claude) then Reads. Signal analysis where machines are right, eyes where they're not.
+3. **One-command zero-manual intake with evidence scoring.** Hyperframes' pipeline is capture → 7 collaborative steps across multiple skills. Our orchestrator is a single command: preflight auto-installs tools, harvests brand evidence, scores it, picks a mode, writes the scene constitution and a runnable first-cut project — then the four evidence gates (adopted from hyperframes' best idea, minus its grep trap) guard the path to render.

package/skill/README.md

@@ -0,0 +1,168 @@
+<!--
+[INPUT]: Claude Code users evaluating installation and capability fit
+[OUTPUT]: High-level skill positioning, installation flow, and capability summary
+[POS]: remotion-video-skill 的对外说明; 解释它是什么、为什么存在、以及它和普通模板型视频技能的差别
+[PROTOCOL]: 变更时更新此头部，然后检查 AGENTS.md
+-->
+
+# Remotion Video Skill
+
+> ⚠️ **DEPRECATED — Superseded by [30x-video](https://github.com/norahe0304-art/30x-video).**
+>
+> This skill is no longer actively developed. Its taste philosophy
+> (`rules/taste.md`, `rules/finish-gate.md`, `rules/archetypes.md`) and
+> engine-neutral scripts (beat-sync, scene-constitution, evidence-model,
+> visual-audit, timing-audit, critique-scenes) have been ported to
+> 30x-video, which uses **Hyperframes** (Apache 2.0, HTML+GSAP) instead
+> of Remotion as the rendering engine.
+>
+> 30x-video adds:
+> - Refero MCP integration for design-library search
+> - Auto-composed voice over (multi-provider TTS) and BGM
+> - Confirmation Gate before render (zero rework)
+> - 5-dimensional Style Composer (replaces fixed templates)
+> - 50-video real-reference library (instead of abstract rules)
+>
+> Use 30x-video for new work. This repo remains for reference.
+
+---
+
+Generate premium 40-second product launch videos with Claude Code + Remotion. Give it a brand URL, and the skill builds around real website evidence, enterprise-grade taste, and product-faithful motion instead of generic SaaS templates.
+
+## URL-to-Video V2
+
+The skill now includes a real URL intake orchestrator. Preferred flow:
+
+```bash
+node --experimental-strip-types <installed-skill-dir>/scripts/url-to-video.ts https://brand.com --out ./brand-launch-video
+```
+
+It emits a **team-editable first cut project**, not a black-box final render. Every generated project includes:
+
+- `brand-report.json`
+- `scene-constitution.json`
+- `asset-manifest.json`
+- `story.md`
+- `review.md`
+- `src/generated/project-data.ts`
+- `public/brand/beat-map.json` when BGM harvest succeeds
+
+For regression coverage across canonical brands:
+
+```bash
+node --experimental-strip-types <installed-skill-dir>/scripts/benchmark-suite.ts --match stripe-fintech --offline --reuse-brand-dir ./public/brand --install --verify --render
+```
+
+This writes per-benchmark `benchmark-result.json` files plus one suite summary.
+
+## Installation
+
+```bash
+npx skills add norahe0304-art/remotion-video-skill -g
+```
+
+Or project-level:
+
+```bash
+npx skills add norahe0304-art/remotion-video-skill
+```
+
+## Usage
+
+Just tell Claude Code:
+
+> "Make a launch video for linear.app"
+
+The skill will scrape the brand, ask for your storyline, build animated UI mockups, add BGM, and render to MP4.
+In V2, the default is stronger: it can turn one URL into a mode-aware editable first cut, choose between `product-evidence` and `editorial`, keep audio `BGM-only`, generate a beat-map when music exists, and leave the last 10-20% of polish to Claude or a human in Remotion.
+
+## What Changed
+
+- Added a **three-layer constitution**: phenomenal evidence, archetype inference, and finish-gate philosophy
+- Added **enterprise design archetypes** abstracted from high-quality design references
+- Added an **Impeccable-style finish gate** to reject monoculture defaults before render
+- Upgraded the workflow so **screenshots are mandatory** and **video is preferred**
+- Added a **URL-to-video orchestrator** that emits reports, scene constitution, and a Remotion-ready project from one URL
+- Added an **executable benchmark suite runner** for 12+ canonical URLs across product-heavy and editorial-heavy brands
+- Kept the existing `SKILL.md -> rules -> scaffold` production chain intact
+
+## What's Inside
+
+**3,200+ lines of rules** across 13 files, **4,100+ lines of bundled Remotion API reference**, **1,900+ lines of scaffold code**, and **5 reference files** with copy-paste components.
+
+### Design System (rules/)
+| File | What it covers |
+|------|---------------|
+| `layout.md` | Grid system, safe zones, nowrap rules, card padding minimums, SplitText flex-column fix |
+| `typography.md` | Font weights (max 600), size hierarchy (min 28px), text safety |
+| `color.md` | Brand polarity detection, neutral tinting, 60-30-10 rule |
+| `ui-mockups.md` | Product UI construction, density, title bars, syntax coloring |
+| `cards.md` | Staggered card grids, interior fill, animated card bodies |
+| `data-viz.md` | SVG charts, animated metrics, tabular-nums, status badges |
+
+### Motion & Production (rules/)
+| File | What it covers |
+|------|---------------|
+| `motion.md` | Spring physics, easeOutExpo, per-character stagger, timing standards |
+| `transitions.md` | TransitionSeries, light leaks, fluid backgrounds, parallax |
+| `cinematic.md` | Film grain, vignette, shimmer sweep, color grading, render settings |
+
+### Strategy & Quality (rules/)
+| File | What it covers |
+|------|---------------|
+| `taste.md` | 23-item AI slop blacklist, cognitive UX laws, self-review checklist |
+| `narrative.md` | 5-act evidence-driven structure, headline/UI rhythm, story arc |
+| `narrative-templates.md` | 7 industry templates (AI SaaS, FinTech, DevTool, E-Commerce, etc.) |
+| `workflow.md` | Brand scraping, yt-dlp video download, staticFile() enforcement, BGM sourcing, asset relevance checks |
+| `archetypes.md` | Enterprise design archetypes distilled from great product design references |
+| `finish-gate.md` | Impeccable-style finish protocol, anti-monoculture checks, render blocking criteria |
+
+### Orchestration & QA (scripts/ + benchmarks/)
+| File | What it covers |
+|------|---------------|
+| `scripts/url-to-video.ts` | One-URL intake, evidence scoring, mode selection, project generation |
+| `scripts/benchmark-suite.ts` | Batch benchmark runner with optional install, verify, and render passes |
+| `scripts/evidence-model.ts` | Evidence dimensions, report schema, manifest schema |
+| `scripts/scene-constitution.ts` | Archetype inference and 5-scene constitution generation |
+| `scripts/project-blueprint.ts` | Scaffold copying + generated output files |
+| `scripts/beat-sync.ts` | Beat-map generation for BGM-backed scene timing |
+| `benchmarks/manifest.json` | Canonical benchmark suite for regression testing |
+
+### Code Patterns (references/)
+| File | Components |
+|------|-----------|
+| `animations.md` | FadeIn, ScaleIn, SplitText, Typewriter, CountUp, AnimatedPath |
+| `components.md` | GradientMesh, GlassPanel, FilmGrain, ProductFrame, BrandIcon |
+| `audio.md` | Beat sync, voiceover ducking, audio layers |
+| `visual-effects.md` | ShimmerSweep, PulseGlow, PathDraw, ParticleField |
+| `lottie.md` | @remotion/lottie integration |
+
+### Bundled Remotion API Reference (remotion-best-practices/)
+37 Remotion-specific rule files covering videos, audio, timing, transitions, compositions, fonts, images, charts, captions, 3D, maps, and more. No external dependency needed.
+
+### Scaffold (scaffold/)
+Ready-to-run Remotion project template that acts as the first-cut receiver for `scene-constitution`, generated project data, and harvested brand evidence inside `public/brand/`.
+
+## Battle-Tested
+
+Built and validated across 8 real brand videos: Google Gemini, Linear, Mercury, Shopify, 1Password, Notion, Cursor, and Anthropic. Every rule comes from a real bug or a real design review — not theory.
+
+## License
+
+MIT
+
+## Quickstart（followers 上手）
+
+```bash
+npx skills add norahe0304-art/30x-video --skill 30x-web-to-video   # 或手动放入 .claude/skills/
+```
+
+**系统依赖**（orchestrator 会自动装，锁死环境手动装）：node 20+ / ffmpeg / yt-dlp / aubio / playwright
+
+**可选凭据（没有也能全链路跑）**：
+- `ELEVENLABS_API_KEY`（项目 .env）→ 高质量配音 + 词级时间戳；没有则自动走 Kokoro 本地 TTS（零 key，见 references/audio.md）
+- WebGL 渲染（ShaderFX）需要 `--gl=angle`，scaffold render script 已内置
+
+**用法**：对 Claude 说 "用 30x-web-to-video 给 https://你的品牌.com 做个 launch video"。管线：抓站 → 素材审计 → 选型（rules/artifact-catalog.md 优先级五条）→ VO/BGM → 五幕 → 渲帧验收 → Studio 预览 → 渲染。
+
+**质量的来源**（好好读 rules/，那是十个品牌实测淬出来的法典）：taste.md（禁令清单）、composition.md（Claim→World）、artifact-catalog.md（词汇库 + 轮换台账）、typography/layout（排版铁律）、narration-sync（旁白力学）。examples/ 有六个品牌的完整场景源码可抄结构。