MCP: style brief obligatorio + 3 conceptos (inspirado en bang-motion)

skills/hypercodemotion/SKILL.md

@@ -18,7 +18,7 @@ Use this Skill when asked to create, improve, extend, combine, or troubleshoot e
    - Custom: their own width × height in pixels.
 
    Accept a platform name as the answer («para Reels» means 9:16). Ask this together with any other blocking question, never as a second round. Use the chosen `width` and `height` everywhere: type sizes, margins and the safe area depend on it (see [composition.md](references/composition.md)). Never switch to another format later without asking. Do not ask when the size is already known: an existing project keeps its own `width` and `height`, a prompt copied from Studio states its format, and a gallery recreation follows its brief.
-2. **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. **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. For an original video, follow `get_motion_recipe` name `style-brief` (mandatory): brief and branding (palette 3-5 hex with source, title and body font, tone; if there is no brand, propose one and get approval), then 3 concepts with one recommended, and wait for the user to pick before building. Pass the approved brief to `create_hcmotion` (`brief`).
 3. **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. When the request names a Studio gallery template (an id such as `mix-promo-editorial`), call `get_template` with that id and the video's format, and follow its design: palette, fonts, frame, scene system and motion; replace all its texts.
 4. **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. Join the beats with Studio scene transitions (`scenes[i].transition`: `fade`, `slide`, `push`, `wipe`, `clockWipe`, `iris`, `zoom`, `flip`, `blur`; exact shape in [motion-design](references/motion-design.md#scene-transitions)).
 5. **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](references/html-scenes.md) and [the example](examples/html-scene-launch.json)). 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. For a distinctive look (riso print, springs, camera, audio, UI mockups, per-scene backgrounds, the 13 style looks) call `get_motion_recipe` first: no name gives the index, a name gives validated JSON to adapt.

src/contract.js

@@ -3,6 +3,7 @@ import { validateComposition } from "./validator.js";
 import { screenRule } from "./frame.js";
 import { TRANSITIONS, checkScenes } from "./transitions.js";
 import { checkEases } from "./easing.js";
+import { checkSlides } from "./stylebrief.js";
 import { checkReservedNames, RESERVED_RULE, CODE_RESERVED, COMPONENT_RESERVED } from "./reserved.js";
 
 /** The user's own files («Tus materiales» in Studio): referenced by id, never uploaded here. */
@@ -66,6 +67,7 @@ export function validateJson(input, options = {}) {
   };
   if (report.format === "composition") input.layers.forEach((v,i)=>check(v,"$.layers["+i+"]"));
   if (report.format === "composition") notices.push(...checkScenes(input));
+  if (report.format === "composition") notices.push(...checkSlides(input));
   if (report.format === "improvement" && Array.isArray(input.add))
     input.add.forEach((v,i)=>check(v,"$.add["+i+"]"));
   const easeWarnings = report.format === "composition" || report.format === "improvement" ? checkEases(input) : [];

src/recipes.js

@@ -9,6 +9,7 @@
  */
 import { LOOKS, DECO } from "./looks.js";
 import { EASE_NAMES, UI_SPRING_NAMES } from "./easing.js";
+import { STYLE_BRIEF } from "./stylebrief.js";
 
 const FONT_LINK = (family) => `<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=${family}&amp;display=swap">`;
 const doc = (head, css, body) => `<!doctype html><html><head><meta charset="utf-8">${head}<style>html,body{width:100%;height:100%;margin:0;background:transparent;overflow:hidden}body{position:relative}${css}</style></head><body>${body}</body></html>`;
@@ -295,11 +296,13 @@ export function recipeFragment(name) {
 export function recipeIndex() {
   const rows = Object.entries(STATIC).map(([k, v]) => `${k}: ${v.summary}`);
   rows.push(`looks: ${looks.summary}`);
-  return `Motion recipes. Call get_motion_recipe with name=:\n${rows.join("\n")}\nlook:<id> (${LOOKS.map((l) => l.id).join(", ")}): one look in full.`;
+  rows.unshift("style-brief: mandatory first step: brief, branding, 3 concepts, anti-slide rules (no fragment).");
+  return `Before designing an original video: call get_motion_recipe with name=style-brief and follow it (brief, 3 concepts, wait for the user to pick).\n\nMotion recipes. Call get_motion_recipe with name=:\n${rows.join("\n")}\nlook:<id> (${LOOKS.map((l) => l.id).join(", ")}): one look in full.`;
 }
 
 /** Text of a recipe, or null when the name is unknown. */
 export function recipeText(name) {
+  if (name === "style-brief") return STYLE_BRIEF;
   if (STATIC[name]) {
     const r = STATIC[name];
     return `# ${name}. ${r.summary}\n${r.notes.map((n) => "- " + n).join("\n")}\n${fragmentText(r.fragment)}`;