@pixel-point/toolcraft 0.0.2 → 0.0.3

package/README.md

@@ -8,6 +8,10 @@ npx @pixel-point/toolcraft create
 
 The create command uses the current directory when no target directory is passed, prompts for missing project values in an interactive terminal, generates the app, runs `pnpm install`, then prints the command to start the dev server.
 
+After dependencies are installed, Toolcraft installs the required workflow skills
+in a batch through the `skills` CLI. The skill installer uses the same agent,
+scope, and installation prompts as `npx skills add`.
+
 ## License
 
 Toolcraft is distributed under the Toolcraft Designer License in `LICENSE.md`.
@@ -23,12 +27,21 @@ Scripted usage:
 npx @pixel-point/toolcraft create my-toolcraft-app --name my-toolcraft-app --yes --force
 ```
 
+Install Toolcraft skills to specific agents or locations:
+
+```bash
+npx @pixel-point/toolcraft create my-toolcraft-app --agent codex --agent claude-code
+npx @pixel-point/toolcraft create my-toolcraft-app --agent codex --global
+npx @pixel-point/toolcraft create my-toolcraft-app --all
+npx @pixel-point/toolcraft create my-toolcraft-app --no-skills
+```
+
 Local source test without publishing:
 
 ```bash
 mkdir -p /tmp/toolcraft-local-cli-test
 cd /tmp/toolcraft-local-cli-test
-node /Users/alex/Projects/primeui-v2/cli/bin/toolcraft.mjs --name local-cli-test --yes --force --no-install
+node /Users/alex/Projects/primeui-v2/cli/bin/toolcraft.mjs --name local-cli-test --yes --force --no-install --no-skills
 ```
 
 Local tarball test, matching the published package layout:
@@ -37,5 +50,5 @@ Local tarball test, matching the published package layout:
 cd cli
 npm pack --pack-destination /tmp
 cd ..
-TOOLCRAFT_SKIP_INSTALL=1 npm exec --package /tmp/pixel-point-toolcraft-0.0.0.tgz -- toolcraft create /tmp/toolcraft-pack-exec-test --name pack-exec-test --yes --force
+TOOLCRAFT_SKIP_INSTALL=1 TOOLCRAFT_SKIP_SKILLS=1 npm exec --package /tmp/pixel-point-toolcraft-0.0.2.tgz -- toolcraft create /tmp/toolcraft-pack-exec-test --name pack-exec-test --yes --force
 ```

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pixel-point/toolcraft",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "license": "SEE LICENSE IN LICENSE.md",
   "type": "module",
   "bin": {
@@ -14,11 +14,16 @@
     "scripts",
     "src",
     "templates",
+    "toolcraft-skills",
     "package.json"
   ],
   "scripts": {
     "prepack": "node scripts/prepare-pack.mjs",
     "test": "node --test src/*.test.mjs",
     "typecheck": "node --check bin/toolcraft.mjs && node --check bin/create-toolcraft-app.mjs && node --check scripts/*.mjs && node --check src/*.mjs"
+  },
+  "dependencies": {
+    "@clack/prompts": "^1.6.0",
+    "skills": "^1.5.12"
   }
 }

package/src/cli.mjs

@@ -1,13 +1,28 @@
 import { spawn } from "node:child_process";
+import { createRequire } from "node:module";
 import fs from "node:fs/promises";
 import path from "node:path";
 import readline from "node:readline/promises";
+import { fileURLToPath } from "node:url";
+
+import {
+  cancel,
+  confirm,
+  intro,
+  isCancel,
+  note,
+  outro,
+  spinner,
+  text,
+} from "@clack/prompts";
 
 import { pathExists } from "./copy-recursive.mjs";
 import { generateToolcraft } from "./generate.mjs";
 import { sanitizePackageName } from "./package-json.mjs";
 
 const DEFAULT_PROJECT_NAME = "my-toolcraft-app";
