HyperCodeMotion — Creative Composition Skill

Use this Skill when asked to create, improve, extend, combine, or troubleshoot editable HyperCodeMotion motion graphics. The goal is excellent visual direction AND importable data, not merely syntactically valid JSON.

Workflow (follow in order)

1. Brief and inputs — Identify purpose, audience, distribution format, duration, fps, language, brand, CTA (only when requested), narration and exact data. Analyze user-provided reference images/video, scripts, logos, visual assets and any existing JSON. Distinguish factual content from creative decisions. Ask only for information that blocks progress.
2. Art direction — Define visual concept, typography hierarchy, spacing grid, palette, contrast, material, rhythm, transition vocabulary and continuity. Reuse the actual reference's visual intent; do not invent a brand or factual measurements.
3. Storyboard and scenes — Create sequential beats with one communicative objective each. Decide which objects persist and transform between beats versus which appear only within one scene. Allocate time to reading and transitions; storyboard timing must fit total duration.
4. Composition plan — Default to HTML scenes: one HTML document per scene in docs, each visible piece marked data-hcm and animated by its own html layer (see html-scenes and the example). Use native layers (text, rect, particles…) when a piece must be edited as geometry or needs per-property keyframes. Plan layer IDs, order, scene boundaries, assets, effects and audio.
5. JSON generation — Produce one complete, standalone composition with layers at the root. To change an existing project, return the whole updated composition (keep unchanged layers, IDs and assets as they were), not a patch: a .hcmotion file can only carry a full composition.
6. MCP validation — The HyperCodeMotion MCP (https://mcp.hypercodemotion.com/mcp) is required. Call get_capabilities before selecting layer/effect fields; validate_json is optional for drafts. Do not claim validation if no call occurred.
7. Studio handoff — Call create_hcmotion with the finished JSON. If created is false, fix every error and call it again. Give the user the two links it returns: open (opens the project in Studio) and download (the .hcmotion file, to keep or load later with «Cargar proyecto»), and say both expire in 24 hours. Never paste the composition JSON for the user to copy: Studio only opens .hcmotion files. If the MCP is not connected, stop and ask the user to connect it instead of returning JSON. Never claim a perfect render from MCP results alone.

Always load relevant references

• Composition and JSON contract: root format, layers, timing, scenes, editing and merging.
• Art direction: design systems, images and fidelity to references.
• Motion direction: animation, pacing, continuity, keyframes.
• HTML scenes and assets: docs, data-hcm, image assets and safe references.
• MCP validation and QA: tools, repair loop, truthful confidence.

Load only the applicable reference files instead of pasting all reference contents into the model context every time.

Creative acceptance criteria

• Clear narrative and design hierarchy; readable at target size.
• Deliberate transitions; motion supports meaning rather than decorating every element.
• Consistent colors, type, spacing and asset treatment across scenes.
• No overlaps, cropped labels, flicker, unintentional empty frames or jumps in continuity (visually verify in Studio; do not assert without rendering).
• Headlines read as separate words: keep letter-spacing at or above -0.03em for big type (tighter makes «Escribe menos» look like one word).
• Exact textual and numerical facts respected; no placeholder assets masquerading as real images.
• Compositions remain editable: descriptive layer names/IDs, coherent layers, keyframes and asset references.
• Layer effects and properties selected from actual Studio capabilities, not guessed APIs.

Non-negotiable truthfulness

validate_json currently performs structural preflight against a source-pinned capability snapshot, returns fullyValidated: false, and cannot verify appearance or guarantee Studio import/rendering. Images in a prompt are references; they are not automatically embedded in JSON. Never invent asset IDs, live external image URLs, render results, tool calls, or successful tests.

Output contract

Default: a single composition object with version: 1, positive dimensions/fps/duration, background, params, and a nonempty layers array, delivered only through create_hcmotion as .hcmotion links. Do not put commentary inside JSON.

Before output: confirm requested duration, meaningful visibility of every scene, valid asset references and layers at the root. If validation could not be completed, say so in your message.