npm - dreative - Versions diffs - 0.5.1 → 0.5.3 - Mend

dreative 0.5.1 → 0.5.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (48) hide show

package/README.md +49 -27
package/dist/cli/audit.js +206 -0
package/dist/cli/audit.test.js +79 -0
package/dist/cli/docsCheck.js +163 -0
package/dist/cli/docsCheck.test.js +8 -0
package/dist/cli/index.js +45 -9
package/dist/server/preview.js +73 -73
package/dist/server/store.js +11 -0
package/dist/shared/artifacts.js +220 -0
package/dist/shared/design.js +45 -24
package/dist/shared/ruleSystem.js +220 -0
package/dist/shared/ruleSystem.test.js +262 -0
package/dist/shared/skillSystem.js +173 -0
package/dist/shared/skillSystem.test.js +110 -0
package/dist/ui/assets/{index--vztc_MR.js → index-CKwmbx2j.js} +13 -13
package/dist/ui/index.html +12 -12
package/package.json +5 -3
package/skill/dreative/DESIGN.md +144 -108
package/skill/dreative/PLAN.md +285 -116
package/skill/dreative/SKILL.md +237 -144
package/skill/dreative/frameworks/nextjs.md +13 -0
package/skill/dreative/frameworks/react-vite.md +12 -0
package/skill/dreative/frameworks/styling.md +14 -0
package/skill/dreative/frameworks/sveltekit.md +10 -0
package/skill/dreative/frameworks/vue-nuxt.md +12 -0
package/skill/dreative/recipes/3d-recipes.md +44 -0
package/skill/dreative/recipes/cinematic-recipes.md +19 -0
package/skill/dreative/recipes/immersive-recipes.md +18 -0
package/skill/dreative/recipes/media-recipes.md +60 -0
package/skill/dreative/recipes/motion-recipes.md +68 -0
package/skill/dreative/references/ARTIFACTS.md +196 -0
package/skill/dreative/references/REFLEX_FONTS.json +44 -0
package/skill/dreative/references/RULES.json +186 -0
package/skill/dreative/references/SKILL_CONTRACT.md +30 -0
package/skill/dreative/references/TIERS.md +44 -0
package/skill/dreative/schemas/plan.schema.json +309 -0
package/skill/dreative/schemas/verify.schema.json +75 -0
package/skill/dreative/skills/3d.md +94 -267
package/skill/dreative/skills/cinematic.md +56 -232
package/skill/dreative/skills/experimental.md +108 -95
package/skill/dreative/skills/immersive.md +61 -223
package/skill/dreative/skills/interaction.md +9 -1
package/skill/dreative/skills/media.md +149 -564
package/skill/dreative/skills/mobile.md +129 -117
package/skill/dreative/skills/motion.md +126 -256
package/skill/dreative/skills/refined.md +116 -102
package/skill/dreative/skills/ux.md +155 -144
package/dist/server/ai.js +0 -177

package/dist/server/preview.js CHANGED Viewed

