docs: lead with shape contrast for variable attributes

Follow-up on the PR #603 review. The previous fix named both attributes
but didn't make their distinct shapes / roles obvious; a reader could
still wonder "are these two views of the same data?". Now the doc
opens with the shape contrast (array of declarations vs object of
values) and the section closes with a numbered precedence layering so
the merge order is unambiguous.

- compositions.md: replaced the bullet list with a shape-first
  description ("JSON array of declarations" vs "JSON object keyed by
  variable id"), an explicit "they aren't redundant" line, and a
  numbered list of the three precedence layers (declared default →
  host data-variable-values → CLI --variables).
- skills/hyperframes-cli/SKILL.md: highlighted the same shape contrast
  inside the parametrized-renders paragraph (declarations array vs
  values object).

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
James
2026-05-04 20:26:20 +00:00
committed by James Russo
co-authored by Claude Opus 4.7
parent 22bcd7a18b
commit 21243b6957
2 changed files with 9 additions and 5 deletions
+1 -1
View File
@@ -118,7 +118,7 @@ npx hyperframes render --docker # byte-identical
**Quality guidance:** `draft` while iterating, `standard` for review, `high` for final delivery.
**Parametrized renders:** the composition declares its variables on the `<html>` root with `data-composition-variables` (id/type/label/default per entry) and reads them in any script via `window.__hyperframes.getVariables()`. The CLI `--variables '{"title":"Q4 Report"}'` overrides those declared defaults for one render missing keys fall through, so the same composition runs unchanged in dev preview and in production. (Sub-comp hosts can also override per-instance via `data-variable-values` — see the `hyperframes` skill.)
**Parametrized renders:** the composition declares its variables on the `<html>` root with **`data-composition-variables`** — a JSON **array of declarations** (`{id, type, label, default}` per entry) that defines the schema. Scripts inside read the resolved values via `window.__hyperframes.getVariables()`. The CLI **`--variables '{"title":"Q4 Report"}'`** is a JSON **object keyed by id** that overrides those declared defaults for one render; missing keys fall through, so the same composition runs unchanged in dev preview and in production. (Sub-comp hosts can also override per-instance with **`data-variable-values`** — same object shape, scoped to one mount of the sub-composition. See the `hyperframes` skill for the full pattern.)
## Transcription