skills.rest
AnderHonorato
AnderHonoratoCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

hyperframes-creative

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

Updated Aug 28, 2026
Search Tags:#color palettes#typography#video production#design spec#creative direction#audio-reactive#beat planning
One-click install
npx skills add https://github.com/AnderHonorato/Mem-rias-IA---Infinity --skill hyperframes-creative-anderhonorato
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: hyperframes-creative
Source: https://github.com/AnderHonorato/Mem-rias-IA---Infinity/tree/main/Manus/Skills/html-video-production/references/hyperframes-creative
Command: npx skills add https://github.com/AnderHonorato/Mem-rias-IA---Infinity --skill hyperframes-creative-anderhonorato

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 non-animation creative direction for HyperFrames videos, preventing generic web-page-looking output by enforcing design specs, house style, and video-medium composition rules. ## Core Features & Use Cases - Design Spec Handling: Reads frame.md or design.md frontmatter as brand truth for colors, fonts, spacing, and constraints, with post-authoring adherence verification. - Creative Direction Resources: Routes to references for palettes, typography, visual styles, composition patterns, narration, beat direction, and audio-reactive visuals. - Interactive Design Picker: Generates a two-phase HTML picker (mood boards then fine-tuning) that outputs a spec-compliant design.md. - Use Case: When building a multi-scene product launch video, use this Skill to select a dark-premium palette, plan beat rhythm and transitions, write narration pacing, and verify the final composition matches the design spec. ## Quick Start Use the hyperframes-creative skill to define the visual direction, palette, and beat plan for my product launch video 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 references/design-spec.md to resolve frame.md or design.md, treating YAML frontmatter as normative tokens and prose as context. If no spec exists, use the design picker template to generate a spec-compliant design.md interactively.

How do I make visuals react to audio 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 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, composition patterns, and beat planning. Atomic motion patterns, scene blueprints, transitions, and CSS marker effects belong to hyperframes-animation.

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

Skipping references/house-style.md and references/video-composition.md is the main cause of web-page-looking output. These references enforce video-medium scale, depth layers, and foreground detail instead of literal layout restyling.

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

Run scripts/contrast-report.mjs against the composition directory. It samples real background pixels behind each text element, computes WCAG ratios, and exits with code 1 if any element fails AA.

Related Skills

Explore More Design & Creative Skills→
X-RANKFLOW-MEDIA-GROUPX-RANKFLOW-MEDIA-GROUP

hyperframes-creative

Provide creative direction for HyperFrames video compositions without animations.

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
Sma1lboySma1lboy
136

hyperframes-design

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

Community
Advanced
iart-aiiart-ai
12

beat-sync-editing

Calculate frame-accurate cuts and speed ramps from BPM for video timelines.

Official
Advanced