@@ -7,11 +7,11 @@ const here = path.dirname(fileURLToPath(import.meta.url));
 const packageRoot = path.resolve(here, "..", "..");
 /** Bundle a generated page component + mount shim into one iframe-ready JS file. */
 export async function buildPreview(generatedFile) {
-    const entry = `
-    import React from "react";
-    import { createRoot } from "react-dom/client";
-    import Page from ${JSON.stringify(generatedFile.replace(/\\/g, "/"))};
-    createRoot(document.getElementById("root")).render(React.createElement(Page));
+    const entry = `
+    import React from "react";
+    import { createRoot } from "react-dom/client";
+    import Page from ${JSON.stringify(generatedFile.replace(/\\/g, "/"))};
+    createRoot(document.getElementById("root")).render(React.createElement(Page));
   `;
     const result = await esbuild.build({
         stdin: {
@@ -30,79 +30,79 @@ export async function buildPreview(generatedFile) {
     return result.outputFiles[0].text;
 }
 export function previewHtml(scriptUrl) {
-    return `<!doctype html>
-<html>
-<head>
-  <meta charset="utf-8" />
-  <script src="https://cdn.tailwindcss.com"></script>
-  <style>body{margin:0}</style>
-</head>
-<body>
-  <div id="root"></div>
-  <script>
-    document.addEventListener("click", (e) => {
-      const el = e.target.closest("[data-dreative-id]");
-      if (!el) return;
-      e.preventDefault();
-      parent.postMessage({ type: "dreative-select", id: el.getAttribute("data-dreative-id") }, "*");
-    }, true);
-    document.addEventListener("mouseover", (e) => {
-      document.querySelectorAll(".dreative-hover").forEach(n => n.classList.remove("dreative-hover"));
-      const el = e.target.closest("[data-dreative-id]");
-      if (el) el.classList.add("dreative-hover");
-    });
-  </script>
-  <style>.dreative-hover{outline:2px dashed #6366f1;outline-offset:-2px;cursor:pointer}</style>
-  <script src="${scriptUrl}"></script>
-</body>
+    return `<!doctype html>
+<html>
+<head>
+  <meta charset="utf-8" />
+  <script src="https://cdn.tailwindcss.com"></script>
+  <style>body{margin:0}</style>
+</head>
+<body>
+  <div id="root"></div>
+  <script>
+    document.addEventListener("click", (e) => {
+      const el = e.target.closest("[data-dreative-id]");
+      if (!el) return;
+      e.preventDefault();
+      parent.postMessage({ type: "dreative-select", id: el.getAttribute("data-dreative-id") }, "*");
+    }, true);
+    document.addEventListener("mouseover", (e) => {
+      document.querySelectorAll(".dreative-hover").forEach(n => n.classList.remove("dreative-hover"));
+      const el = e.target.closest("[data-dreative-id]");
+      if (el) el.classList.add("dreative-hover");
+    });
+  </script>
+  <style>.dreative-hover{outline:2px dashed #6366f1;outline-offset:-2px;cursor:pointer}</style>
+  <script src="${scriptUrl}"></script>
+</body>
 </html>`;
 }
 /** Replica view: 1:1 stripped page. Interactions are inert; hover shows the
  *  agent-written summary of what each element does; click selects the block. */
 export function replicaHtml(scriptUrl, summaries) {
-    return `<!doctype html>
-<html>
-<head>
-  <meta charset="utf-8" />
-  <script src="https://cdn.tailwindcss.com"></script>
-  <style>body{margin:0}
-    .dreative-hover{outline:2px dashed #6366f1;outline-offset:-2px;cursor:pointer}
-    #dreative-tip{position:fixed;z-index:99999;max-width:340px;background:#16181f;color:#e8e8ea;border:1px solid #2c2f3a;border-radius:8px;padding:8px 10px;font:12px/1.45 ui-sans-serif,system-ui;pointer-events:none;display:none;box-shadow:0 8px 24px rgba(0,0,0,.4)}
-    #dreative-tip b{color:#a5b4fc}
-  </style>
-</head>
-<body>
-  <div id="root"></div>
-  <div id="dreative-tip"></div>
-  <script>
-    const SUMMARIES = ${JSON.stringify(summaries)};
-    // replica is a mockup: block navigation/submits, keep selection working
-    document.addEventListener("click", (e) => {
-      e.preventDefault();
-      const el = e.target.closest("[data-dreative-id]");
-      if (el) parent.postMessage({ type: "dreative-select-block", id: el.getAttribute("data-dreative-id") }, "*");
-    }, true);
-    document.addEventListener("submit", (e) => e.preventDefault(), true);
-    const tip = document.getElementById("dreative-tip");
-    document.addEventListener("mousemove", (e) => {
-      if (tip.style.display === "block") {
-        tip.style.left = Math.min(e.clientX + 14, innerWidth - 360) + "px";
-        tip.style.top = Math.min(e.clientY + 14, innerHeight - 80) + "px";
-      }
-    });
-    document.addEventListener("mouseover", (e) => {
-      document.querySelectorAll(".dreative-hover").forEach(n => n.classList.remove("dreative-hover"));
-      const el = e.target.closest("[data-dreative-id]");
-      if (!el) { tip.style.display = "none"; return; }
-      el.classList.add("dreative-hover");
-      const id = el.getAttribute("data-dreative-id");
-      const s = SUMMARIES[id];
-      if (s) { tip.innerHTML = "<b>" + id + "</b><br>" + s.replace(/</g, "&lt;"); tip.style.display = "block"; }
-      else tip.style.display = "none";
-    });
-  </script>
-  <script src="${scriptUrl}"></script>
-</body>
+    return `<!doctype html>
+<html>
+<head>
+  <meta charset="utf-8" />
+  <script src="https://cdn.tailwindcss.com"></script>
+  <style>body{margin:0}
+    .dreative-hover{outline:2px dashed #6366f1;outline-offset:-2px;cursor:pointer}
+    #dreative-tip{position:fixed;z-index:99999;max-width:340px;background:#16181f;color:#e8e8ea;border:1px solid #2c2f3a;border-radius:8px;padding:8px 10px;font:12px/1.45 ui-sans-serif,system-ui;pointer-events:none;display:none;box-shadow:0 8px 24px rgba(0,0,0,.4)}
+    #dreative-tip b{color:#a5b4fc}
+  </style>
+</head>
+<body>
+  <div id="root"></div>
+  <div id="dreative-tip"></div>
+  <script>
+    const SUMMARIES = ${JSON.stringify(summaries)};
+    // replica is a mockup: block navigation/submits, keep selection working
+    document.addEventListener("click", (e) => {
+      e.preventDefault();
+      const el = e.target.closest("[data-dreative-id]");
+      if (el) parent.postMessage({ type: "dreative-select-block", id: el.getAttribute("data-dreative-id") }, "*");
+    }, true);
+    document.addEventListener("submit", (e) => e.preventDefault(), true);
+    const tip = document.getElementById("dreative-tip");
+    document.addEventListener("mousemove", (e) => {
+      if (tip.style.display === "block") {
+        tip.style.left = Math.min(e.clientX + 14, innerWidth - 360) + "px";
+        tip.style.top = Math.min(e.clientY + 14, innerHeight - 80) + "px";
+      }
+    });
+    document.addEventListener("mouseover", (e) => {
+      document.querySelectorAll(".dreative-hover").forEach(n => n.classList.remove("dreative-hover"));
+      const el = e.target.closest("[data-dreative-id]");
+      if (!el) { tip.style.display = "none"; return; }
+      el.classList.add("dreative-hover");
+      const id = el.getAttribute("data-dreative-id");
+      const s = SUMMARIES[id];
+      if (s) { tip.innerHTML = "<b>" + id + "</b><br>" + s.replace(/</g, "&lt;"); tip.style.display = "block"; }
+      else tip.style.display = "none";
+    });
+  </script>
+  <script src="${scriptUrl}"></script>
+</body>
 </html>`;
 }
 export function ensureDir(p) {

package/dist/server/store.js CHANGED Viewed

@@ -6,6 +6,17 @@ export class Store {
         this.root = path.join(projectDir, ".dreative");
         fs.mkdirSync(path.join(this.root, "refs"), { recursive: true });
         fs.mkdirSync(path.join(this.root, "generated"), { recursive: true });
+        const readme = path.join(this.root, "README.md");
+        if (!fs.existsSync(readme)) {
+            fs.writeFileSync(readme, "# Dreative run artifacts — NOT the skill\n\n" +
+                "Everything in this folder (plan.md, system.md, verify.md, assets.json,\n" +
+                "project.json, mockups/, screenshots/) is OUTPUT of a Dreative design run,\n" +
+                "not instructions. The actual skill lives at\n" +
+                "`<agent-dir>/skills/dreative/SKILL.md` (look in `.claude/`, `.codex/`, or\n" +
+                "`.agents/`). For any new design request: read that SKILL.md and run its\n" +
+                "protocol from the start — these artifacts are the previous run's history,\n" +
+                "never proof the new request is already done.\n");
+        }
     }
     get file() {
         return path.join(this.root, "project.json");

package/dist/shared/artifacts.js ADDED Viewed

@@ -0,0 +1,220 @@
+function nonEmpty(value) {
+    return typeof value === "string" && value.trim().length > 0;
+}
+export function validatePlan(value) {
+    const errors = [];
+    const plan = value;
+    if (!plan || typeof plan !== "object")
+        return ["plan must be an object"];
+    if (plan.version !== 2)
+        errors.push("plan.version must be 2 (migrate legacy top-level sections into pages[])");
+    if (!nonEmpty(plan.request))
+        errors.push("plan.request is required");
+    if (!nonEmpty(plan.createdAt) || Number.isNaN(Date.parse(plan.createdAt)))
+        errors.push("plan.createdAt must be an ISO date");
+    if (!["solid", "premium", "expressive", "award"].includes(String(plan.tier)))
+        errors.push("plan.tier is invalid");
+    if (!["restyle", "relayout", "restructure", "reimagine"].includes(String(plan.depth)))
+        errors.push("plan.depth is invalid");
+    if (!Array.isArray(plan.skills) || !plan.skills.includes("ux") || !plan.skills.includes("mobile"))
+        errors.push("plan.skills must include ux and mobile");
+    if (!plan.skillPolicy ||
+        plan.skillPolicy.mode !== "hybrid" ||
+        plan.skillPolicy.routingApproved !== true ||
+        !Array.isArray(plan.skillPolicy.global) ||
+        !plan.skillPolicy.global.includes("ux") ||
+        !plan.skillPolicy.global.includes("mobile"))
+        errors.push("plan.skillPolicy must use approved hybrid routing with global ux and mobile");
+    if (!plan.designRead || !nonEmpty(plan.designRead.register) || !nonEmpty(plan.designRead.concept) || !nonEmpty(plan.designRead.signature))
+        errors.push("plan.designRead requires register, concept, and signature");
+    if (!Array.isArray(plan.pages) || plan.pages.length === 0)
+        errors.push("plan.pages must contain at least one page");
+    const coveredSkills = new Set();
+    for (const [pageIndex, page] of (plan.pages ?? []).entries()) {
+        const pagePrefix = `pages[${pageIndex}]`;
+        if (!nonEmpty(page.id) || !nonEmpty(page.name))
+            errors.push(`${pagePrefix} requires id and name`);
+        if (!Array.isArray(page.skills) || !page.skills.includes("ux") || !page.skills.includes("mobile"))
+            errors.push(`${pagePrefix}.skills must include ux and mobile`);
+        for (const globalSkill of plan.skillPolicy?.global ?? []) {
+            if (!page.skills?.includes(globalSkill))
+                errors.push(`${pagePrefix} is missing global skill ${globalSkill}`);
+        }
+        for (const skill of page.skills ?? []) {
+            coveredSkills.add(skill);
+            if (!plan.skills?.includes(skill))
+                errors.push(`${pagePrefix} uses unselected skill ${skill}`);
+        }
+        if (!Array.isArray(page.sections) || page.sections.length === 0)
+            errors.push(`${pagePrefix}.sections cannot be empty`);
+        for (const [sectionIndex, section] of (page.sections ?? []).entries()) {
+            const prefix = `${pagePrefix}.sections[${sectionIndex}]`;
+            if (!nonEmpty(section.id) || !nonEmpty(section.name) || !nonEmpty(section.layoutFamily))
+                errors.push(`${prefix} requires id, name, and layoutFamily`);
+            if (!nonEmpty(section.mobile) || !nonEmpty(section.fallback))
+                errors.push(`${prefix} requires mobile and fallback treatments`);
+            if (!Array.isArray(section.verification) || section.verification.length === 0)
+                errors.push(`${prefix}.verification cannot be empty`);
+            if (section.status === "planned")
+                errors.push(`${prefix} is still planned`);
+            if ((section.status === "fallback" || section.status === "cut") && !nonEmpty(section.reason))
+                errors.push(`${prefix}.reason is required for ${section.status}`);
+            if (section.motionTreatment) {
+                const treatment = section.motionTreatment;
+                if (!["none", "decorative", "structural", "transformational"].includes(treatment.class))
+                    errors.push(`${prefix}.motionTreatment.class is invalid`);
+                for (const [name, value] of Object.entries({
+                    staticComposition: treatment.staticComposition,
+                    startState: treatment.startState,
+                    endState: treatment.endState,
+                    handoff: treatment.handoff,
+                    purpose: treatment.purpose,
+                    mechanism: treatment.mechanism,
+                    mobile: treatment.mobile,
+                    reducedMotion: treatment.reducedMotion,
+                })) {
+                    if (!nonEmpty(value))
+                        errors.push(`${prefix}.motionTreatment.${name} is required`);
+                }
+                if (!Array.isArray(treatment.changes) || !Array.isArray(treatment.pinnedElements))
+                    errors.push(`${prefix}.motionTreatment changes and pinnedElements must be arrays`);
+            }
+            for (const skill of section.skills ?? []) {
+                if (!page.skills?.includes(skill))
+                    errors.push(`${prefix} uses skill ${skill} not assigned to its page`);
+            }
+            for (const asset of section.assets ?? []) {
+                if (!nonEmpty(asset.id) || !nonEmpty(asset.path) || !nonEmpty(asset.purpose))
+                    errors.push(`${prefix} contains an incomplete asset`);
+                if (plan.doctrineVersion === 2 && (!asset.importance || !asset.preparation))
+                    errors.push(`${prefix} asset ${asset.id || "unknown"} needs importance and a preparation decision`);
+                else if (asset.preparation) {
+                    if (!asset.importance || !["supporting", "key"].includes(asset.importance))
+                        errors.push(`${prefix} asset ${asset.id} has invalid importance`);
+                    if (!["flat", "decompose", "variants", "sequence"].includes(asset.preparation.decision))
+                        errors.push(`${prefix} asset ${asset.id} has an invalid preparation decision`);
+                    if (!nonEmpty(asset.preparation.rationale))
+                        errors.push(`${prefix} asset ${asset.id} needs a preparation rationale`);
+                    if (!Array.isArray(asset.preparation.derivatives))
+                        errors.push(`${prefix} asset ${asset.id} preparation.derivatives must be an array`);
+                    if (asset.importance === "key" && asset.preparation.decision !== "flat" && asset.preparation.derivatives.length === 0)
+                        errors.push(`${prefix} key asset ${asset.id} promises preparation but names no derivatives`);
+                }
+                if ((asset.status === "fallback" || asset.status === "cut") && !nonEmpty(asset.reason))
+                    errors.push(`${prefix} asset ${asset.id} needs a reason`);
+            }
+        }
+    }
+    for (const skill of plan.skills ?? []) {
+        if (!coveredSkills.has(skill))
+            errors.push(`selected skill ${skill} is not assigned to any page`);
+    }
+    for (const assignment of plan.skillPolicy?.userAssignments ?? []) {
+        const page = plan.pages?.find((candidate) => candidate.id === assignment.pageId);
+        if (!page) {
+            errors.push(`user assignment references unknown page ${assignment.pageId}`);
+            continue;
+        }
+        for (const skill of assignment.skills) {
+            if (!plan.skills?.includes(skill))
+                errors.push(`user assignment uses unselected skill ${skill}`);
+            if (!page.skills.includes(skill))
+                errors.push(`user-pinned skill ${skill} is missing from page ${page.name}`);
+        }
+    }
+    if (!nonEmpty(plan.preservationManifest) || !nonEmpty(plan.decisionLedger))
+        errors.push("plan must reference preservationManifest and decisionLedger");
+    return errors;
+}
+export function validatePreservationManifest(value) {
+    const errors = [];
+    const manifest = value;
+    if (!manifest || typeof manifest !== "object")
+        return ["preservation manifest must be an object"];
+    if (manifest.version !== 1)
+        errors.push("preservation.version must be 1");
+    if (!Array.isArray(manifest.items))
+        errors.push("preservation.items must be an array");
+    const ids = new Set();
+    for (const [index, item] of (manifest.items ?? []).entries()) {
+        if (!nonEmpty(item.id) || !nonEmpty(item.kind) || !nonEmpty(item.file) || !nonEmpty(item.needle) || !nonEmpty(item.purpose))
+            errors.push(`preservation.items[${index}] is incomplete`);
+        if (ids.has(item.id))
+            errors.push(`duplicate preservation id: ${item.id}`);
+        ids.add(item.id);
+        if (item.intentionallyChanged && !nonEmpty(item.changeReason))
+            errors.push(`${item.id} needs changeReason`);
+    }
+    return errors;
+}
+export function validateDecisionLedger(value) {
+    const ledger = value;
+    if (!ledger || typeof ledger !== "object")
+        return ["decision ledger must be an object"];
+    if (ledger.version !== 1)
+        return ["decision ledger version must be 1"];
+    if (!Array.isArray(ledger.entries))
+        return ["decision ledger entries must be an array"];
+    return [];
+}
+export function validateVerificationReport(value) {
+    const report = value;
+    if (!report || typeof report !== "object")
+        return ["verification report must be an object"];
+    const errors = [];
+    if (report.version !== 1)
+        errors.push("verification report version must be 1");
+    if (!Array.isArray(report.evidence))
+        errors.push("verification evidence must be an array");
+    if (report.refinement) {
+        if (!nonEmpty(report.refinement.inspectedAt) || Number.isNaN(Date.parse(report.refinement.inspectedAt)))
+            errors.push("verification refinement needs a valid inspectedAt timestamp");
+        if (!Array.isArray(report.refinement.findings) ||
+            report.refinement.findings.length === 0 ||
+            !Array.isArray(report.refinement.changes) ||
+            report.refinement.changes.length === 0 ||
+            !Array.isArray(report.refinement.evidenceIds) ||
+            report.refinement.evidenceIds.length === 0)
+            errors.push("verification refinement needs findings, changes, and evidenceIds arrays");
+    }
+    if ((report.evidence ?? []).some((item) => item.status === "fail"))
+        errors.push("verification report contains failing evidence");
+    const timelineStates = new Set([
+        "initial",
+        "early",
+        "mid-transition",
+        "final",
+        "handoff",
+        "pinned-midpoint",
+        "pinned-exit",
+        "mobile",
+        "reduced-motion",
+    ]);
+    for (const [index, item] of (report.evidence ?? []).entries()) {
+        if (!nonEmpty(item.id) || !nonEmpty(item.criterion) || !nonEmpty(item.evidence))
+            errors.push(`verification.evidence[${index}] is incomplete`);
+        if (item.timelineState && !timelineStates.has(item.timelineState))
+            errors.push(`verification.evidence[${index}].timelineState is invalid`);
+        const proof = item.proof;
+        if (!proof || !nonEmpty(proof.timestamp) || Number.isNaN(Date.parse(proof.timestamp))) {
+            errors.push(`verification.evidence[${index}].proof requires a valid timestamp`);
+            continue;
+        }
+        const hasConcreteProof = nonEmpty(proof.artifactPath) ||
+            nonEmpty(proof.command) ||
+            typeof proof.consoleErrorCount === "number" ||
+            nonEmpty(proof.testedUrl) ||
+            typeof proof.averageFps === "number" ||
+            typeof proof.maxFrameTimeMs === "number" ||
+            nonEmpty(proof.playwrightTestId);
+        if (!hasConcreteProof)
+            errors.push(`verification.evidence[${index}].proof needs a command, artifact, URL, runtime measurement, or test id`);
+        if ((nonEmpty(proof.command) && typeof proof.exitCode !== "number") || (!nonEmpty(proof.command) && typeof proof.exitCode === "number"))
+            errors.push(`verification.evidence[${index}] command and exitCode must appear together`);
+        if (item.status === "pass" && typeof proof.exitCode === "number" && proof.exitCode !== 0)
+            errors.push(`verification.evidence[${index}] cannot pass with exitCode ${proof.exitCode}`);
+        if (item.status === "pass" && typeof proof.consoleErrorCount === "number" && proof.consoleErrorCount !== 0)
+            errors.push(`verification.evidence[${index}] cannot pass with console errors`);
+    }
+    return errors;
+}

package/dist/shared/design.js CHANGED Viewed

@@ -1,17 +1,4 @@
-/** Specialist skill detection — keyword signatures over brief/prompt/block text.
- *  Names map to skill/dreative/skills/<name>.md. */
-const SKILL_SIGNATURES = {
-    "3d": /\b(3d|three\.?js|webgl|r3f|shader|glsl|particles?|point ?cloud|globe|mesh gradient|orbit|spline)\b/i,
-    motion: /\b(animat|motion|parallax|scroll[- ]?(driven|trigger|story|choreo)|gsap|framer|lenis|marquee|kinetic|cinematic|stagger|reveal|transition)\b/i,
-    interaction: /\b(micro[- ]?interaction|hover (effect|state)s?|cursor|magnetic|tilt|spotlight|glow|ripple|tactile|interactive|draggable)\b/i,
-    immersive: /\b(immersive|award[- ]?(site|winning)|awwwards|spatial( (transition|nav(igation)?))?|scene[- ]?based|world|page[- ]transitions?|camera (move|travel|path)|preloader|scroll (journey|story|as travel)|explorable|experience site|epic\.net)\b/i,
-    cinematic: /\b(cinematic|experiential|unseen\.co|fluid (sim(ulation)?|distortion)|gpgpu|drag[- ]to[- ]explore|click ?(&|and) ?hold|film grain|graded|velocity[- ]reactive|sound design|ambient (audio|sound))\b/i,
-    refined: /\b(clean (and )?(modern|professional)|modern clean|business (site|website|use)|corporate|professional look|premium (minimal|clean)|dtc|d2c|e[- ]?commerce|ecommerce|shopify|maswitzerland|lovvelavva|not (too )?(flashy|animated)|calm|understated)\b/i,
-};
-function detectSkills(texts) {
-    const hay = texts.filter(Boolean).join(" \n ");
-    return Object.keys(SKILL_SIGNATURES).filter((k) => SKILL_SIGNATURES[k].test(hay));
-}
+import { detectSpecialistSkills, resolveAmbitionTier, resolveSkillDependencies, routeSkillsAcrossPages, TIER_REQUIREMENTS, } from "./skillSystem.js";
 /** All text a block subtree carries that can signal a specialist skill. */
 function blockTexts(b) {
     return [
@@ -120,9 +107,10 @@ export function lintLayout(layout) {
     return lints;
 }
 /** Build the compact, executable plan sent to the agent with design-page. */
-export function buildDesignPlan(page, brief) {
+export function buildDesignPlan(page, brief, assignedSkills) {
     const dials = resolveDials(brief);
     const aesthetic = brief?.aesthetic || "auto (infer per DESIGN.md, then commit)";
+    const allowedSkills = assignedSkills ? new Set(resolveSkillDependencies(assignedSkills)) : undefined;
     const sections = (page.layout.children ?? []).map((s, i) => {
         let family;
         if (s.type === "nav")
@@ -133,34 +121,67 @@ export function buildDesignPlan(page, brief) {
             family = "footer";
         else
             family = FAMILIES[i % FAMILIES.length];
-        const secSkills = detectSkills(blockTexts(s));
+        const detected = resolveSkillDependencies(detectSpecialistSkills(blockTexts(s)));
+        const secSkills = allowedSkills ? detected.filter((skill) => allowedSkills.has(skill)) : detected;
         return secSkills.length ? { id: s.id, label: s.label, family, skills: secSkills } : { id: s.id, label: s.label, family };
     });
     // page-level specialist skills: brief/prompt keywords + section hits + motion dial
-    const skills = new Set([
-        ...detectSkills([brief?.vibe, brief?.notes, page.designPrompt]),
+    const requestedSkills = new Set([
+        ...detectSpecialistSkills([brief?.vibe, brief?.notes, page.designPrompt]),
         ...sections.flatMap((s) => s.skills ?? []),
     ]);
     if (dials.motion >= 6)
-        skills.add("motion");
+        requestedSkills.add("motion");
+    const skills = assignedSkills ? resolveSkillDependencies(assignedSkills) : resolveSkillDependencies(requestedSkills);
+    const tier = resolveAmbitionTier({
+        ...dials,
+        aesthetic,
+        texts: [brief?.vibe, brief?.notes, page.designPrompt, ...blockTexts(page.layout)],
+    });
     const spacing = dials.density <= 3 ? "py-24/py-32 section gaps" : dials.density <= 6 ? "py-16/py-20" : "py-8/py-12, hairline dividers, mono numerals";
     const motionBudget = dials.motion <= 3
         ? "hover/active states only, no scroll animation"
         : dials.motion <= 6
-            ? "entry fade+rise on hero, whileInView reveals on 2-3 key sections, nothing infinite"
-            : "scroll choreography allowed on ≤2 sections + hero entry; everything reduced-motion safe";
+            ? "purposeful local motion; use structural transitions only where content changes state, with visible defaults"
+            : "write section motion treatments; concentrate structural/transformational choreography into a few hero moments with calm sections, mobile translations, and reduced-motion states";
     const directives = [
         `aesthetic: ${aesthetic}; dials variance=${dials.variance} motion=${dials.motion} density=${dials.density}`,
         `spacing scale: ${spacing}`,
         `motion budget: ${motionBudget}`,
+        "choose the simplest mechanism that makes each intended transformation convincing; do not default blindly to fade/slide/scale or to WebGL/3D",
         "one accent color, one neutral family, one radius system, locked across ALL pages of this project",
         "section layout families are assigned below — follow them, do not default to repeated card rows",
         ...(dials.variance > 4 ? ["avoid centered-hero-over-gradient; use split or asymmetric composition"] : []),
-        ...(skills.size
+        ...(skills.length
             ? [
-                `specialist skills required: ${[...skills].join(", ")} — read skills/<name>.md (next to DESIGN.md) before writing code; sections tagged with "skills" get that treatment`,
+                `specialist skills required: ${skills.join(", ")} — read skills/<name>.md (next to DESIGN.md) before writing code; sections tagged with "skills" get that treatment`,
             ]
             : []),
     ];
-    return { dials, aesthetic, sections, directives, lints: lintLayout(page.layout), skills: [...skills] };
+    return {
+        version: 1,
+        dials,
+        aesthetic,
+        tier,
+        sections,
+        directives,
+        lints: lintLayout(page.layout),
+        skills,
+        verification: TIER_REQUIREMENTS[tier],
+    };
+}
+/** Build page plans from a user-approved pool. Unselected optional skills are
+ * suggestions only; explicit page assignments win. */
+export function buildMultiPageDesignPlans(pages, brief, selection) {
+    const routing = routeSkillsAcrossPages({
+        pages: pages.map((page) => ({
+            id: page.id,
+            texts: [page.name, page.designPrompt, brief?.vibe, brief?.notes, ...blockTexts(page.layout)],
+        })),
+        ...selection,
+    });
+    return {
+        routing,
+        pages: pages.map((page) => ({ pageId: page.id, plan: buildDesignPlan(page, brief, routing.byPage[page.id]) })),
+    };
 }