Skip to content
cccskills
FreePublished on GitHub

hyperframes-design

Non-animation creative direction for HyperFrames videos. Use for design spec (frame.md / design.md) handling, palettes, typography, beat planning, composition patterns, and brand / style decisions. For atomic motion patterns and scene blueprints, use `hyperframes-motion`.

The English summary is being prepared. Showing the original description.

See how to install

Files included (62)

  • SKILL.md4.7 KB
  • frame-presets/biennale-yellow/caption-skin.html8.1 KB
  • frame-presets/biennale-yellow/frame-showcase.html34.1 KB
  • frame-presets/biennale-yellow/FRAME.md17.4 KB
  • frame-presets/blockframe/caption-skin.html8.3 KB
  • frame-presets/blockframe/frame-showcase.html37.9 KB
  • frame-presets/blockframe/FRAME.md15.9 KB
  • frame-presets/blue-professional/caption-skin.html8.2 KB
  • frame-presets/blue-professional/frame-showcase.html38.2 KB
  • frame-presets/blue-professional/FRAME.md16.8 KB
  • frame-presets/bold-poster/caption-skin.html8.6 KB
  • frame-presets/bold-poster/frame-showcase.html31.6 KB
  • frame-presets/bold-poster/FRAME.md15.6 KB
  • frame-presets/broadside/caption-skin.html8.4 KB
  • frame-presets/broadside/frame-showcase.html33.1 KB
  • frame-presets/broadside/FRAME.md15.9 KB
  • frame-presets/capsule/caption-skin.html8.3 KB
  • frame-presets/capsule/frame-showcase.html42.0 KB
  • frame-presets/capsule/FRAME.md16.8 KB
  • frame-presets/cartesian/caption-skin.html8.2 KB
  • frame-presets/cartesian/frame-showcase.html34.5 KB
  • frame-presets/cartesian/FRAME.md16.9 KB
  • frame-presets/claude/caption-skin.html8.2 KB
  • frame-presets/claude/frame-showcase.html42.7 KB
  • frame-presets/claude/FRAME.md20.2 KB
  • frame-presets/cobalt-grid/caption-skin.html8.7 KB
  • frame-presets/cobalt-grid/frame-showcase.html45.9 KB
  • frame-presets/cobalt-grid/FRAME.md16.9 KB
  • frame-presets/coral/caption-skin.html8.3 KB
  • frame-presets/coral/frame-showcase.html35.6 KB
  • frame-presets/coral/FRAME.md18.5 KB
  • frame-presets/creative-mode/caption-skin.html8.3 KB
  • frame-presets/creative-mode/frame-showcase.html37.8 KB
  • frame-presets/creative-mode/FRAME.md19.1 KB
  • frame-presets/daisy-days/caption-skin.html8.4 KB
  • frame-presets/daisy-days/frame-showcase.html41.3 KB
  • frame-presets/daisy-days/FRAME.md17.0 KB
  • frame-presets/editorial-forest/caption-skin.html8.3 KB
  • frame-presets/editorial-forest/frame-showcase.html36.0 KB
  • frame-presets/editorial-forest/FRAME.md16.6 KB
  • palettes/bold-energetic.md417 B
  • palettes/clean-corporate.md410 B
  • palettes/dark-premium.md389 B
  • palettes/jewel-rich.md394 B
  • palettes/monochrome.md454 B
  • palettes/nature-earth.md399 B
  • palettes/neon-electric.md380 B
  • palettes/pastel-soft.md392 B
  • palettes/warm-editorial.md411 B
  • references/beat-direction.md13.1 KB
  • references/composition-patterns.md5.5 KB
  • references/data-in-motion.md1.2 KB
  • references/design-adherence.md1.4 KB
  • references/design-spec.md10.2 KB
  • references/house-style.md5.0 KB
  • references/motion-principles.md8.7 KB
  • references/prompt-expansion.md5.5 KB
  • references/typography.md13.8 KB
  • references/video-composition.md3.8 KB
  • references/visual-styles.md11.7 KB
  • scripts/contrast-report.mjs12.3 KB
  • scripts/package-loader.mjs8.1 KB

SKILL.md (original)

Review the instructions the agent will receive before you install.

HyperFrames Design

Brand, pacing, style, and composition direction. Use after the technical contract from /hyperframes/core is in place.

For motion patterns, scene blueprints, transitions, and CSS marker effects, use hyperframes-motion — this skill is intentionally non-animation.

Read these two FIRST for any non-trivial composition — they override web instincts:

  • references/house-style.md — "interpret the prompt, generate real content," the lazy-default list, and the background/foreground layer recipe. This is what turns a literal restyle into a concept.
  • references/video-composition.md — video-medium density, scale, foreground metadata (the "produced, not generated" detailing: data bars, registration marks, monospace readouts, 8-10 elements/scene).

Skipping these is the single biggest cause of generic, web-page-looking output. They are not optional rows in the routing table below — for anything beyond a one-line edit, open both before you choose colors or write HTML.

