skills.rest
Marshal-Nguyen
Marshal-NguyenCOMMUNITY
Explore all skills by this author →
GitHub

hyperframes-creative

Directs palettes, typography, narration, and composition for HyperFrames video projects.

1|Updated Aug 17, 2026
Search Tags:#typography#video#design spec#gsap#palettes#creative direction#hyperframes
One-click install
npx skills add https://github.com/Marshal-Nguyen/Skill_Claude_Agent --skill hyperframes-creative-marshal-nguyen
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: hyperframes-creative
Source: https://github.com/Marshal-Nguyen/Skill_Claude_Agent/tree/main/claude/skills/hyperframes-creative
Command: npx skills add https://github.com/Marshal-Nguyen/Skill_Claude_Agent --skill hyperframes-creative-marshal-nguyen

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires sharp, @hyperframes/producer, @hyperframes/core, and includes scripts (resource) and references (resource) components.

What problem does it solve? It provides the non-animation creative direction layer for HyperFrames videos, turning vague prompts into concrete design specs, palettes, typography, narration, and beat plans instead of generic web-page-looking output. ## Core Features & Use Cases - Design spec handling: Reads frame.md / design.md frontmatter as brand truth and verifies compositions against it with a design-adherence checklist. - Style and palette routing: Offers house-style defaults, named visual styles, curated palettes, and an interactive two-phase design picker that outputs a spec-compliant design.md. - Beat and narration planning: Plans per-beat concepts, motion verbs, rhythm, transitions, and audio-reactive visuals driven by pre-extracted audio bands. - Use Case: When building a 15-second product launch video, use this Skill to pick a dark-premium palette, plan a hook-hold-CTA rhythm, write narration, then verify colors and typography against the design spec before rendering. ## Quick Start Ask the assistant to create the creative direction and design spec for a HyperFrames product launch video using this skill.

Frequently Asked Questions about hyperframes-creative

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create a design spec for a HyperFrames video?▼

Serve the interactive design picker template, let the user pick a mood board and fine-tune palette, type, corners, density, and easing, then save the pasted output verbatim as design.md in the project root. The file follows the design.md spec format with YAML frontmatter tokens.

How do I make visuals react to music in a video composition?▼

Pre-extract frequency bands with the extract-audio-data.py script, then sample AUDIO_DATA per frame via tl.call() on the GSAP timeline. Map bass to scale, treble to glow, and overall amplitude to opacity or color shifts.

What is the difference between hyperframes-creative and hyperframes-animation?▼

hyperframes-creative covers non-animation direction: palettes, typography, narration, beat planning, and composition patterns. hyperframes-animation owns atomic motion patterns, scene blueprints, transitions, and CSS marker effects.

How do I check text contrast in a rendered video frame?▼

Run the contrast-report.mjs script against the composition directory. It samples real background pixels behind each text element, computes WCAG 2.1 ratios, and writes contrast-report.json plus an annotated overlay sprite, exiting 1 if any element fails AA.

When should I not add extra scenes or narration to a video?▼

Do not add scenes, narration, music, captions, or transitions unless the request calls for them or you propose the expansion first. The skill's boundaries also forbid overriding hyperframes-core technical rules or requiring a design system for minimal compositions.

Related Skills

Explore More Design & Creative Skills→
Lev-itLev-it

hyperframes-creative

Define visual direction and plan audio-reactive compositions for HyperFrames videos.

Official
Intermediate
heygen-comheygen-com
43.5k

hyperframes-animation

Compose seek-safe GSAP animations and multi-runtime motion for deterministic HTML-to-video rendering.

Official
Advanced
opencodosopencodos
14

web-design

Audit HTML, CSS, and JS for web interface guideline compliance.

Official
Intermediate
Sma1lboySma1lboy
136

hyperframes-design

Provides creative direction for HyperFrames videos covering palettes, typography, beat planning, and composition patterns.

Community
Advanced