ukimsanov
92a5ef419b
Capture improvements:
- Font weights via document.fonts API + DOM sampling (variable font detection)
- Section background-image extraction (no more false #FFFFFF on hero photos)
- Detected libraries surfaced in CLAUDE.md brand summary
- Structured visible-text.txt with [tag] prefixes, cookie/nav noise filtered
- tokens.json cleaned: removed images/paragraphs/icons (duplicated elsewhere),
filtered sections to heading-only, trimmed cssVariables to design-relevant
- Removed redundant scroll pass in htmlExtractor (2-5s faster per capture)
- Font cap at 20 families, Placeholder/Fallback fonts filtered
CLAUDE.md rewrite:
- Removed prescriptive tone ("use exact strings" → "rephrase freely")
- Removed fluff sections (How to Create, DESIGN.md warning, Example Prompts,
Source Patterns)
- asset-descriptions.md promoted to first data row
- Removed assets-catalog.json from inventory
Skill fixes:
- Dead shader refs → point to packages/shader-transitions/README.md
- Google Fonts import in techniques.md → local @font-face placeholder
- Added Stripe DESIGN.md as light-brand example
- Removed HANDOFF.md generation from step-7
- Updated step-1 for new font weight + visible-text formats
3.2 KiB
Step 7: Validate & Deliver
Lint + Validate
Run in sequence. Fix all errors before proceeding to the next command.
npx hyperframes lint
npx hyperframes validate
lint checks HTML structure statically — missing attributes, timeline registration, tween conflicts, CSS transform + GSAP conflicts (including inline styles).
validate loads the composition in headless Chrome and catches runtime JS errors, missing assets, and failed network requests.
Visual Verification (snapshot)
After lint and validate pass, capture snapshot frames to SEE your own output:
npx hyperframes snapshot <project-dir> --at <beat-midpoints>
If the snapshot command isn't available, fall back to:
npx tsx packages/cli/src/cli.ts snapshot <project-dir> --at <beat-midpoints>
Calculate the midpoint of each beat from your STORYBOARD.md timings. For a 4-beat video with beats at 0-5.8s, 5.8-15.0s, 15.0-22.5s, 22.5-25.3s:
npx hyperframes snapshot <project-dir> --at 2.9,10.4,18.7,23.9
This renders one frame per beat at the moment when content is most visible. Use timestamps where the most content is on screen — usually 60-70% into each beat, after entrances finish but before exits start.
View every snapshot image carefully. Don't glance and move on. For each frame, check:
Visibility:
- Is there visible content? All-white or all-black frames mean compositions aren't rendering.
- Can you read ALL text? White text on white/light background is invisible. Dark text on dark background is invisible. Every text element needs contrast against what's directly behind it.
- Are images and assets showing? Empty space where an image should be means a path issue or missing file.
Positioning and layout:
- Do background images fill the entire frame? If an image only covers half the screen, the
object-fit,width,height, or position values are wrong. - Are elements where the storyboard says they should be? Compare the snapshot to the beat description.
- Is there too much empty/dead space? If more than 40% of the frame is a flat solid color with nothing on it, the composition is sparse.
- Are elements overlapping incorrectly? Text over text, or content bleeding off the edges?
Visual quality:
- Are overlays too heavy? If a background image is barely visible through a dark overlay, reduce the overlay opacity.
- Is the visual hierarchy clear? One dominant element per frame, supporting elements secondary.
- Do the colors match DESIGN.md? Check actual rendered colors against what was planned.
Code vs. rendered verification:
- For each beat, check: does the snapshot show the assets you referenced in the HTML? If a composition has
<img src="...wave.png">but the snapshot shows no wave — the image isn't loading, the path is wrong, or it's hidden behind another element. - If a snapshot shows nothing at a timestamp, try a slightly different time (1-2 seconds later). Compositions may still be in entrance animations.
- The snapshot command is fast — run it multiple times at different timestamps if needed.
If any frame has issues, go back to Step 6 and fix that composition before proceeding.
Preview
npx hyperframes preview
Open the studio in a browser. Scrub through every beat.