skills.rest
CodeWithSally
CodeWithSallyOFFICIAL
Explore all skills by this author →
GitHub

hyperframes-creative

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

13|17|Updated Jan 30, 2025
Search Tags:#color palettes#typography#creative direction#video design#audio-reactive#hyperframes#beat planning
One-click install
npx skills add https://github.com/CodeWithSally/CodeWithSally-Apex-English --skill hyperframes-creative-codewithsally
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: hyperframes-creative
Source: https://github.com/CodeWithSally/CodeWithSally-Apex-English/tree/main/Sessions/ClaudeCode/Session007/.agents/skills/hyperframes-creative
Command: npx skills add https://github.com/CodeWithSally/CodeWithSally-Apex-English --skill hyperframes-creative-codewithsally

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, turning vague prompts into concrete design specs, palettes, typography, narration scripts, and scene rhythm plans instead of generic web-page-looking output. ## Core Features & Use Cases - Design Spec Handling: Reads and enforces frame.md/design.md specs as brand truth, with post-authoring verification of colors, typography, corners, spacing, and depth. - Style & Palette Direction: Offers house-style defaults, named visual styles, curated palette files, and an interactive two-phase design picker that outputs a design.md spec. - Beat & Narration Planning: Plans per-beat concepts, motion verbs, rhythm patterns, transitions, and audio-reactive visuals driven by pre-extracted audio band data. - Use Case: When asked to create a product launch video, read the project's design spec, pick a bold-energetic palette, plan a hook-hold-CTA rhythm across beats, then verify the final composition against the spec before rendering. ## Quick Start Ask the AI to create the visual direction and beat plan for a HyperFrames product launch video using the 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: copy templates/design-picker.html to .hyperframes/pick-design.html, inject generated mood boards, palettes, and type pairings, then serve it on a local HTTP port. The user picks a direction and pastes back a design.md file with YAML frontmatter tokens.

How do I make HyperFrames visuals react to audio?▼

Pre-extract frequency band data with scripts/extract-audio-data.py, then sample the bands per frame inside a GSAP timeline using tl.call() in a loop. Map bass to scale, treble to glow, and overall amplitude to opacity or position.

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

hyperframes-creative covers non-animation direction: design specs, palettes, typography, narration, beat planning, and composition patterns. hyperframes-animation handles atomic motion patterns, scene blueprints, text effects, and CSS or shader transitions.

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

Run scripts/contrast-report.mjs against the composition directory. It samples frames, measures WCAG contrast ratios between text and the actual pixels behind it, and writes a contrast-report.json plus an annotated overlay image, exiting nonzero if any text fails AA.

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→
X-RANKFLOW-MEDIA-GROUPX-RANKFLOW-MEDIA-GROUP

hyperframes-core

Manage HTML and GSAP composition structure, timing, and media playback.

Official
Advanced
automatedigitalautomatedigital
1

hyperframes

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

Official
Advanced
bwhtechbwhtech

hyperframes-registry

Install and wire HyperFrames registry blocks into video compositions.

Official
Intermediate
KamalabotKamalabot

remotion-to-hyperframes

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

Community
Advanced