+const PACKAGE_ROOT = path.resolve(fileURLToPath(new URL("..", import.meta.url)));
+const require = createRequire(import.meta.url);
 
 function writeLine(stream, message = "") {
   stream.write(`${message}\n`);
@@ -44,6 +59,43 @@ function canPrompt(context) {
   return Boolean(context.forcePrompts || (stdin.isTTY && stdout.isTTY));
 }
 
+function canUseClack(context) {
+  return Boolean(
+    !context.disableClack &&
+      !context.prompts &&
+      getStdin(context).isTTY &&
+      getStdout(context).isTTY,
+  );
+}
+
+function handleCancel(value) {
+  if (!isCancel(value)) {
+    return value;
+  }
+
+  cancel("Operation cancelled");
+  throw new Error("Operation cancelled.");
+}
+
+async function runWithSpinner(context, startMessage, successMessage, task) {
+  if (!canUseClack(context)) {
+    writeLine(getStdout(context), startMessage);
+    return task();
+  }
+
+  const taskSpinner = spinner();
+  taskSpinner.start(startMessage);
+
+  try {
+    const result = await task();
+    taskSpinner.stop(successMessage);
+    return result;
+  } catch (error) {
+    taskSpinner.stop("Failed");
+    throw error;
+  }
+}
+
 function createMissingValueError(valueName) {
   return new Error(`${valueName} is required. Pass it with a flag, or run in an interactive terminal.`);
 }
@@ -66,6 +118,17 @@ async function promptText(context, label, defaultValue) {
     throw createMissingValueError(label);
   }
 
+  if (canUseClack(context)) {
+    const answer = handleCancel(
+      await text({
+        message: label,
+        placeholder: defaultValue,
+        defaultValue,
+      }),
+    );
+    return String(answer).trim() || defaultValue;
+  }
+
   const rl = readline.createInterface({
     input: getStdin(context),
     output: getStdout(context),
@@ -88,6 +151,15 @@ async function promptConfirm(context, label, defaultValue = false) {
     return defaultValue;
   }
 
+  if (canUseClack(context)) {
+    return handleCancel(
+      await confirm({
+        message: label,
+        initialValue: defaultValue,
+      }),
+    );
+  }
+
   const suffix = defaultValue ? "Y/n" : "y/N";
   const rl = readline.createInterface({
     input: getStdin(context),
@@ -131,10 +203,15 @@ function readOptionValue(argv, index, optionName) {
 
 export function parseCreateArgs(argv) {
   const options = {
+    agent: [],
+    copy: false,
     force: false,
+    global: false,
     help: false,
     install: true,
     name: undefined,
+    skills: true,
+    skillsAll: false,
     targetDir: undefined,
     yes: false,
   };
@@ -152,6 +229,21 @@ export function parseCreateArgs(argv) {
       continue;
     }
 
+    if (arg === "--global" || arg === "-g") {
+      options.global = true;
+      continue;
+    }
+
+    if (arg === "--copy") {
+      options.copy = true;
+      continue;
+    }
+
+    if (arg === "--all") {
+      options.skillsAll = true;
+      continue;
+    }
+
     if (arg === "--yes" || arg === "-y") {
       options.yes = true;
       continue;
@@ -162,12 +254,31 @@ export function parseCreateArgs(argv) {
       continue;
     }
 
+    if (arg === "--no-skills") {
+      options.skills = false;
+      continue;
+    }
+
     if (arg === "--name") {
       options.name = readOptionValue(argv, index, "--name");
       index += 1;
       continue;
     }
 
+    if (arg === "--agent" || arg === "-a") {
+      const startIndex = index;
+      while (argv[index + 1] && !argv[index + 1].startsWith("-")) {
+        options.agent.push(argv[index + 1]);
+        index += 1;
+      }
+
+      if (index === startIndex) {
+        throw new Error(`${arg} requires an agent name.`);
+      }
+
+      continue;
+    }
+
     if (arg === "--dir") {
       if (options.targetDir) {
         throw new Error("Pass either a positional target directory or --dir, not both.");
@@ -239,6 +350,7 @@ export async function resolveCreateOptions(parsedOptions, context = {}) {
     force,
     install: parsedOptions.install && context.env?.TOOLCRAFT_SKIP_INSTALL !== "1",
     name,
+    skills: parsedOptions.skills && context.env?.TOOLCRAFT_SKIP_SKILLS !== "1",
     targetDir,
   };
 }
@@ -268,17 +380,106 @@ function runCommand(command, args, options = {}, context = {}) {
   });
 }
 
+function getSkillsCliPath(context = {}) {
+  if (context.skillsCliPath) {
+    return context.skillsCliPath;
+  }
+
+  const skillsPackageJsonPath = require.resolve("skills/package.json");
+  return path.join(path.dirname(skillsPackageJsonPath), "bin/cli.mjs");
+}
+
+function getToolcraftSkillsSourceDir(context = {}) {
+  return context.toolcraftSkillsSourceDir ?? path.join(PACKAGE_ROOT, "toolcraft-skills");
+}
+
+function createSkillsAddArgs(parsedOptions, context = {}) {
+  const args = ["add", getToolcraftSkillsSourceDir(context)];
+
+  if (parsedOptions.skillsAll) {
+    args.push("--all");
+  } else {
+    args.push("--skill", "*");
+  }
+
+  for (const agent of parsedOptions.agent) {
+    args.push("--agent", agent);
+  }
+
+  if (parsedOptions.global) {
+    args.push("--global");
+  }
+
+  if (parsedOptions.copy) {
+    args.push("--copy");
+  }
+
+  if (parsedOptions.yes && !parsedOptions.skillsAll) {
+    args.push("--yes");
+  }
+
+  return args;
+}
+
+async function installToolcraftSkills(parsedOptions, targetDir, context = {}) {
+  const skillsSourceDir = getToolcraftSkillsSourceDir(context);
+  const skillsCliPath = getSkillsCliPath(context);
+
+  const args = createSkillsAddArgs(parsedOptions, {
+    ...context,
+    toolcraftSkillsSourceDir: skillsSourceDir,
+  });
+
+  await runCommand(
+    process.execPath,
+    [skillsCliPath, ...args],
+    {
+      cwd: targetDir,
+      env: {
+        ...process.env,
+        ...(context.env ?? {}),
+      },
+      stdio: "inherit",
+    },
+    context,
+  );
+}
+
+function writeFinalSummary(stdout, result, createOptions) {
+  const sameDirectory = result.targetDir === path.resolve(createOptions.cwd);
+
+  writeLine(stdout, "");
+  writeLine(stdout, `Created ${result.packageName} at ${result.targetDir}`);
+  writeLine(stdout, "");
+  writeLine(stdout, "Next steps:");
+  if (!sameDirectory) {
+    const displayTargetDir = path.isAbsolute(createOptions.targetDir)
+      ? result.targetDir
+      : result.relativeTargetDir;
+    writeLine(stdout, `  cd ${displayTargetDir}`);
+  }
+  writeLine(stdout, "  pnpm dev");
+}
+
 export async function runCreateCommand(parsedOptions, context = {}) {
   const cwd = path.resolve(context.cwd ?? process.cwd());
   const stdout = getStdout(context);
+  const usingClack = canUseClack(context);
+
+  if (usingClack) {
+    intro("Create Toolcraft app");
+  }
+
   const createOptions = await resolveCreateOptions(parsedOptions, context);
 
-  const result = await generateToolcraft({
-    cwd,
-    force: createOptions.force,
-    name: createOptions.name,
-    targetDir: createOptions.targetDir,
-  });
+  const result = await runWithSpinner(context, "Creating Toolcraft app...", "Created app", () =>
+    generateToolcraft({
+      cwd,
+      force: createOptions.force,
+      name: createOptions.name,
+      targetDir: createOptions.targetDir,
+    }),
+  );
 
   if (createOptions.install) {
     writeLine(stdout, "");
@@ -298,19 +499,22 @@ export async function runCreateCommand(parsedOptions, context = {}) {
     );
   }
 
-  const sameDirectory = result.targetDir === cwd;
+  if (createOptions.skills) {
+    writeLine(stdout, "");
+    writeLine(stdout, "Installing Toolcraft skills with skills add...");
+    await installToolcraftSkills(parsedOptions, result.targetDir, context);
+  }
 
-  writeLine(stdout, "");
-  writeLine(stdout, `Created ${result.packageName} at ${result.targetDir}`);
-  writeLine(stdout, "");
-  writeLine(stdout, "Next steps:");
-  if (!sameDirectory) {
-    const displayTargetDir = path.isAbsolute(createOptions.targetDir)
-      ? result.targetDir
-      : result.relativeTargetDir;
-    writeLine(stdout, `  cd ${displayTargetDir}`);
+  if (usingClack) {
+    const nextSteps = [
+      ...(result.targetDir === cwd ? [] : [`cd ${result.relativeTargetDir}`]),
+      "pnpm dev",
+    ].join("\n");
+    note(nextSteps, "Next steps");
+    outro(`Created ${result.packageName}`);
+  } else {
+    writeFinalSummary(stdout, result, { ...createOptions, cwd });
   }
-  writeLine(stdout, "  pnpm dev");
 
   return result;
 }
@@ -339,6 +543,11 @@ Options:
   --dir <dir>      Target directory for the generated app.
   --force, -f      Allow writing into a non-empty target folder.
   --yes, -y        Use defaults for missing values and skip prompts.
+  --agent, -a      Install Toolcraft skills to specific agents. Repeat or pass multiple values.
+  --global, -g     Install Toolcraft skills globally instead of project-level.
+  --copy           Copy skills instead of using the skills CLI default link behavior.
+  --all            Install Toolcraft skills to all supported agents without skills prompts.
+  --no-skills      Skip Toolcraft skills installation.
   --no-install     Skip automatic pnpm install. Intended for local CLI tests and automation.
   --help, -h       Show this help message.`;
 }

package/src/cli.test.mjs

@@ -46,10 +46,15 @@ describe("parseCreateArgs", () => {
         "--no-install",
       ]),
       {
+        agent: [],
+        copy: false,
         force: true,
+        global: false,
         help: false,
         install: false,
         name: "Generated App",
+        skills: true,
+        skillsAll: false,
         targetDir: "generated-app",
         yes: true,
       },
@@ -60,6 +65,25 @@ describe("parseCreateArgs", () => {
     assert.equal(parseCreateArgs(["--dir", "target-app"]).targetDir, "target-app");
   });
 
+  it("parses skills add compatible options", () => {
+    const options = parseCreateArgs([
+      "generated-app",
+      "--agent",
+      "codex",
+      "claude-code",
+      "--global",
+      "--copy",
+      "--all",
+      "--no-skills",
+    ]);
+
+    assert.deepEqual(options.agent, ["codex", "claude-code"]);
+    assert.equal(options.global, true);
+    assert.equal(options.copy, true);
+    assert.equal(options.skillsAll, true);
+    assert.equal(options.skills, false);
+  });
+
   it("rejects duplicate target directory values", () => {
     assert.throws(
       () => parseCreateArgs(["target-app", "--dir", "other-app"]),
@@ -80,6 +104,7 @@ describe("resolveCreateOptions", () => {
       force: false,
       install: false,
       name: path.basename(tempRoot).toLowerCase(),
+      skills: true,
       targetDir: ".",
     });
   });
@@ -109,6 +134,7 @@ describe("resolveCreateOptions", () => {
       force: false,
       install: true,
       name: "prompted-app",
+      skills: true,
       targetDir: "./prompted-app",
     });
     assert.equal(confirmCalled, false);
@@ -140,6 +166,7 @@ describe("resolveCreateOptions", () => {
       force: true,
       install: true,
       name: "prompted-app",
+      skills: true,
       targetDir: "./prompted-app",
     });
   });
@@ -167,7 +194,7 @@ describe("runToolcraftCli", () => {
     const stdout = createWritableCapture();
     const stderr = createWritableCapture();
 
-    const result = await runToolcraftCli(["--no-install"], {
+    const result = await runToolcraftCli(["--no-install", "--no-skills"], {
       cwd: tempRoot,
       env: {},
       stderr,
@@ -197,6 +224,7 @@ describe("runToolcraftCli", () => {
         "--yes",
         "--force",
         "--no-install",
+        "--no-skills",
       ],
       {
         cwd: tempRoot,
@@ -216,16 +244,20 @@ describe("runToolcraftCli", () => {
     assert.equal(stderr.text, "");
   });
 
-  it("runs pnpm install by default after creating the app", async () => {
+  it("runs pnpm install and Toolcraft skills install by default after creating the app", async () => {
     const tempRoot = await createTempRoot();
     const stdout = createWritableCapture();
     const installs = [];
+    const skillsCliPath = path.join(tempRoot, "skills-cli.mjs");
+    const skillsSourceDir = path.join(tempRoot, "toolcraft-skills");
 
     await runToolcraftCli(["create", "install-app", "--name", "Install App", "--yes", "--force"], {
       cwd: tempRoot,
       env: {},
       stdout,
+      skillsCliPath,
       throwOnError: true,
+      toolcraftSkillsSourceDir: skillsSourceDir,
       async runCommand(command, args, options) {
         installs.push({ args, command, cwd: options.cwd });
       },
@@ -237,11 +269,100 @@ describe("runToolcraftCli", () => {
         command: "pnpm",
         cwd: path.join(tempRoot, "install-app"),
       },
+      {
+        args: [skillsCliPath, "add", skillsSourceDir, "--skill", "*", "--yes"],
+        command: process.execPath,
+        cwd: path.join(tempRoot, "install-app"),
+      },
     ]);
     assert.match(stdout.text, /Installing dependencies with pnpm/);
+    assert.match(stdout.text, /Installing Toolcraft skills/);
     assert.match(stdout.text, /pnpm dev/);
   });
 
+  it("forwards skills add compatible options", async () => {
+    const tempRoot = await createTempRoot();
+    const skillsCommands = [];
+    const skillsCliPath = path.join(tempRoot, "skills-cli.mjs");
+    const skillsSourceDir = path.join(tempRoot, "toolcraft-skills");
+
+    await runToolcraftCli(
+      [
+        "create",
+        "skills-options-app",
+        "--name",
+        "Skills Options App",
+        "--yes",
+        "--force",
+        "--no-install",
+        "--agent",
+        "codex",
+        "claude-code",
+        "--global",
+        "--copy",
+      ],
+      {
+        cwd: tempRoot,
+        env: {},
+        skillsCliPath,
+        throwOnError: true,
+        toolcraftSkillsSourceDir: skillsSourceDir,
+        async runCommand(command, args, options) {
+          skillsCommands.push({ args, command, cwd: options.cwd });
+        },
+      },
+    );
+
+    assert.deepEqual(skillsCommands, [
+      {
+        args: [
+          skillsCliPath,
+          "add",
+          skillsSourceDir,
+          "--skill",
+          "*",
+          "--agent",
+          "codex",
+          "--agent",
+          "claude-code",
+          "--global",
+          "--copy",
+          "--yes",
+        ],
+        command: process.execPath,
+        cwd: path.join(tempRoot, "skills-options-app"),
+      },
+    ]);
+  });
+
+  it("skips Toolcraft skills installation with --no-skills", async () => {
+    const tempRoot = await createTempRoot();
+    const commands = [];
+
+    await runToolcraftCli(
+      [
+        "create",
+        "no-skills-app",
+        "--name",
+        "No Skills App",
+        "--yes",
+        "--force",
+        "--no-install",
+        "--no-skills",
+      ],
+      {
+        cwd: tempRoot,
+        env: {},
+        throwOnError: true,
+        async runCommand(command, args, options) {
+          commands.push({ args, command, cwd: options.cwd });
+        },
+      },
+    );
+
+    assert.deepEqual(commands, []);
+  });
+
   it("prints create help with the npx command", async () => {
     const stdout = createWritableCapture();
 
@@ -252,6 +373,9 @@ describe("runToolcraftCli", () => {
 
     assert.equal(result.ok, true);
     assert.match(stdout.text, /npx @pixel-point\/toolcraft create/);
+    assert.match(stdout.text, /--agent/);
+    assert.match(stdout.text, /--global/);
+    assert.match(stdout.text, /--no-skills/);
     assert.match(stdout.text, /--no-install/);
   });
 
@@ -269,6 +393,7 @@ describe("runToolcraftCli", () => {
         "--yes",
         "--force",
         "--no-install",
+        "--no-skills",
       ],
       {
         cwd: tempRoot,

package/templates/starter/scripts/check-ai-skills.mjs

@@ -3,31 +3,66 @@
 import fs from "node:fs";
 import os from "node:os";
 import path from "node:path";
+import { fileURLToPath } from "node:url";
 
 const codexHome = process.env.CODEX_HOME
   ? path.resolve(process.env.CODEX_HOME)
   : path.join(os.homedir(), ".codex");
+const claudeHome = process.env.CLAUDE_HOME
+  ? path.resolve(process.env.CLAUDE_HOME)
+  : path.join(os.homedir(), ".claude");
+const cursorHome = path.join(os.homedir(), ".cursor");
+const configHome = process.env.XDG_CONFIG_HOME
+  ? path.resolve(process.env.XDG_CONFIG_HOME)
+  : path.join(os.homedir(), ".config");
+const scriptDir = path.dirname(fileURLToPath(import.meta.url));
+const projectRoot = path.resolve(scriptDir, "..");
+
+const skillRoots = [
+  path.join(projectRoot, ".agents/skills"),
+  path.join(projectRoot, ".claude/skills"),
+  path.join(codexHome, "skills"),
+  path.join(claudeHome, "skills"),
+  path.join(cursorHome, "skills"),
+  path.join(configHome, "opencode/skills"),
+  path.join(configHome, "agents/skills"),
+];
+
+function skillPaths(name) {
+  return skillRoots.map((root) => path.join(root, name, "SKILL.md"));
+}
 
 const requiredSkills = [
   {
     name: "brainstorming",
     purpose: "shape the app behavior, panels, controls, canvas, media, export, and ambiguity before code",
-    paths: [path.join(codexHome, "skills/brainstorming/SKILL.md")],
+    paths: skillPaths("brainstorming"),
   },
   {
     name: "writing-plans",
     purpose: "turn the approved app spec into a deterministic Toolcraft implementation plan",
-    paths: [path.join(codexHome, "skills/writing-plans/SKILL.md")],
+    paths: skillPaths("writing-plans"),
   },
   {
     name: "systematic-debugging",
     purpose: "investigate root cause before fixing broken controls, tests, builds, visual regressions, or runtime bugs",
-    paths: [path.join(codexHome, "skills/systematic-debugging/SKILL.md")],
+    paths: skillPaths("systematic-debugging"),
+  },
+  {
+    name: "figma",
+    purpose: "inspect actual Figma structure before implementing Figma-referenced Toolcraft apps",
+    paths: skillPaths("figma"),
+  },
+  {
+    name: "figma-implement-design",
+    purpose: "translate inspected Figma structure into Toolcraft schema, renderer, and verification coverage",
+    paths: skillPaths("figma-implement-design"),
   },
   {
     name: "browser",
     purpose: "verify the generated UI in a running local browser after implementation",
     paths: [
+      ...skillPaths("browser"),
       path.join(codexHome, "skills/browser/SKILL.md"),
       path.join(codexHome, "skills/browser/browser/SKILL.md"),
       path.join(codexHome, "plugins/cache/openai-bundled/browser/0.1.0-alpha2/skills/browser/SKILL.md"),
@@ -90,6 +125,6 @@ for (const skill of missingSkills) {
 console.error("");
 console.error("If your AI environment supports Codex skills, install the missing skills before implementation.");
 console.error("If installation is not available, stop and ask the user to install them.");
-console.error(`Checked CODEX_HOME: ${codexHome}`);
+console.error("Checked project and global skill locations for Codex, Claude Code, Cursor, and OpenCode-compatible agents.");
 
 process.exit(1);

package/toolcraft-skills/brainstorming/SKILL.md

@@ -0,0 +1,28 @@
+---
+name: brainstorming
+description: Use before creating Toolcraft app features, changing behavior, or assembling app specs.
+---
+
+# Toolcraft Brainstorming
+
+Use this skill before changing a Toolcraft generated app spec, behavior, controls,
+canvas output, panels, export behavior, renderer technique, timeline, layers, or
+media flow.
+
+## Process
+
+1. Read the generated app `AGENTS.md` and relevant `docs/toolcraft/*` contract
+   files first.
+2. Identify the product goal, visible output, editable entities, required
+   controls, export behavior, and verification tier.
+3. Make a Control Section Inventory grouped by product entity or workflow stage,
+   not by UI component type.
+4. Decide whether layers, timeline, persistence, settings transfer, custom
+   controls, or a custom renderer are actually required.
+5. Record decisions in `docs/toolcraft/agent-worklog.md`.
+
+## Toolcraft Rule
+
+The local Toolcraft app contract is the source of truth. Do not ask the user to
+confirm decisions already covered by the prompt, `AGENTS.md`, or local
+Toolcraft docs. Continue when the product behavior is clear.

package/toolcraft-skills/browser/SKILL.md

@@ -0,0 +1,25 @@
+---
+name: browser
+description: Use to verify Toolcraft generated apps in a real local browser after implementation.
+---
+
+# Toolcraft Browser Verification
+
+Use this skill after implementing generated app behavior that affects visible UI,
+canvas output, export behavior, upload/media flow, panels, controls, timeline,
+layers, or viewport interactions.
+
+## Process
+
+1. Run the app with `pnpm dev`.
+2. Open the local URL in a real browser.
+3. Verify the product output, canvas backing, controls, panel actions, upload or
+   export flow, responsive layout, and any timeline or layer behavior touched by
+   the change.
+4. For final delivery, run the generated app verification commands required by
+   `AGENTS.md`.
+
+## Toolcraft Rule
+
+Browser verification is part of the Toolcraft contract. A typecheck or build
+alone is not enough for visible app behavior.

package/toolcraft-skills/figma/SKILL.md

@@ -0,0 +1,24 @@
+---
+name: figma
+description: Use when a Toolcraft task includes a Figma URL, node ID, or design-to-code requirement.
+---
+
+# Toolcraft Figma Workflow
+
+Use this skill when the user provides a Figma URL, node ID, or asks to implement
+or match a Figma design.
+
+## Process
+
+1. Inspect the Figma file through the available Figma MCP or design context
+   tooling.
+2. Read actual nodes, layers, components, variables, styles, assets, and layout
+   structure.
+3. Translate the design into Toolcraft schema controls, product renderer output,
+   canvas sizing, export behavior, and verification coverage.
+4. Use screenshots only for final visual QA, not as the source of truth.
+
+## Toolcraft Rule
+
+Do not implement a Figma task from a screenshot or by eye when Figma context is
+available. The Figma structure is the reference.

package/toolcraft-skills/figma-implement-design/SKILL.md

@@ -0,0 +1,24 @@
+---
+name: figma-implement-design
+description: Use to translate inspected Figma structure into a production-ready Toolcraft generated app.
+---
+
+# Toolcraft Figma Implementation
+
+Use this skill after Figma context has been inspected and the task is to build or
+update a Toolcraft generated app from that design.
+
+## Process
+
+1. Map Figma sections, components, and visual entities to product output and
+   schema controls.
+2. Use built-in Toolcraft controls before custom controls.
+3. Keep app UI out of `canvasContent`; render product output there only.
+4. Preserve the Toolcraft runtime canvas backing.
+5. Add acceptance, browser, and performance coverage for every visible product
+   entity.
+
+## Toolcraft Rule
+
+Build through `defineToolcraft` and `ToolcraftApp`. Do not recreate Toolcraft
+panels, toolbar, controls, canvas, layers, or timeline by hand.

package/toolcraft-skills/systematic-debugging/SKILL.md

@@ -0,0 +1,24 @@
+---
+name: systematic-debugging
+description: Use before fixing broken Toolcraft controls, tests, builds, visual mismatches, exports, or runtime regressions.
+---
+
+# Toolcraft Systematic Debugging
+
+Use this skill before fixing any Toolcraft generated app failure.
+
+## Process
+
+1. Reproduce the failure with the smallest command or browser action.
+2. Read the full error, stack trace, failing assertion, or visual mismatch.
+3. Identify whether the root cause is app schema, app renderer, acceptance data,
+   browser test setup, copied runtime source, dependencies, or generated docs.
+4. Compare the failure against the local Toolcraft docs and existing passing
+   patterns in the generated app.
+5. Make one targeted fix and rerun the relevant verification.
+
+## Toolcraft Rule
+
+Fix source behavior in the monorepo runtime or starter when the generated
+template is wrong. Do not patch copied `src/toolcraft` files inside one generated
+app unless the user explicitly wants a local fork.

package/toolcraft-skills/writing-plans/SKILL.md

@@ -0,0 +1,26 @@
+---
+name: writing-plans
+description: Use before Toolcraft code changes once the product behavior or approved spec is clear.
+---
+
+# Toolcraft Writing Plans
+
+Use this skill before editing generated app code from a clear Toolcraft spec or
+user request.
+
+## Plan Content
+
+Write a concise implementation plan that names:
+
+1. Files to change under `src/app`, `src/routes`, docs, tests, or scripts.
+2. Schema controls, sections, panel actions, renderer output, timeline, layers,
+   persistence, settings transfer, and export paths affected by the work.
+3. Acceptance, browser, and performance coverage required by the selected
+   verification tier.
+4. Commands to run before completion.
+
+## Toolcraft Rule
+
+Keep implementation plans focused on app behavior and verification. Do not move
+runtime behavior into route-local state, do not patch copied `src/toolcraft`
+internals for one app, and do not replace built-in Toolcraft surfaces.