Skip to main content
affpapa.org
RU EN
skill CX Codex

motion-designer · ncklrs — Claude Code skill: what it does, how to install

Drafts frame-accurate video specifications for Remotion, covering timing, transitions, and layered audio. Useful when planning motion graphics before writing code.

Install into Claude Code · Skills CLI (Vercel) All methods and platforms ↓ 
npx skills add ncklrs/startup-os-skills --skill motion-designer -a claude-code
Open on GitHub

What motion-designer does

This skill turns raw video concepts into granular scene breakdowns. It maps out each transition, assigns exact frame counts, and directs viewer attention according to classic animation principles. The narrative structure follows a strict attention curve, leading from an opening hook within the first 5 seconds to a clear resolution.

The resulting document plans the audio alongside visuals. It assigns volume targets for background tracks, marks exact timestamps for sound effects, and details voiceover placement. For Remotion projects, it prepares specific configuration values: frame rates, canvas dimensions, hex color codes, and parameters for spring() or interpolate() calls.

This tool generates documentation rather than executable React components. Without a downstream coding step, you only receive a descriptive storyboard. The author suggests pairing this output with /remotion-best-practices to build the actual video.

What it helps with

  • draft frame-by-frame scene specifications for Remotion videos
  • calculate animation timing and pacing across scenes
  • plan layered audio tracks with exact timestamps for sound effects
  • define spring and interpolation settings for React video components

Example prompts for the agent

  • Plan a 30-second product demo video with a complete scene breakdown
  • Design a 5-second animated logo intro spec with audio cues and timing
  • Draft a technical specification for a tutorial video built in Remotion

How to install motion-designer

1Skills CLI (Vercel)

npx skills add ncklrs/startup-os-skills --skill motion-designer -a claude-code

2Manually: put the files in place

~/.claude/skills/motion-designer/SKILL.md

Copy the whole skill folder; for one project use .claude/skills/motion-designer/

Step by step, with commands for each platform: How to install skills in Claude Code: five ways

Questions about motion-designer

How do I install motion-designer in Claude Code?

Run npx skills add ncklrs/startup-os-skills --skill motion-designer -a claude-code. Alternatively, place the skill file directly into ~/.claude/skills/motion-designer/SKILL.md.

What does the motion-designer skill do?

It writes structured video specifications covering scene breakdowns, frame-level pacing, sound design, and visual hierarchy. The plan maps directly to Remotion compositions.

Does motion-designer generate ready-to-run Remotion code?

No, it produces design specifications and animation values rather than React code. To write and render the actual components, pair it with /remotion-best-practices.

Similar skills

Everything for Design →

motion-designer by other authors comes first.

motion-designer dylantarre A skill that turns your coding agent into a motion designer: timing specs, easing curves and handoff notes for UI animation. CX Codex +1 1,600installs frontend-design official anthropics This skill guides intentional visual design for new interfaces and redesigns. Use it when a generic generated UI is not enough. 1,025,790installs grill-me Matt Pocock grill-me interviews you about a plan or design to expose gaps and sharpen decisions. Use it before implementation starts. 1,424,476installs design-taste-frontend Leonxlnx This skill directs the design of public pages and work screens, then checks the result in a browser through screenshots. Use it when an interface feels generic or unfinished. CX Codex +1 678,700installs prototype Matt Pocock Creates throwaway prototypes for checking state logic or exploring UI before committing the decision to the main codebase. 986,201installs grilling Matt Pocock Stress-test a plan, decision, or idea through structured rounds of questions. Use it when you need to expose assumptions before acting. 979,543installs codebase-design Matt Pocock This skill helps design modules with small interfaces and hidden complexity. Use it when refactoring code, choosing a seam, or making tests easier to write. 850,344installs

From the same set8

community-builder A skill that hands your agent community-led growth playbooks: member onboarding, engagement programs, ambassadors, health metrics and moderation. CX Codex +1 608installs proposal-writer Structures sales proposals, executive summaries, SOWs, and RFP answers. It focuses documents on buyer outcomes while keeping technical specifications secondary. CX Codex +1 594installs website-copy-specialist Writes copy for SaaS and B2B pages: homepage, pricing, comparisons, integrations, navigation microcopy. Useful when you need text for a specific page, not generic advice. CX Codex +1 549installs vsl-storyboard-writer Turns a video brief into a scene-by-scene storyboard for sales videos, product demos and social ads. CX Codex +1 464installs remotion-animation Builds timing constants, spring physics, and interpolation ranges for Remotion without creating UI components. CX Codex +1 441installs sales-strategist A skill that gives your agent sales-ops rules for B2B SaaS: deal qualification, territories, forecasting, quotas and comp. Useful when the process needs structure. CX Codex +1 328installs marketing-strategist A skill that gives your coding agent marketing direction for B2B SaaS: go-to-market, content, demand, PR and partnerships. Useful when you need a plan, not one tactic. CX Codex +1 326installs

Project sponsors

Companies that keep this analytics open
Gold sponsor
Nutra.Club

Impressions, clicks and code copies — open statistics. We keep the numbers public for the same reason NeBlask itself is public. Become a sponsor