skills.rest
Noetfield-Systems
Noetfield-SystemsOFFICIAL
Explore all skills by this author →
WebsiteGitHub

hyperframes-creative

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

Updated Jun 20, 2026
Search Tags:#color palettes#typography#storyboard#creative direction#video design#audio-reactive#hyperframes
One-click install
npx skills add https://github.com/Noetfield-Systems/SourceA --skill hyperframes-creative-noetfield-systems
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: hyperframes-creative
Source: https://github.com/Noetfield-Systems/SourceA/tree/main/commercial-video-factory/trustfield-storyboard-hf-v1/.agents/skills/hyperframes-creative
Command: npx skills add https://github.com/Noetfield-Systems/SourceA --skill hyperframes-creative-noetfield-systems

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires sharp, @hyperframes/producer, and includes scripts (resource) and references (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 frame.md / design.md frontmatter as brand truth, or generates one via an interactive design picker or ready-made frame presets. - Creative direction references: House style, visual styles, composition patterns, typography, narration, beat direction, and audio-reactive guidance for multi-scene videos. - Verification scripts: contrast-report.mjs audits WCAG contrast on rendered frames and extract-audio-data.py pre-extracts audio bands for audio-reactive visuals. - Use Case: Given a prompt for a 15-second product launch video, load the design spec, pick a dark-premium palette and type pairing, plan a hook-hold-CTA rhythm, then verify text contrast before rendering. ## Quick Start Ask the agent to plan the visual direction, palette, typography, and beat rhythm for your HyperFrames video using this skill before writing any HTML.

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

Read frame.md or design.md first if one exists, treating its YAML frontmatter as normative brand tokens. Otherwise adopt a frame-preset, pick a named visual style, or serve the interactive design picker template and save the pasted output as design.md.

How do I make HyperFrames visuals react to music or voice?▼

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 amplitude to opacity while keeping text effects subtle.

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

hyperframes-creative covers non-animation direction: palettes, typography, narration, beat planning, and composition patterns. Atomic motion patterns, scene blueprints, transitions, and CSS marker effects live in the separate hyperframes-animation skill.

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

Run contrast-report.mjs against the composition directory. It samples frames, measures WCAG 2.1 contrast ratios for each text element against the pixels behind it, writes a JSON report plus an annotated overlay sprite, and exits nonzero on AA failures.

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

The skill identifies skipping house-style.md and video-composition.md as the main cause. Those references enforce video-medium density, foreground metadata like data bars and monospace readouts, and interpreting prompts as concepts rather than literal restyles.

When should I not add scenes, narration, or transitions in HyperFrames?▼

Do not add extra 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→
heygen-comheygen-com
43.5k

hyperframes-core

Defines the composition contract for building renderable HyperFrames HTML video projects.

Official
Advanced
firstsun-devfirstsun-dev
3

hyperframes-animation

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

Official
Advanced
bwhtechbwhtech

hyperframes

Create timed video compositions with HTML, CSS, and GSAP.

Official
Advanced
Sma1lboySma1lboy
136

hyperframes-design

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

Community
Advanced