docs(skills): text corrections from prompt-guide validation

Documentation-only updates surfaced by the prompt-guide validation
campaign. The behavior fixes from the same campaign are in a separate
PR (pipeline fixes); Tier 3 block bugs are tracked in #2107.

- hyperframes-core SKILL.md: new "First-pass lint gotchas" subsection —
  the root composition element must carry data-start="0"
  (root_composition_missing_data_start), and initial states belong in
  gsap.fromTo, never a CSS transform paired with a GSAP tween on the
  same property (gsap_css_transform_conflict). Both were guaranteed
  first-build lint failures for agents writing compositions cold.
- media-use SKILL.md: "Weak local-model defaults" row corrected — local
  Kokoro TTS is the free default with HeyGen as the paid upsell (was
  described backwards), and bg-removal runs via the hyperframes CLI.
- docs/concepts/compositions.mdx: document that data-composition-src
  paths resolve relative to the project root, not the referencing file.
- gsap-transforms-and-perf.md: runtime-created SVG (createElementNS)
  has no reliable center pivot — draw geometry at local (0,0) inside a
  positioning <g> so scale/rotation pivot on the shape's middle.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
Vance Ingalls
2026-07-09 22:21:10 -07:00
co-authored by Claude Fable 5
parent dda09c8d64
commit e7a6cb0da6
4 changed files with 12 additions and 2 deletions
+7
View File
@@ -49,6 +49,13 @@ The standalone root needs an explicit **sized box** (`width`/`height` in px), an
Each composition registers **exactly one** `gsap.timeline({ paused: true })` at `window.__timelines["<id>"]` (key = root `data-composition-id`), built **synchronously** at page load. Render duration = root `data-duration`, not timeline length. Don't manually nest sub-timelines into the host. Full contract (incl. non-GSAP runtimes) → `references/determinism-rules.md` + `hyperframes-animation/adapters/`.
### First-pass lint gotchas (a guaranteed first build failure)
Two rules that `lint` **does** catch, but only after the fact — write them right the first time:
- The **root** composition element must carry `data-start="0"` (alongside `data-composition-id`/`data-width`/`data-height`); omitting it fails `lint` with `root_composition_missing_data_start`.
- Never pair a CSS initial `transform` with a GSAP tween on the **same** property — the CSS value and the tween's start fight and `lint` rejects it with `gsap_css_transform_conflict`. Set the initial state inside the tween with `gsap.fromTo(el, { x: -40 }, { x: 0 })` instead of a CSS `transform: translateX(-40px)`.
### Non-negotiable rules (silent bugs `lint`/`validate`/`inspect` won't catch)
Surfaced here; full rationale in the linked reference. Do not violate: