How do I install the Style Library skill?

Run npx skillmds@latest add nateherkai/style-library in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is Style Library safe to use?

This skill has not completed SkillMD's automated safety review yet. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Style Library?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Style Library free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Style Library?

nateherkai (@nateherkai) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Style Library by nateherkai — Agent Skill

Name: Style Library
Author: nateherkai

Style Library

Select, customize, or extend the project's reusable motion-graphics card library and style templates. Use for choosing a visual style, adding a card, building a new style pack, or reusing a template in a HyperFrames video.

nateherkai 1720e2b 1.6 KB Updated Sep 17, 2026

File contents

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.

Frequently asked questions