feat(skills): hyperframes-registry skill (#261)

## What

New skill `hyperframes-registry` that teaches AI coding agents how to install and wire registry blocks and components into HyperFrames compositions.

### Skill structure
```
skills/hyperframes-registry/
  SKILL.md                          — triggers, overview, quick reference
  references/
    install-locations.md            — default paths, hyperframes.json config
    wiring-blocks.md                — iframe inclusion, data attributes, positioning
    wiring-components.md            — snippet merging (HTML, CSS, JS, timeline)
    discovery.md                    — manifest reading, item fields, available items table
    demo-html-pattern.md            — why components ship demo.html, structure conventions
  examples/
    add-block.md                    — worked example: data-chart block install + wiring
    add-component.md                — worked example: shimmer-sweep component install + wiring
```

## Why

Phase B of the catalog plan (PR 10). Without this skill, agents using `hyperframes add` have to guess how to wire installed items into compositions. The skill encodes the iframe/snippet patterns so agents get it right on the first attempt.

## How

- SKILL.md frontmatter triggers on: `hyperframes add`, "block", "component", `hyperframes.json`
- References cover every step: discovery, install, wiring blocks (iframe), wiring components (snippet merge), and the demo.html convention
- Two worked examples walk through complete install-to-preview workflows
- Updated CLAUDE.md skills table + trigger rules, README.md skills table, docs/packages/cli.mdx

## Test plan

- [x] `scripts/lint-skills.ts` passes (checked 4 skill files, no issues)
- [x] `oxfmt --check` passes on all markdown files
- [x] SKILL.md frontmatter has valid `name` and `description`
- [x] All reference links in SKILL.md resolve to existing files
- [x] CLAUDE.md, README.md, and docs CLI page updated with new skill

packages/cli/src/commands/add.test.ts

@@ -139,9 +139,9 @@ describe("add command pure helpers", () => {
   });
 
   describe("buildSnippet", () => {
-    it("wraps blocks in an iframe with start/duration", () => {
+    it("wraps blocks in a div with data-composition-src and duration", () => {
       const snip = buildSnippet(BLOCK_ITEM, "src/scenes/my-block.html");
-      expect(snip).toContain('src="src/scenes/my-block.html"');
+      expect(snip).toContain('data-composition-src="src/scenes/my-block.html"');
       expect(snip).toContain('data-duration="6"');
     });
 

packages/cli/src/commands/add.ts

@@ -55,7 +55,11 @@ export function remapTarget(
 export function buildSnippet(item: RegistryItem, relativeTarget: string): string {
   if (item.type === "hyperframes:block") {
     // data-start omitted — adjust to your timeline position after pasting.
-    return `<iframe src="${relativeTarget}" data-duration="${item.duration}"></iframe>`;
+    const dims =
+      "dimensions" in item && item.dimensions
+        ? ` data-width="${item.dimensions.width}" data-height="${item.dimensions.height}"`
+        : "";
+    return `<div data-composition-src="${relativeTarget}" data-duration="${item.duration}"${dims}></div>`;
   }
   if (item.type === "hyperframes:component") {
     return `<!-- paste from ${relativeTarget} into your composition -->`;