publish-element
starsforks
How to install publish-element?
remotion-dev/remotion/publish-element
$npx -y skills add remotion-dev/remotion --skill publish-elementFinalize a developed Remotion Element, add it to the docs gallery, render its previews, and run repository checks.
SKILL.md
| 1 | # Publish 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 publication workflow. It starts with an Element scaffold created by the [`scaffold-element` skill](../scaffold-element/SKILL.md) and does not create the initial development scaffold. |
| 6 | |
| 7 | ## 1. Confirm the Element is ready |
| 8 | |
| 9 | Confirm these files and the matching entry in `packages/docs/src/components/Elements/element-definitions.ts` already exist: |
| 10 | |
| 11 | - `packages/docs/elements/<category>/<slug>/index.mdx` |
| 12 | - `packages/docs/elements/<category>/<slug>/<slug>.tsx` |
| 13 | |
| 14 | Do not launch the Studio from this skill. Before continuing, require the developer to explicitly confirm that they visually reviewed `element-<category>-<slug>` in the docs Remotion Studio and that it looks correct. Do not infer approval from completed tests or from the agent's own inspection. If the developer has not approved it or more visual development is needed, give them these commands and stop the publishing workflow: |
| 15 | |
| 16 | ```bash |
| 17 | bun run build |
| 18 | cd packages/docs |
| 19 | bun run remotion |
| 20 | ``` |
| 21 | |
| 22 | ## 2. Perform the publication review |
| 23 | |
| 24 | Review the finished source, MDX page, and central definition against the Element Guidelines. Resolve placeholder content and finalize the description, display name, contributors, dimensions, duration, preview padding, and poster frame. |
| 25 | |
| 26 | Re-check the technical implementation requirements from the [`scaffold-element` skill](../scaffold-element/SKILL.md): The reusable implementation must remain in one self-contained TSX file, fill its configured bounds without a wrapper `<Sequence>` or preview-only source padding, and leave outer placement to the surrounding project. Animated entrances must have exits with inline, hardcoded frame ranges on useful named `Interactive.*` elements. Inner control names must not repeat the Element display name. |
| 27 | |
| 28 | When the Element has Studio-editable controls, also review it using the [interactivity best practices skill](../interactivity-best-practices/SKILL.md). |
| 29 | |
| 30 | If the Element imports a package that is not available to `packages/docs`, add it to `packages/docs/package.json`, run `bun install`, and include `bun.lock`. |
| 31 | |
| 32 | ## 3. Add it to the gallery |
| 33 | |
| 34 | - Add the Element page to `packages/docs/elements/<category>/index.mdx`. |
| 35 | - Add `'<category>/<slug>/index'` to the matching category in `packages/docs/elements-sidebars.ts`. |
| 36 | |
| 37 | Preserve the ordering used by the category page and sidebar. If the task explicitly introduces a new category, create its category index and sidebar group as part of this step. |
| 38 | |
| 39 | Do not edit `packages/docs/src/remotion/Root.tsx`; Element compositions are derived from the central definitions. |
| 40 | |
| 41 | ## 4. Format and test |
| 42 | |
| 43 | Format the changed TypeScript and TSX files only. For the usual files: |
| 44 | |
| 45 | ```bash |
| 46 | bunx oxfmt \ |
| 47 | packages/docs/elements/<category>/<slug>/<slug>.tsx \ |
| 48 | packages/docs/src/components/Elements/element-definitions.ts \ |
| 49 | packages/docs/elements-sidebars.ts \ |
| 50 | --write |
| 51 | |
| 52 | cd packages/docs |
| 53 | bun test src/test/elements.test.ts |
| 54 | ``` |
| 55 | |
| 56 | ## 5. Render and inspect the previews |
| 57 | |
| 58 | Perform the preview verification required by the Element Guidelines. Render only the new Element, using its `posterFrame` from `element-definitions.ts`: |
| 59 | |
| 60 | ```bash |
| 61 | cd packages/docs |
| 62 | mkdir -p .element-previews/<category>/<slug> |
| 63 | bunx remotion still \ |
| 64 | src/remotion/entry.ts \ |
| 65 | element-<category>-<slug> \ |
| 66 | .element-previews/<category>/<slug>/preview.png \ |
| 67 | --frame=<poster-frame> --gl=angle --overwrite |
| 68 | bunx remotion render \ |
| 69 | src/remotion/entry.ts \ |
| 70 | element-<category>-<slug> \ |
| 71 | .element-previews/<category>/<slug>/preview.mp4 \ |
| 72 | --codec=h264 --crf=23 --image-format=png --pixel-format=yuv420p \ |
| 73 | --gl=angle --muted --overwrite |
| 74 | cd ../.. |
| 75 | ``` |
| 76 | |
| 77 | Do not run `render-element-previews`, because it renders every Element and clears the previous preview output. |
| 78 | |
| 79 | Inspect `packages/docs/.element-previews/<category>/<slug>/preview.png` and `preview.mp4`, then give both paths to the developer for visual review. Stop and wait for the developer to explicitly confirm that both previews look correct. Do not run the final repository checks or finish the publishing workflow until that approval is received. |
| 80 | |
| 81 | Do not commit the ignored output or upload previews unless uploading was explicitly requested and maintainer R2 credentials are available. |
| 82 | |
| 83 | ## 6. Run final repository checks |
| 84 | |
| 85 | ```bash |
| 86 | bun run build |
| 87 | bun run stylecheck |
| 88 | git diff --check |
| 89 | git status --short |
| 90 | ``` |
| 91 | |
| 92 | Before finishing, verify that the page is listed in its category and sidebar, all checks pass, and only intended files are part of the change. Report the commands run, their results, and the preview files inspected. |
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
