website-to-hyperframes — independently scanned and version-tracked by SaferSkills.
SaferSkills independently audited website-to-hyperframes (Agent Skill) and scored it 100/100 (green). The audit ran 55 deterministic rules across Security, Supply Chain, Maintenance, Transparency, and Community; it found 0 high-severity and 0 lower-severity findings. The full rule-by-rule trace and per-finding evidence are below. Free, methodology-open.
Findings & checks · 0 flagged
Every scanned point with the score it earned and what moved between them.
First recorded scan — no prior version to compare against.
The primary manifest — the file an agent reads to learn what this artifact does.
Capture a website, then produce a professional video from it.
Users say things like:
The workflow has 7 steps. Each produces an artifact that gates the next.
Read: references/step-1-capture.md
Run the capture, read the extracted data, and build a working summary using the write-down-and-forget method.
Gate: Print your site summary (name, top colors, fonts, key assets, one-sentence vibe).
Read: references/step-2-design.md
Write a simple brand reference for the captured website. 6 sections, ~90 lines. This is a cheat sheet, not the creative plan — that comes in Step 4.
Gate: DESIGN.md exists in the project directory.
Read: references/step-3-script.md
Write the narration script. The story backbone. Scene durations come from the narration, not from guessing.
Gate: SCRIPT.md exists in the project directory.
Read: references/step-4-storyboard.md
Write per-beat creative direction: mood, camera, animations, transitions, assets, depth layers, SFX. This is the creative north star — the document the engineer follows to build each composition.
Gate: STORYBOARD.md exists with beat-by-beat direction and an asset audit table.
Read: references/step-5-vo.md
Generate TTS audio, transcribe for word-level timestamps, and map timestamps to beats. Update STORYBOARD.md with real durations.
Gate: narration.wav (or .mp3) + transcript.json exist. Beat timings in STORYBOARD.md updated.
Read: The hyperframes skill (load it — every rule matters) Read: references/step-6-build.md
Build each composition following the storyboard. After each one: self-review for layout, asset placement, and animation quality.
Gate: Every composition has been self-reviewed. No overlapping elements, no misplaced assets, no static images without motion.
Read: references/step-7-validate.md
Lint, validate, snapshot, preview. Deliver the localhost Studio project URL (http://localhost:<port>/#project/<project-name>) to the user first — only render to MP4 on explicit request. Do not treat index.html as the project handoff link; it is source-code context only.
Gate: npx hyperframes lint and npx hyperframes validate pass with zero errors, and the final response includes the active Studio project URL.
| Type | Duration | Beats | Narration |
|---|---|---|---|
| Social ad (IG/TikTok) | 10-15s | 3-4 | Optional hook sentence |
| Product demo | 30-60s | 5-8 | Full narration |
| Feature announcement | 15-30s | 3-5 | Full narration |
| Brand reel | 20-45s | 4-6 | Optional, music focus |
| Launch teaser | 10-20s | 2-4 | Minimal, high energy |
| File | When to read |
|---|---|
| step-1-capture.md | Step 1 — reading captured data |
| step-2-design.md | Step 2 — writing DESIGN.md |
| step-3-script.md | Step 3 — writing the narration script |
| step-4-storyboard.md | Step 4 — per-beat creative direction |
| step-5-vo.md | Step 5 — TTS, transcription, timing |
| step-6-build.md | Step 6 — building compositions with self-review |
| step-7-validate.md | Step 7 — lint, validate, snapshot, preview |
| techniques.md | Steps 4 & 6 — 11 visual techniques with code patterns (SVG drawing, Canvas 2D, 3D, typography, Lottie, video, typing, variable fonts, MotionPath, transitions, audio-reactive) |
~30 seconds. Free. No account. Every finding cites a rule and a line of evidence.