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>

Author: vanceingalls

docs/concepts/compositions.mdx

@@ -37,6 +37,8 @@ You can embed one composition inside another in two ways: loading from an extern
   <Tab title="External file">
     Reference another HTML file with `data-composition-src`. The framework automatically fetches the file, extracts the `<template>` content, mounts it, executes scripts, and registers the timeline.
 
+    `data-composition-src` paths resolve relative to the **project root**, not the referencing file — a nested composition one level deep still writes `compositions/foo.html`, never `../compositions/foo.html`.
+
     ```html index.html
     <div
       id="el-5"

skills-manifest.json

@@ -22,15 +22,15 @@
       "files": 1
     },
     "hyperframes-animation": {
-      "hash": "373da1c37ee2bd36",
+      "hash": "82d8af98d9af2b9e",
       "files": 116
     },
     "hyperframes-cli": {
       "hash": "8ca3bef87f169ba1",
       "files": 7
     },
     "hyperframes-core": {
-      "hash": "511a6283a5dbd7ea",
+      "hash": "73e6f4cad4701e6d",
       "files": 14
     },
     "hyperframes-creative": {

skills/hyperframes-animation/adapters/gsap-transforms-and-perf.md

@@ -54,6 +54,7 @@ Animate any custom property. Works for color, length, number — anything CSS wi
 
 - `svgOrigin` sets transform origin in the SVG's global coordinate space (not the element's local box). **Do not** combine `svgOrigin` with `transformOrigin` on the same element — pick one.
 - Animate SVG transform attributes via the same alias names (`x`, `y`, `rotation`) — GSAP handles the SVG-specific quirks.
+- **Runtime-created SVG (`createElementNS`) has no reliable center pivot.** GSAP can't resolve `transformOrigin`/`svgOrigin` to the geometric center of an element built at runtime, so `scale`/`rotation` pivot on the SVG's `(0,0)` origin instead of the shape's middle. Fix: draw the animated geometry centered at local `(0,0)` and place it with a wrapping `<g transform="translate(x,y)">` — the group positions it, the tween scales/rotates it about its own center.
 
 ## Performance Rules
 

skills/hyperframes-core/SKILL.md

@@ -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: