mcpField
K
kinetograph-create

kinetograph-create

github.com/0xs4n4tgCreative & media51615 installsUpdated today
Repository

About kinetograph-create

kinetograph-create is a skill for setting up Kinetograph projects and adding registry components, templates, and styles. It guides new projects while preserving the layout of existing ones.

Key features

  1. 01Initialize TSX or HTML projects
  2. 02Install registry components and templates
  3. 03Add reusable styles and assets
  4. 04Keep existing project layouts intact

Use cases

  1. 01Starting a new Kinetograph animation project
  2. 02Adding reusable assets from the registry
  3. 03Preparing an existing project without moving files

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/0xs4n4tg/kinetograph --skill kinetograph-create

After installing, type/kinetograph-createin Claude Code to confirm it loaded.

Details

From the project README

Create a Kinetograph project

A new project

Run npx kinetograph init [dir] in an empty folder (--html starts an HTML page instead of TSX), keep the layout it makes, then npm install. init skips files that already exist.

src/index.tsx     registerRoot and the compositions (starter: composition "Main", 1280x720, 60 frames at 30 fps)
src/scenes/       one file per scene; reusable pieces in src/components/, helpers in src/lib/
html/index.html   with --html: a page with a GSAP timeline, instead of src/
public/           assets for staticFile(): images/, fonts/, audio/, video/
out/              everything generated: renders/, stills/, sheets/

It also writes package.json (scripts still, strip, render, and check for TSX or lint for HTML; kinetograph is the only dependency), tsconfig.json (TSX) and .gitignore. Check it with npx kinetograph strip src/index.tsx, then go on with kinetograph-markup.

An existing project keeps its own layout; never move its files.

  • Import the API from @kinetographdev/core, which comes with kinetograph. Never install remotion.
  • Load assets with staticFile('images/logo.png').
  • Never write outputs next to the code or at the project root. still, strip, onion and render write to out/ when you leave out -o, and print the path.
  • A second composition is another <Composition id> under registerRoot; pick it with --comp <id>.

Components, templates and tastes

Don't rewrite what the registry has. npx kinetograph add --list shows it (--type component|template|taste narrows it); npx kinetograph add <name…> installs:

  • a component into src/components/<name>/, a template (a whole reel) into src/templates/<name>/, a taste (a reusable style) into src/tastes/<name>/;
  • their assets into public/<kind>/<name>/, and the registry items they depend on.

It never overwrites a file you changed (--overwrite does). It installs the npm packages an item needs only with --yes (or a yes at a terminal); with --json it prints the command and does not run it. --dir <folder> names the project. Read what it prints under next: for the import line.

To make a taste from a reference reel, use kinetograph-taste-clone (from the kinetograph-ui repo, if installed).

Comments

Markdown supported