mcpField
A
add

add

github.com/remocnCreative & media1.7k176 installsUpdated 5d ago
Repository

About add

add is a skill for adding one remocn component to a project. It helps identify and document the component, prepare the registry, install it, create a usage snippet, and check the result.

Key features

  1. 01Resolve an exact name or shortlist candidates
  2. 02Read component props, examples, length, and cautions
  3. 03Prepare the project for the remocn registry
  4. 04Install a component with shadcn
  5. 05Create a usage snippet and check it

Use cases

  1. 01Add a named remocn component to a project
  2. 02Choose a component for a described visual effect
  3. 03Check a component implementation in a Remotion project

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/remocn/remocn --skill add

After installing, type/addin Claude Code to confirm it loaded.

Details

From the project README

Add one remocn component

Requested: $ARGUMENTS

Load the remocn skill first for the tier conventions and Canvas & timing.

  1. Resolve the name. If the request is an exact component name, use it. If it's a description ("a glitchy title", "a fast cut"), shortlist from https://remocn.dev/llms-components.txt and offer the best two or three, each with its Use for line and length. Wait for the pick.
  2. Read its page. Fetch the .md docs URL the index gives for it. Note the props, the example, Length and any Avoid for note. If the avoid note matches what the user wants, say so and suggest the replacement it names.
  3. Prepare the project once. If components.json has no @remocn registry, run node "${CLAUDE_SKILL_DIR}/../video/scripts/setup.mjs" <project-root> first (outside Claude Code: ../video/scripts/setup.mjs from this skill's folder). Its JSON result says which files it wrote; relay any warning.
  4. Install. npx shadcn add @remocn/<name>. Dependencies install transitively; list which files landed.
  5. Use it. Show a usage snippet built from the docs example, sized to the canvas, inside a <Sequence durationInFrames> of at least its Length plus hold time. Transitions go into TransitionSeries.Transition as presentation with linearTiming/springTiming at their Length. If the user named a place in their code, put it there; otherwise ask where it goes.
  6. Check. npx tsc --noEmit, then a still at the end of its motion (npx remotion still <composition> out/<name>.png --frame=<n>) and look at it.

Comments

Markdown supported