skills.rest
X-manist
X-manistCOMMUNITY
Explore all skills by this author →
GitHub

hyperframes-creative

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

Updated Jul 16, 2026
Search Tags:#typography#color palette#design spec#creative direction#video design#audio-reactive#beat planning
One-click install
npx skills add https://github.com/X-manist/Cohmira --skill hyperframes-creative-x-manist
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: hyperframes-creative
Source: https://github.com/X-manist/Cohmira/tree/main/src/builtin-plugins/openmontage/.agents/skills/hyperframes-creative
Command: npx skills add https://github.com/X-manist/Cohmira --skill hyperframes-creative-x-manist

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve? Video compositions built without a design system end up looking like generic web pages. This Skill provides the non-animation creative direction layer for HyperFrames videos: design spec handling, palettes, typography, narration pacing, beat planning, and composition patterns. ## Core Features & Use Cases - Design Spec Handling: Reads frame.md / design.md specs and treats frontmatter tokens (colors, fonts, spacing) as normative brand truth, with post-authoring adherence verification. - Creative Direction References: House style rules, named visual styles, curated palettes, typography pairings, narration scripting, beat direction, and audio-reactive visual mapping. - 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 resolve the design spec, plan beat rhythm and transitions, pick a palette and type pairing, then verify the final HTML against the spec before rendering. ## Quick Start Ask the agent to plan the visual direction, palette, and narration beats for a HyperFrames video using the project's frame.md 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 apply a design spec to a HyperFrames video?▼

Read the first existing file in precedence order frame.md, design.md, then DESIGN.md. Treat its YAML frontmatter (colors, typography, spacing) as normative values quoted verbatim, and use the prose sections only as contextual guidance for layout decisions.

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.

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

Pre-extract frequency band data with the extract-audio-data.py script, then sample it per frame via tl.call() on the GSAP timeline. Map bass to scale, treble to glow, and overall amplitude to opacity or position.

Can I generate a design.md interactively instead of writing one?▼

Yes. The design picker workflow builds a two-phase HTML tool with mood boards and fine-tuning options, serves it locally, and outputs a spec-compliant design.md with YAML frontmatter that the user pastes back into the project.

Why does my rendered 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 interpretation rather than literal restyling of the prompt.

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

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 image, exiting nonzero on AA failures.

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
Noetfield-SystemsNoetfield-Systems

hyperframes-animation

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

Official
Advanced
CANTAGESTUDIOCANTAGESTUDIO
3

accessibility-contrast-audit

Audit UI color contrast and accessibility metrics against WCAG guidelines.

Community
Intermediate
SeaCloudAISeaCloudAI
1

wan2.7-image-pro

Generate high-fidelity images via SeaCloud CLI using wan27_image_pro.

Official
Advanced