Skip to content

feat(skills): anchored-connector rule + source-traceable visuals doctrine #3354

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
WaterrrForever wants to merge 1 commit into
base: main
Choose a base branch
from
Open

feat(skills): anchored-connector rule + source-traceable visuals doctrine #3354

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 5 additions & 5 deletions skills-manifest.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
"files": 138
},
"faceless-explainer": {
"hash": "1eb3772e62dd71bb",
"hash": "c4a119451b8426a9",
"files": 24
},
"figma": {
Expand All @@ -22,7 +22,7 @@
"files": 17
},
"hyperframes-animation": {
"hash": "4418a24093c4b1c1",
"hash": "01b576293e04f72d",
"files": 121
},
"hyperframes-audio": {
Expand All @@ -38,7 +38,7 @@
"files": 20
},
"hyperframes-creative": {
"hash": "0068574ecd376e60",
"hash": "4cc3aabff6aa3214",
"files": 78
},
"hyperframes-keyframes": {
Expand All @@ -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": {
Expand Down
38 changes: 19 additions & 19 deletions skills/faceless-explainer/SKILL.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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/<basename>` image. Use the exact required fields from the storyboard and script references.

Expand Down Expand Up @@ -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. |
1 change: 1 addition & 0 deletions skills/hyperframes-animation/rules/svg-path-draw.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 `<image>` 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

Expand Down
34 changes: 17 additions & 17 deletions skills/hyperframes-creative/SKILL.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down
1 change: 1 addition & 0 deletions skills/hyperframes-creative/references/motion-principles.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down
Loading
Loading