skills.rest
vibe-motion
vibe-motionOFFICIAL
Explore all skills by this author →
WebsiteGitHub

hyperframes-design

Define frame-scale visual direction for HyperFrames video compositions from design specs.

236|31|Updated Jun 29, 2026
Search Tags:#typography#design system#composition patterns#video composition#hyperframes#palette routing#beat planning
One-click install
npx skills add https://github.com/vibe-motion/auto-motion --skill hyperframes-design
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: hyperframes-design
Source: https://github.com/vibe-motion/auto-motion/tree/main/exampleFolder/.claude/skills/hyperframes-design
Command: npx skills add https://github.com/vibe-motion/auto-motion --skill hyperframes-design

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill turns a rough video idea into a clear frame-level visual direction, so you can make consistent palette, typography, composition, and pacing decisions without improvising each scene from scratch.

Core Features & Use Cases

  • Design-spec driven direction: Reads frame or design specs first and treats their tokens as the source of truth for brand colors, fonts, spacing, and constraints.
  • Scene planning and style routing: Helps choose palettes, composition patterns, beat direction, typography pairings, and visual moods for single-scene or multi-scene HyperFrames work.
  • Production-ready guidance: Supports contrast checks, design adherence, and script-backed assets so the result stays consistent across authoring and validation.
  • Use case: Use it when you need to define the visual language for a branded motion piece, a data-heavy explainer, or a stylized social video before building the actual scenes.

Quick Start

Use the hyperframes-design skill to turn my brief into a frame-level visual system with palette, typography, composition, and beat direction recommendations.

Frequently Asked Questions about hyperframes-design

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I maintain consistent typography and palette routing across multi-scene video compositions?▼

To maintain consistent typography and palette routing in video compositions, apply a design-spec driven approach that reads frame tokens as the source of truth for colors and fonts. This enforces visual consistency across multiple scenes without improvising.

What is beat planning in video composition and when do I need design-spec precedence?▼

Beat planning in video composition defines the pacing and visual rhythm of your scenes. You need design-spec precedence when a project requires strict adherence to brand tokens, contrast checks, and deterministic creative tooling for stylized social videos or explainers.

How do I turn a brief into a frame-level visual system with composition patterns?▼

Turn a brief into a frame-level visual system by routing the initial idea through scripts and references that evaluate design specs. This process outputs specific composition patterns, typography pairings, and palette recommendations for your scenes.

Does hyperframes-design support single-scene and multi-scene style decisions?▼

Yes, hyperframes-design supports both single-scene and multi-scene style decisions, routing visual moods, typography, and composition patterns for projects ranging from branded motion pieces to data-heavy explainers.

Can I use sharp with design-spec driven video composition workflows?▼

Yes, you can use sharp within design-spec driven video composition workflows. The skill relies on sharp and producer dependencies to support script-backed assets, ensuring deterministic creative tooling and design adherence across authoring and validation.

What are the limitations of improvising palette and typography selection for motion pieces?▼

Improvising palette and typography selection for motion pieces lacks design-spec precedence and contrast checks, leading to inconsistent visual direction. Without deterministic creative tooling and script-backed assets, your branded video style may drift across scenes.

Related Skills

Explore More Design & Creative Skills→
peterbamuhigirepeterbamuhigire
1

design-system

Configure Tailwind CSS and global CSS for website fonts, colors, spacing, and animations.

Community
Advanced
ammosuammosu
24

video-downloader

Download videos from YouTube and other platforms in MP4, WebM, or audio-only formats.

Community
Advanced
kazuma2529kazuma2529

seminar-material

Generate branded seminar slides and workshop materials via Python scripts.

Community
Advanced
fusenginefusengine
22

identity-system

Generate a visual identity with OKLCH palettes, typography, spacing, and motion.

Community
Advanced