create-rule
Create Cursor rules for persistent AI guidance. Use when the user wants to create a rule, add coding standards, set up project…
@coco-researchInstall SkillDevelopment
Skill
/hyperframes-creative
Non-animation creative direction for HyperFrames videos. Use for design spec (frame.md / design.md) handling, palettes, typography, narration, beat planning, audio-reactive visuals, composition patterns, and brand / style decisions. For atomic motion patterns and scene
Claude Code
$ npx -y skills add coco-research/coco --skill hyperframes-creative --agent claude-code
Codex
$ npx skills add coco-research/coco --skill hyperframes-creative -a codex -y
Cursor
$ npx skills add coco-research/coco --skill hyperframes-creative -a cursor -y
Gemini CLI
$ npx skills add coco-research/coco --skill hyperframes-creative -a gemini-cli -y
GitHub Copilot
$ npx skills add coco-research/coco --skill hyperframes-creative -a github-copilot -y
OpenCode
$ npx skills add coco-research/coco --skill hyperframes-creative -a opencode -y
Windsurf
$ npx skills add coco-research/coco --skill hyperframes-creative -a windsurf -y
SKILL.md
hyperframes-creative.SKILL.mdname: hyperframes-creative
description: Non-animation creative direction for HyperFrames videos. Use for design spec (frame.md / design.md) handling, palettes, typography, narration, beat planning, audio-reactive visuals, composition patterns, and brand / style decisions. For atomic motion patterns and scene blueprints, use `hyperframes-animation`.
HyperFrames Creative
Brand, pacing, style, narration, 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-animation` — 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 scale, depth, and foreground detail. It explains how to avoid empty web-page layouts without imposing a universal element count. > > 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`](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`
- Interactive selection → `references/design-picker.md`
3. For multi-scene work, plan beats and rhythm before writing HTML → `references/beat-direction.md`. For scene transitions, jump to `hyperframes-animation/transitions/`. 4. For motion-heavy work, read `references/motion-principles.md` (high-level guardrails), then go to `hyperframes-animation` for atomic rules.
Routing
| Topic | Read | | ----------------------------------------------------------------------------- | ---------------------------------------------- | | Adopt a ready-made frame-preset as `frame.md` (optional) | `frame-presets/` · `references/design-spec.md` | | Default palettes, motion, typography, lazy defaults to question | `references/house-style.md` | | Named style presets, mood-to-style routing | `references/visual-styles.md` | | Palette-specific color tokens | `palettes/*.md` | | Composition patterns — PiP, text-behind-subject, title card, slide show | `references/composition-patterns.md` | | Stats / infographic presentation | `references/data-in-motion.md` | | Structured expansion for open-ended prompts | `references/prompt-expansion.md` | | Video-medium density, scale, color, frame composition | `references/video-composition.md` | | Per-beat direction, rhythm planning, transition timing | `references/beat-direction.md` | | Post-authoring spec verification (colors, type, corners, spacing, depth) | `references/design-adherence.md` | | High-level motion guardrails and GSAP-quality rules | `references/motion-principles.md` | | Font selection, pairings, rendered-video type guardrails | `references/typography.md` | | Story doctrine — hook language, value-before-evidence, storyboard-as-proposal | `references/story-spine.md` | | Script pacing, tone, openings, number pronunciation | `references/narration.md` | | Precomputed audio bands mapped to motion | `references/audio-reactive.md` |
Scripts
- `scripts/contrast-report.mjs` — inspect contrast warnings from rendered frames.
- `scripts/extract-audio-data.py` — pre-extract audio bands for audio-reactive compositions.
- `scripts/package-loader.mjs` — support script for bundled creative tooling.
`contrast-report.mjs` resolves helper packages from the current project first, then can bootstrap the bundled HyperFrames package version. Set `HYPERFRAMES_SKILL_PKG_VERSION=<version>` only when running the skill outside the bundled CLI/skill install and you need to pin that bootstrap version explicitly.
Run from the repo root with explicit paths, for example:
python skills/hyperframes-creative/scripts/extract-audio-data.py <audio-file>
Animation analysis (`animation-map.mjs`) lives in `hyperframes-animation/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, narration, music, 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.
Read more
name: hyperframes-creative description: Non-animation creative direction for HyperFrames videos. Use for design spec (frame.md / design.md) handling, palettes, typography, narration, beat planning, audio-reactive visuals, composition patterns, and brand / style decisions. For atomic motion patterns and scene blueprints, use `hyperframes-animation`.
HyperFrames Creative
Brand, pacing, style, narration, 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-animation` — 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 scale, depth, and foreground detail. It explains how to avoid empty web-page layouts without imposing a universal element count. > > 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`](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`
- Interactive selection → `references/design-picker.md`
3. For multi-scene work, plan beats and rhythm before writing HTML → `references/beat-direction.md`. For scene transitions, jump to `hyperframes-animation/transitions/`. 4. For motion-heavy work, read `references/motion-principles.md` (high-level guardrails), then go to `hyperframes-animation` for atomic rules.
Routing
| Topic | Read | | ----------------------------------------------------------------------------- | ---------------------------------------------- | | Adopt a ready-made frame-preset as `frame.md` (optional) | `frame-presets/` · `references/design-spec.md` | | Default palettes, motion, typography, lazy defaults to question | `references/house-style.md` | | Named style presets, mood-to-style routing | `references/visual-styles.md` | | Palette-specific color tokens | `palettes/*.md` | | Composition patterns — PiP, text-behind-subject, title card, slide show | `references/composition-patterns.md` | | Stats / infographic presentation | `references/data-in-motion.md` | | Structured expansion for open-ended prompts | `references/prompt-expansion.md` | | Video-medium density, scale, color, frame composition | `references/video-composition.md` | | Per-beat direction, rhythm planning, transition timing | `references/beat-direction.md` | | Post-authoring spec verification (colors, type, corners, spacing, depth) | `references/design-adherence.md` | | High-level motion guardrails and GSAP-quality rules | `references/motion-principles.md` | | Font selection, pairings, rendered-video type guardrails | `references/typography.md` | | Story doctrine — hook language, value-before-evidence, storyboard-as-proposal | `references/story-spine.md` | | Script pacing, tone, openings, number pronunciation | `references/narration.md` | | Precomputed audio bands mapped to motion | `references/audio-reactive.md` |
Scripts
- `scripts/contrast-report.mjs` — inspect contrast warnings from rendered frames.
- `scripts/extract-audio-data.py` — pre-extract audio bands for audio-reactive compositions.
- `scripts/package-loader.mjs` — support script for bundled creative tooling.
`contrast-report.mjs` resolves helper packages from the current project first, then can bootstrap the bundled HyperFrames package version. Set `HYPERFRAMES_SKILL_PKG_VERSION=<version>` only when running the skill outside the bundled CLI/skill install and you need to pin that bootstrap version explicitly.
Run from the repo root with explicit paths, for example:
python skills/hyperframes-creative/scripts/extract-audio-data.py <audio-file>
Animation analysis (`animation-map.mjs`) lives in `hyperframes-animation/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, narration, music, 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.
Ships withcoco
495 personas across 13 departments, 229 skills[^installed] and 388 commands in the full catalog (coco 1.9.0, 2026-10-21). Agent skills, slash commands and subagents for Claude Code, Cursor, Codex and other AI coding agents.
631200 skills53 agents
Stars on GitHub
Momentum
- stars in total
- 631
Other skills on coco.
@coco-researchInstall Skillcreate-skill
Guides users through creating effective Agent Skills for Cursor. Use when the user wants to create, write, or author a new skill,…
@coco-researchInstall Skillcreate-subagent
Create custom subagents for specialized AI tasks. Use when the user wants to create a new type of subagent, set up task-specific…
@coco-researchInstall Skillmigrate-to-skills
Convert 'Applied intelligently' Cursor rules (.cursor/rules/*.mdc) and slash commands (.cursor/commands/*.md) to Agent Skills…
@coco-researchInstall Skillupdate-cursor-settings
Modify Cursor/VSCode user settings in settings.json. Use when the user wants to change editor settings, preferences,…
@coco-researchInstall Skillagent-lightning
Train and optimize AI agents using Microsoft's Agent Lightning framework with reinforcement learning. Use when setting up agent…
@coco-researchInstall SkillMore skills from other plugins.
Auto-invoked
brainstorming
You MUST use this before any creative work - creating features, building components, adding functionality, modifying behavior, or…
@obraInstall Skillask-matt
Ask which skill or flow fits your situation. A router over the skills in this repo.
@mattpocockInstall SkillAuto-invoked
Questions about hyperframes-creative.
- Which coding agents can use hyperframes-creative?
- hyperframes-creative installs in Claude Code, Codex, Cursor, Gemini CLI, GitHub Copilot, OpenCode and Windsurf with the skills CLI, using each agent's flag shown on this page. Flowy's auto-invocation, which fires a skill when your prompt matches, runs in Claude Code only.