skills.rest
noemdb
noemdbCOMMUNITY
Explore all skills by this author →
GitHub

hyperframes-creative

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

1|Updated Jan 10, 2024
Search Tags:#typography#color palette#design spec#creative direction#video composition#hyperframes#beat planning
One-click install
npx skills add https://github.com/noemdb/cfla --skill hyperframes-creative-noemdb
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: hyperframes-creative
Source: https://github.com/noemdb/cfla/tree/main/.agents/skills/hyperframes-creative
Command: npx skills add https://github.com/noemdb/cfla --skill hyperframes-creative-noemdb

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 video compositions, 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, verifies color, typography, corner, spacing, and depth adherence after authoring. - Visual direction resources: Ships house-style rules, named visual styles, curated palettes, typography pairings, composition patterns, and an interactive design-picker HTML tool. - Story and rhythm planning: Guides beat direction, narration scripting, story spine, audio-reactive visuals, and data-in-motion presentation for multi-scene videos. - Use Case: Given a prompt for a product launch video, read the design spec, pick a dark-premium palette and type pairing, plan a hook-hold-CTA rhythm, then verify the rendered frames with the contrast-report script. ## Quick Start Ask the agent to create the visual direction and beat plan for a HyperFrames product launch video using the dark premium palette.

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: copy templates/design-picker.html into .hyperframes, inject generated mood boards, palettes, and type pairings, then serve it locally. The user picks a direction and pastes back a design.md file with YAML frontmatter tokens.

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. Atomic motion patterns, scene blueprints, transitions, and CSS marker effects live in the separate hyperframes-animation skill.

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

Pre-extract frequency bands with scripts/extract-audio-data.py, then sample the data per frame via tl.call() on the GSAP timeline. Map bass to scale, treble to glow, and amplitude to opacity while keeping text subtle at 3-6% variation.

How do I check text contrast in rendered video frames?▼

Run scripts/contrast-report.mjs against the composition directory. It samples timestamps, measures WCAG contrast ratios between text and the actual pixels behind it, and writes contrast-report.json plus an annotated overlay sprite.

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

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
automatedigitalautomatedigital
1

hyperframes

Create HTML-based video compositions with GSAP animations and render deterministic MP4 outputs.

Official
Advanced
hanzoaihanzoai

hyperframes-registry

Install and wire reusable HyperFrames blocks from a central registry.

Official
Intermediate
KamalabotKamalabot

remotion-to-hyperframes

Translate Remotion React video compositions into HyperFrame HTML and GSAP timelines.

Community
Advanced