skills.rest
zamansepeti43
zamansepeti43COMMUNITY
Explore all skills by this author →
GitHub

hyperframes-creative

Directs brand, palette, typography, narration, and composition decisions for HyperFrames video projects.

Updated Sep 1, 2026
Search Tags:#color palettes#typography#design spec#creative direction#video design#audio-reactive#beat planning
One-click install
npx skills add https://github.com/zamansepeti43/c-rak-agent --skill hyperframes-creative-zamansepeti43
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: hyperframes-creative
Source: https://github.com/zamansepeti43/c-rak-agent/tree/main/video-engine/.agents/skills/hyperframes-creative
Command: npx skills add https://github.com/zamansepeti43/c-rak-agent --skill hyperframes-creative-zamansepeti43

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve? It provides non-animation creative direction 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 and enforces frame.md / design.md specs, treating frontmatter tokens as brand truth, and verifies compositions against them post-authoring. - Style and palette routing: Routes mood or style requests to named visual styles, curated palettes, frame presets, or an interactive two-phase design picker that outputs a spec-compliant design.md. - Beat and narration planning: Plans per-beat concepts, motion verbs, transitions, rhythm, and script pacing for multi-scene videos, plus audio-reactive visuals from pre-extracted frequency bands. - Use Case: When asked to create a product launch video, read the project's design spec, pick a bold-energetic palette, plan a fast-fast-SLOW-shader rhythm across beats, then verify colors and typography against the spec before serving. ## Quick Start Ask the agent to plan the visual direction, palette, and beat structure for your HyperFrames video based on your project's design spec.

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?▼

Use the interactive design picker: generate mood boards and fine-tune options, serve the picker HTML on a local port, and let the user copy the resulting design.md. Alternatively adopt a ready-made frame preset as frame.md or write a bespoke spec with YAML frontmatter tokens.

How do I make HyperFrames visuals react to audio?▼

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

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

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

Does the design spec override layout decisions in a video?▼

The spec is strict on brand tokens like hex colors, fonts, weights, and corner styles, but free on layout. Frontmatter values are normative and must be quoted verbatim, while prose sections provide intent and constraints for judgment.

Why does my HyperFrames video look like a generic web page?▼

This usually happens when house-style.md and video-composition.md are skipped. They enforce video-medium density, foreground metadata detailing, and concept-driven content instead of literal restyling with lazy default palettes and layouts.

How do I check text contrast in a rendered HyperFrames composition?▼

Run the contrast-report.mjs script against the composition directory. It samples frames, measures WCAG contrast ratios between text and background pixels, and outputs a JSON report plus an annotated overlay sprite, exiting nonzero if any element fails AA.

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
firstsun-devfirstsun-dev
3

hyperframes-animation

Compose deterministic GSAP animations for HyperFrames video compositions using atomic motion rules and scene blueprints.

Official
Advanced
Noetfield-SystemsNoetfield-Systems

hyperframes-creative

Directs palettes, typography, narration, and beat planning for HyperFrames video compositions.

Official
Advanced
vibe-motionvibe-motion
236

hyperframes-design

Define frame-scale visual direction for HyperFrames video compositions from design specs.

Official
Advanced