Workflow

  1. If a project has a design spec, read it first and treat its frontmatter tokens as brand truth (colors, fonts, spacing, tone, constraints). Which file to read (precedence frame.md → design.md → DESIGN.md) and how to parse it (frontmatter = normative, prose = context) are defined once in references/design-spec.md — resolve and load per that doc.
  2. If no design spec exists and the user asks for visual direction, choose a route:
    • Ready-made frame-preset (optional) → frame-presets/ (adopt a FRAME.md as frame.md; see references/design-spec.md)
    • Named style or mood → references/visual-styles.md
    • Fast defaults → references/house-style.md
  3. For multi-scene work, plan beats and rhythm before writing HTML → references/beat-direction.md. For scene transitions, jump to hyperframes-motion/transitions/.
  4. For motion-heavy work, read references/motion-principles.md (high-level guardrails), then go to hyperframes-motion for atomic rules.

Routing

TopicRead
Adopt a ready-made frame-preset as frame.md (optional)frame-presets/ · references/design-spec.md
Default palettes, motion, typography, lazy defaults to questionreferences/house-style.md
Named style presets, mood-to-style routingreferences/visual-styles.md
Palette-specific color tokenspalettes/*.md
Composition patterns — PiP, text-behind-subject, title card, slide showreferences/composition-patterns.md
Stats / infographic presentationreferences/data-in-motion.md
Structured expansion for open-ended promptsreferences/prompt-expansion.md
Video-medium density, scale, color, frame compositionreferences/video-composition.md
Per-beat direction, rhythm planning, transition timingreferences/beat-direction.md
Post-authoring spec verification (colors, type, corners, spacing, depth)references/design-adherence.md
High-level motion guardrails and GSAP-quality rulesreferences/motion-principles.md
Font selection, pairings, rendered-video type guardrailsreferences/typography.md

Scripts

  • scripts/contrast-report.mjs — inspect contrast warnings from rendered frames.
  • scripts/package-loader.mjs — support script for bundled creative tooling.

Run from the repo root with explicit paths.

Animation analysis (animation-map.mjs) lives in hyperframes-motion/scripts/.

Boundaries

  • Do not override /hyperframes/core technical rules.
  • Do not require a design system for a minimal technical composition.
  • Do not add extra scenes, captions, or transitions unless the request calls for them or you first propose the expansion.
  • Keep recipe references task-specific; do not read every reference for simple edits.

Reviews

No reviews yet. Tell others what you thought.

Comments

No login needed. Share how it worked for you, ask a question, or note where it did not run.

No comments yet. Be the first to write one.

Comments are published right away. Do not include personal information such as email addresses or phone numbers. Up to 2 URLs.

0 / 1,000 characters

This form is protected by reCAPTCHA, and the Google Privacy Policy and Terms of Service apply.

More skills from this repository

Sketch types, signatures, and module structure before code, then stay in the loop while implementation fills in. Use for /architect, 'architect this', 'design this', or non-trivial work where jumping to code would lock in the wrong shape.

The English summary is being prepared. Showing the original description.

Sma1lboy/rove176Updated Oct 19, 2026

arena

Free

Spawn N parallel candidates at the same task, pick a base, graft the strongest parts of the losers into it. Use for /arena, 'arena this', 'throw it in the arena', or when one attempt at a non-trivial artifact would lock in the wrong shape.

The English summary is being prepared. Showing the original description.

Sma1lboy/rove176Updated Oct 19, 2026

在 rove 仓库内跑 auto-motion——把 transcription.srt 拆成多段 MG 动画镜头并拼接成竖屏视频(storyboard 分镜 + theme.md 全片主题 + 逐镜头 claude -p 子进程 + ffmpeg 拼接)。本 skill 是薄 wrapper:解析 auto-motion 模板根,继承 rove 品牌 theme,执行逻辑以 auto-motion 仓库的 canonical SKILL.md 为准。当用户说"跑 auto-motion"、"把这个字幕稿/口播稿做成视频"、"给 rove 做一条 MG 宣传片"时使用。

The English summary is being prepared. Showing the original description.

Sma1lboy/rove176Updated Oct 19, 2026

Find what a change could break somewhere else before it ships, beyond the diff, and prove the one fact it's safe because of by running real code instead of writing it up. Use for 'blast radius of X', 'what could this break', or reviewing a small diff you don't trust.

The English summary is being prepared. Showing the original description.

Sma1lboy/rove176Updated Oct 19, 2026

Draft Rove release notes as Changesets. Writes user-facing entries as `.changeset/*.md` files for `@sma1lboy/rove` (consumed into `packages/rove/CHANGELOG.md` at release time). Use when the user asks for "changelog", "release notes", "what changed", "add a changeset", or before cutting a version. Enforces Rove's no-soft-wrap rule so GitHub release pages render flowing text.

The English summary is being prepared. Showing the original description.

Sma1lboy/rove176Updated Oct 19, 2026

Design an auditable playbook when no narrower one fits: a large migration, an ambitious multi-part change, or work a human reviews after stepping away. Scales rigor to the task, runs a hypothesis loop, and logs decisions via show-me-your-work. Use for /figure-it-out, 'figure it out', a large migration, or when no narrower playbook applies.

The English summary is being prepared. Showing the original description.

Sma1lboy/rove176Updated Oct 19, 2026

See all skills by Sma1lboy

Report a problem with this skill