[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6J8PCG4PWYSB1TPWF3E7XFS":3,"skill-same:01M6J8PCG4PWYSB1TPWF3E7XFS":115},{"skillNo":4,"name":5,"nameZh":6,"description":7,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":16,"categories":17,"keywords":23,"publishedAt":44,"linkOnly":45,"markdownContent":46,"markdownBody":47,"frontMatter":48,"refName":49,"commitSha":50,"skillDirectory":51,"forksCount":52,"repositoryHtmlUrl":53,"repositoryHomepageUrl":6,"ownerHtmlUrl":54,"ownerBlogUrl":55,"ownerDescription":56,"updatedAt":57,"install":58,"resources":71},"01M6J8PCG4PWYSB1TPWF3E7XFS","website-to-hyperframes",null,"Capture a website and create a HyperFrames video from it. Use when: (1) a user provides a URL and wants a video, (2) someone says \"capture this site\", \"turn this into a video\", \"make a promo from my site\", (3) the user wants a social ad, product tour, or any video based on an existing website, (4) the user shares a link and asks for any kind of video content. Even if the user just pastes a URL — this is the skill to use.","sgomez-dev\u002Fclaude-skills","sgomez-dev","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F81492002?v=4","01M6J7TFP3PR3PTGBAG3N9Z007","Santiago Gómez de la Torre Romero","01M6J7TFT704JY40NG1YE3V5JQ",1,"MIT","https:\u002F\u002Fgithub.com\u002Fsgomez-dev\u002Fclaude-skills\u002Fblob\u002Fmain\u002Fexternal\u002Fwebsite-to-hyperframes\u002FSKILL.md",[18],{"categoryNo":19,"categoryName":20,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000016","图像与多媒体","SCENARIO","使用场景",[24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43],"hyperframes","website to hyperframes","website","social","tour","Existing","for","my","kind","URL","ad","video content","link","create","use","capture","just","site","Video","product","2026-11-10 10:12:30",false,"---\nname: website-to-hyperframes\ndescription: |\n  Capture a website and create a HyperFrames video from it. Use when: (1) a user provides a URL and wants a video, (2) someone says \"capture this site\", \"turn this into a video\", \"make a promo from my site\", (3) the user wants a social ad, product tour, or any video based on an existing website, (4) the user shares a link and asks for any kind of video content. Even if the user just pastes a URL — this is the skill to use.\n---\n\n# Website to HyperFrames\n\nCapture a website, then produce a professional video from it.\n\nUsers say things like:\n\n- \"Capture https:\u002F\u002F... and make me a 25-second product launch video\"\n- \"Turn this website into a 15-second social ad for Instagram\"\n- \"Create a 30-second product tour from https:\u002F\u002F...\"\n\nThe workflow has 7 steps. Each produces an artifact that gates the next.\n\n---\n\n## Step 1: Capture & Understand\n\n**Read:** [references\u002Fstep-1-capture.md](references\u002Fstep-1-capture.md)\n\nRun the capture, read the extracted data, and build a working summary using the write-down-and-forget method.\n\n**Gate:** Print your site summary (name, top colors, fonts, key assets, one-sentence vibe).\n\n---\n\n## Step 2: Write DESIGN.md\n\n**Read:** [references\u002Fstep-2-design.md](references\u002Fstep-2-design.md)\n\nWrite 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.\n\n**Gate:** `DESIGN.md` exists in the project directory.\n\n---\n\n## Step 3: Write SCRIPT\n\n**Read:** [references\u002Fstep-3-script.md](references\u002Fstep-3-script.md)\n\nWrite the narration script. The story backbone. Scene durations come from the narration, not from guessing.\n\n**Gate:** `SCRIPT.md` exists in the project directory.\n\n---\n\n## Step 4: Write STORYBOARD\n\n**Read:** [references\u002Fstep-4-storyboard.md](references\u002Fstep-4-storyboard.md)\n\nWrite 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.\n\n**Gate:** `STORYBOARD.md` exists with beat-by-beat direction and an asset audit table.\n\n---\n\n## Step 5: Generate VO + Map Timing\n\n**Read:** [references\u002Fstep-5-vo.md](references\u002Fstep-5-vo.md)\n\nGenerate TTS audio, transcribe for word-level timestamps, and map timestamps to beats. Update STORYBOARD.md with real durations.\n\n**Gate:** `narration.wav` (or .mp3) + `transcript.json` exist. Beat timings in STORYBOARD.md updated.\n\n---\n\n## Step 6: Build Compositions\n\n**Read:** The `\u002Fhyperframes` skill (invoke it — every rule matters)\n**Read:** [references\u002Fstep-6-build.md](references\u002Fstep-6-build.md)\n\nBuild each composition following the storyboard. After each one: self-review for layout, asset placement, and animation quality.\n\n**Gate:** Every composition has been self-reviewed. No overlapping elements, no misplaced assets, no static images without motion.\n\n---\n\n## Step 7: Validate & Deliver\n\n**Read:** [references\u002Fstep-7-validate.md](references\u002Fstep-7-validate.md)\n\nLint, validate, preview. Create a HANDOFF.md for multi-session continuity.\n\n**Gate:** `npx hyperframes lint` and `npx hyperframes validate` pass with zero errors.\n\n---\n\n## Quick Reference\n\n### Video Types\n\n| Type                  | Duration | Beats | Narration              |\n| --------------------- | -------- | ----- | ---------------------- |\n| Social ad (IG\u002FTikTok) | 10-15s   | 3-4   | Optional hook sentence |\n| Product demo          | 30-60s   | 5-8   | Full narration         |\n| Feature announcement  | 15-30s   | 3-5   | Full narration         |\n| Brand reel            | 20-45s   | 4-6   | Optional, music focus  |\n| Launch teaser         | 10-20s   | 2-4   | Minimal, high energy   |\n\n### Format\n\n- **Landscape**: 1920x1080 (default)\n- **Portrait**: 1080x1920 (Instagram Stories, TikTok)\n- **Square**: 1080x1080 (Instagram feed)\n\n### Reference Files\n\n| File                                                    | When to read                                                                                                                                                   |\n| ------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| [step-1-capture.md](references\u002Fstep-1-capture.md)       | Step 1 — reading captured data                                                                                                                                 |\n| [step-2-design.md](references\u002Fstep-2-design.md)         | Step 2 — writing DESIGN.md                                                                                                                                     |\n| [step-3-script.md](references\u002Fstep-3-script.md)         | Step 3 — writing the narration script                                                                                                                          |\n| [step-4-storyboard.md](references\u002Fstep-4-storyboard.md) | Step 4 — per-beat creative direction                                                                                                                           |\n| [step-5-vo.md](references\u002Fstep-5-vo.md)                 | Step 5 — TTS, transcription, timing                                                                                                                            |\n| [step-6-build.md](references\u002Fstep-6-build.md)           | Step 6 — building compositions with self-review                                                                                                                |\n| [step-7-validate.md](references\u002Fstep-7-validate.md)     | Step 7 — lint, validate, preview, handoff                                                                                                                      |\n| [techniques.md](references\u002Ftechniques.md)               | Steps 4 & 6 — 10 visual techniques with code patterns (SVG drawing, Canvas 2D, 3D, typography, Lottie, video, typing, variable fonts, MotionPath, transitions) |\n","# Website to HyperFrames\n\nCapture a website, then produce a professional video from it.\n\nUsers say things like:\n\n- \"Capture https:\u002F\u002F... and make me a 25-second product launch video\"\n- \"Turn this website into a 15-second social ad for Instagram\"\n- \"Create a 30-second product tour from https:\u002F\u002F...\"\n\nThe workflow has 7 steps. Each produces an artifact that gates the next.\n\n---\n\n## Step 1: Capture & Understand\n\n**Read:** [references\u002Fstep-1-capture.md](references\u002Fstep-1-capture.md)\n\nRun the capture, read the extracted data, and build a working summary using the write-down-and-forget method.\n\n**Gate:** Print your site summary (name, top colors, fonts, key assets, one-sentence vibe).\n\n---\n\n## Step 2: Write DESIGN.md\n\n**Read:** [references\u002Fstep-2-design.md](references\u002Fstep-2-design.md)\n\nWrite 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.\n\n**Gate:** `DESIGN.md` exists in the project directory.\n\n---\n\n## Step 3: Write SCRIPT\n\n**Read:** [references\u002Fstep-3-script.md](references\u002Fstep-3-script.md)\n\nWrite the narration script. The story backbone. Scene durations come from the narration, not from guessing.\n\n**Gate:** `SCRIPT.md` exists in the project directory.\n\n---\n\n## Step 4: Write STORYBOARD\n\n**Read:** [references\u002Fstep-4-storyboard.md](references\u002Fstep-4-storyboard.md)\n\nWrite 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.\n\n**Gate:** `STORYBOARD.md` exists with beat-by-beat direction and an asset audit table.\n\n---\n\n## Step 5: Generate VO + Map Timing\n\n**Read:** [references\u002Fstep-5-vo.md](references\u002Fstep-5-vo.md)\n\nGenerate TTS audio, transcribe for word-level timestamps, and map timestamps to beats. Update STORYBOARD.md with real durations.\n\n**Gate:** `narration.wav` (or .mp3) + `transcript.json` exist. Beat timings in STORYBOARD.md updated.\n\n---\n\n## Step 6: Build Compositions\n\n**Read:** The `\u002Fhyperframes` skill (invoke it — every rule matters)\n**Read:** [references\u002Fstep-6-build.md](references\u002Fstep-6-build.md)\n\nBuild each composition following the storyboard. After each one: self-review for layout, asset placement, and animation quality.\n\n**Gate:** Every composition has been self-reviewed. No overlapping elements, no misplaced assets, no static images without motion.\n\n---\n\n## Step 7: Validate & Deliver\n\n**Read:** [references\u002Fstep-7-validate.md](references\u002Fstep-7-validate.md)\n\nLint, validate, preview. Create a HANDOFF.md for multi-session continuity.\n\n**Gate:** `npx hyperframes lint` and `npx hyperframes validate` pass with zero errors.\n\n---\n\n## Quick Reference\n\n### Video Types\n\n| Type                  | Duration | Beats | Narration              |\n| --------------------- | -------- | ----- | ---------------------- |\n| Social ad (IG\u002FTikTok) | 10-15s   | 3-4   | Optional hook sentence |\n| Product demo          | 30-60s   | 5-8   | Full narration         |\n| Feature announcement  | 15-30s   | 3-5   | Full narration         |\n| Brand reel            | 20-45s   | 4-6   | Optional, music focus  |\n| Launch teaser         | 10-20s   | 2-4   | Minimal, high energy   |\n\n### Format\n\n- **Landscape**: 1920x1080 (default)\n- **Portrait**: 1080x1920 (Instagram Stories, TikTok)\n- **Square**: 1080x1080 (Instagram feed)\n\n### Reference Files\n\n| File                                                    | When to read                                                                                                                                                   |\n| ------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| [step-1-capture.md](references\u002Fstep-1-capture.md)       | Step 1 — reading captured data                                                                                                                                 |\n| [step-2-design.md](references\u002Fstep-2-design.md)         | Step 2 — writing DESIGN.md                                                                                                                                     |\n| [step-3-script.md](references\u002Fstep-3-script.md)         | Step 3 — writing the narration script                                                                                                                          |\n| [step-4-storyboard.md](references\u002Fstep-4-storyboard.md) | Step 4 — per-beat creative direction                                                                                                                           |\n| [step-5-vo.md](references\u002Fstep-5-vo.md)                 | Step 5 — TTS, transcription, timing                                                                                                                            |\n| [step-6-build.md](references\u002Fstep-6-build.md)           | Step 6 — building compositions with self-review                                                                                                                |\n| [step-7-validate.md](references\u002Fstep-7-validate.md)     | Step 7 — lint, validate, preview, handoff                                                                                                                      |\n| [techniques.md](references\u002Ftechniques.md)               | Steps 4 & 6 — 10 visual techniques with code patterns (SVG drawing, Canvas 2D, 3D, typography, Lottie, video, typing, variable fonts, MotionPath, transitions) |\n",{"name":5,"description":7},"main","563fd9d0d01a7240bf22073090c9484e9070e8e8","external\u002Fwebsite-to-hyperframes",0,"https:\u002F\u002Fgithub.com\u002Fsgomez-dev\u002Fclaude-skills","https:\u002F\u002Fgithub.com\u002Fsgomez-dev","https:\u002F\u002Fsgomez.dev","\"Volnuratus non victus\"","2026-10-01 18:25:47",{"source":8,"skillName":5,"commands":59,"prompt":69,"zipAvailable":70},[60,63,66],{"tool":61,"command":62},"npx","npx skills add sgomez-dev\u002Fclaude-skills --skill website-to-hyperframes",{"tool":64,"command":65},"bunx","bunx skills add sgomez-dev\u002Fclaude-skills --skill website-to-hyperframes",{"tool":67,"command":68},"pnpm","pnpm dlx skills add sgomez-dev\u002Fclaude-skills --skill website-to-hyperframes","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002Fsgomez-dev\u002Fclaude-skills\u002Fblob\u002Fmain\u002Fexternal\u002Fwebsite-to-hyperframes\u002FSKILL.md",true,[72,77,83,87,91,95,99,103,107,111],{"path":73,"resourceType":73,"resourceTypeDesc":74,"sizeBytes":75,"sourceHtmlUrl":76},"LICENSE","许可证",1520,"https:\u002F\u002Fgithub.com\u002Fsgomez-dev\u002Fclaude-skills\u002Fblob\u002Fmain\u002Fexternal\u002Fwebsite-to-hyperframes\u002FLICENSE",{"path":78,"resourceType":79,"resourceTypeDesc":80,"sizeBytes":81,"sourceHtmlUrl":82},"references\u002Fstep-1-capture.md","REFERENCE","参考文档",3799,"https:\u002F\u002Fgithub.com\u002Fsgomez-dev\u002Fclaude-skills\u002Fblob\u002Fmain\u002Fexternal\u002Fwebsite-to-hyperframes\u002Freferences\u002Fstep-1-capture.md",{"path":84,"resourceType":79,"resourceTypeDesc":80,"sizeBytes":85,"sourceHtmlUrl":86},"references\u002Fstep-2-design.md",5833,"https:\u002F\u002Fgithub.com\u002Fsgomez-dev\u002Fclaude-skills\u002Fblob\u002Fmain\u002Fexternal\u002Fwebsite-to-hyperframes\u002Freferences\u002Fstep-2-design.md",{"path":88,"resourceType":79,"resourceTypeDesc":80,"sizeBytes":89,"sourceHtmlUrl":90},"references\u002Fstep-3-script.md",3882,"https:\u002F\u002Fgithub.com\u002Fsgomez-dev\u002Fclaude-skills\u002Fblob\u002Fmain\u002Fexternal\u002Fwebsite-to-hyperframes\u002Freferences\u002Fstep-3-script.md",{"path":92,"resourceType":79,"resourceTypeDesc":80,"sizeBytes":93,"sourceHtmlUrl":94},"references\u002Fstep-4-storyboard.md",12943,"https:\u002F\u002Fgithub.com\u002Fsgomez-dev\u002Fclaude-skills\u002Fblob\u002Fmain\u002Fexternal\u002Fwebsite-to-hyperframes\u002Freferences\u002Fstep-4-storyboard.md",{"path":96,"resourceType":79,"resourceTypeDesc":80,"sizeBytes":97,"sourceHtmlUrl":98},"references\u002Fstep-5-vo.md",2051,"https:\u002F\u002Fgithub.com\u002Fsgomez-dev\u002Fclaude-skills\u002Fblob\u002Fmain\u002Fexternal\u002Fwebsite-to-hyperframes\u002Freferences\u002Fstep-5-vo.md",{"path":100,"resourceType":79,"resourceTypeDesc":80,"sizeBytes":101,"sourceHtmlUrl":102},"references\u002Fstep-6-build.md",9370,"https:\u002F\u002Fgithub.com\u002Fsgomez-dev\u002Fclaude-skills\u002Fblob\u002Fmain\u002Fexternal\u002Fwebsite-to-hyperframes\u002Freferences\u002Fstep-6-build.md",{"path":104,"resourceType":79,"resourceTypeDesc":80,"sizeBytes":105,"sourceHtmlUrl":106},"references\u002Fstep-7-validate.md",4265,"https:\u002F\u002Fgithub.com\u002Fsgomez-dev\u002Fclaude-skills\u002Fblob\u002Fmain\u002Fexternal\u002Fwebsite-to-hyperframes\u002Freferences\u002Fstep-7-validate.md",{"path":108,"resourceType":79,"resourceTypeDesc":80,"sizeBytes":109,"sourceHtmlUrl":110},"references\u002Ftechniques.md",9081,"https:\u002F\u002Fgithub.com\u002Fsgomez-dev\u002Fclaude-skills\u002Fblob\u002Fmain\u002Fexternal\u002Fwebsite-to-hyperframes\u002Freferences\u002Ftechniques.md",{"path":112,"resourceType":79,"resourceTypeDesc":80,"sizeBytes":113,"sourceHtmlUrl":114},"UPSTREAM.md",841,"https:\u002F\u002Fgithub.com\u002Fsgomez-dev\u002Fclaude-skills\u002Fblob\u002Fmain\u002Fexternal\u002Fwebsite-to-hyperframes\u002FUPSTREAM.md",[116,127,135,145,157,166],{"skillNo":117,"name":118,"nameZh":6,"description":119,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":120,"categories":121,"keywords":122,"publishedAt":44},"01M6J8Q0WEP76PV381RJDTRTV4","template","YOUR_DESCRIPTION_HERE (shown in command palette, keep under 80 chars)","https:\u002F\u002Fgithub.com\u002Fsgomez-dev\u002Fclaude-skills\u002Fblob\u002Fmain\u002Ftemplate\u002FSKILL.md",[],[118,123,124,125,126],"command palette","command","palette","keep",{"skillNo":128,"name":129,"nameZh":6,"description":130,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":131,"categories":132,"keywords":133,"publishedAt":44},"01M6J8PY4KNE7SQP5BD2X1YMHJ","multi","Line one continues here.   Second sentence.","https:\u002F\u002Fgithub.com\u002Fsgomez-dev\u002Fclaude-skills\u002Fblob\u002Fmain\u002Fsite\u002Ftests\u002Ffixtures\u002Frepo\u002Fexternal\u002Fmulti\u002FSKILL.md",[],[129,134],"line",{"skillNo":136,"name":137,"nameZh":6,"description":138,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":139,"categories":140,"keywords":141,"publishedAt":44},"01M6J8PVS7AY0AWP36JRQ7T8S6","ffmpeg","FFmpeg recipes for video production.","https:\u002F\u002Fgithub.com\u002Fsgomez-dev\u002Fclaude-skills\u002Fblob\u002Fmain\u002Fsite\u002Ftests\u002Ffixtures\u002Frepo\u002Fexternal\u002Fffmpeg\u002FSKILL.md",[],[137,142,42,143,144,30],"Production","video production","recipes",{"skillNo":146,"name":147,"nameZh":6,"description":148,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":149,"categories":150,"keywords":154,"publishedAt":44},"01M6J8PS6NDT2VY6Y72QW3NGGH","secret-skill","Private, never published.","https:\u002F\u002Fgithub.com\u002Fsgomez-dev\u002Fclaude-skills\u002Fblob\u002Fmain\u002Fsite\u002Ftests\u002Ffixtures\u002Frepo\u002Fexternal\u002F.local\u002Fsecret-skill\u002FSKILL.md",[151],{"categoryNo":152,"categoryName":153,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000023","Skill与智能体开发",[155,156],"secret skill","never",{"skillNo":158,"name":159,"nameZh":6,"description":160,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":161,"categories":162,"keywords":163,"publishedAt":44},"01M6J8PQETD1FW6BWPPSWXFH5N","external-no-license","Has no license.","https:\u002F\u002Fgithub.com\u002Fsgomez-dev\u002Fclaude-skills\u002Fblob\u002Fmain\u002Fsite\u002Ftests\u002Ffixtures\u002Frepo\u002Fbroken\u002Fexternal-no-license\u002FSKILL.md",[],[164,165],"license","external no license",{"skillNo":167,"name":168,"nameZh":6,"description":169,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":170,"categories":171,"keywords":183,"publishedAt":44},"01M6J8PJ5XGMZZZZGECEDHN13J","write-swift","How to write modern Swift well — modeling with value types, Swift 6 data-race safety and approachable concurrency (@concurrent, main-actor-by-default, actors, task groups), protocols and generics (some vs any), API design, performance and ARC, Swift Testing, macros, and the modern language features agents don't know about yet. Use when writing, reviewing, or migrating Swift, or when a concurrency error, a hang, a data race, a retain cycle, or a performance problem needs fixing.","https:\u002F\u002Fgithub.com\u002Fsgomez-dev\u002Fclaude-skills\u002Fblob\u002Fmain\u002Fexternal\u002Fwrite-swift\u002FSKILL.md",[172,175,178],{"categoryNo":173,"categoryName":174,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000008","测试与质量",{"categoryNo":176,"categoryName":177,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000015","视觉设计",{"categoryNo":179,"categoryName":180,"taxonomyType":181,"taxonomyTypeDesc":182},"01JBSEEDCAT000000000000030","开发工程师","PROFESSION","适用职业",[184,185,186,187,188,189,190,191,192,193,194,195,49,196,197,198,199,200,201,202],"swift","write","write swift","features","retain","testing","types","error","how to","problem","modeling","cycle","default","how","api","concurrency","performance","writing","design"]