Skip to content
Apiara

Search design skills

Start here
Design & build a websitefrontend-design · Website codeRefine an existing interfaceimpeccable · UI review & refinementsReview web interface guidelinesweb-design-guidelines · Findings with file referencesCreate posters & static artworkcanvas-design · PNG / PDFDesign a presentationpptx · Editable PPTXChoose colors & typographytheme-factory · A theme applied to your workExplore generative artalgorithmic-art · Interactive p5.js artworkCreate video & motionremotion-best-practices · Remotion project & rendered videoImplement a Figma designfigma · UI code in your projectDocument a Stitch design systemdesign-md · DESIGN.mdBuild an interactive web prototypeweb-artifacts-builder · React prototype & bundled HTMLMake a Slack GIF reactionslack-gif-creator · Looping GIF
↑ ↓ Select   ↵ OpenEsc Close
Back to skills

Create video & motion

remotion-best-practices · Remotion

Use Remotion's skill collection to create, preview, and render React video compositions, with guidance for timing, layout, and media.

Output
Remotion project & rendered video
Needs
Node.js and a working Remotion project
Download official ZIP

Official repository ZIP

Install folder: .claude/skills/remotion-best-practices/

Setup & example
Illustration, not a tested output.

What it does

What to bring
A storyboard, duration, aspect ratio, text, and your own media assets.
Requirements
Node.js, a Remotion project, and the dependencies needed to preview and render it. The skill alone does not install the video runtime.
Keep in mind
This routes to several video skills rather than generating video in the website. Rendering and asset preparation take time; review Remotion's licensing for your use.

Try a design task

Once the skill is loaded, copy the task and adapt it to your brief.

Use remotion-best-practices to create a ten-second landscape title sequence for my design studio. Use only the name and assets I supply. Show a local preview with three scenes: introduction, work, and contact. Keep text readable and transitions restrained. Check the preview before rendering a video.
Installation instructions

For Claude's Code / project entry; manage chat and Cowork skills in account settings.

  1. Copy the skill folder, or use the installer

    Extract the ZIP and copy the complete remotion-best-practices folder into .claude/skills/ in your project. The official ZIP contains a repository; use skills/remotion-best-practices.

    Or run this command in your project terminal with Node.js / npx. It gets the author's latest version, which may differ from the download.

    npx skills add remotion-dev/skills --skill remotion-best-practices --agent claude-code
    Read the installation docs

  2. Confirm the skill is loaded

    Reopen your tool and check that remotion-best-practices is available. If it is missing, check the installation location in the upstream docs.

Review the result

  • Duration and aspect ratio match the brief.
  • Text stays legible throughout the motion.
  • The rendered file plays and includes the expected media.

Did you complete the task?

Next steps

remotion-best-practices — Apiara