From ee90f1fc7bfba006c811728756e603454a522691 Mon Sep 17 00:00:00 2001 From: Miao Yang Date: Wed, 19 Aug 2026 23:34:29 +0800 Subject: [PATCH 1/2] feat(skills): anchored-connector rule + source-traceable visuals doctrine MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Two advisory rules absorbed from a community-skill comparison study (4-cell sandbox replay vs geekjourneyx/hyperframes-motion-director; ideas only — no upstream text, the repo is AGPL-3.0): - Connector lines earn their place: any beam/rail/scan/underline must name both anchors and its job (reveal/route/validate) or be cut. Lands in motion-principles (composition) + svg-path-draw (constraints). - Visuals point back to the source: when a video derives from concrete material, each frame's key visual should trace to a specific source line — real filenames/numbers over stock props. Lands as story-spine rule 4; the four SKILL.md index lines that enumerate story-spine's rules are synced. Both are self-checks, not hard gates. lint:skills + skill-mirror green. Co-Authored-By: Claude Fable 5 --- skills-manifest.json | 10 ++--- skills/faceless-explainer/SKILL.md | 38 +++++++++---------- .../rules/svg-path-draw.md | 1 + skills/hyperframes-creative/SKILL.md | 34 ++++++++--------- .../references/motion-principles.md | 1 + .../references/story-spine.md | 8 +++- skills/pr-to-video/SKILL.md | 38 +++++++++---------- skills/product-launch-video/SKILL.md | 38 +++++++++---------- 8 files changed, 88 insertions(+), 80 deletions(-) diff --git a/skills-manifest.json b/skills-manifest.json index 39217fc336..705591d870 100644 --- a/skills-manifest.json +++ b/skills-manifest.json @@ -6,7 +6,7 @@ "files": 138 }, "faceless-explainer": { - "hash": "1eb3772e62dd71bb", + "hash": "c4a119451b8426a9", "files": 24 }, "figma": { @@ -22,7 +22,7 @@ "files": 17 }, "hyperframes-animation": { - "hash": "4418a24093c4b1c1", + "hash": "01b576293e04f72d", "files": 121 }, "hyperframes-audio": { @@ -38,7 +38,7 @@ "files": 20 }, "hyperframes-creative": { - "hash": "0068574ecd376e60", + "hash": "4cc3aabff6aa3214", "files": 78 }, "hyperframes-keyframes": { @@ -62,11 +62,11 @@ "files": 132 }, "pr-to-video": { - "hash": "01f46da1e17577ea", + "hash": "4ffa8a0b797eba29", "files": 30 }, "product-launch-video": { - "hash": "d562efe00647c14b", + "hash": "20714a2f8ab8d69b", "files": 28 }, "remotion-to-hyperframes": { diff --git a/skills/faceless-explainer/SKILL.md b/skills/faceless-explainer/SKILL.md index 3a519b3f48..41ce066cdf 100644 --- a/skills/faceless-explainer/SKILL.md +++ b/skills/faceless-explainer/SKILL.md @@ -83,7 +83,7 @@ A faceless explainer usually has **no brand colors/fonts** (`tokens.json` colors Goal: Turn the text into an approved frame-by-frame teaching plan. -Read `../hyperframes-creative/references/story-spine.md` (hook language, value-before-evidence, storyboard-as-proposal), `references/story-design.md`, `../hyperframes-animation/blueprints-index.md`, `../hyperframes-core/references/storyboard-format.md`, and `../hyperframes-core/references/script-format.md`. Use them to write `STORYBOARD.md` and, when narration is needed, `SCRIPT.md`. Set the frontmatter `duration:` from the brief's `length` — a rough expectation; assembly reports where the cut lands against it. +Read `../hyperframes-creative/references/story-spine.md` (hook language, value-before-evidence, storyboard-as-proposal, source-traceable visuals), `references/story-design.md`, `../hyperframes-animation/blueprints-index.md`, `../hyperframes-core/references/storyboard-format.md`, and `../hyperframes-core/references/script-format.md`. Use them to write `STORYBOARD.md` and, when narration is needed, `SCRIPT.md`. Set the frontmatter `duration:` from the brief's `length` — a rough expectation; assembly reports where the cut lands against it. Use `story-design.md` for the explainer structure (concept / how-to / listicle / story), hook strategy, clarity techniques, emotional beats, the type-enum mapping, and `VO_MODE`. The video's sequence comes from **narrative design, not the input text's paragraph order** — reorder, merge, omit, compress. As a **soft guide**, consult the role→blueprint menu in `../hyperframes-animation/blueprints-index.md`: for each beat, write the voiceover in the shape its candidate blueprint implies and tag that candidate `blueprint:` id when one fits. Teaching truth still decides which beats exist — never force a beat to fit a blueprint, and never invent a beat just because a proven shape is available. Faceless visuals are invented downstream, so frames do **not** carry an asset inventory: leave `asset_candidates` empty unless the user supplied a real `public/` image. Use the exact required fields from the storyboard and script references. @@ -213,21 +213,21 @@ Do not rerun `lint`, `check`, or `snapshot` after rendering unless the user asks The reusable, domain-agnostic shot shapes live in `../hyperframes-animation/blueprints/` (indexed by `../hyperframes-animation/blueprints-index.md`). -| Read | When | -| ----------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------ | -| `[../hyperframes-core/references/brief-contract.md](../hyperframes-core/references/brief-contract.md)` | Gate types, mode derivation from `BRIEF.md`, field semantics. | -| `[../hyperframes-creative/references/story-spine.md](../hyperframes-creative/references/story-spine.md)` | Step 3: story doctrine — hook language, value-before-evidence, proposal shape. | -| `[../hyperframes-creative/frame-presets/](../hyperframes-creative/frame-presets/)` | Step 2: choose and adopt a frame preset. | -| `[../hyperframes-creative/references/design-spec.md](../hyperframes-creative/references/design-spec.md)` | Step 2: apply brand tokens correctly. | -| `[references/story-design.md](references/story-design.md)` | Step 3: plan the explainer story. | -| `[../hyperframes-animation/blueprints-index.md](../hyperframes-animation/blueprints-index.md)` | Step 3: role→blueprint menu. Step 4: pick the shot shape. | -| `[../hyperframes-core/references/storyboard-format.md](../hyperframes-core/references/storyboard-format.md)` | Step 3: write `STORYBOARD.md`. | -| `[../hyperframes-core/references/script-format.md](../hyperframes-core/references/script-format.md)` | Step 3: write `SCRIPT.md`. | -| `[../media-use/audio/references/tts.md](../media-use/audio/references/tts.md)` | Step 3.1: choose or understand TTS providers and voices. | -| `[references/visual-design.md](references/visual-design.md)` | Step 4: write the frame's shot sequence (+ Layout vocabulary). | -| `[references/motion-language.md](references/motion-language.md)` | Step 4: the motion vocabulary + the motion doctrine. | -| `[references/cut-catalog.md](references/cut-catalog.md)` | Step 4-5: the cut catalog (worker builds within-frame seams). | -| `[../hyperframes-animation/rules-index.md](../hyperframes-animation/rules-index.md)` + `[../hyperframes-animation/rules/](../hyperframes-animation/rules/)` | Step 5: local rule recipe bodies for the cited motions. | -| `[../hyperframes-core/references/frame-worker-core.md](../hyperframes-core/references/frame-worker-core.md)` | Step 5: the shared worker contract (packet builder prepends it to the delta). | -| `[sub-agents/frame-worker.md](sub-agents/frame-worker.md)` | Step 5: the workflow's frame-worker delta. | -| `[../hyperframes-core/references/subagent-dispatch.md](../hyperframes-core/references/subagent-dispatch.md)` | Step 5: dispatch sub-agents safely. | +| Read | When | +| ----------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------- | +| `[../hyperframes-core/references/brief-contract.md](../hyperframes-core/references/brief-contract.md)` | Gate types, mode derivation from `BRIEF.md`, field semantics. | +| `[../hyperframes-creative/references/story-spine.md](../hyperframes-creative/references/story-spine.md)` | Step 3: story doctrine — hook language, value-before-evidence, proposal shape, source-traceable visuals. | +| `[../hyperframes-creative/frame-presets/](../hyperframes-creative/frame-presets/)` | Step 2: choose and adopt a frame preset. | +| `[../hyperframes-creative/references/design-spec.md](../hyperframes-creative/references/design-spec.md)` | Step 2: apply brand tokens correctly. | +| `[references/story-design.md](references/story-design.md)` | Step 3: plan the explainer story. | +| `[../hyperframes-animation/blueprints-index.md](../hyperframes-animation/blueprints-index.md)` | Step 3: role→blueprint menu. Step 4: pick the shot shape. | +| `[../hyperframes-core/references/storyboard-format.md](../hyperframes-core/references/storyboard-format.md)` | Step 3: write `STORYBOARD.md`. | +| `[../hyperframes-core/references/script-format.md](../hyperframes-core/references/script-format.md)` | Step 3: write `SCRIPT.md`. | +| `[../media-use/audio/references/tts.md](../media-use/audio/references/tts.md)` | Step 3.1: choose or understand TTS providers and voices. | +| `[references/visual-design.md](references/visual-design.md)` | Step 4: write the frame's shot sequence (+ Layout vocabulary). | +| `[references/motion-language.md](references/motion-language.md)` | Step 4: the motion vocabulary + the motion doctrine. | +| `[references/cut-catalog.md](references/cut-catalog.md)` | Step 4-5: the cut catalog (worker builds within-frame seams). | +| `[../hyperframes-animation/rules-index.md](../hyperframes-animation/rules-index.md)` + `[../hyperframes-animation/rules/](../hyperframes-animation/rules/)` | Step 5: local rule recipe bodies for the cited motions. | +| `[../hyperframes-core/references/frame-worker-core.md](../hyperframes-core/references/frame-worker-core.md)` | Step 5: the shared worker contract (packet builder prepends it to the delta). | +| `[sub-agents/frame-worker.md](sub-agents/frame-worker.md)` | Step 5: the workflow's frame-worker delta. | +| `[../hyperframes-core/references/subagent-dispatch.md](../hyperframes-core/references/subagent-dispatch.md)` | Step 5: dispatch sub-agents safely. | diff --git a/skills/hyperframes-animation/rules/svg-path-draw.md b/skills/hyperframes-animation/rules/svg-path-draw.md index 218fc6214b..4af953818b 100644 --- a/skills/hyperframes-animation/rules/svg-path-draw.md +++ b/skills/hyperframes-animation/rules/svg-path-draw.md @@ -115,6 +115,7 @@ Ease families are discrete choices: **stroke draws** use `power2.out` (a hand li - **Dasharray/dashoffset = the measured `getTotalLength()`**, set at setup; requires the SVG in the DOM (inline SVG is fine; a loaded `` SVG is not). - **Complex paths**: if `getTotalLength()` looks wrong, overestimate slightly (`len * 1.05`) — too large is invisible at animation start; too small clips the end. - **Stagger multi-path draws at ~70–80%** of the previous segment's duration. +- **A drawn line must land on something.** When the path is a connector (rail, beam, underline, callout) rather than a shape, both endpoints must sit on real elements and the draw must do a job — reveal, route, or validate. A stroke that only decorates empty space reads as filler; attach it or cut it. ## See also diff --git a/skills/hyperframes-creative/SKILL.md b/skills/hyperframes-creative/SKILL.md index 293067cbaf..4c41dfd7fc 100644 --- a/skills/hyperframes-creative/SKILL.md +++ b/skills/hyperframes-creative/SKILL.md @@ -29,23 +29,23 @@ For motion patterns, scene blueprints, transitions, and CSS marker effects, use ## Routing -| Topic | Read | -| ----------------------------------------------------------------------------- | ---------------------------------------------- | -| Adopt a ready-made frame-preset as `frame.md` (optional) | `frame-presets/` · `references/design-spec.md` | -| Default palettes, motion, typography, lazy defaults to question | `references/house-style.md` | -| Named style presets, mood-to-style routing | `references/visual-styles.md` | -| Palette-specific color tokens | `palettes/*.md` | -| Composition patterns — PiP, text-behind-subject, title card, slide show | `references/composition-patterns.md` | -| Stats / infographic presentation | `references/data-in-motion.md` | -| Structured expansion for open-ended prompts | `references/prompt-expansion.md` | -| Video-medium density, scale, color, frame composition | `references/video-composition.md` | -| Per-beat direction, rhythm planning, transition timing | `references/beat-direction.md` | -| Post-authoring spec verification (colors, type, corners, spacing, depth) | `references/design-adherence.md` | -| High-level motion guardrails and GSAP-quality rules | `references/motion-principles.md` | -| Font selection, pairings, rendered-video type guardrails | `references/typography.md` | -| Story doctrine — hook language, value-before-evidence, storyboard-as-proposal | `references/story-spine.md` | -| Script pacing, tone, openings, number pronunciation | `references/narration.md` | -| Precomputed audio bands mapped to motion | `references/audio-reactive.md` | +| Topic | Read | +| ------------------------------------------------------------------------------------------------------- | ---------------------------------------------- | +| Adopt a ready-made frame-preset as `frame.md` (optional) | `frame-presets/` · `references/design-spec.md` | +| Default palettes, motion, typography, lazy defaults to question | `references/house-style.md` | +| Named style presets, mood-to-style routing | `references/visual-styles.md` | +| Palette-specific color tokens | `palettes/*.md` | +| Composition patterns — PiP, text-behind-subject, title card, slide show | `references/composition-patterns.md` | +| Stats / infographic presentation | `references/data-in-motion.md` | +| Structured expansion for open-ended prompts | `references/prompt-expansion.md` | +| Video-medium density, scale, color, frame composition | `references/video-composition.md` | +| Per-beat direction, rhythm planning, transition timing | `references/beat-direction.md` | +| Post-authoring spec verification (colors, type, corners, spacing, depth) | `references/design-adherence.md` | +| High-level motion guardrails and GSAP-quality rules | `references/motion-principles.md` | +| Font selection, pairings, rendered-video type guardrails | `references/typography.md` | +| Story doctrine — hook language, value-before-evidence, storyboard-as-proposal, source-traceable visuals | `references/story-spine.md` | +| Script pacing, tone, openings, number pronunciation | `references/narration.md` | +| Precomputed audio bands mapped to motion | `references/audio-reactive.md` | ## Scripts diff --git a/skills/hyperframes-creative/references/motion-principles.md b/skills/hyperframes-creative/references/motion-principles.md index f7acae70c7..aecdb12217 100644 --- a/skills/hyperframes-creative/references/motion-principles.md +++ b/skills/hyperframes-creative/references/motion-principles.md @@ -75,6 +75,7 @@ You build for the web. Video frames are not pages. - **Anchor to edges.** Pin content to left/top or right/bottom. Centered-and-floating is a web pattern. - **Split frames.** Data panel on the left, content on the right. Top bar with metadata, full-width below. Zone-based layouts, not centered stacks. - **Use structural elements.** Rules, dividers, border panels. They create paths for the eye and animate well (scaleX from 0). +- **Connector lines earn their place.** Any beam, rail, scan line, or drawn underline must be able to name its start anchor, its end anchor (real elements, not empty space), and its job — revealing, routing, or validating something. A line the frame can lose without losing meaning is decoration: cut it. An edge-lit component (a card's top highlight, a state dot) usually reads as more designed than a free-floating arc. ## Image Motion Treatment diff --git a/skills/hyperframes-creative/references/story-spine.md b/skills/hyperframes-creative/references/story-spine.md index e6931f7603..a2a2a66edd 100644 --- a/skills/hyperframes-creative/references/story-spine.md +++ b/skills/hyperframes-creative/references/story-spine.md @@ -2,7 +2,7 @@ Applies to the narrated, story-driven creation workflows — `/product-launch-video`, `/pr-to-video`, `/faceless-explainer`, and `/general-video` when the piece tells a story. It does **not** apply to `/music-to-video` (the track drives the arc), `/motion-graphics` (no narration — motion is the message), `/embedded-captions` and `/talking-head-recut` (the footage's story is already fixed), or `/slideshow` (the presenter owns the story). Do not force these rules onto an exempt workflow. -Each workflow's own story-design reference owns its archetypes, beat sequences, and frame vocabulary. This file owns three cross-workflow rules about **order** and **justification** — the reverse iceberg: lead with why it's valuable, not with what it is or how it was made. +Each workflow's own story-design reference owns its archetypes, beat sequences, and frame vocabulary. This file owns four cross-workflow rules about **order** and **justification** — the reverse iceberg: lead with why it's valuable, not with what it is or how it was made. ## 1. The hook speaks the viewer's language @@ -35,3 +35,9 @@ When Step 3 presents the plan (a checkpoint gate — `hyperframes-core/reference - Recommendations keep their receipts (brief-contract § 3): the archetype choice, the beat count, and any beat the user might question each state their basis. The proposal shape — echo line → frame table → style / duration footer → "approve or adjust" — is the cheapest place to iterate: a frame change here costs 30 seconds; the same change after build costs minutes. + +## 4. Visuals point back to the source + +When the piece derives from concrete source material — a PR, a repo, an article, a product page — mine that material for the visual vocabulary before inventing any: its phrases, entities, verbs, and recurring motifs are the props. Each frame's key visual should be traceable to a specific line of the source, the same way its **Why** traces to the message: real filenames over generic file icons, the product's own numbers over invented ones, the article's own metaphor over a stock one. + +Self-check per visual: if the prop could appear unchanged in another product's video, it didn't come from the source. Swap it for something only this subject could produce before decorating it. diff --git a/skills/pr-to-video/SKILL.md b/skills/pr-to-video/SKILL.md index a4999132ca..4fa9719b2e 100644 --- a/skills/pr-to-video/SKILL.md +++ b/skills/pr-to-video/SKILL.md @@ -111,7 +111,7 @@ The script copies the code-editorial preset's `FRAME.md` → `frame.md`, remixes Goal: Turn the PR into an approved frame-by-frame explanation plan. -Read `../hyperframes-creative/references/story-spine.md` (hook language, value-before-evidence, storyboard-as-proposal), `references/story-design.md`, `../hyperframes-animation/blueprints-index.md`, `../hyperframes-core/references/storyboard-format.md`, and `../hyperframes-core/references/script-format.md`. Use them to write `STORYBOARD.md` and, when narration is needed, `SCRIPT.md`. Set the frontmatter `duration:` from the brief's `length` — a rough expectation; assembly reports where the cut lands against it. +Read `../hyperframes-creative/references/story-spine.md` (hook language, value-before-evidence, storyboard-as-proposal, source-traceable visuals), `references/story-design.md`, `../hyperframes-animation/blueprints-index.md`, `../hyperframes-core/references/storyboard-format.md`, and `../hyperframes-core/references/script-format.md`. Use them to write `STORYBOARD.md` and, when narration is needed, `SCRIPT.md`. Set the frontmatter `duration:` from the brief's `length` — a rough expectation; assembly reports where the cut lands against it. Use `story-design.md` for the PR archetype (changelog / feature-reveal / fix-explainer / refactor-walkthrough), the PR-native frame types, hook, persuasion, beats, the per-frame word budget, and the credits close. The sequence comes from **narrative design, not the diff's file order** — explain the change, don't read the diff aloud. As a **soft guide**, consult the role→blueprint menu in `../hyperframes-animation/blueprints-index.md`: for each beat, write the voiceover in the shape its candidate blueprint implies and tag that candidate `blueprint:` id when one fits (story truth still decides which beats exist — never force a beat to fit a shape). Feature 2–4 real diff hunks (from `capture/diff.patch`), each a small legible snippet; name the `code-*` block each wants in the frame's `scene`. Frames carry no `asset_candidates` except the `credits` close (1–6 `assets/.png` avatars). Use the exact required fields from the storyboard and script references. @@ -249,21 +249,21 @@ After the user is done reviewing (or after render when no more live edits are ex The reusable, domain-agnostic shot shapes live in `../hyperframes-animation/blueprints/` (indexed by `../hyperframes-animation/blueprints-index.md`); the `code-*` registry blocks are the code-beat vocabulary (`references/code-vocabulary.md`). -| Read | When | -| ----------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------ | -| `[../hyperframes-core/references/brief-contract.md](../hyperframes-core/references/brief-contract.md)` | Gate types, mode derivation from `BRIEF.md`, field semantics. | -| `[../hyperframes-creative/references/story-spine.md](../hyperframes-creative/references/story-spine.md)` | Step 3: story doctrine — hook language, value-before-evidence, proposal shape. | -| `[references/story-design.md](references/story-design.md)` | Step 3: plan the PR explanation. | -| `[../hyperframes-animation/blueprints-index.md](../hyperframes-animation/blueprints-index.md)` | Step 3: role→blueprint menu. Step 4: pick the shot shape. | -| `[../hyperframes-core/references/storyboard-format.md](../hyperframes-core/references/storyboard-format.md)` | Step 3: write `STORYBOARD.md`. | -| `[../hyperframes-core/references/script-format.md](../hyperframes-core/references/script-format.md)` | Step 3: write `SCRIPT.md`. | -| `[../media-use/audio/references/tts.md](../media-use/audio/references/tts.md)` | Step 3.1: choose or understand TTS providers. | -| `[references/visual-design.md](references/visual-design.md)` | Step 4: write the frame's shot sequence (+ Layout vocabulary). | -| `[references/code-vocabulary.md](references/code-vocabulary.md)` | Step 4 + 5: pick + fill the `code-*` block for a code beat. | -| `[references/motion-language.md](references/motion-language.md)` | Step 4: the motion vocabulary + the motion doctrine. | -| `[references/cut-catalog.md](references/cut-catalog.md)` | Step 4-5: the cut catalog (worker builds within-frame seams). | -| `[../hyperframes-animation/rules-index.md](../hyperframes-animation/rules-index.md)` + `[../hyperframes-animation/rules/](../hyperframes-animation/rules/)` | Step 5: local rule recipe bodies for the cited motions. | -| `[../hyperframes-core/references/frame-worker-core.md](../hyperframes-core/references/frame-worker-core.md)` | Step 5: the shared worker contract (packet builder prepends it to the delta). | -| `[sub-agents/frame-worker.md](sub-agents/frame-worker.md)` | Step 5: the workflow's frame-worker delta. | -| `[../hyperframes-core/references/subagent-dispatch.md](../hyperframes-core/references/subagent-dispatch.md)` | Step 5: dispatch sub-agents safely. | -| `[../hyperframes-creative/frame-presets/code-editorial/FRAME.md](../hyperframes-creative/frame-presets/code-editorial/FRAME.md)` | Step 2: the code-editorial preset (fixed style). | +| Read | When | +| ----------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------- | +| `[../hyperframes-core/references/brief-contract.md](../hyperframes-core/references/brief-contract.md)` | Gate types, mode derivation from `BRIEF.md`, field semantics. | +| `[../hyperframes-creative/references/story-spine.md](../hyperframes-creative/references/story-spine.md)` | Step 3: story doctrine — hook language, value-before-evidence, proposal shape, source-traceable visuals. | +| `[references/story-design.md](references/story-design.md)` | Step 3: plan the PR explanation. | +| `[../hyperframes-animation/blueprints-index.md](../hyperframes-animation/blueprints-index.md)` | Step 3: role→blueprint menu. Step 4: pick the shot shape. | +| `[../hyperframes-core/references/storyboard-format.md](../hyperframes-core/references/storyboard-format.md)` | Step 3: write `STORYBOARD.md`. | +| `[../hyperframes-core/references/script-format.md](../hyperframes-core/references/script-format.md)` | Step 3: write `SCRIPT.md`. | +| `[../media-use/audio/references/tts.md](../media-use/audio/references/tts.md)` | Step 3.1: choose or understand TTS providers. | +| `[references/visual-design.md](references/visual-design.md)` | Step 4: write the frame's shot sequence (+ Layout vocabulary). | +| `[references/code-vocabulary.md](references/code-vocabulary.md)` | Step 4 + 5: pick + fill the `code-*` block for a code beat. | +| `[references/motion-language.md](references/motion-language.md)` | Step 4: the motion vocabulary + the motion doctrine. | +| `[references/cut-catalog.md](references/cut-catalog.md)` | Step 4-5: the cut catalog (worker builds within-frame seams). | +| `[../hyperframes-animation/rules-index.md](../hyperframes-animation/rules-index.md)` + `[../hyperframes-animation/rules/](../hyperframes-animation/rules/)` | Step 5: local rule recipe bodies for the cited motions. | +| `[../hyperframes-core/references/frame-worker-core.md](../hyperframes-core/references/frame-worker-core.md)` | Step 5: the shared worker contract (packet builder prepends it to the delta). | +| `[sub-agents/frame-worker.md](sub-agents/frame-worker.md)` | Step 5: the workflow's frame-worker delta. | +| `[../hyperframes-core/references/subagent-dispatch.md](../hyperframes-core/references/subagent-dispatch.md)` | Step 5: dispatch sub-agents safely. | +| `[../hyperframes-creative/frame-presets/code-editorial/FRAME.md](../hyperframes-creative/frame-presets/code-editorial/FRAME.md)` | Step 2: the code-editorial preset (fixed style). | diff --git a/skills/product-launch-video/SKILL.md b/skills/product-launch-video/SKILL.md index 1fd786de99..6bcba25758 100644 --- a/skills/product-launch-video/SKILL.md +++ b/skills/product-launch-video/SKILL.md @@ -106,7 +106,7 @@ The script does the rest deterministically: copies the preset's `FRAME.md` → ` Goal: Turn the brief and captured material into an approved frame-by-frame story plan. -Read `../hyperframes-creative/references/story-spine.md` (hook language, value-before-evidence, storyboard-as-proposal), `references/story-design.md`, `../hyperframes-animation/blueprints-index.md`, `../hyperframes-core/references/storyboard-format.md`, and `../hyperframes-core/references/script-format.md`. Use them to write `STORYBOARD.md` and, when narration is needed, `SCRIPT.md`. Set the frontmatter `duration:` from the brief's `length` — a rough expectation; assembly reports where the cut lands against it. +Read `../hyperframes-creative/references/story-spine.md` (hook language, value-before-evidence, storyboard-as-proposal, source-traceable visuals), `references/story-design.md`, `../hyperframes-animation/blueprints-index.md`, `../hyperframes-core/references/storyboard-format.md`, and `../hyperframes-core/references/script-format.md`. Use them to write `STORYBOARD.md` and, when narration is needed, `SCRIPT.md`. Set the frontmatter `duration:` from the brief's `length` — a rough expectation; assembly reports where the cut lands against it. Use `story-design.md` for story blueprint, hook, persuasion logic, beats, `VO_MODE`, and asset choices. As a **soft guide**, consult the role→blueprint menu in `../hyperframes-animation/blueprints-index.md`: for each beat, note a candidate blueprint id when one fits. Story truth still decides which beats exist — never force a beat to fit a blueprint, and never invent a beat just because a proven shape is available. Choose each visual frame's `asset_candidates` from `capture/extracted/asset-descriptions.md` (the canonical inventory) — don't browse raw `capture/assets/`. Do not ask the user to pick assets unless that inventory is missing or unusable. Use the exact required fields from the storyboard and script references. @@ -240,21 +240,21 @@ Do not rerun `lint`, `check`, or `snapshot` after rendering unless the user asks The reusable, product-agnostic shot shapes live in `../hyperframes-animation/blueprints/` (indexed by `../hyperframes-animation/blueprints-index.md`). -| Read | When | -| ----------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------ | -| `[../hyperframes-core/references/brief-contract.md](../hyperframes-core/references/brief-contract.md)` | Gate types, mode derivation from `BRIEF.md`, field semantics. | -| `[../hyperframes-creative/references/story-spine.md](../hyperframes-creative/references/story-spine.md)` | Step 3: story doctrine — hook language, value-before-evidence, proposal shape. | -| `[../hyperframes-creative/frame-presets/](../hyperframes-creative/frame-presets/)` | Step 2: choose and adopt a frame preset. | -| `[../hyperframes-creative/references/design-spec.md](../hyperframes-creative/references/design-spec.md)` | Step 2: apply brand tokens correctly. | -| `[references/story-design.md](references/story-design.md)` | Step 3: plan the product-launch story. | -| `[../hyperframes-animation/blueprints-index.md](../hyperframes-animation/blueprints-index.md)` | Step 3: role→blueprint menu. Step 4: pick the shot shape. | -| `[../hyperframes-core/references/storyboard-format.md](../hyperframes-core/references/storyboard-format.md)` | Step 3: write `STORYBOARD.md`. | -| `[../hyperframes-core/references/script-format.md](../hyperframes-core/references/script-format.md)` | Step 3: write `SCRIPT.md`. | -| `[../media-use/audio/references/tts.md](../media-use/audio/references/tts.md)` | Step 3.1: choose or understand TTS providers and voices. | -| `[references/visual-design.md](references/visual-design.md)` | Step 4: write the frame's shot sequence (+ Layout vocabulary). | -| `[references/motion-language.md](references/motion-language.md)` | Step 4: the motion vocabulary + the motion doctrine. | -| `[references/cut-catalog.md](references/cut-catalog.md)` | Step 4-5: the cut catalog (worker builds within-frame seams). | -| `[../hyperframes-animation/rules-index.md](../hyperframes-animation/rules-index.md)` + `[../hyperframes-animation/rules/](../hyperframes-animation/rules/)` | Step 5: local rule recipe bodies for the cited motions. | -| `[../hyperframes-core/references/frame-worker-core.md](../hyperframes-core/references/frame-worker-core.md)` | Step 5: the shared worker contract (packet builder prepends it to the delta). | -| `[sub-agents/frame-worker.md](sub-agents/frame-worker.md)` | Step 5: the workflow's frame-worker delta. | -| `[../hyperframes-core/references/subagent-dispatch.md](../hyperframes-core/references/subagent-dispatch.md)` | Step 5: dispatch sub-agents safely. | +| Read | When | +| ----------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------- | +| `[../hyperframes-core/references/brief-contract.md](../hyperframes-core/references/brief-contract.md)` | Gate types, mode derivation from `BRIEF.md`, field semantics. | +| `[../hyperframes-creative/references/story-spine.md](../hyperframes-creative/references/story-spine.md)` | Step 3: story doctrine — hook language, value-before-evidence, proposal shape, source-traceable visuals. | +| `[../hyperframes-creative/frame-presets/](../hyperframes-creative/frame-presets/)` | Step 2: choose and adopt a frame preset. | +| `[../hyperframes-creative/references/design-spec.md](../hyperframes-creative/references/design-spec.md)` | Step 2: apply brand tokens correctly. | +| `[references/story-design.md](references/story-design.md)` | Step 3: plan the product-launch story. | +| `[../hyperframes-animation/blueprints-index.md](../hyperframes-animation/blueprints-index.md)` | Step 3: role→blueprint menu. Step 4: pick the shot shape. | +| `[../hyperframes-core/references/storyboard-format.md](../hyperframes-core/references/storyboard-format.md)` | Step 3: write `STORYBOARD.md`. | +| `[../hyperframes-core/references/script-format.md](../hyperframes-core/references/script-format.md)` | Step 3: write `SCRIPT.md`. | +| `[../media-use/audio/references/tts.md](../media-use/audio/references/tts.md)` | Step 3.1: choose or understand TTS providers and voices. | +| `[references/visual-design.md](references/visual-design.md)` | Step 4: write the frame's shot sequence (+ Layout vocabulary). | +| `[references/motion-language.md](references/motion-language.md)` | Step 4: the motion vocabulary + the motion doctrine. | +| `[references/cut-catalog.md](references/cut-catalog.md)` | Step 4-5: the cut catalog (worker builds within-frame seams). | +| `[../hyperframes-animation/rules-index.md](../hyperframes-animation/rules-index.md)` + `[../hyperframes-animation/rules/](../hyperframes-animation/rules/)` | Step 5: local rule recipe bodies for the cited motions. | +| `[../hyperframes-core/references/frame-worker-core.md](../hyperframes-core/references/frame-worker-core.md)` | Step 5: the shared worker contract (packet builder prepends it to the delta). | +| `[sub-agents/frame-worker.md](sub-agents/frame-worker.md)` | Step 5: the workflow's frame-worker delta. | +| `[../hyperframes-core/references/subagent-dispatch.md](../hyperframes-core/references/subagent-dispatch.md)` | Step 5: dispatch sub-agents safely. | From 44cc2ecfe68eacac6572b97e5cae7e26e7023f51 Mon Sep 17 00:00:00 2001 From: Miao Yang Date: Thu, 20 Aug 2026 13:57:57 +0800 Subject: [PATCH 2/2] fix(skills): regen stale manifest + add emphasize to connector job list MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Review 4975048154 follow-ups: - skills-manifest.json was hashed mid-commit before oxfmt renormalized the four SKILL.md tables (lefthook pre-commit runs format and skills-manifest in parallel — they raced). Regenerated at head; second regen is a no-op. - The connector rule's job list read literally would cut lines this same doctrine prescribes (dividers, hairlines, underline_sweep): emphasis was a missing job, not a forbidden one. Added 'emphasize' to both motion-principles and svg-path-draw. Co-Authored-By: Claude Fable 5 --- skills-manifest.json | 10 +++++----- skills/hyperframes-animation/rules/svg-path-draw.md | 2 +- .../references/motion-principles.md | 2 +- 3 files changed, 7 insertions(+), 7 deletions(-) diff --git a/skills-manifest.json b/skills-manifest.json index 705591d870..acf04d1a77 100644 --- a/skills-manifest.json +++ b/skills-manifest.json @@ -6,7 +6,7 @@ "files": 138 }, "faceless-explainer": { - "hash": "c4a119451b8426a9", + "hash": "912f7af169c56069", "files": 24 }, "figma": { @@ -22,7 +22,7 @@ "files": 17 }, "hyperframes-animation": { - "hash": "01b576293e04f72d", + "hash": "67d23c9507ebb1e8", "files": 121 }, "hyperframes-audio": { @@ -38,7 +38,7 @@ "files": 20 }, "hyperframes-creative": { - "hash": "4cc3aabff6aa3214", + "hash": "87bc09ec744313c8", "files": 78 }, "hyperframes-keyframes": { @@ -62,11 +62,11 @@ "files": 132 }, "pr-to-video": { - "hash": "4ffa8a0b797eba29", + "hash": "8ea0227e18ab5fc6", "files": 30 }, "product-launch-video": { - "hash": "20714a2f8ab8d69b", + "hash": "6ebeafd86880ebb7", "files": 28 }, "remotion-to-hyperframes": { diff --git a/skills/hyperframes-animation/rules/svg-path-draw.md b/skills/hyperframes-animation/rules/svg-path-draw.md index 4af953818b..6cf1199878 100644 --- a/skills/hyperframes-animation/rules/svg-path-draw.md +++ b/skills/hyperframes-animation/rules/svg-path-draw.md @@ -115,7 +115,7 @@ Ease families are discrete choices: **stroke draws** use `power2.out` (a hand li - **Dasharray/dashoffset = the measured `getTotalLength()`**, set at setup; requires the SVG in the DOM (inline SVG is fine; a loaded `` SVG is not). - **Complex paths**: if `getTotalLength()` looks wrong, overestimate slightly (`len * 1.05`) — too large is invisible at animation start; too small clips the end. - **Stagger multi-path draws at ~70–80%** of the previous segment's duration. -- **A drawn line must land on something.** When the path is a connector (rail, beam, underline, callout) rather than a shape, both endpoints must sit on real elements and the draw must do a job — reveal, route, or validate. A stroke that only decorates empty space reads as filler; attach it or cut it. +- **A drawn line must land on something.** When the path is a connector (rail, beam, underline, callout) rather than a shape, both endpoints must sit on real elements and the draw must do a job — reveal, route, validate, or emphasize. A stroke that only decorates empty space reads as filler; attach it or cut it. ## See also diff --git a/skills/hyperframes-creative/references/motion-principles.md b/skills/hyperframes-creative/references/motion-principles.md index aecdb12217..44a4604a6e 100644 --- a/skills/hyperframes-creative/references/motion-principles.md +++ b/skills/hyperframes-creative/references/motion-principles.md @@ -75,7 +75,7 @@ You build for the web. Video frames are not pages. - **Anchor to edges.** Pin content to left/top or right/bottom. Centered-and-floating is a web pattern. - **Split frames.** Data panel on the left, content on the right. Top bar with metadata, full-width below. Zone-based layouts, not centered stacks. - **Use structural elements.** Rules, dividers, border panels. They create paths for the eye and animate well (scaleX from 0). -- **Connector lines earn their place.** Any beam, rail, scan line, or drawn underline must be able to name its start anchor, its end anchor (real elements, not empty space), and its job — revealing, routing, or validating something. A line the frame can lose without losing meaning is decoration: cut it. An edge-lit component (a card's top highlight, a state dot) usually reads as more designed than a free-floating arc. +- **Connector lines earn their place.** Any beam, rail, scan line, or drawn underline must be able to name its start anchor, its end anchor (real elements, not empty space), and its job — revealing, routing, validating, or emphasizing something. A line the frame can lose without losing meaning is decoration: cut it. An edge-lit component (a card's top highlight, a state dot) usually reads as more designed than a free-floating arc. ## Image Motion Treatment