scaffold-element
starsforks
How to install scaffold-element?
remotion-dev/remotion/scaffold-element
$npx -y skills add remotion-dev/remotion --skill scaffold-elementScaffold a new Remotion Element with a correctly configured preview composition for development in the docs Remotion Studio.
SKILL.md
| 1 | # Scaffold a Remotion Element |
| 2 | |
| 3 | The source of truth for design and quality criteria is the [Element Guidelines](../../../packages/docs/elements/guidelines.mdx). Read them completely before making changes. If this skill and the guidelines diverge on acceptance criteria, follow the guidelines. |
| 4 | |
| 5 | This skill owns the technical scaffolding workflow. Use the [`publish-element` skill](../publish-element/SKILL.md) when the Element is ready for the gallery. |
| 6 | |
| 7 | ## 1. Plan the preview |
| 8 | |
| 9 | Choose an existing category and a kebab-case slug. Before creating files, determine the initial preview metadata needed for development: |
| 10 | |
| 11 | - Composition width, height, fps, and duration |
| 12 | - Fixed Element width and height, or `null` for both so it inherits the composition dimensions |
| 13 | - Preview padding, which affects only the docs preview and not the Element bounds |
| 14 | - A provisional poster frame |
| 15 | |
| 16 | Inspect `packages/docs/elements-template/` and at least one existing Element in the same category. Do not create a new category unless the task explicitly requires one. |
| 17 | |
| 18 | ## 2. Scaffold the files |
| 19 | |
| 20 | From the repository root, replace the placeholders and run: |
| 21 | |
| 22 | ```bash |
| 23 | cp -R packages/docs/elements-template \ |
| 24 | packages/docs/elements/<category>/<slug> |
| 25 | mv packages/docs/elements/<category>/<slug>/element.tsx \ |
| 26 | packages/docs/elements/<category>/<slug>/<slug>.tsx |
| 27 | ``` |
| 28 | |
| 29 | Adapt the copied `index.mdx` to the production pattern: import `elementDefinitions`, use its `'<category>/<slug>'` entry, and set `sourceFile="./<slug>.tsx"`. |
| 30 | |
| 31 | Implement only enough of the component to provide a visible starting point in the intended bounds. Keep the reusable implementation in one self-contained TSX source file. Make the component fill its bounds without adding a wrapper `<Sequence>` or source padding for the preview. Do not use `left`, `right`, `top`, or `bottom` to place the Element itself; the surrounding project owns placement. |
| 32 | |
| 33 | Follow the Element Guidelines for the component itself. When using Studio-editable controls, also follow the [interactivity best practices skill](../interactivity-best-practices/SKILL.md). Keep entrance and exit keyframes inline with hardcoded frame ranges on the useful named `Interactive.*` element so they can be adjusted in Studio. Do not repeat the Element display name in inner control names. |
| 34 | |
| 35 | ## 3. Register the development composition |
| 36 | |
| 37 | Import and register the component in `packages/docs/src/components/Elements/element-definitions.ts` using the planned preview metadata. |
| 38 | |
| 39 | Do not edit `packages/docs/src/remotion/Root.tsx`. It automatically creates a composition for every central definition using the same sizing and wrapper used by published Elements. |
| 40 | |
| 41 | If the component imports a package that is not available to `packages/docs`, add it to `packages/docs/package.json`, run `bun install`, and include `bun.lock`. |
| 42 | |
| 43 | ## 4. Check the scaffold |
| 44 | |
| 45 | Format the changed TypeScript and TSX files, then run the focused test: |
| 46 | |
| 47 | ```bash |
| 48 | bunx oxfmt \ |
| 49 | packages/docs/elements/<category>/<slug>/<slug>.tsx \ |
| 50 | packages/docs/src/components/Elements/element-definitions.ts \ |
| 51 | --write |
| 52 | |
| 53 | cd packages/docs |
| 54 | bun test src/test/elements.test.ts |
| 55 | cd ../.. |
| 56 | ``` |
| 57 | |
| 58 | Do not add the category-index or sidebar entries and do not render final preview assets yet. Those belong to the publishing workflow. |
| 59 | |
| 60 | ## 5. Hand off development |
| 61 | |
| 62 | Do not launch the Studio from this skill. Tell the developer to run: |
| 63 | |
| 64 | ```bash |
| 65 | bun run build |
| 66 | cd packages/docs |
| 67 | bun run remotion |
| 68 | ``` |
| 69 | |
| 70 | Then tell them to open the `elements` folder and select `element-<category>-<slug>`. Development should start in that composition so the Element is always evaluated with its configured dimensions, duration, padding, and preview background. |
| 71 | |
| 72 | Report the created files, composition ID, focused test result, and that the next step after development is the [`publish-element` skill](../publish-element/SKILL.md). |
People who liked this also viewed
6 picksType
- paperclip-create-agentCreate new agents in Paperclip with governance-aware hiring. Use when you need to inspect adapter configuration options, compare existing agent configs, draft a new agent prompt/config, and submit a hSkillsJul 2026
- subagent-driven-developmentUse when executing implementation plans with independent tasks in the current sessionSkillsJul 2026
- dispatching-parallel-agentsUse when facing 2+ independent tasks that can be worked on without shared state or sequential dependenciesSkillsJul 2026
- browser-act-skill-forgeForges reusable Skill packages (SKILL.md + scripts) from website exploration via browser-act — no re-exploration later. Use when: user wants a reusable Skill for any website, needs to understand a sitSkillsJul 2026
- wizardGenerate an interactive bash wizard that walks a human through a manual procedure — third-party setup, a one-off migration, an A→B state transition — opening URLs, capturing values, confirming each stSkillsJul 2026
- wonda-cliUsing the Wonda CLI to generate images, videos, music, and audio from the terminal — plus LinkedIn, Reddit, and X/Twitter research and automationSkillsJul 2026
