[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-80184":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":9,"language":10,"languages":9,"totalLinesOfCode":9,"stars":11,"forks":12,"watchers":13,"openIssues":14,"contributorsCount":14,"subscribersCount":14,"size":14,"stars1d":14,"stars7d":15,"stars30d":16,"stars90d":14,"forks30d":14,"starsTrendScore":14,"compositeScore":17,"rankGlobal":9,"rankLanguage":9,"license":18,"archived":19,"fork":19,"defaultBranch":20,"hasWiki":19,"hasPages":19,"topics":21,"createdAt":9,"pushedAt":9,"updatedAt":22,"readmeContent":23,"aiSummary":24,"trendingCount":14,"starSnapshotCount":14,"syncStatus":25,"lastSyncTime":26,"discoverSource":27},80184,"remotion-ad-video-skill","leosssvip-dot\u002Fremotion-ad-video-skill","leosssvip-dot","Create Remotion ad video projects from a URL with an AI coding agent, no video-generation AI required.",null,"JavaScript",92,11,85,0,1,9,3.24,"MIT License",false,"main",[],"2026-06-12 02:03:59","# remotion-ad-video-skill\n\n[中文说明](README.zh-CN.md)\n\nCreate editable ad video projects from a URL with an AI coding agent. The skill\nplans the ad, then renders with either [Remotion](https:\u002F\u002Fgithub.com\u002Fremotion-dev\u002Fremotion)\nor [Hyperframes](https:\u002F\u002Fgithub.com\u002Fheygen-com\u002Fhyperframes). No video-generation AI required.\n\nRemotion is the React\u002FTS path. Hyperframes is the HTML\u002FCSS\u002FGSAP path. The skill\nauto-selects the renderer from explicit user choice, existing project stack, and\nlocal availability, then records the reason in `ad-brief.json`.\n\nThis is an agent-agnostic workflow: any coding agent that can read files and run\nNode scripts can use it.\n\n## Demo Video\n\n\nhttps:\u002F\u002Fgithub.com\u002Fuser-attachments\u002Fassets\u002F56fd55e5-af66-4737-b12b-88034d1fad52\n\n\nhttps:\u002F\u002Fgithub.com\u002Fuser-attachments\u002Fassets\u002Fd39807fa-ffc4-4229-a98d-bb11738d747c\n\nhttps:\u002F\u002Fgithub.com\u002Fuser-attachments\u002Fassets\u002Fd93f65f0-cb47-47b5-a8d6-a20be31c0553\n\nhttps:\u002F\u002Fgithub.com\u002Fuser-attachments\u002Fassets\u002F5dbe2ade-fe7f-419f-8349-d73045320cd2\n\nhttps:\u002F\u002Fgithub.com\u002Fuser-attachments\u002Fassets\u002F8e3605dc-f776-4f62-b763-f618f6d7f8d8\n\n## Why This Exists\n\nMost AI video workflows send a prompt to a video model and wait. This skill\ntakes a different path:\n\n```text\nURL -> source classification -> ad-brief.json -> assets -> storyboard -> render-engine code -> draft video\n```\n\nThat makes the output editable, repeatable, brand-safe, and testable in code.\nIt is designed for ads where the product, CTA, claims, format, and asset rights\nmatter.\n\n## Features\n\n- URL-to-ad workflow for ecommerce products, mobile games, social\u002Fcontent apps,\n  SaaS\u002FAPI products, local services, and generic mobile apps.\n- Mandatory `ad-brief.json` contract so source type, creative route, format,\n  render engine, render-engine reason, audio mode, asset requirements,\n  assumptions, and blockers are explicit before storyboard or code.\n- Link-adapted preflight choices for output format and creative route.\n- Audible generated SFX are used by default for draft ads unless you choose a\n  silent-safe output; sound is not a required preflight question by default.\n- Creative QA pushes bold ad layouts: poster-scale hooks, one dominant visual,\n  aggressive crops, and lower text density.\n- Ecommerce asset harvester with blocked-page detection and a fail-closed rule:\n  if the product image cannot be confidently harvested, stop and request user\n  assets.\n- Fast Remotion lab for low-resolution stills, preview MP4, half-size draft\n  MP4, and explicit full-size final render.\n- Hyperframes compatibility with an HTML starter template, `variables.json`,\n  and `npx hyperframes lint\u002Finspect\u002Fpreview\u002Frender` QA flow.\n- Validation script for checking the skill package structure and key workflow\n  contracts.\n- Synthetic URL demo showing URL to Remotion ad video without third-party media.\n\n## Repository Layout\n\n```text\nskills\u002Fremotion-ad-video\u002F\n  SKILL.md                         Main agent skill entrypoint\n  agents\u002Fopenai.yaml               Optional OpenAI\u002FCodex listing metadata\n  references\u002F                      Workflow contracts and category playbooks\n  assets\u002Fremotion-template\u002F        Reusable Remotion starter project\n  assets\u002Fhyperframes-template\u002F     Reusable Hyperframes HTML starter project\n  scripts\u002Fbuild_asset_manifest.mjs Skill-local asset manifest helper\n\nscripts\u002F\n  classify-ad-source.mjs           URL\u002Fsource classifier and ad-brief generator\n  create-open-source-snapshot.mjs  Allowlisted sanitized publish snapshot\n  harvest-ecommerce-assets.mjs     Ecommerce product image harvester\n  fast-ad-lab.mjs                  Shared Remotion draft render runner\n  validate-skill.mjs               Local structure\u002Fworkflow validator\n\nexamples\u002Fsynthetic-url-ad\u002F\n  ad-brief.json                    Fake URL brief, safe to publish\n  src\u002F                             CSS-only Remotion demo, no external media\n```\n\n## Requirements\n\n- Node.js 20+\n- npm or another Node package manager\n- Chrome or Chromium for browser-backed ecommerce harvesting\n- For Remotion output: Remotion dependencies installed in the active project\n  and a valid Remotion license for the intended commercial use\n- For Hyperframes output: Node.js 22+ and FFmpeg for `npx hyperframes`\n- Rights-cleared product images, logos, music, SFX, voiceover, and claims for\n  production ads\n\n## Agent Compatibility\n\nThe workflow is generic and can be used by any coding agent that can read local\nfiles and run Node scripts.\n\n- Codex \u002F OpenAI-compatible skill loaders can install `skills\u002Fremotion-ad-video\u002F`\n  directly.\n- Claude Code, Cursor, Windsurf, or other agents can load\n  `skills\u002Fremotion-ad-video\u002FSKILL.md` as the playbook and use the scripts in\n  `scripts\u002F`.\n- The deterministic parts are plain Node scripts plus Remotion and Hyperframes\n  templates; they are not tied to one agent runtime.\n\n## Install With Your AI Agent\n\nYou do not need to install this manually. Open your coding agent and ask it to\ninstall the skill for you.\n\nCopy this prompt:\n\n```text\nInstall the remotion-ad-video skill from this repository into my available\nskills directory. Use a symlink if my agent supports it; otherwise copy\nskills\u002Fremotion-ad-video. After installing, tell me how to reload or restart the\nagent so the skill becomes available.\n```\n\nFor Codex\u002FOpenAI-compatible agents, the agent should install\n`skills\u002Fremotion-ad-video\u002F` into the local skills directory, then ask you to\nreload the skill list.\n\n## Quick Start\n\nUse it from your AI agent. Give the agent a URL and ask it to create an ad\nvideo project:\n\n```text\nUse the remotion-ad-video skill to create a 15s ad video for this product:\nhttps:\u002F\u002Fexample.com\u002Fproducts\u002Ffocus-lamp\n```\n\nOr with the OpenAI\u002FCodex skill trigger:\n\n```text\nUse $remotion-ad-video to create a 15s vertical ad video for:\nhttps:\u002F\u002Fexample.com\u002Fproducts\u002Ffocus-lamp\n```\n\nThe agent should:\n\n1. Classify the URL and create `ad-brief.json`.\n2. Ask the two required creative preflight choices by default.\n   If the agent supports selectable UI, it should use choices for size\n   and creative route; otherwise it should ask only those same two options in\n   text before any optional follow-up questions. Audio defaults to synced SFX.\n3. Harvest or request usable assets.\n4. Propose ad concepts and pick the strongest route.\n5. Create or update the selected render project. The agent chooses by explicit\n   user choice, existing project stack, then local renderer availability.\n6. Run the matching render-engine QA before any final MP4.\n7. Report rights, asset, and claim gaps.\n\nFor normal use, you should let the agent run the scripts, create the render\nproject, and render the draft. You do not need to run validation commands.\n\n## Renderer Usage\n\nDefault auto-selection:\n\n1. Explicit user choice.\n2. Existing target project stack.\n3. Local renderer availability.\n4. Ask when both engines are available; recommend installing one when neither\n   is available.\n\nUse the remotion-ad-video skill with auto selection:\n\n```text\nUse $remotion-ad-video to create a 15s vertical ad for:\nhttps:\u002F\u002Fexample.com\u002Fproducts\u002Ffocus-lamp\n```\n\nForce Remotion:\n\n```text\nUse $remotion-ad-video to create a 15s vertical Remotion ad for:\nhttps:\u002F\u002Fexample.com\u002Fproducts\u002Ffocus-lamp\n```\n\nForce Hyperframes:\n\n```text\nUse $remotion-ad-video to create a 15s vertical Hyperframes ad for:\nhttps:\u002F\u002Fexample.com\u002Fproducts\u002Ffocus-lamp\n```\n\nRemotion output uses `assets\u002Fremotion-template\u002F`, `src\u002Fdefault-props.json`, and:\n\n```bash\nnpm run typecheck\nnpm run still\nnpm run render\n```\n\nHyperframes output uses `assets\u002Fhyperframes-template\u002F`, `variables.json`, and:\n\n```bash\nnpx hyperframes lint\nnpx hyperframes inspect --samples 12\nnpx hyperframes preview\nnpx hyperframes render --variables-file .\u002Fvariables.json --quality draft\n```\n\n## Synthetic URL Demo\n\nThe repository includes a safe demo at `examples\u002Fsynthetic-url-ad\u002F`.\n\nIt starts from a fake product URL:\n\n```text\nhttps:\u002F\u002Fexample.com\u002Fproducts\u002Ffocus-lamp\n```\n\nThe demo includes:\n\n- `ad-brief.json` with the inferred ecommerce ad brief.\n- `storyboard.md` with a 15s structure.\n- `src\u002F` with a CSS-only Remotion ad video.\n- No third-party brand assets.\n- No generated-video AI output.\n\nAsk your agent to run it:\n\n```text\nUse the remotion-ad-video skill to run the synthetic URL demo. Install any local\ndependencies needed for examples\u002Fsynthetic-url-ad, render one still frame first,\nthen render the demo video if the still looks correct.\n```\n\n## Fast Render Workflow\n\nWhen you want faster iteration, ask the agent to use the fast render workflow.\nThe important rule is simple:\n\n1. Render low-resolution still frames first.\n2. Render a low-resolution preview only if motion timing needs review.\n3. Render a half-size draft MP4 for normal review.\n4. Render full-size output only after you approve the draft.\n\nCopy this prompt:\n\n```text\nUse the fast Remotion ad workflow: render low-resolution stills first, then a\nhalf-size draft MP4 only if the stills are correct. Do not render full-size video\nuntil I approve the draft.\n```\n\n## Recommended Agent Prompt\n\n```text\nUse $remotion-ad-video to turn this product or app link into a 15s ad.\nCreate ad-brief.json first, ask the two required preflight choices,\nharvest usable assets, propose three concepts, implement the strongest one in\nRemotion, render low-resolution stills before any MP4, and report rights or\nasset gaps.\n```\n\nIf you want a no-question speed run, say so explicitly. The agent can then use\ninferred defaults, but it must still write them into `ad-brief.json`.\n\n## Output Artifacts\n\nA normal ad build should produce:\n\n- `ad-brief.json`: source type, goal, CTA, creative route, format,\n  render engine, render-engine reason, audio mode, assumptions, unresolved\n  questions, and blockers.\n- `public\u002F\u003Cbrand>\u002F`: approved or harvested source assets.\n- `src\u002Fdefault-props.json`: Remotion props for scenes, dimensions, CTA, assets,\n- `src\u002Fdefault-props.json` for Remotion, or `variables.json` for Hyperframes:\n  scenes, dimensions, CTA, assets, claims, and audio settings.\n- Draft stills under `examples\u002F\u003Cad>\u002Fout\u002Fdraft\u002F`.\n- Optional preview, draft MP4, and final MP4 under `examples\u002F\u003Cad>\u002Fout\u002F`.\n\n## Safety And Rights\n\n- Do not imply this project grants rights to third-party product photos,\n  screenshots, logos, music, voices, SFX, reviews, or store assets.\n- Do not render unverified numeric claims, regulated claims, customer data,\n  private URLs, API keys, tokens, or internal payloads.\n- If ecommerce crawling is blocked or the main product image is not credible,\n  stop and request user-provided product images.\n- Drafts include generated SFX by default. Music, voiceover, or special sound\n  assets still need clear usage rights when requested.\n- Confirm Remotion licensing separately for commercial rendering and deployment.\n  For Hyperframes, confirm the project can run Node.js 22+ and FFmpeg.\n\n## Maintainer Checks\n\nThese commands are for maintainers and contributors, not normal skill users.\n\nRun before publishing or opening a pull request:\n\n```bash\nnpm run validate\n```\n\nCreate a sanitized release snapshot:\n\n```bash\nnpm run snapshot\n```\n\nOptional smoke tests:\n\n```bash\nnode scripts\u002Fclassify-ad-source.mjs \\\n  \"https:\u002F\u002Fplay.google.com\u002Fstore\u002Fapps\u002Fdetails?id=com.king.candycrushsaga\" \\\n  --title \"Candy Crush Saga\" \\\n  --brief-out \u002Ftmp\u002Fcandy-ad-brief.json\n\nnode scripts\u002Ffast-ad-lab.mjs stills examples\u002Fexample-ad --frames 30,150 --scale 0.25\n```\n\n## Maintainer Release Checklist\n\nThis checklist is for maintainers preparing a public release. Normal users do\nnot need it.\n\n- Create a sanitized snapshot instead of uploading the working directory:\n\n```bash\nnode scripts\u002Fcreate-open-source-snapshot.mjs\n```\n\nThe snapshot is written to `dist\u002Fopen-source-snapshot\u002F` and intentionally\nexcludes `.remotion\u002F`, `node_modules\u002F`, render outputs, harvested media, local\ntask records, env files, and unreviewed examples. The reviewed synthetic demo is\nincluded.\n\n- Choose and add a `LICENSE` file before publishing. This repository does not\n  choose one for you.\n- Remove or ignore `node_modules`, Remotion `out` folders, caches, draft MP4s,\n  and any generated screenshots.\n- Review `examples\u002F*\u002Fpublic\u002F` before publishing; the default `.gitignore`\n  excludes it because it may contain harvested or generated media.\n- Do not publish local agent task records such as `docs\u002Ftasks\u002F` or\n  `docs\u002FPROGRESS.md` unless they have been reviewed and sanitized.\n- Remove third-party scraped media unless you have redistribution rights.\n- Replace private product links, customer names, tokens, local absolute paths,\n  and one-time IDs in examples or docs.\n- Keep only examples that are either fully synthetic or explicitly licensed for\n  redistribution.\n- Run the validation commands above.\n- Tag the first release as pre-1.0 if the API and workflow may still change.\n\n## Limitations\n\n- This is a skill and workflow package, not a hosted rendering service.\n- The classifier is deterministic and heuristic-based; agents should still\n  verify source context before production work.\n- Ecommerce pages may block crawling. The correct fallback is to request user\n  images, not to fabricate product visuals.\n- Ad creative quality still depends on the brief, usable assets, and iteration.\n\n## Contributing\n\nKeep changes scoped and verifiable:\n\n- Update or add reference files when the workflow changes.\n- Prefer deterministic scripts for repeated or fragile steps.\n- Run `npm run validate` before submitting changes.\n- Do not commit generated render output, dependencies, secrets, or unlicensed\n  third-party media.\n","该项目通过AI编码代理从URL创建可编辑的广告视频项目，无需使用视频生成AI。核心功能包括根据URL自动生成广告计划并利用Remotion或Hyperframes进行渲染，支持React\u002FTS和HTML\u002FCSS\u002FGSAP两种路径，并自动选择最适合的渲染引擎。项目特点在于其输出是可编辑、可重复且品牌安全的，适用于需要严格控制产品展示、行动号召及版权资产的场景，如电子商务产品、移动游戏、社交应用等广告制作。此外，它还提供了详细的创意路线图和质量保证流程，确保最终成品的质量与预期一致。",2,"2026-06-11 03:59:35","CREATED_QUERY"]