mcpField
S
style-library

style-library

github.com/nateherkaiCreative & media2.4k74 installsUpdated 2w ago
Repository

About style-library

A skill for selecting and adapting reusable motion-design cards and templates from a style library for video compositions. It guides asset localization, slot configuration, and rendered quality checks.

Key features

  1. 01Filter styles by tier and purpose
  2. 02Inspect design tokens and slot limits
  3. 03Adapt cards for overlays or takeovers
  4. 04Localize CSS, fonts, and dependencies
  5. 05Lint and render quality checks

Use cases

  1. 01Choose a reusable style for a video
  2. 02Add a card overlay to a composition
  3. 03Validate a card at project resolution

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/nateherkai/hyperframes-student-kit --skill style-library

After installing, type/style-libraryin Claude Code to confirm it loaded.

Details

From the project README

Reuse the style library

Read style-library/GUIDE.md, then style-library/registry.json. Filter by style, tier, and purpose before opening individual cards. Read the selected style's DESIGN.md, tokens.css, and manifest slot limits.

For an overlay, preserve transparency outside the card and the speaker's face. For a takeover, use an opaque background. Copy the chosen card into the video's compositions/, localize its CSS, fonts, and GSAP dependency, fill its named data-slot values, and wire its timing using the HyperFrames skill. Copying a card without its relative dependencies does not produce a complete asset.

Use style-templates/ for a whole-scene starting point. A media template may require the student's own assets/source.mp4; check its README before rendering.

The catalog contains draft resources, not a promise that every card has passed rendered QA. Lint and render the selected card at actual project resolution, inspect its hero frame and transition, and check slot text at its maximum length.

When adding a style, use node scripts/style-library/new-style.mjs 03 my-style "My Style", then complete its design tokens, manifest, and cards. Run node scripts/style-library/build-registry.mjs after manifest changes. Keep project-specific copy in the project, leaving reusable library cards generic.

Comments

Markdown supported