[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6JCFTZ44VMYF2CS09R10K13":3,"skill-same:01M6JCFTZ44VMYF2CS09R10K13":85},{"skillNo":4,"name":5,"nameZh":6,"description":7,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":15,"categories":16,"keywords":28,"publishedAt":48,"linkOnly":49,"markdownContent":50,"markdownBody":51,"frontMatter":52,"refName":63,"commitSha":64,"skillDirectory":65,"forksCount":66,"repositoryHtmlUrl":67,"repositoryHomepageUrl":68,"ownerHtmlUrl":69,"ownerBlogUrl":6,"ownerDescription":6,"updatedAt":70,"install":71,"resources":84},"01M6JCFTZ44VMYF2CS09R10K13","remotion-agent-video",null,"Remotion v4.0.4xx with agent skill support for AI-driven video creation. Covers programmatic video generation with React, the new effects ecosystem, and first-party agent skills.","S3YED\u002Fappie-kit","S3YED","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F62743867?v=4","01M6JBKBRRVP6KMS0VWZ27T3R6","01M6JBKBX0KG30284PW1DBYJT1",14,"MIT","https:\u002F\u002Fgithub.com\u002FS3YED\u002Fappie-kit\u002Fblob\u002Fmaster\u002Fskills\u002Fcreative\u002Fremotion-agent-video\u002FSKILL.md",[17,22,25],{"categoryNo":18,"categoryName":19,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000009","前端开发","SCENARIO","使用场景",{"categoryNo":23,"categoryName":24,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000016","图像与多媒体",{"categoryNo":26,"categoryName":27,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000023","Skill与智能体开发",[29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47],"remotion agent video","Video","Remotion","agent skill","effects","party","for","programmatic","ecosystem","with","driven","creation","support","generation","best-practices","video generation","Animation","first","react","2026-11-10 10:12:30",false,"---\nname: remotion-agent-video\ndescription: \"Remotion v4.0.4xx with agent skill support for AI-driven video creation. Covers programmatic video generation with React, the new effects ecosystem, and first-party agent skills.\"\nauthor: Appie-1\ntags: [remotion, video, react, ai, agent, effects, animation]\nrelated_skills: [remotion-video-creation, remotion-best-practices]\n---\n\n# Remotion Agent Video Creation\n\nRemotion v4.0.4xx lets you create videos programmatically with React — and now ships first-party agent skills.\n\n## Agent Skills\n\nInstall Remotion's official skills for AI coding agents:\n\n```bash\nnpx skills add remotion-dev\u002Fskills\n```\n\nThis adds skills for: Claude Code, Codex, and Cursor with best practices for Remotion projects.\n\n## New Effects (@remotion\u002Feffects)\n\nv4.0.4xx adds a composable effects ecosystem:\n\n| Effect | Description |\n|--------|-------------|\n| `cornerPin` | Perspective\u002Fdistortion corner pinning |\n| `lightTrail` | Motion light trail effect |\n| `checkerboard` | Checkerboard transition pattern |\n| `emboss` | 3D emboss effect |\n| `gridlines` | Grid overlay |\n| `zoomBlur` | Zoom-based radial blur |\n| `radialProgressiveBlur` | Progressive blur from center out |\n| `linearGradient` | Linear gradient overlay |\n\nComposable: stack multiple effects on a single `\u003CSequence>`.\n\n## Studio Improvements\n\n- Element drag-and-drop in timeline\n- Timeline edge dragging for trim\n- Sequence renaming\n- Inspector controls grouped by category\n- Effect context menu\n- Keyframe easing handles\n- WebGL HtmlInCanvas callbacks preserved\n\n## Player Improvements\n\n```typescript\nimport { Player } from \"@remotion\u002Fplayer\";\n\n\u003CPlayer\n  component={MyVideo}\n  durationInFrames={120}\n  compositionWidth={1920}\n  compositionHeight={1080}\n  fps={30}\n  pixelDensity={2} \u002F\u002F fine-grained quality control\n\u002F>\n```\n\n- Muted players skip AudioContext creation (avoids autoplay blocks)\n- `pixelDensity` for fine-grained output quality\n\n## Getting Started with AI Agents\n\n```bash\n# Create a new Remotion project\nnpx create-video\n\n# Install agent skills\nnpx skills add remotion-dev\u002Fskills\n\n# Start the Studio\nnpx remotion studio\n\n# Render\nnpx remotion render\n```\n\n## AI-Driven Workflow\n\nWhen using an AI agent with Remotion:\n\n1. **Create project** via `npx create-video` with your template\n2. **Load remotion-agent-video skill** so the agent knows the latest APIs\n3. **Use @remotion\u002Feffects** for polished transitions (cornerPin, zoomBlur, etc.)\n4. **Leverage agent skills** via `npx skills add remotion-dev\u002Fskills` for guided patterns\n5. **Render with pixelDensity** for high-quality output\n\n## Pitfalls\n- Agent skills are new — verify suggested patterns against Remotion docs\n- Effects system is composable but order matters (effects apply in sequence)\n- Large projects may need `--timeout` flag on render command===ME:remotion-agent-video\n","# Remotion Agent Video Creation\n\nRemotion v4.0.4xx lets you create videos programmatically with React — and now ships first-party agent skills.\n\n## Agent Skills\n\nInstall Remotion's official skills for AI coding agents:\n\n```bash\nnpx skills add remotion-dev\u002Fskills\n```\n\nThis adds skills for: Claude Code, Codex, and Cursor with best practices for Remotion projects.\n\n## New Effects (@remotion\u002Feffects)\n\nv4.0.4xx adds a composable effects ecosystem:\n\n| Effect | Description |\n|--------|-------------|\n| `cornerPin` | Perspective\u002Fdistortion corner pinning |\n| `lightTrail` | Motion light trail effect |\n| `checkerboard` | Checkerboard transition pattern |\n| `emboss` | 3D emboss effect |\n| `gridlines` | Grid overlay |\n| `zoomBlur` | Zoom-based radial blur |\n| `radialProgressiveBlur` | Progressive blur from center out |\n| `linearGradient` | Linear gradient overlay |\n\nComposable: stack multiple effects on a single `\u003CSequence>`.\n\n## Studio Improvements\n\n- Element drag-and-drop in timeline\n- Timeline edge dragging for trim\n- Sequence renaming\n- Inspector controls grouped by category\n- Effect context menu\n- Keyframe easing handles\n- WebGL HtmlInCanvas callbacks preserved\n\n## Player Improvements\n\n```typescript\nimport { Player } from \"@remotion\u002Fplayer\";\n\n\u003CPlayer\n  component={MyVideo}\n  durationInFrames={120}\n  compositionWidth={1920}\n  compositionHeight={1080}\n  fps={30}\n  pixelDensity={2} \u002F\u002F fine-grained quality control\n\u002F>\n```\n\n- Muted players skip AudioContext creation (avoids autoplay blocks)\n- `pixelDensity` for fine-grained output quality\n\n## Getting Started with AI Agents\n\n```bash\n# Create a new Remotion project\nnpx create-video\n\n# Install agent skills\nnpx skills add remotion-dev\u002Fskills\n\n# Start the Studio\nnpx remotion studio\n\n# Render\nnpx remotion render\n```\n\n## AI-Driven Workflow\n\nWhen using an AI agent with Remotion:\n\n1. **Create project** via `npx create-video` with your template\n2. **Load remotion-agent-video skill** so the agent knows the latest APIs\n3. **Use @remotion\u002Feffects** for polished transitions (cornerPin, zoomBlur, etc.)\n4. **Leverage agent skills** via `npx skills add remotion-dev\u002Fskills` for guided patterns\n5. **Render with pixelDensity** for high-quality output\n\n## Pitfalls\n- Agent skills are new — verify suggested patterns against Remotion docs\n- Effects system is composable but order matters (effects apply in sequence)\n- Large projects may need `--timeout` flag on render command===ME:remotion-agent-video\n",{"name":5,"tags":53,"author":59,"description":7,"related_skills":60},[54,55,47,56,57,33,58],"remotion","video","ai","agent","animation","Appie-1",[61,62],"remotion-video-creation","remotion-best-practices","master","8ec37df6d71fb664ea19d32c079e7d3ff931a8e0","skills\u002Fcreative\u002Fremotion-agent-video",3,"https:\u002F\u002Fgithub.com\u002FS3YED\u002Fappie-kit","https:\u002F\u002Fweblyfe.ai","https:\u002F\u002Fgithub.com\u002FS3YED","2026-08-27 01:54:02",{"source":8,"skillName":5,"commands":72,"prompt":82,"zipAvailable":83},[73,76,79],{"tool":74,"command":75},"npx","npx skills add S3YED\u002Fappie-kit --skill remotion-agent-video",{"tool":77,"command":78},"bunx","bunx skills add S3YED\u002Fappie-kit --skill remotion-agent-video",{"tool":80,"command":81},"pnpm","pnpm dlx skills add S3YED\u002Fappie-kit --skill remotion-agent-video","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002FS3YED\u002Fappie-kit\u002Fblob\u002Fmaster\u002Fskills\u002Fcreative\u002Fremotion-agent-video\u002FSKILL.md",true,[],[86,115,150,176,207,231],{"skillNo":87,"name":88,"nameZh":6,"description":89,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":90,"categories":91,"keywords":97,"publishedAt":48},"01M6JFD4M6N4DSGC7TXEJ5R3J2","ai-music","AI music generation and audio tools: HeartMuLa lyrics-to-music generation, songwriting craft (+ Suno prompts), and audio spectrogram\u002Ffeature visualization.","https:\u002F\u002Fgithub.com\u002FS3YED\u002Fappie-kit\u002Fblob\u002Fmaster\u002Fskills\u002Fwethlete\u002Fai-music\u002FSKILL.md",[92,95,96],{"categoryNo":93,"categoryName":94,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000013","分析与可视化",{"categoryNo":23,"categoryName":24,"taxonomyType":20,"taxonomyTypeDesc":21},{"categoryNo":26,"categoryName":27,"taxonomyType":20,"taxonomyTypeDesc":21},[98,99,100,101,102,103,104,105,106,107,108,109,110,111,42,112,113,114],"music","ai music","humanizer","visualization","Tools","Audio","hermes","hermes agent","songwriting","suno","lyrics","prompts","heartmula","craft","feature","ai music generation","music generation",{"skillNo":116,"name":117,"nameZh":6,"description":118,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":119,"categories":120,"keywords":129,"publishedAt":48},"01M6JFCZE4XNFQFMNZDHKHT5V5","agentic-webdesign-design-system-ingestion","Use v0 Design Systems 2.0, Bolt Design System Agents, or Lovable to generate production UI from a client's real design system components — not generic Tailwind. Use when building a client website where brand consistency matters.","https:\u002F\u002Fgithub.com\u002FS3YED\u002Fappie-kit\u002Fblob\u002Fmaster\u002Fskills\u002Fweb-design\u002Fagentic-webdesign-design-system-ingestion\u002FSKILL.md",[121,124],{"categoryNo":122,"categoryName":123,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000015","视觉设计",{"categoryNo":125,"categoryName":126,"taxonomyType":127,"taxonomyTypeDesc":128},"01JBSEEDCAT000000000000032","设计师","PROFESSION","适用职业",[130,131,132,133,134,135,136,137,138,139,140,141,142,143,144,145,146,147,148,149],"design","agentic","design system","system","ingestion","webdesign","agentic webdesign design system ingestion","components","generate","design systems","website","ui","Tailwind","bolt","lovable","v0","design-system","wed","design system components","appie",{"skillNo":151,"name":152,"nameZh":6,"description":153,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":154,"categories":155,"keywords":158,"publishedAt":48},"01M6JFCVPX3913CFAS6QQJ33ZB","agentic-webdesign-agent-elements","Use 21st.dev Agent Elements — 25 shadcn\u002Fui components purpose-built for AI agent UIs. Tool cards (Bash, Edit, Search, Plan, Subagent, MCP), chat, input, streaming. Open source, shadcn-registry install, no runtime lock-in.","https:\u002F\u002Fgithub.com\u002FS3YED\u002Fappie-kit\u002Fblob\u002Fmaster\u002Fskills\u002Fweb-design\u002Fagentic-webdesign-agent-elements\u002FSKILL.md",[156,157],{"categoryNo":26,"categoryName":27,"taxonomyType":20,"taxonomyTypeDesc":21},{"categoryNo":125,"categoryName":126,"taxonomyType":127,"taxonomyTypeDesc":128},[131,159,135,160,161,162,137,163,164,165,166,167,168,169,170,171,172,173,174,175],"elements","agentic webdesign agent elements","MCP","ai agent","registry","search","streaming","open source","open","Bash","plan","subagent","edit","install","input","lock","source",{"skillNo":177,"name":178,"nameZh":6,"description":179,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":180,"categories":181,"keywords":186,"publishedAt":48},"01M6JFCQC7H65M9QJ6TRE71BS1","vercel-deployment","Deploy static sites and frontends to Vercel — handles both CLI and REST API paths, including the CLI token sanitization workaround.","https:\u002F\u002Fgithub.com\u002FS3YED\u002Fappie-kit\u002Fblob\u002Fmaster\u002Fskills\u002Fsoftware-development\u002Fvercel-deployment\u002FSKILL.md",[182,185],{"categoryNo":183,"categoryName":184,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000011","运维与部署",{"categoryNo":26,"categoryName":27,"taxonomyType":20,"taxonomyTypeDesc":21},[187,188,189,190,191,192,193,194,195,196,197,198,199,200,201,202,203,204,205,206],"deployment","vercel deployment","vercel","macos","cli","linux","windows","deploy","vercel deploy","REST","api","site","deploy to vercel","token","rest api","host","sites","paths","sanitization","static site",{"skillNo":208,"name":209,"nameZh":6,"description":210,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":211,"categories":212,"keywords":214,"publishedAt":48},"01M6JFCM4SMTXBM5A01BK2YQG1","software-quality-workflows","Umbrella workflow for TDD, debugging, code simplification, spikes, pre-commit review, and debugger-assisted investigation.","https:\u002F\u002Fgithub.com\u002FS3YED\u002Fappie-kit\u002Fblob\u002Fmaster\u002Fskills\u002Fsoftware-development\u002Fsoftware-quality-workflows\u002FSKILL.md",[213],{"categoryNo":26,"categoryName":27,"taxonomyType":20,"taxonomyTypeDesc":21},[215,216,217,218,219,220,221,222,223,224,225,226,227,228,229,230,35],"workflows","quality","software","software quality workflows","review","tdd","workflow","commit","debugging","code","debugger","pre-commit","investigation","code simplification","user","simplification",{"skillNo":232,"name":233,"nameZh":6,"description":234,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":235,"categories":236,"keywords":242,"publishedAt":48},"01M6JFCGD0M6CEATY01W7YN6DB","react-component-refactoring","Safely refactor large React components into smaller, maintainable pieces using proven patterns","https:\u002F\u002Fgithub.com\u002FS3YED\u002Fappie-kit\u002Fblob\u002Fmaster\u002Fskills\u002Fsoftware-development\u002Freact-component-refactoring\u002FSKILL.md",[237,240,241],{"categoryNo":238,"categoryName":239,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000007","代码审查",{"categoryNo":18,"categoryName":19,"taxonomyType":20,"taxonomyTypeDesc":21},{"categoryNo":26,"categoryName":27,"taxonomyType":20,"taxonomyTypeDesc":21},[47,243,244,245,246,247,248,249,190,250,251,137,252,193,253,224,254,255,256,257],"component","refactoring","component refactoring","react component","react component refactoring","frontend","writing","safe","typescript","react components","modular","refactor","simplify","patterns","test-driven-development"]