docs: clarify declaration vs override attributes (PR #603 review)

James pointed out (compositions.md:33, SKILL.md:121) that the prose
referenced `data-variable-values` while the example below showed
`data-composition-variables`, leaving readers to wonder if the two
names referred to the same thing. They don't: one declares, the other
overrides per-instance. Both are now named at first mention and the
declare-vs-override split is called out explicitly.

- packages/cli/src/docs/compositions.md: replaced the single intro
  sentence with a two-bullet list ("data-composition-variables
  declares, data-variable-values overrides per-instance") and a
  follow-up explaining where the CLI fits in.
- skills/hyperframes-cli/SKILL.md: rewrote the parametrized-renders
  paragraph so declaration (data-composition-variables) and override
  (--variables) are distinct sentences, with the per-instance attribute
  parenthetical for completeness.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
James
2026-05-04 20:25:42 +00:00
committed by James Russo
co-authored by Claude Opus 4.7
parent 211a9214d0
commit 22bcd7a18b
2 changed files with 7 additions and 2 deletions
+6 -1
View File
@@ -26,7 +26,12 @@ Use `npx hyperframes compositions` to see all compositions in a project.
## Variables
Declare variables on the composition's `<html>` root, then read them inside any composition script with `window.__hyperframes.getVariables()`. Override per-instance via `data-variable-values` on the host element, or at render time via `npx hyperframes render --variables '{...}'`.
Two attributes work together:
- **`data-composition-variables`** on the `<html>` root *declares* the variables (id, type, label, default).
- **`data-variable-values`** on a sub-comp host element *overrides* values for that one instance.
Inside any composition script, `window.__hyperframes.getVariables()` returns the merged result of declarations + overrides. CLI `npx hyperframes render --variables '{...}'` provides a top-level override that layers the same way.
```html
<!-- compositions/card.html -->