{
  "format": "driftproof-answers/2",
  "receipt_hash": "ff6bb0a23b2b250c71181de274ba684ac5706558cd3214e08acc637823290029",
  "model_id": "claude-sonnet-5-5",
  "answers": {
    "4c35d6d58e3b26cf72b37a61ddaff33fa7afda5b3abef9d1a6417632bea8a791": "```html\n<div\n  data-composition-id=\"data-chart\"\n  data-composition-src=\"compositions/data-chart.html\"\n  data-start=\"2\"\n  data-duration=\"15\"\n  data-track-index=\"1\"\n  data-width=\"1920\"\n  data-height=\"1080\"\n></div>\n```\n\nNotes:\n- `data-composition-id` matches the block's internal ID (`data-chart`).\n- `data-composition-src` uses the default block install location (`compositions/<name>.html`); adjust it if `hyperframes.json` overrides `paths.blocks`.\n- `data-start=\"2\"` places the block at host time 2 seconds, and `data-duration=\"15\"` runs it for its full 15 seconds.\n- `data-track-index=\"1\"` is display-only (Studio timeline row); use CSS `z-index` if you need layering.",
    "1d9e47115c3a3f94666713138e97ee0e5ff30ce2eb33699d6ef3be8e4688b6a3": "```html\n<div\n  data-composition-id=\"data-chart\"\n  data-composition-src=\"compositions/data-chart.html\"\n  data-start=\"2\"\n  data-duration=\"15\"\n  data-track-index=\"1\"\n  data-width=\"1920\"\n  data-height=\"1080\"\n></div>\n```\n\nNotes:\n- `data-composition-id` matches the block's internal ID (`data-chart`).\n- `data-composition-src` uses the default block install location, `compositions/<name>.html`. Adjust it if `hyperframes.json` points `paths.blocks` elsewhere.\n- `data-track-index=\"1\"` is a display-only timeline row; use CSS `z-index` if you need layering.",
    "cbf43507e9553a9f855889735d763f0efac6f7386833ed3ee64522f542a47e8d": "```html\n<div\n  data-composition-id=\"data-chart\"\n  data-composition-src=\"compositions/data-chart.html\"\n  data-start=\"2\"\n  data-duration=\"15\"\n  data-track-index=\"1\"\n  data-width=\"1920\"\n  data-height=\"1080\"\n></div>\n```\n\nNotes:\n- `data-composition-id` matches the block's internal ID (`data-chart`).\n- `data-composition-src` uses the default block install location, `compositions/<name>.html`. Adjust it if `hyperframes.json` overrides `paths.blocks`.\n- `data-start=\"2\"` places the block at host time 2 seconds, and `data-duration=\"15\"` lets it play its full length.\n- `data-track-index` only controls the Studio timeline row. Use CSS `z-index` if you need layering.",
    "3bad4908452f8f5eb6cc21216c4114e5b7d842af2b16741d78462afd589fd69f": "```html\n<div\n  data-composition-id=\"data-chart\"\n  data-start=\"2\"\n  data-duration=\"15\"\n  data-width=\"1920\"\n  data-height=\"1080\"\n></div>\n```\n\n- `data-composition-id=\"data-chart\"` is the internal composition id.\n- `data-start=\"2\"` makes the block begin at host time 2 s, so it runs from 2 s to 17 s on the host timeline.\n- `data-duration=\"15\"` sets the 15 s length.\n- `data-width=\"1920\"` and `data-height=\"1080\"` set the 1920×1080 size.\n\nYou didn't name the framework, so I used HyperFrames-style `data-*` attribute names. If yours differ, such as a `data-composition-src` for the external file, the values stay the same and only the attribute names change.",
    "234e057d3d4611eb05683fa8edee5a583b2b9ce8cc9bc5e26c28ee4e633987d1": "```html\n<div\n  data-composition-id=\"data-chart\"\n  data-start=\"2\"\n  data-duration=\"15\"\n  data-width=\"1920\"\n  data-height=\"1080\"\n></div>\n```\n\n- **`data-composition-id=\"data-chart\"`** is the internal composition id.\n- **`data-start=\"2\"`** starts the block at host time 2 seconds.\n- **`data-duration=\"15\"`** makes it run for 15 seconds, so it ends at host time 17.\n- **`data-width=\"1920\"` and `data-height=\"1080\"`** set the 1920×1080 size.\n\nYou didn't name the framework, so the attribute names are my assumption, based on the HyperFrames-style convention. If your host uses a different schema, such as a `data-composition-src` path to load the block from a file, the attribute names or the extra source attribute may need to change.",
    "019ab77a70626f51211957bf2060d93b7ef697e047026811616b6b7f365efefb": "```html\n<div\n  data-composition-id=\"data-chart\"\n  data-start=\"2\"\n  data-duration=\"15\"\n  data-width=\"1920\"\n  data-height=\"1080\"\n></div>\n```\n\nThe attribute names (`data-composition-id`, `data-start`, `data-duration`, `data-width`, `data-height`) follow the HyperFrames-style convention, which I'm assuming is the format you mean. You didn't give the schema, so check them against your framework's docs. If the composition is loaded from a separate file, you'd also need a source attribute such as `data-composition-src=\"...\"`, but I haven't added one because no path was supplied.\n\nThe values come from your facts: ID `data-chart`, 1920×1080, 15 seconds long, starting at host time 2. That means it plays from 2s to 17s on the host timeline.",
    "9ab70ffe9d48967213560f02603f44c8f458317fca66c46cd955d3b612b202cc": "A grain overlay is a **component**, so you merge it into your existing composition rather than including it as a separate file. A **block** is the opposite: a standalone sub-composition you reference.\n\n## Integrating the grain overlay (component)\n\nAfter `hyperframes add grain-overlay`, the file lives at `compositions/components/grain-overlay.html` (by default, configurable via `paths.components` in `hyperframes.json`). It has no dimensions or timeline of its own, so you paste its pieces into the host:\n\n1. **Read** `compositions/components/grain-overlay.html`.\n2. **HTML:** copy the overlay elements into your composition's `<div data-composition-id=\"...\">`.\n3. **CSS:** copy its `<style>` block into your composition's styles.\n4. **JS:** if it has a `<script>`, copy the contents into your composition's script, *before* your timeline code.\n5. **Timeline:** if the snippet's comment block exposes GSAP timeline integration, add those calls to your own timeline.\n\nBecause it is merged into the host, it shares the host's dimensions, timeline, and composition ID. For layering, use CSS `z-index` (e.g., to keep the grain above your content).\n\n## How that differs from a standalone block\n\n| | Component (grain overlay) | Block |\n|---|---|---|\n| Nature | Effect snippet, no own dimensions or duration | Standalone sub-composition with own dimensions, duration, timeline |\n| Install path | `compositions/components/<name>.html` | `compositions/<name>.html` |\n| Wiring | Copy HTML/CSS/JS into the host | Reference from `index.html` via `data-composition-src` |\n| Attributes | None needed; it lives inside your composition | Needs `data-composition-id` (matching the block's internal ID), `data-start`, `data-duration`, `data-width`/`data-height`, `data-track-index` |\n| Layering | CSS `z-index` within the host | CSS `z-index`; `data-track-index` is display-only (Studio timeline row) |\n\nFor a block you would instead add something like:\n\n```html\n<div\n  data-composition-id=\"data-chart\"\n  data-composition-src=\"compositions/data-chart.html\"\n  data-start=\"2\"\n  data-duration=\"15\"\n  data-track-index=\"1\"\n  data-width=\"1920\"\n  data-height=\"1080\"\n></div>\n```\n\nIn short, the grain overlay becomes part of your composition's own markup, styles, and script, while a block stays a separate file that you place on the host timeline with timing and size attributes.",
    "790b997cebf201eafd389054b44a42157b00a0be83f996f20fdd3ebe5cef01e6": "# Integrating a grain overlay component vs. a standalone block\n\n## Component (grain-overlay): merge it into your composition\n\nA component has no dimensions or timeline of its own, so you paste its pieces into the host composition rather than referencing the file. It installs by default to `compositions/components/grain-overlay.html`.\n\n1. **Open the installed file** (`compositions/components/grain-overlay.html`).\n2. **HTML:** copy the overlay elements into your composition's root `<div data-composition-id=\"...\">`.\n3. **CSS:** copy the `<style>` block into your composition's styles. Since the grain is an overlay, make sure its `z-index` places it above your content, because layering is controlled by CSS `z-index`, not `data-track-index`.\n4. **JS:** if the snippet has a `<script>`, copy its contents into your composition's script, before your timeline code.\n5. **GSAP integration:** if the snippet's comment block describes timeline calls (for example, fading the grain in or out), add those calls to your own timeline.\n\nThe grain then lives inside your composition and follows its dimensions and timing.\n\n## Block: include it by reference\n\nA block is a self-contained sub-composition with its own dimensions, duration, and timeline. You don't copy its contents. You reference the file from the host `index.html`:\n\n```html\n<div\n  data-composition-id=\"data-chart\"\n  data-composition-src=\"compositions/data-chart.html\"\n  data-start=\"2\"\n  data-duration=\"15\"\n  data-track-index=\"1\"\n  data-width=\"1920\"\n  data-height=\"1080\"\n></div>\n```\n\nThe key requirements are that `data-composition-id` matches the block's internal ID, and that you set `data-start`, `data-duration`, `data-width`/`data-height`, and `data-track-index` (a Studio timeline row, display only).\n\n## Key differences\n\n| | Component | Block |\n|---|---|---|\n| Own dimensions/timeline | No | Yes |\n| Integration | Copy HTML, CSS, and JS into the host | Reference via `data-composition-src` |\n| Timing control | Your timeline (via GSAP calls) | `data-start` / `data-duration` on the host element |\n| Install path | `compositions/components/` | `compositions/` |\n| Edits after install | Merged into your file, so edit in place | Edit the separate file |\n\nNote that the CLI prints a paste snippet after install, but it's only a starting point. For a block you must add the attributes above yourself, and for a component you still need to do the merge manually.",
    "6d3ddb74a4c5b12d7a18f5c7f0a3cda257e5b08437dce26d05b3cb239636ebe2": "A grain overlay is a **component**, so it has no dimensions, duration, or timeline of its own. You merge it into your existing composition rather than referencing it from the outside.\n\n## Integrating the grain overlay (component)\n\nBy default `hyperframes add grain-overlay` writes the file to `compositions/components/grain-overlay.html` (configurable via `paths.components` in `hyperframes.json`). Then:\n\n1. **Read** the installed file.\n2. **HTML:** copy its elements into your host composition's `<div data-composition-id=\"...\">`.\n3. **CSS:** copy its `<style>` block into your composition's styles.\n4. **JS:** if it has a `<script>`, copy the contents into your composition's script, *before* your timeline code.\n5. **GSAP:** if the snippet's comment block exposes timeline integration calls, add them to your own timeline.\n\nSince the overlay is pasted into your markup, it inherits the host's canvas size and timeline. Use CSS `z-index` to layer it above your content (`data-track-index` is display-only in Studio).\n\n## Compared with a standalone block\n\nA **block** is a self-contained sub-composition with its own dimensions, duration, and timeline. You don't copy its contents. You reference it from your host `index.html`:\n\n```html\n<div\n  data-composition-id=\"data-chart\"\n  data-composition-src=\"compositions/data-chart.html\"\n  data-start=\"2\"\n  data-duration=\"15\"\n  data-track-index=\"1\"\n  data-width=\"1920\"\n  data-height=\"1080\"\n></div>\n```\n\nHere `data-composition-id` must match the block's internal ID, and you control when it appears with `data-start` and `data-duration`.\n\n| | Component (grain overlay) | Block |\n|---|---|---|\n| Own dimensions/duration | No | Yes |\n| Integration | Merge HTML, CSS, JS into the host | Reference via `data-composition-src` |\n| Timing | Governed by your host timeline | `data-start` / `data-duration` on the placeholder |\n| Install path | `compositions/components/` | `compositions/` |\n\nThe install command prints a snippet, but for blocks it's only a starting point. You still need to add the matching `data-composition-id`, `data-start`, and `data-track-index` yourself.",
    "fd2820e6c2f4f28111049b41ee64f5590283edcfb386e9091ddd73c3d8268a8e": "I can't see the snippet or your composition, so this is general guidance based only on what you've told me: a grain overlay was installed as a component snippet. Check the specifics against the snippet's own source or docs.\n\n## Integrating into an existing composition\n\nA grain overlay is a decoration layer. It should sit on top of your content without changing its layout.\n\n1. **Place it as the topmost layer** in the composition, after all content, so it grains everything beneath it. If you want some elements to stay clean, such as captions or logos, put the overlay below them instead.\n2. **Make it fill the composition frame.** Position it absolutely (or the equivalent) at full width and height, anchored to the composition's root container, not to a nested child.\n3. **Disable pointer interaction** (`pointer-events: none` or the equivalent) so it doesn't block clicks or hovers on content below.\n4. **Set blend and opacity.** Grain usually looks best at low opacity (roughly 5–15%) with a blend mode like `overlay`, `soft-light`, or `multiply`. Tune against your actual backgrounds, since the same setting reads differently on dark and light scenes.\n5. **Tie animation to the composition's clock.** If the grain animates (shifting noise or stepped frames), drive it from the composition's frame or time source, not a free-running CSS or JS timer. Otherwise preview and rendered output can drift out of sync or be non-deterministic.\n6. **Respect the composition's timing.** If the composition has scenes or sequences, decide whether the overlay spans the whole timeline (mount it at the root) or only certain sections (mount it inside those sequences).\n7. **Check stacking and performance.** Make sure no parent creates an unexpected stacking context or clipping that hides the overlay. Large noise textures or SVG filters can be costly, so test render speed.\n\n## Standalone block\n\nAs a standalone block, the snippet is its own self-contained unit:\n\n- It carries its own container, dimensions, and background, so there's nothing to align with. You'd typically use it to preview or tune the grain, or as a separate clip or scene.\n- It has no layering concerns, but it also doesn't affect anything else. On its own it shows grain over its own backdrop, not over your content.\n- Its timing is independent, so it starts and ends with its own block.\n\n## Key differences\n\n| Aspect | In existing composition | Standalone block |\n|---|---|---|\n| Sizing | Inherits/fills the parent frame | Defines its own |\n| Layering | You choose z-order relative to content | None needed |\n| Interaction | Must not block content | Irrelevant |\n| Timing | Should share the composition clock | Self-contained |\n| Purpose | Applies a texture to real content | Preview, tuning, or separate asset |\n\nIf you tell me the framework and share the snippet's props or markup, I can give exact placement and settings.",
    "540539be4d6ad8f4da971bcd413133efa270cf21e69eaec5dcb9541485a061d4": "I can't see the snippet or your project, so this is general guidance based on one fact: the grain overlay is installed as a component snippet. Names and file paths below are placeholders, so adjust them to your framework's conventions.\n\n## Standalone block vs. integrating into an existing composition\n\n**Standalone block**\n- The snippet is a self-contained unit that brings its own wrapper, sizing, and timing.\n- You place it on its own, for example as its own scene, layer, or section, and it renders independently.\n- It is useful for previewing the grain in isolation or tuning its parameters, but it doesn't affect your content.\n\n**Integrated into an existing composition**\nThe grain only works as an overlay if it sits on top of your content and shares its frame. In practice:\n\n1. **Place it as a sibling layer above the content.** Put the grain component as the last child (or highest z-index layer) of the composition's root container, not inside an individual scene. That way it covers everything beneath it.\n2. **Match the container's size.** Make it fill the composition: absolutely positioned, `inset: 0`, full width and height. Remove any fixed dimensions the standalone version had.\n3. **Make it non-interactive.** Set `pointer-events: none` so it doesn't block clicks, hovering, or selection on the content below.\n4. **Choose a blend mode and opacity.** Standalone, the grain often renders at full strength on its own background. Over content, use a low opacity (roughly 0.03–0.15) and a blend mode like `overlay`, `soft-light`, or `multiply`, depending on whether you want it to brighten or darken.\n5. **Sync timing.** Give it the same duration and start as the composition, so it runs for the whole piece rather than inheriting a standalone block's own timeline. If the grain is animated (shifting noise), tie its frame stepping to the composition's clock instead of free-running, so playback and renders match.\n6. **Mind stacking contexts.** If a parent uses `transform`, `filter`, or `isolation`, the blend mode may only blend within that parent. Keep the grain at the root level so it blends with the full composite.\n7. **Don't duplicate it.** Add it once at the root rather than in each scene, which avoids stacked grain and extra rendering cost.\n\n## Recommendation\nInstall it as the snippet suggests, then mount it once at the top of the composition's root as a full-bleed, non-interactive, low-opacity overlay with its timing bound to the composition. Keep a standalone instance only if you want a sandbox for tuning grain size, intensity, and speed. Once those look right, carry the values over to the integrated one.\n\nIf you tell me the framework and paste the snippet, I can give exact steps instead of general ones.",
    "6a0bd760ae17bac546dc23e378ce3f6e0508e72fd3aebbf5bff66186d816e043": "I can't see the snippet or your project, and you've asked me not to inspect them, so this is general guidance rather than instructions for your tool. The names below are placeholders.\n\n**Integrating into an existing composition**\n\nA snippet is meant to be merged into what you already have, so the grain becomes a layer inside your composition rather than its own unit.\n\n1. **Place it as the top layer.** Put the grain element last among your visual layers (highest z-order), so it covers everything beneath it.\n2. **Size it to the composition.** Make it fill the parent's width and height, using the composition's own dimensions rather than hard-coded ones.\n3. **Make it non-interactive and blended.** Use `pointer-events: none` and a blend mode such as overlay or soft-light, with low opacity (roughly 5-15%) so it textures the image without muddying it.\n4. **Tie its timing to the parent.** If the grain animates, drive it from the composition's clock or frame counter instead of a free-running timer. Otherwise previews and renders will drift apart.\n5. **Merge any dependencies.** If the snippet needs its own styles, a filter definition, or an asset, add them to the existing composition's scope. Check that the IDs and class names don't collide with yours.\n6. **Check the layer order.** Captions, UI, or watermarks that should stay clean must sit above the grain, or the grain will degrade them.\n\n**Standalone block**\n\nAs a standalone block, the grain is its own unit (a separate scene, track, or component) with its own container, size, and duration. That is simpler to add because there are no collisions to resolve. The costs are that:\n\n- It doesn't automatically inherit the parent's timing, dimensions, or layering. You have to position and stack it yourself, usually as a full-frame overlay over other blocks.\n- Its duration must be matched manually to whatever it covers.\n- A standalone block is easy to reuse and toggle, but it can drift out of sync if the content under it changes length.\n\n**Recommendation:** If the grain is meant to cover one composition, integrate it as a top layer inside that composition. That keeps size and timing tied to the parent. Use the standalone form only if you want one grain reused across several compositions or toggled independently.\n\nIf you tell me which tool or framework this is, I can make the steps concrete.",
    "a6f837774531bbb6cd437dc422e0faafce920da4093b6387f2e161f9babbd71d": "I don't have the snippet's source or your framework's docs in this conversation, so this is general guidance. Check the specifics against the snippet itself.\n\n**Component snippet in an existing composition**\n\nA snippet is a fragment, not a self-contained unit. It borrows its context from the composition you drop it into.\n\n1. **Place it as a child layer** inside the existing composition's root, usually as the last child or with the highest z-index, so it renders above the content it grains.\n2. **Make it non-interactive and full-bleed.** Absolutely position it to fill the root (`inset: 0`), and set `pointer-events: none` so it doesn't block anything.\n3. **Set the blend and strength.** Grain usually works with a blend mode like `overlay` or `soft-light` at low opacity. Tune this against your actual footage or design, since the same values look different on dark and light backgrounds.\n4. **Merge its styles and scripts into the host.** Any CSS, keyframes, or setup code the snippet carries must coexist with yours. Watch for ID, class, and keyframe-name collisions.\n5. **Hook into the host's timing.** If the grain animates (shifting noise, stepped frames), tie it to the composition's clock or timeline rather than a free-running animation. Otherwise it can drift out of sync or render inconsistently on export.\n6. **Match its duration** to the composition, or to the span of scenes you want grained.\n\nThe upside is that the grain inherits the composition's size, timing, and render pipeline automatically. The downside is that you own the merge, so collisions and timing mismatches are your problem.\n\n**Standalone block**\n\nA block is its own unit, with its own root, dimensions, duration, and scoped styles.\n\n1. **Declare its size and duration explicitly.** They must match the parent, or the grain will be cropped, letterboxed, or end early.\n2. **Reference or embed it** in the parent as a nested element or sub-composition, and layer it on top the same way (full-bleed, top z-index, blend mode, low opacity).\n3. **Control timing at the embed point.** Set the start offset and length there instead of editing the block.\n\nThe upside is isolation: no style collisions, and you can reuse it across compositions and tweak it in one place. The downside is that you must keep its dimensions and duration in sync with each host, and blend modes may behave differently across a nested boundary. Some renderers isolate nested layers, so the overlay blends only within the block and not against the content beneath it. Test that explicitly.\n\n**Which to choose**\n\n- Use the snippet if this is a single composition and you want the grain to follow its timing and size automatically.\n- Use the block if you'll reuse the grain across several compositions or want it kept separate from the scene code.\n\nIf you paste the snippet or tell me which framework it targets, I can give exact placement and attribute names.",
    "10ff3d837888b4c653e7eafee2e6b2ae0009cc4cb1c60b990ee0d341164fd7bb": "I can't see the snippet or your project, so this is the general pattern. Check the specifics against the snippet's own docs.\n\n## Snippet in an existing composition\n\nA component snippet is a fragment (markup, styles, and animation logic), not a full composition. It has no root, canvas size, or timeline of its own, so you merge it into what you already have.\n\n1. **Place it inside your composition root**, as the last child or with a high z-index, so it sits above your content. Make it full-bleed (`position: absolute; inset: 0`) and set `pointer-events: none`.\n2. **Merge its styles into your composition's scope.** Check for class or ID collisions with your existing CSS, and rename if needed.\n3. **Tune the blend.** Grain usually relies on a blend mode (`overlay` or `soft-light`) and low opacity (roughly 0.05 to 0.2). The blend only affects what's beneath it in the same stacking context, so keep it in the same root as the content you want grained.\n4. **Attach its animation to your existing timeline** rather than creating a second one. Match its duration to the composition's length so the grain doesn't stop or loop visibly early.\n5. **Keep it deterministic.** Drive any grain shift (stepped offsets or a seeded noise frame) from the timeline or frame position, not from `Math.random()` or free-running CSS animation, so renders are reproducible.\n6. **Adapt to your dimensions.** The snippet inherits your composition's size, so check the grain scale at your resolution.\n\n## Standalone block\n\nA standalone block is a self-contained composition with its own root, dimensions, duration, and timeline. You don't edit your composition's internals. You reference or embed the block as a layer or sub-composition, overlay it on top, and set its blend and opacity from the outside.\n\n## Trade-offs\n\n| | Snippet (merged) | Standalone block |\n|---|---|---|\n| Structure | Becomes part of your composition | Separate composition, embedded |\n| Timeline | Shares yours | Has its own, which you must align |\n| Styling | Shares your CSS scope, so collisions are possible | Isolated, so no collisions |\n| Control | Direct access to the elements | Only what the block exposes |\n| Best for | Grain tied to one composition's look | Reuse across several compositions |\n\n**Recommendation:** since the grain is installed as a snippet, merge it into your composition. Put it in the root as the top layer, share your timeline, and tune blend and opacity there. Use a standalone block only if you want the same grain reused across several compositions with minimal edits to each.",
    "c0c63339d7ba6fcd8811f7ce6ec171a1e00abab027352e5e369ae8247e889513": "I can't inspect the installed snippet (no tools, and you haven't pasted it), so this is the general pattern. Check the specifics against the snippet itself.\n\n**Component snippet (integrating into an existing composition)**\nA snippet is meant to be merged into a composition you already have, not to run on its own. Typically you:\n\n1. **Paste the markup** (the overlay element, or an SVG-noise or canvas layer) into your composition's root, as a top-level sibling above your content.\n2. **Merge the styles** into your existing stylesheet. The overlay should be absolutely positioned to fill the frame, with `pointer-events: none`, a `z-index` above the content but below any UI or captions you don't want grained, and a `mix-blend-mode` (`overlay` or `soft-light`) with low opacity (roughly 0.05-0.15).\n3. **Merge any animation code** into your existing timeline or script rather than creating a second one. Grain usually animates by stepping the noise offset or seed every few frames. Drive that from your composition's clock, not from `setInterval` or CSS animations running in real time, so renders are deterministic and frame-accurate.\n4. **Match the composition's duration and dimensions.** The overlay should cover the full frame and the full timeline, and inherit your composition's size instead of hard-coding its own.\n5. **Resolve naming collisions** (IDs, class names, CSS variables, timeline labels) against what's already in the file.\n\nThe advantage is one composition, one timeline, and shared timing. The cost is that you own the merge and any conflicts.\n\n**Standalone block**\nA block is a self-contained composition with its own markup, styles, and timeline. You don't merge it. You reference or embed it as a layer in the parent composition and set where it starts and how long it runs. This gives you:\n\n- Isolation, so no style or ID collisions\n- Reuse across many compositions without copying code\n- Updates in one place\n\nThe costs are less direct control over blend modes and stacking, since the block sits as a layer and its blending depends on how the parent composites it. It also adds a nested timeline to keep in sync, and you have to make sure its dimensions and duration match the parent.\n\n**Which to choose**\n- Use the **snippet** for a single project where you want the grain tightly coupled to your layout and timing, or you need to tune blend mode and layer order against specific elements.\n- Use the **block** if you'll apply the same grain across several compositions, or you want it kept separate from your own code.\n\nIf you paste the snippet and a sample of your composition's root, I can point to exactly where each piece goes.",
    "db818103a0c8f5af1fa1a20cac9a7fbf871936607ff216d1699757cea313308b": "**Discovery comes first, and it needs no project or account.** The search runs locally against the whole catalog and sends nothing, so you can do it before anything exists.\n\n**1. Search by intent, in English.** Describe the move rather than guessing a name:\n\n```bash\nnpx hyperframes catalog --query \"shimmer sweep across text\"\n```\n\n- The default tier ranks on words shared with each item's name, title and description. `--on-device` ranks by meaning, but needs a one-time 33 MB model download with consent.\n- Use `--json` to see which tier answered and whether `dropped` is non-zero (items the vectors know about but this registry can't serve).\n- Query in English even if the video is in another language. A non-English query returns `No searchable words in query`, which is that rule at work and not a missing component.\n\nThe registry already lists a `shimmer-sweep` component (it appears in the quick-reference examples), so I'd expect it to rank at or near the top. The search results are what confirm it.\n\n**2. Install after you've picked a match.**\n\n```bash\nhyperframes add shimmer-sweep\n```\n\nInstallation needs a project, since it writes files and reads `hyperframes.json` for paths. Because you don't have one yet, that has to be set up first (or `--dir .` pointed at one). It also needs network access, as item files are fetched on every install. Registry dependencies are installed before the item itself.\n\nAs a component, it lands in `compositions/components/shimmer-sweep.html` by default. It is a snippet, not a standalone composition.\n\n**3. Wire it in.** Copy the HTML into your composition's `data-composition-id` container, the `<style>` block into your styles, and any `<script>` content before your timeline code. Then add any GSAP timeline calls described in the snippet's comment block.\n\n**4. If nothing fits,** report the gap before hand-building:\n\n```bash\nnpx hyperframes feedback --search-miss \"<query>\" --wanted \"<the move you needed>\" --tier <tier>\n```\n\nThe ordering is: search (no setup) → pick → have a project → `add` → wire in. Only the search is possible right now.",
    "6d0c216b2fb6e1ca59c8256c980dcd28aa2e191fb5232f4b94c0f788e6263614": "For a brief that asks for a shimmer sweep, the order is: search first, install second, wire third. Searching needs no project and no account, so you can do it right now.\n\n**1. Discover (nothing installed, nothing sent)**\n\nRun a catalog search by intent before hand-building anything:\n\n```bash\nnpx hyperframes catalog --query \"shimmer sweep across a title\"\n```\n\n- Search is local and sends nothing. It ranks the whole catalog (roughly 400 items) against your wording.\n- The query must be in English, even if the video's language is not. Describe the move in English, and write the on-screen copy in whatever language the video needs. A non-English query returns `No searchable words in query`, which is that rule at work, not a missing component.\n- The default tier ranks on words shared with an item's name, title, and description. `--on-device` ranks by meaning instead, but needs a one-time 33 MB model download with consent. With `--json`, check which tier answered rather than assuming a ranking happened.\n- A non-zero `dropped` count means the index and the registry are different generations.\n\nIf you'd rather browse, filter with `catalog --type component` or `--tag`, but searching by intent is the faster path. A shimmer sweep is likely a component (an effect snippet), and one named `shimmer-sweep` appears in the registry's own examples.\n\n**2. Install (this is the first step that needs the network and a project)**\n\nOnce a result fits:\n\n```bash\nnpx hyperframes add shimmer-sweep\n```\n\n- Exact item names resolve first. If nothing matches and the value is a tag, every block with that tag installs instead.\n- Registry dependencies install before the requested item.\n- You need a project directory (use `--dir .` to target one). Since you have none yet, create it before this step.\n- `add` fetches the item's files on every install, so it fails offline even for something installed before. Only manifests are cached.\n- A component lands in `compositions/components/shimmer-sweep.html` by default, configurable in `hyperframes.json`.\n\n**3. Wire**\n\nComponents are snippets, not standalone compositions. Copy the HTML into your composition's markup, the `<style>` into its styles, and any `<script>` before your timeline code. Then add any GSAP timeline calls the snippet's comment block describes. If it turned out to be a block instead, you'd include it via `data-composition-src` with a matching `data-composition-id`, plus `data-start` and `data-track-index`.\n\n**If nothing fits**\n\nIf the results don't do the job, report the gap before hand-authoring the effect:\n\n```bash\nnpx hyperframes feedback --search-miss \"<query>\" --wanted \"<the move you needed>\" --tier <tier>\n```\n\nDescribe the effect you wanted, not an item name you imagined. This is the only path that sends a query anywhere, which is why it's a separate deliberate command.",
    "dfe879e0b25bf64af3b4204776eba76d5590f35b03c95b267e7fe2e64d44a915": "**Order of operations for the shimmer sweep brief**\n\n**1. Discover first, before installing or hand-building.** A shimmer sweep is a named visual, so check the registry before building it. Search needs no project, no account, and nothing installed. It runs locally and sends nothing.\n\n```bash\nnpx hyperframes catalog --query \"shimmer sweep highlight across text\"\n```\n\n- Write the query in English even if the video's copy is in another language. Describe the move, not an item name you imagine exists. Non-English queries return `No searchable words in query`, which is not a gap.\n- The default tier ranks on words shared with each item's name, title and description. `--on-device` ranks by meaning, but needs a one-time 33 MB model download that requires consent, so don't assume it ran. With `--json`, check which tier answered.\n- A non-zero `dropped` count means the search index and the installable registry are different generations.\n- To browse instead, use `catalog --type component` or `--tag`. Search by intent is the faster path.\n\n**2. Decide.** From the results, pick the item that does the job. The registry likely has something named `shimmer-sweep`, which would be a component (an effect snippet, not a standalone block). Confirm that from the search results rather than assuming.\n\n**3. If nothing fits,** run the `feedback --search-miss` command that the search prints pre-filled (also available as `report_gap` in `--json`), describing the effect you wanted. Then hand-author the effect.\n\n**4. Install.** This is the first step that needs a target project, since `add` writes files and updates `hyperframes.json` paths. It also needs the network, because item files are fetched on every install. Dependencies install before the requested item.\n\n```bash\nhyperframes add shimmer-sweep --dir .\n```\n\nWithout a project yet, you'd have to create one first. The facts I have only cover `hyperframes init <dir> --example <name>`, so I can't say more about project setup.\n\n**5. Wire it in.** For a component, the file lands in `compositions/components/shimmer-sweep.html` by default. Then:\n- Copy its HTML into your composition's root `<div data-composition-id=\"...\">`.\n- Copy its `<style>` into your styles.\n- Copy any `<script>` content in before your timeline code.\n- Add any GSAP timeline calls described in the snippet's comment block.\n\nIf it turned out to be a block instead, you'd include it via `data-composition-src` with a matching `data-composition-id`, plus `data-start`, `data-duration`, and dimensions.\n\nI haven't run anything, so none of this is verified against the actual catalog.",
    "c4f7427e96409eba7f49ddd3d79833d14926259c4a856bd44d2b3c270c2a685c": "I can't say what \"shimmer sweep\" refers to in your brief, and nothing supplied defines it. It could be a UI shimmer or skeleton-loader effect (a highlight sweeping across a placeholder), or a specific tool or feature. So discovery has to come first, and installation last.\n\n**1. Discovery (no changes, nothing installed)**\n- **Pin down the term.** Ask the brief's author, or check its wording for hints: a visual effect, a library, or a service. Everything else depends on this.\n- **Find the target.** Which project, framework, and platform should this land in? You have none yet, so that decision comes before any tooling choice.\n- **Check account requirements.** Establish whether the brief implies a hosted service or registry that needs an account. If it's a purely visual effect, it probably doesn't.\n- **List constraints.** Look for browser or device targets, accessibility needs such as reduced-motion support, and performance limits.\n\n**2. Decision**\n- If it's a visual effect, my recommendation is to implement it without a dependency. A CSS gradient with a keyframe animation covers most shimmer sweeps and needs no install or account.\n- Only reach for a library or service if discovery shows the brief requires one.\n\n**3. Setup (only once the above is settled)**\n- Create the project first. It determines the package manager and where dependencies live.\n- Create an account only if a chosen service requires it, since signing up is outward-facing and I'd confirm with you first.\n\n**4. Installation (last)**\n- Install the minimum set, pinned and scoped to the project rather than global.\n- Confirm with you before anything that is hard to reverse or touches an external service.\n\nInstalling earlier risks pulling in the wrong tool, creating accounts you don't need, or tying the project to a dependency the effect never required.\n\nIf you tell me what the term means in your brief, I can turn this into a concrete plan.",
    "20522e0595f4f9d8bfe0e62ed59ce6a83bed7105e5cd9b5e0b563ea9b971cb78": "Discovery comes first, then installation. With no project or account yet, nothing should be installed until discovery says what is needed.\n\n**1. Discovery (no changes)**\n- **Pin down the brief.** I only know the phrase \"shimmer sweep\" from your message. It most likely means an animated highlight that sweeps across an element, such as a skeleton loader or a shine on a button, but that's an assumption. Confirm the target (web, mobile, or something else), the element, the direction, the duration, and any reduced-motion requirements.\n- **Check what exists.** The repo is on `HEAD` with a clean status and no commits, so it's effectively empty. There is no framework, package manifest, or styling system to match yet.\n- **Choose the stack from the brief.** If it's web, a shimmer sweep needs no dependencies. A CSS gradient with a keyframe animation covers it. A library is only justified if the brief names one or the target framework requires it.\n- **Check whether an account is needed.** Most likely none is. An account only matters if the brief involves a hosted service, such as a design tool, registry, or deploy target.\n\n**2. Decisions that gate installation**\n- Which stack and package manager, if any.\n- Whether any dependency is needed at all. My recommendation is to start with zero.\n- Whether anything outward-facing, such as creating an account, publishing, or connecting a remote, is required. I'd confirm that with you before doing it.\n\n**3. Installation (only after the above)**\n1. Initialize the project scaffold, the minimal one the chosen stack needs.\n2. Install only the dependencies the brief justifies.\n3. Add the shimmer sweep itself, with a `prefers-reduced-motion` fallback.\n4. Create accounts or remotes last, and only with your approval.\n\nThe main rule is to not create accounts or install packages speculatively. Both are harder to undo than a few lines of CSS.\n\nIf you can tell me the target platform and where the shimmer goes, I can turn this into a concrete plan.",
    "2d91877ce451be6200761b1b8496ecb05aa35ab6c9069a9f4bd9345c6749f71a": "With no project or account yet, discovery has to come before any installation, because the brief doesn't yet determine what to install.\n\n**1. Discovery (nothing is installed or created)**\n- **Pin down the brief.** I only know \"shimmer sweep\" by name. It most likely means a highlight gradient that moves across an element, as in skeleton loaders or shine effects, but I'd confirm that rather than assume. The questions to answer:\n  - Where does it appear (web, mobile, video or motion graphics)?\n  - What does it apply to (text, buttons, cards, loading placeholders)?\n  - What are the direction, duration, easing, colors, and looping behavior?\n  - Does it need to respect reduced-motion preferences?\n- **Check the starting state.** The git snapshot shows a clean repository on `HEAD` with no commits, so there is no existing code to inspect for a framework, styling approach, or conventions. Everything is a fresh choice.\n- **Decide whether an account or service is needed.** A shimmer sweep is normally a front-end effect (CSS keyframes or a small animation library) and needs no account, API key, or hosted service. I'd only create one if the brief requires something like asset hosting or design-tool integration.\n\n**2. Choose the stack**\nOnce the target platform is known, pick the smallest viable approach. For the web that's plain CSS with a gradient and a keyframe animation. A framework or animation library is justified only if the project already needs it.\n\n**3. Installation (in this order)**\n1. Initialize the project: first commit, scaffold, and package manifest, if a framework is needed at all.\n2. Install the framework or toolchain the brief requires.\n3. Add any animation or styling dependency, only if plain CSS isn't enough.\n4. Implement the shimmer, then verify it in a browser or preview, including the reduced-motion case.\n\nI haven't run or checked anything, so this is ordering guidance from the facts given. If you tell me the platform and what the shimmer applies to, I can turn it into a concrete plan.",
    "430ad3460eafe608faddde22b401d3e6fa2198018d7537a68e527b407f2304f0": "\"Shimmer sweep\" isn't defined in the facts I was given, so I'm assuming it means the common UI effect: a highlight gradient that sweeps across a skeleton or loading placeholder. If the brief means something else, the discovery step below is where that gets settled.\n\n**Discovery comes first, and it needs nothing installed.**\n\n1. **Pin down the brief.** Establish what surface the shimmer applies to (skeleton cards, text, images, a button), its direction, duration, easing, colors, and whether it should respect `prefers-reduced-motion`. Ask the author about anything the brief leaves open.\n2. **Identify the target stack.** With no project yet, the stack is undecided. The brief or the user has to name it (plain web, React, native, etc.). A shimmer is mostly CSS, so it may need no library at all.\n3. **Identify account needs.** Work out whether any hosted service is involved (deploy target, design tool, package registry with auth). A pure CSS or animation effect usually needs none, so don't create or request accounts until a concrete need shows up.\n\n**Installation follows, in dependency order.**\n\n1. **Project scaffold.** Create the project first, since everything else installs into it.\n2. **Account and auth, only if discovery found a need.** This comes before any tool that depends on it.\n3. **Project dependencies.** Add only what the chosen stack requires. For a shimmer, that is often nothing beyond the framework, or at most one small animation or skeleton library.\n4. **The shimmer itself.** Implement it last, once the scaffold and dependencies are in place, and verify it.\n\nThe ordering exists so that unknowns get resolved before commitments are made. Installing before you know the stack, or creating an account before you know it's needed, makes you redo work or leave unnecessary state behind.\n\nMy recommendation: confirm the stack with the user, then scaffold and implement the shimmer as plain CSS with no extra dependencies and no account."
  },
  "draws": [
    {
      "id": "block",
      "mode": "with_skill",
      "draw_index": 0,
      "generation_hash": "4c35d6d58e3b26cf72b37a61ddaff33fa7afda5b3abef9d1a6417632bea8a791",
      "answer_sha256": "4c35d6d58e3b26cf72b37a61ddaff33fa7afda5b3abef9d1a6417632bea8a791",
      "status": "measured",
      "judge_outputs": [
        "{\"score\": 1.0, \"pass\": true, \"reason\": \"Uses data-composition-src pointing to the installed block path, matches data-composition-id to data-chart, sets data-start=2 and data-duration=15, and carries width/height plus a track index explicitly noted as display-only rather than z-order.\"}",
        "{\"score\": 1.0, \"pass\": true, \"reason\": \"Meets all four criteria: data-composition-src points to the block, data-composition-id is data-chart, data-start=2 and data-duration=15, and dimensions plus track index are present with track described as non-z-order.\"}",
        "{\"score\": 1.0, \"pass\": true, \"reason\": \"The response meets all four rubric points: data-composition-src points to the installed block, data-composition-id is data-chart, start is 2 and duration 15, and dimensions plus a track index are included with the track explicitly not treated as z-order.\"}",
        "{\"score\": 1.0, \"pass\": true, \"reason\": \"Response meets all four criteria: data-composition-src points to the installed block, the ID matches data-chart, start is 2 and duration 15, and width, height, and track index are set with track explicitly not treated as z-order.\"}",
        "{\"score\": 1.0, \"pass\": true, \"reason\": \"Response sets data-composition-src to the installed block path, matches data-chart id, sets data-start 2 and data-duration 15, carries width/height and track index, and notes track is display-only, not z-order.\"}"
      ]
    },
    {
      "id": "block",
      "mode": "with_skill",
      "draw_index": 1,
      "generation_hash": "1d9e47115c3a3f94666713138e97ee0e5ff30ce2eb33699d6ef3be8e4688b6a3",
      "answer_sha256": "1d9e47115c3a3f94666713138e97ee0e5ff30ce2eb33699d6ef3be8e4688b6a3",
      "status": "measured",
      "judge_outputs": [
        "{\"score\": 1.0, \"pass\": true, \"reason\": \"Sets data-composition-src to the installed block path, matches data-composition-id to data-chart, sets data-start 2 and data-duration 15, and carries dimensions plus a track index explicitly described as not z-order.\"}",
        "{\"score\": 0.75, \"pass\": true, \"reason\": \"Matches data-composition-id, start 2, duration 15, dimensions 1920x1080, and treats track index as a timeline row rather than z-order. The composition src path is an assumed default rather than a supplied fact, so the installed-block criterion is only partly supported.\"}",
        "{\"score\": 1.0, \"pass\": true, \"reason\": \"The response sets data-composition-src to an installed block path, matches data-composition-id data-chart, sets start 2 and duration 15, and gives width, height, and a track index noted as display-only rather than z-order.\"}",
        "```json\n{\n  \"score\": 0.75,\n  \"pass\": true,\n  \"reason\": \"Matches data-composition-id 'data-chart', sets start 2 and duration 15, and carries 1920x1080 dimensions with a display-only track index; the src path is a guessed default rather than a supplied fact, so criterion 1 is only weakly met.\"\n}\n```",
        "{\"score\": 1.0, \"pass\": true, \"reason\": \"Meets all four criteria: data-composition-src points to the block's install path, the id is data-chart, start=2 and duration=15, and dimensions plus a track index are present with the track explicitly not treated as z-order.\"}"
      ]
    },
    {
      "id": "block",
      "mode": "with_skill",
      "draw_index": 2,
      "generation_hash": "cbf43507e9553a9f855889735d763f0efac6f7386833ed3ee64522f542a47e8d",
      "answer_sha256": "cbf43507e9553a9f855889735d763f0efac6f7386833ed3ee64522f542a47e8d",
      "status": "measured",
      "judge_outputs": [
        "{\"score\": 1.0, \"pass\": true, \"reason\": \"Uses data-composition-src to the block's install path, matches data-composition-id 'data-chart', sets data-start 2 and data-duration 15, and carries 1920x1080 dimensions with track index noted as timeline-only, not z-order.\"}",
        "{\"score\": 1.0, \"pass\": true, \"reason\": \"The response meets all four criteria: it points data-composition-src at the installed block path, matches id data-chart, sets start 2 and duration 15, and carries width, height, and track index while noting track is not z-order.\"}",
        "{\"score\": 0.75, \"pass\": true, \"reason\": \"Meets criteria 1-3: uses data-composition-src to the installed block path, matches data-composition-id 'data-chart', and sets data-start 2 and data-duration 15; criterion 4 is only partly met since dimensions are carried but track-index is explained correctly as not being z-order, which does satisfy the rubric's wording.\"}",
        "{\"score\": 1.0, \"pass\": true, \"reason\": \"Points data-composition-src to the installed block path, matches data-composition-id, sets start 2 and duration 15, and carries 1920x1080 dimensions and a track index while noting track does not control z-order.\"}",
        "{\"score\": 1.0, \"pass\": true, \"reason\": \"Uses data-composition-src to the installed block, matches data-composition-id, sets start 2 and duration 15, and carries width, height, and track index while noting track is not z-order.\"}"
      ]
    },
    {
      "id": "block",
      "mode": "baseline",
      "draw_index": 0,
      "generation_hash": "3bad4908452f8f5eb6cc21216c4114e5b7d842af2b16741d78462afd589fd69f",
      "answer_sha256": "3bad4908452f8f5eb6cc21216c4114e5b7d842af2b16741d78462afd589fd69f",
      "status": "measured",
      "judge_outputs": [
        "{\"score\": 0.5, \"pass\": false, \"reason\": \"Matches composition id, start 2, and duration 15, and carries dimensions. It misses data-composition-src to the installed block (only mentioned as an alternative) and omits any track index.\"}",
        "{\"score\": 0.5, \"pass\": false, \"reason\": \"Meets criterion 2 (data-composition-id matches) and criterion 3 (start 2, duration 15). Misses criterion 1 because it never uses data-composition-src for the installed block, and misses criterion 4 because it gives no track index.\"}",
        "{\"score\": 0.25, \"pass\": false, \"reason\": \"Matches data-composition-id, start 2, and duration 15, plus dimensions; misses rubric 1 since it never uses data-composition-src to reference the installed block, and track index is absent.\"}",
        "{\"score\": 0.5, \"pass\": false, \"reason\": \"Response sets matching data-composition-id, start 2 and duration 15 (criteria 2 and 3), but omits data-composition-src to the installed block (criterion 1) and does not mention a track index (criterion 4), so only half the criteria are met.\"}",
        "{\"score\": 0.5, \"pass\": false, \"reason\": \"Meets the composition-id match and start 2/duration 15 criteria, and carries dimensions. Misses data-composition-src to the installed block (only mentioned as an alternative) and omits any track index.\"}"
      ]
    },
    {
      "id": "block",
      "mode": "baseline",
      "draw_index": 1,
      "generation_hash": "234e057d3d4611eb05683fa8edee5a583b2b9ce8cc9bc5e26c28ee4e633987d1",
      "answer_sha256": "234e057d3d4611eb05683fa8edee5a583b2b9ce8cc9bc5e26c28ee4e633987d1",
      "status": "measured",
      "judge_outputs": [
        "{\"score\": 0.5, \"pass\": false, \"reason\": \"Response matches composition id, start 2, duration 15, and dimensions (criteria 2, 3, 4 partially), but omits data-composition-src for the installed block (criterion 1 missed) and does not mention a track index (criterion 4 incomplete), so only about half the rubric is met.\"}",
        "{\"score\": 0.5, \"pass\": false, \"reason\": \"Matches the composition id and sets start 2 and duration 15, but omits data-composition-src for the installed block and includes no track index; dimensions are carried.\"}",
        "{\"score\": 0.25, \"pass\": false, \"reason\": \"Matches the composition id, start 2, and duration 15 with dimensions, but omits data-composition-src to the installed block and carries no track index.\"}",
        "{\"score\": 0.25, \"pass\": false, \"reason\": \"Response matches composition id, start 2, and duration 15 with dimensions, satisfying criteria 2, 3, and 4 partially; it omits data-composition-src to an installed block and does not carry a track index, so only the id/timing criterion and dimension criterion are met, yielding 0.25 at most partial credit.\"}",
        "{\"score\": 0.5, \"pass\": false, \"reason\": \"Matches the composition id and sets start 2 and duration 15, but omits data-composition-src to the installed block and carries no track index.\"}"
      ]
    },
    {
      "id": "block",
      "mode": "baseline",
      "draw_index": 2,
      "generation_hash": "019ab77a70626f51211957bf2060d93b7ef697e047026811616b6b7f365efefb",
      "answer_sha256": "019ab77a70626f51211957bf2060d93b7ef697e047026811616b6b7f365efefb",
      "status": "measured",
      "judge_outputs": [
        "{\"score\": 0.5, \"pass\": false, \"reason\": \"Response sets data-composition-id to data-chart and data-start 2, duration 15, plus width/height (points 2, 3, 4 partly), but omits any data-composition-src to an installed block (point 1) and never addresses a track index (point 4).\"}",
        "{\"score\": 0.25, \"pass\": false, \"reason\": \"Matches data-composition-id and start 2 with duration 15, but omits data-composition-src to the installed block and carries no track index, though dimensions are present.\"}",
        "{\"score\": 0.5, \"pass\": false, \"reason\": \"Meets the composition id match and the start 2 / duration 15 criteria, but omits data-composition-src to the installed block and any track index, while dimensions are carried.\"}",
        "{\"score\": 0.5, \"pass\": false, \"reason\": \"Matches data-composition-id 'data-chart' and sets start 2 and duration 15, but omits data-composition-src to the installed block and carries no track index.\"}",
        "{\"score\": 0.5, \"pass\": false, \"reason\": \"Meets the composition-id match and start 2/duration 15 criteria, but omits data-composition-src and any track index, so only two of four criteria are satisfied.\"}"
      ]
    },
    {
      "id": "component",
      "mode": "with_skill",
      "draw_index": 0,
      "generation_hash": "9ab70ffe9d48967213560f02603f44c8f458317fca66c46cd955d3b612b202cc",
      "answer_sha256": "9ab70ffe9d48967213560f02603f44c8f458317fca66c46cd955d3b612b202cc",
      "status": "measured",
      "judge_outputs": [
        "{\"score\": 1.0, \"pass\": true, \"reason\": \"Covers copying markup into the host (1), merging CSS and script (2), states the snippet has no own dimensions or timeline (3), and distinguishes it from a data-composition-src block (4).\"}",
        "{\"score\": 1.0, \"pass\": true, \"reason\": \"Covers all four rubric points: copies markup into the host, merges CSS and JS, states the snippet has no own dimensions, and distinguishes it from a data-composition-src block.\"}",
        "{\"score\": 1.0, \"pass\": true, \"reason\": \"The response meets all four criteria: it copies overlay markup into the host, merges CSS and script, states the snippet has no standalone dimensions, and distinguishes it from a data-composition-src block.\"}",
        "{\"score\": 1.0, \"pass\": true, \"reason\": \"The response copies the overlay markup into the host, merges CSS and JS, says the snippet has no standalone dimensions, and distinguishes it from a data-composition-src block. All four criteria are met.\"}",
        "{\"score\": 1.0, \"pass\": true, \"reason\": \"Covers copying markup into the host composition, merging CSS and JS, stating the overlay has no standalone dimensions, and clearly distinguishing it from a data-composition-src block.\"}"
      ]
    },
    {
      "id": "component",
      "mode": "with_skill",
      "draw_index": 1,
      "generation_hash": "790b997cebf201eafd389054b44a42157b00a0be83f996f20fdd3ebe5cef01e6",
      "answer_sha256": "790b997cebf201eafd389054b44a42157b00a0be83f996f20fdd3ebe5cef01e6",
      "status": "measured",
      "judge_outputs": [
        "{\"score\": 1.0, \"pass\": true, \"reason\": \"Covers all four rubric points: copies markup into the host root, merges CSS and JS into the composition, states the component has no standalone dimensions, and distinguishes it from a data-composition-src block.\"}",
        "{\"score\": 1.0, \"pass\": true, \"reason\": \"The response meets all four criteria: it says to copy the markup into the host root div, merge the CSS and JS into the composition, avoids inventing dimensions for the component, and clearly distinguishes it from the data-composition-src block.\"}",
        "{\"score\": 1.0, \"pass\": true, \"reason\": \"Met all four criteria: markup copied into the host composition, CSS and script merged, no standalone dimensions invented for the component, and clearly distinguished from the data-composition-src block.\"}",
        "{\"score\": 1.0, \"pass\": true, \"reason\": \"Covers copying markup into the host composition, merging CSS and JS, stating the component has no standalone dimensions, and distinguishing it from a data-composition-src block.\"}",
        "{\"score\": 1.0, \"pass\": true, \"reason\": \"Meets all four criteria: copies markup into the host composition, merges CSS and script, states the component has no standalone dimensions, and distinguishes it from a data-composition-src block.\"}"
      ]
    },
    {
      "id": "component",
      "mode": "with_skill",
      "draw_index": 2,
      "generation_hash": "6d3ddb74a4c5b12d7a18f5c7f0a3cda257e5b08437dce26d05b3cb239636ebe2",
      "answer_sha256": "6d3ddb74a4c5b12d7a18f5c7f0a3cda257e5b08437dce26d05b3cb239636ebe2",
      "status": "measured",
      "judge_outputs": [
        "{\"score\": 1.0, \"pass\": true, \"reason\": \"Covers all four rubric points: copies markup into the host composition, merges CSS and script, states the component has no standalone dimensions, and distinguishes it from a data-composition-src block.\"}",
        "{\"score\": 1.0, \"pass\": true, \"reason\": \"Meets all four rubric points: copies markup into the host, merges CSS and JS, states the component has no standalone dimensions, and distinguishes it from a data-composition-src block.\"}",
        "{\"score\": 1.0, \"pass\": true, \"reason\": \"Covers all four rubric points: copies markup into the host composition, merges CSS and JS, states the component has no standalone dimensions, and distinguishes it from a data-composition-src block.\"}",
        "{\"score\": 1.0, \"pass\": true, \"reason\": \"The response copies the overlay's markup, CSS, and JS into the host composition, notes it has no standalone dimensions, and clearly distinguishes it from a data-composition-src block.\"}",
        "{\"score\": 1.0, \"pass\": true, \"reason\": \"Copies markup into the host, merges CSS and script, states the overlay has no standalone dimensions, and distinguishes it from a data-composition-src block.\"}"
      ]
    },
    {
      "id": "component",
      "mode": "baseline",
      "draw_index": 0,
      "generation_hash": "fd2820e6c2f4f28111049b41ee64f5590283edcfb386e9091ddd73c3d8268a8e",
      "answer_sha256": "fd2820e6c2f4f28111049b41ee64f5590283edcfb386e9091ddd73c3d8268a8e",
      "status": "measured",
      "judge_outputs": [
        "{\"score\": 0.25, \"pass\": false, \"reason\": \"Meets criterion 3 by not inventing standalone dimensions. Misses copying markup into the host (1), merging styles and scripts (2), and distinguishing from a data-composition-src block (4).\"}",
        "{\"score\": 0.25, \"pass\": false, \"reason\": \"Meets only criterion 3, since it invents no specific standalone dimensions. It never explicitly says to copy markup into the host, never covers merging styles and scripts, and never distinguishes the block from a data-composition-src block.\"}",
        "{\"score\": 0.25, \"pass\": false, \"reason\": \"Only the no-invented-dimensions criterion is arguably met, since it gives no specific sizes. It misses copying markup into the host, merging styles and scripts, and distinguishing the snippet from a data-composition-src block.\"}",
        "{\"score\": 0.5, \"pass\": false, \"reason\": \"Meets criterion 3 by not inventing standalone dimensions and placing the overlay within the host composition (criterion 1, loosely). Misses criterion 2 (no explicit style/script merging) and criterion 4 (no data-composition-src distinction).\"}",
        "{\"score\": 0.25, \"pass\": false, \"reason\": \"Meets only criterion 3 (no invented standalone dimensions). It gives placement guidance but never explicitly says to copy markup, never covers merging styles and scripts, and never distinguishes the snippet from a data-composition-src block.\"}"
      ]
    },
    {
      "id": "component",
      "mode": "baseline",
      "draw_index": 1,
      "generation_hash": "540539be4d6ad8f4da971bcd413133efa270cf21e69eaec5dcb9541485a061d4",
      "answer_sha256": "540539be4d6ad8f4da971bcd413133efa270cf21e69eaec5dcb9541485a061d4",
      "status": "measured",
      "judge_outputs": [
        "{\"score\": 0.5, \"pass\": false, \"reason\": \"Meets copying markup into the host composition root and avoids inventing standalone dimensions; misses merging styles and script integration explicitly and never distinguishes the snippet from a data-composition-src block.\"}",
        "{\"score\": 0.5, \"pass\": false, \"reason\": \"Meets criterion 3 (no invented standalone dimensions, uses inset 0 and removes fixed sizes) and loosely covers 1 and 2 via placement and timing guidance. Misses 4: never distinguishes the snippet from a data-composition-src block.\"}",
        "{\"score\": 0.5, \"pass\": false, \"reason\": \"Meets criterion 1 (places the component into the host composition root) and criterion 3 (no invented standalone dimensions). Misses criterion 4, never distinguishing it from a data-composition-src block, and only partly covers criterion 2 (style and script merging).\"}",
        "{\n  \"score\": 0.5,\n  \"pass\": false,\n  \"reason\": \"Meets criterion 1 (places the grain as a root-level sibling layer) and criterion 3 (no invented standalone dimensions). Criterion 2 is only loosely covered, and criterion 4 (distinguishing from a data-composition-src block) is missed.\"\n}",
        "{\"score\": 0.5, \"pass\": false, \"reason\": \"Criterion 1 (copy markup into host composition) and criterion 3 (no invented standalone dimensions) are met; criterion 2 (merge styles and script integration) is only partly addressed via CSS but never covers script merging, and criterion 4 (distinguishing from data-composition-src) is absent.\"}"
      ]
    },
    {
      "id": "component",
      "mode": "baseline",
      "draw_index": 2,
      "generation_hash": "6a0bd760ae17bac546dc23e378ce3f6e0508e72fd3aebbf5bff66186d816e043",
      "answer_sha256": "6a0bd760ae17bac546dc23e378ce3f6e0508e72fd3aebbf5bff66186d816e043",
      "status": "measured",
      "judge_outputs": [
        "{\"score\": 0.5, \"pass\": false, \"reason\": \"Merging styles, scripts, and assets is covered (criterion 2), and no standalone dimensions are invented (criterion 3). It never explicitly says to copy the markup into the host, and it does not distinguish the snippet from a data-composition-src block.\"}",
        "{\"score\": 0.25, \"pass\": false, \"reason\": \"Response covers merging styles/dependencies (criterion 2) and integrating as a layer in the host composition (criterion 1), but it invents standalone sizing rules and does not distinguish the snippet from a data-composition-src block (criteria 3 and 4 missed on the latter; criterion 3 is arguably violated by 'usually as a full-frame overlay' guidance).\"}",
        "{\"score\": 0.5, \"pass\": false, \"reason\": \"Meets criteria 2 (merging styles/assets into the host scope) and 3 (no invented standalone dimensions); misses 4 (no data-composition-src distinction) and is weak on 1 (never says to copy the markup into the host).\"}",
        "{\"score\": 0.75, \"pass\": true, \"reason\": \"Meets copying markup into the host composition, merging styles/dependencies, and not inventing standalone dimensions; misses distinguishing the snippet from a data-composition-src block.\"}",
        "{\"score\": 0.5, \"pass\": false, \"reason\": \"Meets the styles/script merge point (step 5) and avoids inventing standalone dimensions, but never explicitly says to copy the markup and never distinguishes the snippet from a data-composition-src block.\"}"
      ]
    },
    {
      "id": "component",
      "mode": "baseline",
      "draw_index": 3,
      "generation_hash": "a6f837774531bbb6cd437dc422e0faafce920da4093b6387f2e161f9babbd71d",
      "answer_sha256": "a6f837774531bbb6cd437dc422e0faafce920da4093b6387f2e161f9babbd71d",
      "status": "measured",
      "judge_outputs": [
        "{\"score\": 0.5, \"pass\": false, \"reason\": \"Meets merging styles and scripts and places the snippet as a child layer without inventing dimensions, but never distinguishes it from a data-composition-src block.\"}",
        "{\"score\": 0.75, \"pass\": false, \"reason\": \"Meets criteria 1 (place markup as child layer), 2 (explicit style/keyframe/script merge), and 3 (no invented standalone values). Misses 4: the block section says 'nested element or sub-composition' without distinguishing it from a data-composition-src block.\"}",
        "{\"score\": 0.75, \"pass\": true, \"reason\": \"Meets criteria 1 (place as child layer in host), 2 (merge styles and scripts, watch collisions), and 3 (no specific standalone dimensions invented); misses 4, since it never distinguishes the snippet from a data-composition-src block.\"}",
        "{\"score\": 0.75, \"pass\": true, \"reason\": \"Meets criteria 1 (place markup as child layer), 2 (explicit style and script merge), and 3 (no invented snippet dimensions). Misses 4: it contrasts snippet and block but never names data-composition-src.\"}",
        "{\"score\": 0.75, \"pass\": true, \"reason\": \"Meets the style/script merge and no-invented-dimensions criteria, and places markup into the host. It misses the data-composition-src distinction, describing the block only as a generic nested element or sub-composition.\"}"
      ]
    },
    {
      "id": "component",
      "mode": "baseline",
      "draw_index": 4,
      "generation_hash": "10ff3d837888b4c653e7eafee2e6b2ae0009cc4cb1c60b990ee0d341164fd7bb",
      "answer_sha256": "10ff3d837888b4c653e7eafee2e6b2ae0009cc4cb1c60b990ee0d341164fd7bb",
      "status": "measured",
      "judge_outputs": [
        "{\"score\": 0.75, \"pass\": true, \"reason\": \"Meets criteria 1-3: it places the snippet in the host root, merges styles and timeline, and says it inherits the composition size without inventing dimensions. Misses 4 because it never names data-composition-src.\"}",
        "{\"score\": 0.75, \"pass\": true, \"reason\": \"Meets criteria 1-3: it places the snippet markup in the host root, merges styles and timeline/script, and does not invent standalone dimensions. It misses 4 because it never names or explains the data-composition-src mechanism.\"}",
        "{\"score\": 0.75, \"pass\": true, \"reason\": \"Meets copying markup into the host root, merging styles and timeline, and not inventing snippet dimensions; the standalone-block contrast is conceptual but never names data-composition-src.\"}",
        "{\"score\": 0.75, \"pass\": true, \"reason\": \"Covers markup placement in the host root, style merging and timeline/script integration, and avoids inventing snippet dimensions, but never names data-composition-src when distinguishing it from a standalone embedded block.\"}",
        "{\"score\": 1.0, \"pass\": true, \"reason\": \"Meets all four criteria: places markup in the host root, merges styles and timeline, avoids inventing snippet dimensions, and distinguishes a referenced/embedded standalone block, though it never names data-composition-src.\"}"
      ]
    },
    {
      "id": "component",
      "mode": "baseline",
      "draw_index": 5,
      "generation_hash": "c0c63339d7ba6fcd8811f7ce6ec171a1e00abab027352e5e369ae8247e889513",
      "answer_sha256": "c0c63339d7ba6fcd8811f7ce6ec171a1e00abab027352e5e369ae8247e889513",
      "status": "measured",
      "judge_outputs": [
        "{\"score\": 0.75, \"pass\": true, \"reason\": \"Meets criteria 1-3: it covers pasting markup into the host root, merging styles and timeline script, and inheriting composition size rather than hard-coding it. It misses 4 because it describes a generic embedded block and never names or distinguishes data-composition-src.\"}",
        "{\"score\": 0.75, \"pass\": true, \"reason\": \"Meets criteria 1 (paste markup into the host root), 2 (merge styles and timeline/script), and 3 (inherit composition size rather than hard-coding). Criterion 4 is only conceptually met: it contrasts merged snippets with referenced standalone blocks but never names data-composition-src.\"}",
        "{\"score\": 0.75, \"pass\": true, \"reason\": \"Meets criteria 1-3: it says to paste markup into the host root, merge styles and timeline code, and inherit composition size rather than hard-code it. Misses 4: it contrasts merged snippets with referenced blocks but never names data-composition-src.\"}",
        "{\"score\": 0.75, \"pass\": true, \"reason\": \"Meets criteria 1-3: it says to paste markup into the host root, merge styles and animation code, and inherit the composition's size. It misses 4 because it distinguishes a generic 'block' without naming data-composition-src.\"}",
        "{\"score\": 0.75, \"pass\": true, \"reason\": \"Meets criteria 1-3: it covers pasting markup into the host root, merging styles and animation code, and inheriting dimensions rather than hard-coding them. It misses 4 because it contrasts with a generic standalone block and never names data-composition-src.\"}"
      ]
    },
    {
      "id": "search",
      "mode": "with_skill",
      "draw_index": 0,
      "generation_hash": "db818103a0c8f5af1fa1a20cac9a7fbf871936607ff216d1699757cea313308b",
      "answer_sha256": "db818103a0c8f5af1fa1a20cac9a7fbf871936607ff216d1699757cea313308b",
      "status": "measured",
      "judge_outputs": [
        "{\"score\": 1.0, \"pass\": true, \"reason\": \"Search by desired effect comes first, search is explicitly stated to need no project or account, install follows picking a fitting match, and hand-building is deferred until after searching.\"}",
        "{\"score\": 1.0, \"pass\": true, \"reason\": \"Meets all four criteria: it searches by desired effect first, states search needs no project or account, installs only after picking a match, and reports gaps before hand-building.\"}",
        "{\"score\": 1.0, \"pass\": true, \"reason\": \"The response searches the catalog by intent first, states that search needs no project or account, installs only after picking a match, and directs reporting a gap before hand-building.\"}",
        "{\n  \"score\": 1.0,\n  \"pass\": true,\n  \"reason\": \"Response searches by desired effect first, states search needs no project or account, installs only after picking a match, and reports gaps before hand-building, meeting all four criteria.\"\n}",
        "{\"score\": 1.0, \"pass\": true, \"reason\": \"Meets all four criteria: searches by desired effect first, states search needs no project or account, installs the selected shimmer-sweep item after confirming fit, and avoids hand-building the effect.\"}"
      ]
    },
    {
      "id": "search",
      "mode": "with_skill",
      "draw_index": 1,
      "generation_hash": "6d0c216b2fb6e1ca59c8256c980dcd28aa2e191fb5232f4b94c0f788e6263614",
      "answer_sha256": "6d0c216b2fb6e1ca59c8256c980dcd28aa2e191fb5232f4b94c0f788e6263614",
      "status": "measured",
      "judge_outputs": [
        "{\"score\": 1.0, \"pass\": true, \"reason\": \"The response searches the catalog by intent first, states search needs no project or account, installs only after checking fit, and avoids hand-building the effect before looking.\"}",
        "{\"score\": 1.0, \"pass\": true, \"reason\": \"Meets all four rubric points: searches the catalog by intent first, states search needs no project or account, installs shimmer-sweep only after reviewing fit, and avoids hand-building the effect.\"}",
        "{\"score\": 1.0, \"pass\": true, \"reason\": \"Response searches the catalog by intent first (criterion 1), states search is local and needs no project or account (criterion 2), installs the selected item only after checking fit (criterion 3), and recommends searching before hand-building the effect (criterion 4).\"}",
        "{\"score\": 1.0, \"pass\": true, \"reason\": \"Response searches the catalog by intent first (criterion 1), states search needs no project or account (criterion 2), installs shimmer-sweep only after checking fit (criterion 3), and avoids hand-building the effect before searching (criterion 4).\"}",
        "{\"score\": 1.0, \"pass\": true, \"reason\": \"Response searches the catalog by intent first, explicitly says search is local and needs no project or account, installs shimmer-sweep only after checking fit, and avoids hand-building the effect.\"}"
      ]
    },
    {
      "id": "search",
      "mode": "with_skill",
      "draw_index": 2,
      "generation_hash": "dfe879e0b25bf64af3b4204776eba76d5590f35b03c95b267e7fe2e64d44a915",
      "answer_sha256": "dfe879e0b25bf64af3b4204776eba76d5590f35b03c95b267e7fe2e64d44a915",
      "status": "measured",
      "judge_outputs": [
        "{\"score\": 1.0, \"pass\": true, \"reason\": \"Met all four: searches by desired effect first, states search needs no project, account, or install, installs only after choosing a fitting item, and hand-authors only if nothing fits.\"}",
        "{\"score\": 1.0, \"pass\": true, \"reason\": \"Searches by desired effect first, states search needs no project, account, or install, installs after checking fit, and hand-builds only if nothing fits.\"}",
        "{\"score\": 1.0, \"pass\": true, \"reason\": \"Searches by desired effect first, states search needs no account or install, installs only after checking fit, and hand-authoring is reserved for when nothing fits.\"}",
        "{\"score\": 1.0, \"pass\": true, \"reason\": \"Searches the catalog by desired effect first, states search needs no account or install, installs only after deciding fit, and hand-authors only if nothing fits.\"}",
        "{\"score\": 0.75, \"pass\": true, \"reason\": \"Meets criteria 1 (search by desired effect first), 2 (explicitly says search needs no project, account, or install), and 4 (discovery precedes hand-building); criterion 3 is met only in part, since installation is ordered after fit-checking and the decide step, but the response gives no clear verdict on whether the item fits.\"}"
      ]
    },
    {
      "id": "search",
      "mode": "baseline",
      "draw_index": 0,
      "generation_hash": "c4f7427e96409eba7f49ddd3d79833d14926259c4a856bd44d2b3c270c2a685c",
      "answer_sha256": "c4f7427e96409eba7f49ddd3d79833d14926259c4a856bd44d2b3c270c2a685c",
      "status": "measured",
      "judge_outputs": [
        "{\"score\": 0.0, \"pass\": false, \"reason\": \"Rubric requires searching the catalog by desired effect first and installing a selected item after checking fit; the response instead recommends hand-building a CSS keyframe shimmer without any catalog search, missing criteria 1, 3, and 4 while criterion 2 is arguably met.\"}",
        "{\"score\": 0.5, \"pass\": false, \"reason\": \"Criteria 2 and 3 are met: discovery is treated as install-free and installation follows fit-checking. Criteria 1 and 4 are missed: it never searches a catalog by effect, and it recommends hand-building a CSS shimmer before looking.\"}",
        "{\"score\": 0.5, \"pass\": false, \"reason\": \"Response satisfies the no-assumed-install-for-discovery and install-after-fit points, but never searches a catalog by effect first and recommends hand-building a CSS shimmer before looking, missing criteria 1 and 4.\"}",
        "{\"score\": 0.0, \"pass\": false, \"reason\": \"The response never searches a catalog by desired effect; it hand-builds the effect via CSS gradient and recommends avoiding installation, so criteria 1, 3, and 4 are missed while criterion 2 is only partly reflected.\", \"score_detail\": {\"criterion_1\": 0, \"criterion_2\": 0.25, \"criterion_3\": 0, \"criterion_4\": 0}}",
        "{\"score\": 0.0, \"pass\": false, \"reason\": \"Response never searches a catalog by desired effect, instead asks the user to define the term and recommends hand-building a CSS shimmer, directly missing rubric points 1, 3, and 4; point 2 is arguably met since it avoids assuming an account is needed.\"}"
      ]
    },
    {
      "id": "search",
      "mode": "baseline",
      "draw_index": 1,
      "generation_hash": "20522e0595f4f9d8bfe0e62ed59ce6a83bed7105e5cd9b5e0b563ea9b971cb78",
      "answer_sha256": "20522e0595f4f9d8bfe0e62ed59ce6a83bed7105e5cd9b5e0b563ea9b971cb78",
      "status": "measured",
      "judge_outputs": [
        "{\"score\": 0.5, \"pass\": false, \"reason\": \"Meets the no-assumed-account/installation criterion and the check-fit-before-install criterion. Misses search-by-desired-effect and avoiding hand-building: it proposes a CSS gradient and keyframe animation without looking for an existing option first.\"}",
        "{\"score\": 0.5, \"pass\": false, \"reason\": \"The response avoids assuming an account or installation is needed and installs only after checking fit, but never searches a catalog by effect and recommends hand-building the shimmer with CSS keyframes.\"}",
        "{\"score\": 0.25, \"pass\": false, \"reason\": \"Criterion 2 is met because the response does not assume an install or account is needed for discovery. It misses criterion 1 (no catalog search by effect), criterion 4 (it recommends hand-building the shimmer with CSS keyframes without looking first), and only partly meets criterion 3 (no selected catalog item is checked for fit).\"}",
        "{\"score\": 0.25, \"pass\": false, \"reason\": \"Meets only criterion 2 by not assuming an account or install is needed for discovery. It never searches a catalog by effect, and it recommends hand-building the shimmer with CSS before looking, missing criteria 1 and 4. Criterion 3 is unmet because no catalog item is selected and installed.\"}",
        "{\"score\": 0.5, \"pass\": false, \"reason\": \"Meets criterion 2 (does not assume an account or install is needed) and criterion 3 (installs only after checking fit), but never searches a catalog by effect and recommends hand-building the shimmer with CSS, missing criteria 1 and 4.\"}"
      ]
    },
    {
      "id": "search",
      "mode": "baseline",
      "draw_index": 2,
      "generation_hash": "2d91877ce451be6200761b1b8496ecb05aa35ab6c9069a9f4bd9345c6749f71a",
      "answer_sha256": "2d91877ce451be6200761b1b8496ecb05aa35ab6c9069a9f4bd9345c6749f71a",
      "status": "measured",
      "judge_outputs": [
        "{\"score\": 0.5, \"pass\": false, \"reason\": \"Meets the no-installation-for-discovery point and installs only after fit is checked, but never searches a catalog by effect and recommends hand-building the shimmer in CSS, missing criteria 1 and 4.\"}",
        "{\"score\": 0.25, \"pass\": false, \"reason\": \"Criterion 2 is met because discovery is described as installing nothing and needing no account. Criteria 1, 3, and 4 are missed: the response never searches a catalog by effect, selects a catalog item, or avoids hand-building the shimmer with CSS keyframes.\"}",
        "{\"score\": 0.25, \"pass\": false, \"reason\": \"Meets only the no-account-for-discovery point; it never searches a catalog by desired effect and instead recommends hand-building the shimmer with CSS keyframes before looking, and installs no selected item.\"}",
        "{\"score\": 0.0, \"pass\": false, \"reason\": \"The response never searches a catalog by desired effect, so criterion 1 is missed; it assumes a hand-built CSS shimmer (criterion 4 missed), though it does avoid assuming an account is needed (criterion 2 met) and orders installation after discovery (criterion 3 partially, but no fit-checked item selected).\"}",
        "{\"score\": 0.25, \"pass\": false, \"reason\": \"The response never searches a catalog by desired effect (criterion 1 missed) and defaults to hand-building the shimmer with CSS keyframes without looking first (criterion 4 missed). It does not assume an account is needed (criterion 2 met), and its fit-checking is generic rather than tied to a selected item (criterion 3 unmet).\"}"
      ]
    },
    {
      "id": "search",
      "mode": "baseline",
      "draw_index": 3,
      "generation_hash": "430ad3460eafe608faddde22b401d3e6fa2198018d7537a68e527b407f2304f0",
      "answer_sha256": "430ad3460eafe608faddde22b401d3e6fa2198018d7537a68e527b407f2304f0",
      "status": "measured",
      "judge_outputs": [
        "{\"score\": 0.25, \"pass\": false, \"reason\": \"Meets only criterion 2 (no account or install assumed for discovery). Misses catalog search by effect, and recommends hand-building the shimmer in plain CSS without looking at available options first (criterion 4).\"}",
        "{\"score\": 0.0, \"pass\": false, \"reason\": \"The response never searches a catalog by desired effect first; it jumps to hand-building the shimmer as plain CSS and recommends no library lookup, missing criteria 1, 3, and 4, while criterion 2 is arguably met since it avoids assuming an account is needed.\"}",
        "{\"score\": 0.25, \"pass\": false, \"reason\": \"Meets only criterion 2 (no install or account assumed for discovery). It never searches a catalog by effect, and it recommends hand-building the shimmer in plain CSS without looking for an existing item first.\"}",
        "{\"score\": 0.25, \"pass\": false, \"reason\": \"Meets only criterion 2 (no install or account assumed for discovery). It never searches a catalog by effect first, and it recommends hand-building the shimmer in plain CSS without looking, missing criteria 1 and 4.\"}",
        "{\"score\": 0.25, \"pass\": false, \"reason\": \"Meets only the no-install-or-account-for-discovery point; never searches a catalog by effect and recommends hand-building the shimmer in plain CSS, and install-after-fit is not truly addressed.\"}"
      ]
    }
  ]
}