blacksmith-cli 0.1.5 → 0.1.7

package/dist/index.js

@@ -1,7 +1,768 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __esm = (fn, res) => function __init() {
+  return fn && (res = (0, fn[__getOwnPropNames(fn)[0]])(fn = 0)), res;
+};
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+
+// node_modules/tsup/assets/esm_shims.js
+import path from "path";
+import { fileURLToPath } from "url";
+var init_esm_shims = __esm({
+  "node_modules/tsup/assets/esm_shims.js"() {
+    "use strict";
+  }
+});
+
+// node_modules/is-docker/index.js
+import fs10 from "fs";
+function hasDockerEnv() {
+  try {
+    fs10.statSync("/.dockerenv");
+    return true;
+  } catch {
+    return false;
+  }
+}
+function hasDockerCGroup() {
+  try {
+    return fs10.readFileSync("/proc/self/cgroup", "utf8").includes("docker");
+  } catch {
+    return false;
+  }
+}
+function isDocker() {
+  if (isDockerCached === void 0) {
+    isDockerCached = hasDockerEnv() || hasDockerCGroup();
+  }
+  return isDockerCached;
+}
+var isDockerCached;
+var init_is_docker = __esm({
+  "node_modules/is-docker/index.js"() {
+    "use strict";
+    init_esm_shims();
+  }
+});
+
+// node_modules/is-inside-container/index.js
+import fs11 from "fs";
+function isInsideContainer() {
+  if (cachedResult === void 0) {
+    cachedResult = hasContainerEnv() || isDocker();
+  }
+  return cachedResult;
+}
+var cachedResult, hasContainerEnv;
+var init_is_inside_container = __esm({
+  "node_modules/is-inside-container/index.js"() {
+    "use strict";
+    init_esm_shims();
+    init_is_docker();
+    hasContainerEnv = () => {
+      try {
+        fs11.statSync("/run/.containerenv");
+        return true;
+      } catch {
+        return false;
+      }
+    };
+  }
+});
+
+// node_modules/is-wsl/index.js
+import process2 from "process";
+import os from "os";
+import fs12 from "fs";
+var isWsl, is_wsl_default;
+var init_is_wsl = __esm({
+  "node_modules/is-wsl/index.js"() {
+    "use strict";
+    init_esm_shims();
+    init_is_inside_container();
+    isWsl = () => {
+      if (process2.platform !== "linux") {
+        return false;
+      }
+      if (os.release().toLowerCase().includes("microsoft")) {
+        if (isInsideContainer()) {
+          return false;
+        }
+        return true;
+      }
+      try {
+        if (fs12.readFileSync("/proc/version", "utf8").toLowerCase().includes("microsoft")) {
+          return !isInsideContainer();
+        }
+      } catch {
+      }
+      if (fs12.existsSync("/proc/sys/fs/binfmt_misc/WSLInterop") || fs12.existsSync("/run/WSL")) {
+        return !isInsideContainer();
+      }
+      return false;
+    };
+    is_wsl_default = process2.env.__IS_WSL_TEST__ ? isWsl : isWsl();
+  }
+});
+
+// node_modules/powershell-utils/index.js
+import process3 from "process";
+import { Buffer as Buffer2 } from "buffer";
+import { promisify } from "util";
+import childProcess from "child_process";
+import fs13, { constants as fsConstants } from "fs/promises";
+var execFile, powerShellPath, executePowerShell;
+var init_powershell_utils = __esm({
+  "node_modules/powershell-utils/index.js"() {
+    "use strict";
+    init_esm_shims();
+    execFile = promisify(childProcess.execFile);
+    powerShellPath = () => `${process3.env.SYSTEMROOT || process3.env.windir || String.raw`C:\Windows`}\\System32\\WindowsPowerShell\\v1.0\\powershell.exe`;
+    executePowerShell = async (command, options = {}) => {
+      const {
+        powerShellPath: psPath,
+        ...execFileOptions
+      } = options;
+      const encodedCommand = executePowerShell.encodeCommand(command);
+      return execFile(
+        psPath ?? powerShellPath(),
+        [
+          ...executePowerShell.argumentsPrefix,
+          encodedCommand
+        ],
+        {
+          encoding: "utf8",
+          ...execFileOptions
+        }
+      );
+    };
+    executePowerShell.argumentsPrefix = [
+      "-NoProfile",
+      "-NonInteractive",
+      "-ExecutionPolicy",
+      "Bypass",
+      "-EncodedCommand"
+    ];
+    executePowerShell.encodeCommand = (command) => Buffer2.from(command, "utf16le").toString("base64");
+    executePowerShell.escapeArgument = (value) => `'${String(value).replaceAll("'", "''")}'`;
+  }
+});
+
+// node_modules/wsl-utils/utilities.js
+function parseMountPointFromConfig(content) {
+  for (const line of content.split("\n")) {
+    if (/^\s*#/.test(line)) {
+      continue;
+    }
+    const match = /^\s*root\s*=\s*(?<mountPoint>"[^"]*"|'[^']*'|[^#]*)/.exec(line);
+    if (!match) {
+      continue;
+    }
+    return match.groups.mountPoint.trim().replaceAll(/^["']|["']$/g, "");
+  }
+}
+var init_utilities = __esm({
+  "node_modules/wsl-utils/utilities.js"() {
+    "use strict";
+    init_esm_shims();
+  }
+});
+
+// node_modules/wsl-utils/index.js
+import { promisify as promisify2 } from "util";
+import childProcess2 from "child_process";
+import fs14, { constants as fsConstants2 } from "fs/promises";
+var execFile2, wslDrivesMountPoint, powerShellPathFromWsl, powerShellPath2, canAccessPowerShellPromise, canAccessPowerShell, wslDefaultBrowser, convertWslPathToWindows;
+var init_wsl_utils = __esm({
+  "node_modules/wsl-utils/index.js"() {
+    "use strict";
+    init_esm_shims();
+    init_is_wsl();
+    init_powershell_utils();
+    init_utilities();
+    init_is_wsl();
+    execFile2 = promisify2(childProcess2.execFile);
+    wslDrivesMountPoint = /* @__PURE__ */ (() => {
+      const defaultMountPoint = "/mnt/";
+      let mountPoint;
+      return async function() {
+        if (mountPoint) {
+          return mountPoint;
+        }
+        const configFilePath = "/etc/wsl.conf";
+        let isConfigFileExists = false;
+        try {
+          await fs14.access(configFilePath, fsConstants2.F_OK);
+          isConfigFileExists = true;
+        } catch {
+        }
+        if (!isConfigFileExists) {
+          return defaultMountPoint;
+        }
+        const configContent = await fs14.readFile(configFilePath, { encoding: "utf8" });
+        const parsedMountPoint = parseMountPointFromConfig(configContent);
+        if (parsedMountPoint === void 0) {
+          return defaultMountPoint;
+        }
+        mountPoint = parsedMountPoint;
+        mountPoint = mountPoint.endsWith("/") ? mountPoint : `${mountPoint}/`;
+        return mountPoint;
+      };
+    })();
+    powerShellPathFromWsl = async () => {
+      const mountPoint = await wslDrivesMountPoint();
+      return `${mountPoint}c/Windows/System32/WindowsPowerShell/v1.0/powershell.exe`;
+    };
+    powerShellPath2 = is_wsl_default ? powerShellPathFromWsl : powerShellPath;
+    canAccessPowerShell = async () => {
+      canAccessPowerShellPromise ??= (async () => {
+        try {
+          const psPath = await powerShellPath2();
+          await fs14.access(psPath, fsConstants2.X_OK);
+          return true;
+        } catch {
+          return false;
+        }
+      })();
+      return canAccessPowerShellPromise;
+    };
+    wslDefaultBrowser = async () => {
+      const psPath = await powerShellPath2();
+      const command = String.raw`(Get-ItemProperty -Path "HKCU:\Software\Microsoft\Windows\Shell\Associations\UrlAssociations\http\UserChoice").ProgId`;
+      const { stdout } = await executePowerShell(command, { powerShellPath: psPath });
+      return stdout.trim();
+    };
+    convertWslPathToWindows = async (path12) => {
+      if (/^[a-z]+:\/\//i.test(path12)) {
+        return path12;
+      }
+      try {
+        const { stdout } = await execFile2("wslpath", ["-aw", path12], { encoding: "utf8" });
+        return stdout.trim();
+      } catch {
+        return path12;
+      }
+    };
+  }
+});
+
+// node_modules/define-lazy-prop/index.js
+function defineLazyProperty(object, propertyName, valueGetter) {
+  const define = (value) => Object.defineProperty(object, propertyName, { value, enumerable: true, writable: true });
+  Object.defineProperty(object, propertyName, {
+    configurable: true,
+    enumerable: true,
+    get() {
+      const result = valueGetter();
+      define(result);
+      return result;
+    },
+    set(value) {
+      define(value);
+    }
+  });
+  return object;
+}
+var init_define_lazy_prop = __esm({
+  "node_modules/define-lazy-prop/index.js"() {
+    "use strict";
+    init_esm_shims();
+  }
+});
+
+// node_modules/default-browser-id/index.js
+import { promisify as promisify3 } from "util";
+import process4 from "process";
+import { execFile as execFile3 } from "child_process";
+async function defaultBrowserId() {
+  if (process4.platform !== "darwin") {
+    throw new Error("macOS only");
+  }
+  const { stdout } = await execFileAsync("defaults", ["read", "com.apple.LaunchServices/com.apple.launchservices.secure", "LSHandlers"]);
+  const match = /LSHandlerRoleAll = "(?!-)(?<id>[^"]+?)";\s+?LSHandlerURLScheme = (?:http|https);/.exec(stdout);
+  const browserId = match?.groups.id ?? "com.apple.Safari";
+  if (browserId === "com.apple.safari") {
+    return "com.apple.Safari";
+  }
+  return browserId;
+}
+var execFileAsync;
+var init_default_browser_id = __esm({
+  "node_modules/default-browser-id/index.js"() {
+    "use strict";
+    init_esm_shims();
+    execFileAsync = promisify3(execFile3);
+  }
+});
+
+// node_modules/run-applescript/index.js
+import process5 from "process";
+import { promisify as promisify4 } from "util";
+import { execFile as execFile4, execFileSync } from "child_process";
+async function runAppleScript(script, { humanReadableOutput = true, signal } = {}) {
+  if (process5.platform !== "darwin") {
+    throw new Error("macOS only");
+  }
+  const outputArguments = humanReadableOutput ? [] : ["-ss"];
+  const execOptions = {};
+  if (signal) {
+    execOptions.signal = signal;
+  }
+  const { stdout } = await execFileAsync2("osascript", ["-e", script, outputArguments], execOptions);
+  return stdout.trim();
+}
+var execFileAsync2;
+var init_run_applescript = __esm({
+  "node_modules/run-applescript/index.js"() {
+    "use strict";
+    init_esm_shims();
+    execFileAsync2 = promisify4(execFile4);
+  }
+});
+
+// node_modules/bundle-name/index.js
+async function bundleName(bundleId) {
+  return runAppleScript(`tell application "Finder" to set app_path to application file id "${bundleId}" as string
+tell application "System Events" to get value of property list item "CFBundleName" of property list file (app_path & ":Contents:Info.plist")`);
+}
+var init_bundle_name = __esm({
+  "node_modules/bundle-name/index.js"() {
+    "use strict";
+    init_esm_shims();
+    init_run_applescript();
+  }
+});
+
+// node_modules/default-browser/windows.js
+import { promisify as promisify5 } from "util";
+import { execFile as execFile5 } from "child_process";
+async function defaultBrowser(_execFileAsync = execFileAsync3) {
+  const { stdout } = await _execFileAsync("reg", [
+    "QUERY",
+    " HKEY_CURRENT_USER\\Software\\Microsoft\\Windows\\Shell\\Associations\\UrlAssociations\\http\\UserChoice",
+    "/v",
+    "ProgId"
+  ]);
+  const match = /ProgId\s*REG_SZ\s*(?<id>\S+)/.exec(stdout);
+  if (!match) {
+    throw new UnknownBrowserError(`Cannot find Windows browser in stdout: ${JSON.stringify(stdout)}`);
+  }
+  const { id } = match.groups;
+  const dotIndex = id.lastIndexOf(".");
+  const hyphenIndex = id.lastIndexOf("-");
+  const baseIdByDot = dotIndex === -1 ? void 0 : id.slice(0, dotIndex);
+  const baseIdByHyphen = hyphenIndex === -1 ? void 0 : id.slice(0, hyphenIndex);
+  return windowsBrowserProgIds[id] ?? windowsBrowserProgIds[baseIdByDot] ?? windowsBrowserProgIds[baseIdByHyphen] ?? { name: id, id };
+}
+var execFileAsync3, windowsBrowserProgIds, _windowsBrowserProgIdMap, UnknownBrowserError;
+var init_windows = __esm({
+  "node_modules/default-browser/windows.js"() {
+    "use strict";
+    init_esm_shims();
+    execFileAsync3 = promisify5(execFile5);
+    windowsBrowserProgIds = {
+      MSEdgeHTM: { name: "Edge", id: "com.microsoft.edge" },
+      // The missing `L` is correct.
+      MSEdgeBHTML: { name: "Edge Beta", id: "com.microsoft.edge.beta" },
+      MSEdgeDHTML: { name: "Edge Dev", id: "com.microsoft.edge.dev" },
+      AppXq0fevzme2pys62n3e0fbqa7peapykr8v: { name: "Edge", id: "com.microsoft.edge.old" },
+      ChromeHTML: { name: "Chrome", id: "com.google.chrome" },
+      ChromeBHTML: { name: "Chrome Beta", id: "com.google.chrome.beta" },
+      ChromeDHTML: { name: "Chrome Dev", id: "com.google.chrome.dev" },
+      ChromiumHTM: { name: "Chromium", id: "org.chromium.Chromium" },
+      BraveHTML: { name: "Brave", id: "com.brave.Browser" },
+      BraveBHTML: { name: "Brave Beta", id: "com.brave.Browser.beta" },
+      BraveDHTML: { name: "Brave Dev", id: "com.brave.Browser.dev" },
+      BraveSSHTM: { name: "Brave Nightly", id: "com.brave.Browser.nightly" },
+      FirefoxURL: { name: "Firefox", id: "org.mozilla.firefox" },
+      OperaStable: { name: "Opera", id: "com.operasoftware.Opera" },
+      VivaldiHTM: { name: "Vivaldi", id: "com.vivaldi.Vivaldi" },
+      "IE.HTTP": { name: "Internet Explorer", id: "com.microsoft.ie" }
+    };
+    _windowsBrowserProgIdMap = new Map(Object.entries(windowsBrowserProgIds));
+    UnknownBrowserError = class extends Error {
+    };
+  }
+});
+
+// node_modules/default-browser/index.js
+import { promisify as promisify6 } from "util";
+import process6 from "process";
+import { execFile as execFile6 } from "child_process";
+async function defaultBrowser2() {
+  if (process6.platform === "darwin") {
+    const id = await defaultBrowserId();
+    const name = await bundleName(id);
+    return { name, id };
+  }
+  if (process6.platform === "linux") {
+    const { stdout } = await execFileAsync4("xdg-mime", ["query", "default", "x-scheme-handler/http"]);
+    const id = stdout.trim();
+    const name = titleize(id.replace(/.desktop$/, "").replace("-", " "));
+    return { name, id };
+  }
+  if (process6.platform === "win32") {
+    return defaultBrowser();
+  }
+  throw new Error("Only macOS, Linux, and Windows are supported");
+}
+var execFileAsync4, titleize;
+var init_default_browser = __esm({
+  "node_modules/default-browser/index.js"() {
+    "use strict";
+    init_esm_shims();
+    init_default_browser_id();
+    init_bundle_name();
+    init_windows();
+    init_windows();
+    execFileAsync4 = promisify6(execFile6);
+    titleize = (string) => string.toLowerCase().replaceAll(/(?:^|\s|-)\S/g, (x) => x.toUpperCase());
+  }
+});
+
+// node_modules/is-in-ssh/index.js
+import process7 from "process";
+var isInSsh, is_in_ssh_default;
+var init_is_in_ssh = __esm({
+  "node_modules/is-in-ssh/index.js"() {
+    "use strict";
+    init_esm_shims();
+    isInSsh = Boolean(process7.env.SSH_CONNECTION || process7.env.SSH_CLIENT || process7.env.SSH_TTY);
+    is_in_ssh_default = isInSsh;
+  }
+});
+
+// node_modules/open/index.js
+var open_exports = {};
+__export(open_exports, {
+  apps: () => apps,
+  default: () => open_default,
+  openApp: () => openApp
+});
+import process8 from "process";
+import path11 from "path";
+import { fileURLToPath as fileURLToPath3 } from "url";
+import childProcess3 from "child_process";
+import fs15, { constants as fsConstants3 } from "fs/promises";
+function detectArchBinary(binary) {
+  if (typeof binary === "string" || Array.isArray(binary)) {
+    return binary;
+  }
+  const { [arch]: archBinary } = binary;
+  if (!archBinary) {
+    throw new Error(`${arch} is not supported`);
+  }
+  return archBinary;
+}
+function detectPlatformBinary({ [platform]: platformBinary }, { wsl } = {}) {
+  if (wsl && is_wsl_default) {
+    return detectArchBinary(wsl);
+  }
+  if (!platformBinary) {
+    throw new Error(`${platform} is not supported`);
+  }
+  return detectArchBinary(platformBinary);
+}
+var fallbackAttemptSymbol, __dirname3, localXdgOpenPath, platform, arch, tryEachApp, baseOpen, open, openApp, apps, open_default;
+var init_open = __esm({
+  "node_modules/open/index.js"() {
+    "use strict";
+    init_esm_shims();
+    init_wsl_utils();
+    init_powershell_utils();
+    init_define_lazy_prop();
+    init_default_browser();
+    init_is_inside_container();
+    init_is_in_ssh();
+    fallbackAttemptSymbol = /* @__PURE__ */ Symbol("fallbackAttempt");
+    __dirname3 = import.meta.url ? path11.dirname(fileURLToPath3(import.meta.url)) : "";
+    localXdgOpenPath = path11.join(__dirname3, "xdg-open");
+    ({ platform, arch } = process8);
+    tryEachApp = async (apps2, opener) => {
+      if (apps2.length === 0) {
+        return;
+      }
+      const errors = [];
+      for (const app of apps2) {
+        try {
+          return await opener(app);
+        } catch (error) {
+          errors.push(error);
+        }
+      }
+      throw new AggregateError(errors, "Failed to open in all supported apps");
+    };
+    baseOpen = async (options) => {
+      options = {
+        wait: false,
+        background: false,
+        newInstance: false,
+        allowNonzeroExitCode: false,
+        ...options
+      };
+      const isFallbackAttempt = options[fallbackAttemptSymbol] === true;
+      delete options[fallbackAttemptSymbol];
+      if (Array.isArray(options.app)) {
+        return tryEachApp(options.app, (singleApp) => baseOpen({
+          ...options,
+          app: singleApp,
+          [fallbackAttemptSymbol]: true
+        }));
+      }
+      let { name: app, arguments: appArguments = [] } = options.app ?? {};
+      appArguments = [...appArguments];
+      if (Array.isArray(app)) {
+        return tryEachApp(app, (appName) => baseOpen({
+          ...options,
+          app: {
+            name: appName,
+            arguments: appArguments
+          },
+          [fallbackAttemptSymbol]: true
+        }));
+      }
+      if (app === "browser" || app === "browserPrivate") {
+        const ids = {
+          "com.google.chrome": "chrome",
+          "google-chrome.desktop": "chrome",
+          "com.brave.browser": "brave",
+          "org.mozilla.firefox": "firefox",
+          "firefox.desktop": "firefox",
+          "com.microsoft.msedge": "edge",
+          "com.microsoft.edge": "edge",
+          "com.microsoft.edgemac": "edge",
+          "microsoft-edge.desktop": "edge",
+          "com.apple.safari": "safari"
+        };
+        const flags = {
+          chrome: "--incognito",
+          brave: "--incognito",
+          firefox: "--private-window",
+          edge: "--inPrivate"
+          // Safari doesn't support private mode via command line
+        };
+        let browser;
+        if (is_wsl_default) {
+          const progId = await wslDefaultBrowser();
+          const browserInfo = _windowsBrowserProgIdMap.get(progId);
+          browser = browserInfo ?? {};
+        } else {
+          browser = await defaultBrowser2();
+        }
+        if (browser.id in ids) {
+          const browserName = ids[browser.id.toLowerCase()];
+          if (app === "browserPrivate") {
+            if (browserName === "safari") {
+              throw new Error("Safari doesn't support opening in private mode via command line");
+            }
+            appArguments.push(flags[browserName]);
+          }
+          return baseOpen({
+            ...options,
+            app: {
+              name: apps[browserName],
+              arguments: appArguments
+            }
+          });
+        }
+        throw new Error(`${browser.name} is not supported as a default browser`);
+      }
+      let command;
+      const cliArguments = [];
+      const childProcessOptions = {};
+      let shouldUseWindowsInWsl = false;
+      if (is_wsl_default && !isInsideContainer() && !is_in_ssh_default && !app) {
+        shouldUseWindowsInWsl = await canAccessPowerShell();
+      }
+      if (platform === "darwin") {
+        command = "open";
+        if (options.wait) {
+          cliArguments.push("--wait-apps");
+        }
+        if (options.background) {
+          cliArguments.push("--background");
+        }
+        if (options.newInstance) {
+          cliArguments.push("--new");
+        }
+        if (app) {
+          cliArguments.push("-a", app);
+        }
+      } else if (platform === "win32" || shouldUseWindowsInWsl) {
+        command = await powerShellPath2();
+        cliArguments.push(...executePowerShell.argumentsPrefix);
+        if (!is_wsl_default) {
+          childProcessOptions.windowsVerbatimArguments = true;
+        }
+        if (is_wsl_default && options.target) {
+          options.target = await convertWslPathToWindows(options.target);
+        }
+        const encodedArguments = ["$ProgressPreference = 'SilentlyContinue';", "Start"];
+        if (options.wait) {
+          encodedArguments.push("-Wait");
+        }
+        if (app) {
+          encodedArguments.push(executePowerShell.escapeArgument(app));
+          if (options.target) {
+            appArguments.push(options.target);
+          }
+        } else if (options.target) {
+          encodedArguments.push(executePowerShell.escapeArgument(options.target));
+        }
+        if (appArguments.length > 0) {
+          appArguments = appArguments.map((argument) => executePowerShell.escapeArgument(argument));
+          encodedArguments.push("-ArgumentList", appArguments.join(","));
+        }
+        options.target = executePowerShell.encodeCommand(encodedArguments.join(" "));
+        if (!options.wait) {
+          childProcessOptions.stdio = "ignore";
+        }
+      } else {
+        if (app) {
+          command = app;
+        } else {
+          const isBundled = !__dirname3 || __dirname3 === "/";
+          let exeLocalXdgOpen = false;
+          try {
+            await fs15.access(localXdgOpenPath, fsConstants3.X_OK);
+            exeLocalXdgOpen = true;
+          } catch {
+          }
+          const useSystemXdgOpen = process8.versions.electron ?? (platform === "android" || isBundled || !exeLocalXdgOpen);
+          command = useSystemXdgOpen ? "xdg-open" : localXdgOpenPath;
+        }
+        if (appArguments.length > 0) {
+          cliArguments.push(...appArguments);
+        }
+        if (!options.wait) {
+          childProcessOptions.stdio = "ignore";
+          childProcessOptions.detached = true;
+        }
+      }
+      if (platform === "darwin" && appArguments.length > 0) {
+        cliArguments.push("--args", ...appArguments);
+      }
+      if (options.target) {
+        cliArguments.push(options.target);
+      }
+      const subprocess = childProcess3.spawn(command, cliArguments, childProcessOptions);
+      if (options.wait) {
+        return new Promise((resolve, reject) => {
+          subprocess.once("error", reject);
+          subprocess.once("close", (exitCode) => {
+            if (!options.allowNonzeroExitCode && exitCode !== 0) {
+              reject(new Error(`Exited with code ${exitCode}`));
+              return;
+            }
+            resolve(subprocess);
+          });
+        });
+      }
+      if (isFallbackAttempt) {
+        return new Promise((resolve, reject) => {
+          subprocess.once("error", reject);
+          subprocess.once("spawn", () => {
+            subprocess.once("close", (exitCode) => {
+              subprocess.off("error", reject);
+              if (exitCode !== 0) {
+                reject(new Error(`Exited with code ${exitCode}`));
+                return;
+              }
+              subprocess.unref();
+              resolve(subprocess);
+            });
+          });
+        });
+      }
+      subprocess.unref();
+      return new Promise((resolve, reject) => {
+        subprocess.once("error", reject);
+        subprocess.once("spawn", () => {
+          subprocess.off("error", reject);
+          resolve(subprocess);
+        });
+      });
+    };
+    open = (target, options) => {
+      if (typeof target !== "string") {
+        throw new TypeError("Expected a `target`");
+      }
+      return baseOpen({
+        ...options,
+        target
+      });
+    };
+    openApp = (name, options) => {
+      if (typeof name !== "string" && !Array.isArray(name)) {
+        throw new TypeError("Expected a valid `name`");
+      }
+      const { arguments: appArguments = [] } = options ?? {};
+      if (appArguments !== void 0 && appArguments !== null && !Array.isArray(appArguments)) {
+        throw new TypeError("Expected `appArguments` as Array type");
+      }
+      return baseOpen({
+        ...options,
+        app: {
+          name,
+          arguments: appArguments
+        }
+      });
+    };
+    apps = {
+      browser: "browser",
+      browserPrivate: "browserPrivate"
+    };
+    defineLazyProperty(apps, "chrome", () => detectPlatformBinary({
+      darwin: "google chrome",
+      win32: "chrome",
+      // `chromium-browser` is the older deb package name used by Ubuntu/Debian before snap.
+      linux: ["google-chrome", "google-chrome-stable", "chromium", "chromium-browser"]
+    }, {
+      wsl: {
+        ia32: "/mnt/c/Program Files (x86)/Google/Chrome/Application/chrome.exe",
+        x64: ["/mnt/c/Program Files/Google/Chrome/Application/chrome.exe", "/mnt/c/Program Files (x86)/Google/Chrome/Application/chrome.exe"]
+      }
+    }));
+    defineLazyProperty(apps, "brave", () => detectPlatformBinary({
+      darwin: "brave browser",
+      win32: "brave",
+      linux: ["brave-browser", "brave"]
+    }, {
+      wsl: {
+        ia32: "/mnt/c/Program Files (x86)/BraveSoftware/Brave-Browser/Application/brave.exe",
+        x64: ["/mnt/c/Program Files/BraveSoftware/Brave-Browser/Application/brave.exe", "/mnt/c/Program Files (x86)/BraveSoftware/Brave-Browser/Application/brave.exe"]
+      }
+    }));
+    defineLazyProperty(apps, "firefox", () => detectPlatformBinary({
+      darwin: "firefox",
+      win32: String.raw`C:\Program Files\Mozilla Firefox\firefox.exe`,
+      linux: "firefox"
+    }, {
+      wsl: "/mnt/c/Program Files/Mozilla Firefox/firefox.exe"
+    }));
+    defineLazyProperty(apps, "edge", () => detectPlatformBinary({
+      darwin: "microsoft edge",
+      win32: "msedge",
+      linux: ["microsoft-edge", "microsoft-edge-dev"]
+    }, {
+      wsl: "/mnt/c/Program Files (x86)/Microsoft/Edge/Application/msedge.exe"
+    }));
+    defineLazyProperty(apps, "safari", () => detectPlatformBinary({
+      darwin: "Safari"
+    }));
+    open_default = open;
+  }
+});
+
 // src/index.ts
+init_esm_shims();
 import { Command } from "commander";
 
 // src/utils/logger.ts
+init_esm_shims();
 import chalk from "chalk";
 import ora from "ora";
 import { createInterface } from "readline";
@@ -114,13 +875,15 @@ function printNextSteps(projectName, backendPort = 8e3, frontendPort = 5173) {
 }
 
 // src/commands/init.ts
-import path4 from "path";
+init_esm_shims();
+import path5 from "path";
 import fs4 from "fs";
 import { spawn } from "child_process";
 
 // src/utils/template.ts
+init_esm_shims();
 import fs from "fs";
-import path from "path";
+import path2 from "path";
 import Handlebars from "handlebars";
 Handlebars.registerHelper("eq", (a, b) => a === b);
 Handlebars.registerHelper("ne", (a, b) => a !== b);
@@ -138,7 +901,7 @@ function renderTemplateFile(templatePath, context) {
 }
 function renderToFile(templatePath, destPath, context) {
   const rendered = renderTemplateFile(templatePath, context);
-  const destDir = path.dirname(destPath);
+  const destDir = path2.dirname(destPath);
   if (!fs.existsSync(destDir)) {
     fs.mkdirSync(destDir, { recursive: true });
   }
@@ -151,17 +914,17 @@ function renderDirectory(srcDir, destDir, context) {
   const entries = fs.readdirSync(srcDir, { withFileTypes: true });
   for (const entry of entries) {
     const renderedName = renderTemplate(entry.name, context);
-    const srcPath = path.join(srcDir, entry.name);
+    const srcPath = path2.join(srcDir, entry.name);
     if (entry.isDirectory()) {
-      const destSubDir = path.join(destDir, renderedName);
+      const destSubDir = path2.join(destDir, renderedName);
       renderDirectory(srcPath, destSubDir, context);
     } else if (entry.name.endsWith(".hbs")) {
       const outputName = renderedName.replace(/\.hbs$/, "");
-      const destPath = path.join(destDir, outputName);
+      const destPath = path2.join(destDir, outputName);
       renderToFile(srcPath, destPath, context);
     } else {
-      const destPath = path.join(destDir, renderedName);
-      const destDirPath = path.dirname(destPath);
+      const destPath = path2.join(destDir, renderedName);
+      const destDirPath = path2.dirname(destPath);
       if (!fs.existsSync(destDirPath)) {
         fs.mkdirSync(destDirPath, { recursive: true });
       }
@@ -191,6 +954,7 @@ function insertBeforeMarker(filePath, marker, content) {
 }
 
 // src/utils/exec.ts
+init_esm_shims();
 import { execa } from "execa";
 async function exec(command, args, options = {}) {
   const { cwd, silent = false, env } = options;
@@ -229,25 +993,26 @@ async function execPip(args, cwd, silent = false) {
 }
 
 // src/utils/paths.ts
-import path2 from "path";
+init_esm_shims();
+import path3 from "path";
 import fs2 from "fs";
-import { fileURLToPath } from "url";
-var __filename2 = fileURLToPath(import.meta.url);
-var __dirname2 = path2.dirname(__filename2);
+import { fileURLToPath as fileURLToPath2 } from "url";
+var __filename2 = fileURLToPath2(import.meta.url);
+var __dirname2 = path3.dirname(__filename2);
 function getTemplatesDir() {
-  const devPath = path2.resolve(__dirname2, "..", "templates");
-  const prodPath = path2.resolve(__dirname2, "..", "src", "templates");
+  const devPath = path3.resolve(__dirname2, "..", "templates");
+  const prodPath = path3.resolve(__dirname2, "..", "src", "templates");
   if (fs2.existsSync(devPath)) return devPath;
   if (fs2.existsSync(prodPath)) return prodPath;
   throw new Error("Templates directory not found. Make sure the CLI is properly installed.");
 }
 function findProjectRoot(startDir) {
   let dir = startDir || process.cwd();
-  while (dir !== path2.dirname(dir)) {
-    if (fs2.existsSync(path2.join(dir, "blacksmith.config.json"))) {
+  while (dir !== path3.dirname(dir)) {
+    if (fs2.existsSync(path3.join(dir, "blacksmith.config.json"))) {
       return dir;
     }
-    dir = path2.dirname(dir);
+    dir = path3.dirname(dir);
   }
   throw new Error(
     'Not inside a Blacksmith project. Run "blacksmith init <name>" to create one, or navigate to an existing Blacksmith project.'
@@ -255,23 +1020,25 @@ function findProjectRoot(startDir) {
 }
 function getBackendDir(projectRoot) {
   const root = projectRoot || findProjectRoot();
-  return path2.join(root, "backend");
+  return path3.join(root, "backend");
 }
 function getFrontendDir(projectRoot) {
   const root = projectRoot || findProjectRoot();
-  return path2.join(root, "frontend");
+  return path3.join(root, "frontend");
 }
 function loadConfig(projectRoot) {
   const root = projectRoot || findProjectRoot();
-  const configPath = path2.join(root, "blacksmith.config.json");
+  const configPath = path3.join(root, "blacksmith.config.json");
   return JSON.parse(fs2.readFileSync(configPath, "utf-8"));
 }
 
 // src/commands/ai-setup.ts
-import path3 from "path";
+init_esm_shims();
+import path4 from "path";
 import fs3 from "fs";
 
 // src/skills/core-rules.ts
+init_esm_shims();
 var coreRulesSkill = {
   id: "core-rules",
   // No `name` → content is inlined directly into CLAUDE.md, not a separate file
@@ -280,12 +1047,12 @@ var coreRulesSkill = {
 
 > **These rules are mandatory. Violating them produces broken, inconsistent code.**
 
-### 1. Use \`@blacksmith-ui/react\` for ALL UI
-- **Layout**: Use \`Stack\`, \`Flex\`, \`Grid\`, \`Box\`, \`Container\` \u2014 NEVER \`<div className="flex ...">\` or \`<div className="grid ...">\`
-- **Typography**: Use \`Typography\` and \`Text\` \u2014 NEVER raw \`<h1>\`\u2013\`<h6>\`, \`<p>\`, or \`<span>\` with text classes
-- **Separators**: Use \`Divider\` \u2014 NEVER \`<hr>\` or \`<Separator>\`
-- **Everything else**: \`Button\`, \`Card\`, \`Badge\`, \`Input\`, \`Table\`, \`Dialog\`, \`Alert\`, \`Skeleton\`, \`EmptyState\`, \`StatCard\`, etc.
-- See the \`blacksmith-ui-react\` skill for the full 60+ component list
+### 1. Use \`@chakra-ui/react\` for ALL UI
+- **Layout**: Use \`VStack\`, \`HStack\`, \`Flex\`, \`SimpleGrid\`, \`Box\`, \`Container\` \u2014 NEVER \`<div className="flex ...">\` or \`<div className="grid ...">\`
+- **Typography**: Use \`Heading\` and \`Text\` \u2014 NEVER raw \`<h1>\`\u2013\`<h6>\`, \`<p>\`, or \`<span>\` with text classes
+- **Separators**: Use \`Divider\` \u2014 NEVER \`<hr>\`
+- **Everything else**: \`Button\`, \`Card\`, \`Badge\`, \`Input\`, \`Table\`, \`Modal\`, \`Alert\`, \`Skeleton\`, \`Stat\`, etc.
+- See the \`chakra-ui-react\` skill for the full component list
 
 ### 2. Pages Are Thin Orchestrators
 - A page file should be ~20-30 lines: import components, call hooks, compose JSX
@@ -319,6 +1086,7 @@ pages/<page>/
 };
 
 // src/skills/project-overview.ts
+init_esm_shims();
 var projectOverviewSkill = {
   id: "project-overview",
   name: "Project Overview",
@@ -374,6 +1142,7 @@ ${ctx.projectName}/
 };
 
 // src/skills/django.ts
+init_esm_shims();
 var djangoSkill = {
   id: "django",
   name: "Django Backend Conventions",
@@ -455,6 +1224,7 @@ var djangoSkill = {
 };
 
 // src/skills/django-rest-advanced.ts
+init_esm_shims();
 var djangoRestAdvancedSkill = {
   id: "django-rest-advanced",
   name: "Advanced Django REST Framework",
@@ -982,6 +1752,7 @@ class OrderViewSet(ModelViewSet):
 };
 
 // src/skills/api-documentation.ts
+init_esm_shims();
 var apiDocumentationSkill = {
   id: "api-documentation",
   name: "API Documentation",
@@ -1299,6 +2070,7 @@ def internal_health_check(self, request):
 };
 
 // src/skills/react.ts
+init_esm_shims();
 var reactSkill = {
   id: "react",
   name: "React Frontend Conventions",
@@ -1312,7 +2084,8 @@ var reactSkill = {
 - TanStack React Query for server state management
 - React Router v7 for client-side routing
 - React Hook Form + Zod for forms and validation
-- Tailwind CSS for styling
+- Chakra UI v2 for component library and theming
+- Tailwind CSS for additional styling
 - \`@hey-api/openapi-ts\` for auto-generating API client from Django's OpenAPI schema
 - \`lucide-react\` for icons
 
@@ -1341,11 +2114,11 @@ var reactSkill = {
 - **Pages must be thin orchestrators** \u2014 break into child components in \`components/\`, extract logic into \`hooks/\`. See the \`page-structure\` skill for the full pattern
 
 ### UI Components
-- **All UI must use \`@blacksmith-ui/react\` components** \u2014 see the \`blacksmith-ui-react\` skill for the full component list
-- Use \`Stack\`, \`Flex\`, \`Grid\`, \`Box\` for layout \u2014 never raw \`<div>\` with flex/grid classes
-- Use \`Typography\` and \`Text\` for headings and text \u2014 never raw \`<h1>\`\u2013\`<h6>\` or \`<p>\`
-- Use \`Divider\` instead of \`<Separator>\` or \`<hr>\`
-- Use \`StatCard\`, \`EmptyState\`, \`Skeleton\` instead of building custom equivalents
+- **All UI must use \`@chakra-ui/react\` components** \u2014 see the \`chakra-ui-react\` skill for the full component list
+- Use \`VStack\`, \`HStack\`, \`Flex\`, \`SimpleGrid\`, \`Box\` for layout \u2014 never raw \`<div>\` with flex/grid classes
+- Use \`Heading\` and \`Text\` for headings and text \u2014 never raw \`<h1>\`\u2013\`<h6>\` or \`<p>\`
+- Use \`Divider\` instead of \`<hr>\`
+- Use \`Stat\`, \`Skeleton\` instead of building custom equivalents
 
 ### Route Paths
 - All route paths live in the \`Path\` enum at \`src/router/paths.ts\` \u2014 **never hardcode path strings**
@@ -1353,12 +2126,12 @@ var reactSkill = {
 - Use \`buildPath()\` for dynamic segments \u2014 see the \`page-structure\` skill for details
 
 ### Styling
-- Use Tailwind CSS utility classes for all styling
-- Use the \`cn()\` helper (from \`clsx\` + \`tailwind-merge\`) for conditional and merged classes
-- Theming via HSL CSS variables defined in \`frontend/src/styles/globals.css\`
-- Dark mode is supported via the \`class\` strategy on \`<html>\`
-- Use responsive prefixes (\`sm:\`, \`md:\`, \`lg:\`) for responsive layouts
-- Avoid inline \`style\` attributes \u2014 use Tailwind classes instead
+- Use Chakra UI style props as the primary styling approach
+- Use Tailwind CSS utility classes for additional styling needs
+- Theming via Chakra UI \`extendTheme()\` and design tokens
+- Color mode is supported via Chakra UI \`useColorMode()\` hook
+- Use responsive props (\`{{ base: ..., md: ..., lg: ... }}\`) for responsive layouts
+- Avoid inline \`style\` attributes \u2014 use Chakra style props or Tailwind classes instead
 
 ### Path Aliases
 - \`@/\` maps to \`frontend/src/\`
@@ -1368,17 +2141,19 @@ var reactSkill = {
 ### Error Handling
 - Use React Error Boundary (\`frontend/src/router/error-boundary.tsx\`) for render errors
 - API errors are handled by \`useApiQuery\` / \`useApiMutation\` \u2014 see the \`react-query\` skill for error display patterns
-- Display user-facing errors using the project's feedback components (Alert, Toast)
+- Display user-facing errors using the project's feedback components (Alert, useToast)
 
 ### Testing
-- Run all tests: \`cd frontend && npm test\`
-- Run a specific test: \`cd frontend && npm test -- --grep "test name"\`
-- Test files live alongside the code they test (\`component.test.tsx\`)
+- See the \`frontend-testing\` skill for full conventions on test placement, utilities, mocking, and what to test
+- **Every code change must include corresponding tests** \u2014 see the \`frontend-testing\` skill for the complete rules
+- Tests use \`.spec.tsx\` / \`.spec.ts\` and live in \`__tests__/\` folders co-located with source code
+- Always use \`renderWithProviders\` from \`@/__tests__/test-utils\` \u2014 never import \`render\` from \`@testing-library/react\` directly
 `;
   }
 };
 
 // src/skills/react-query.ts
+init_esm_shims();
 var reactQuerySkill = {
   id: "react-query",
   name: "TanStack React Query",
@@ -1605,6 +2380,7 @@ export function useDeletePost() {
 };
 
 // src/skills/page-structure.ts
+init_esm_shims();
 var pageStructureSkill = {
   id: "page-structure",
   name: "Page & Route Structure",
@@ -1778,8 +2554,8 @@ pages/dashboard/
 \`\`\`
 
 \`\`\`tsx
-// dashboard.tsx \u2014 thin orchestrator using @blacksmith-ui/react layout
-import { Stack, Grid, Divider } from '@blacksmith-ui/react'
+// dashboard.tsx \u2014 thin orchestrator using @chakra-ui/react layout
+import { VStack, SimpleGrid, Divider } from '@chakra-ui/react'
 import { StatsCards } from './components/stats-cards'
 import { RecentActivity } from './components/recent-activity'
 import { QuickActions } from './components/quick-actions'
@@ -1789,14 +2565,14 @@ export default function DashboardPage() {
   const { stats, activity, isLoading } = useDashboardData()
 
   return (
-    <Stack gap={6}>
+    <VStack spacing={6} align="stretch">
       <StatsCards stats={stats} isLoading={isLoading} />
       <Divider />
-      <Grid columns={{ base: 1, lg: 3 }} gap={6}>
-        <RecentActivity items={activity} isLoading={isLoading} className="lg:col-span-2" />
+      <SimpleGrid columns={{ base: 1, lg: 3 }} spacing={6}>
+        <RecentActivity items={activity} isLoading={isLoading} gridColumn={{ lg: 'span 2' }} />
         <QuickActions />
-      </Grid>
-    </Stack>
+      </SimpleGrid>
+    </VStack>
   )
 }
 \`\`\`
@@ -1856,7 +2632,7 @@ export function useOrdersPage() {
 }
 
 // orders-page.tsx
-import { Stack } from '@blacksmith-ui/react'
+import { VStack } from '@chakra-ui/react'
 import { useOrdersPage } from './hooks/use-orders-page'
 import { OrdersTable } from './components/orders-table'
 import { OrdersToolbar } from './components/orders-toolbar'
@@ -1865,10 +2641,10 @@ export default function OrdersPage() {
   const { orders, total, isLoading, page, setPage, search, setSearch, deleteOrder } = useOrdersPage()
 
   return (
-    <Stack gap={4}>
+    <VStack spacing={4} align="stretch">
       <OrdersToolbar search={search} onSearchChange={setSearch} />
       <OrdersTable orders={orders} isLoading={isLoading} onDelete={(id) => deleteOrder.mutate({ path: { id } })} />
-    </Stack>
+    </VStack>
   )
 }
 \`\`\`
@@ -1901,217 +2677,176 @@ export default function OrdersPage() {
   }
 };
 
-// src/skills/blacksmith-ui-react.ts
-var blacksmithUiReactSkill = {
-  id: "blacksmith-ui-react",
-  name: "@blacksmith-ui/react",
-  description: "Core UI component library \u2014 60+ components for layout, typography, inputs, data display, overlays, feedback, media, and navigation.",
+// src/skills/chakra-ui-react.ts
+init_esm_shims();
+var chakraUiReactSkill = {
+  id: "chakra-ui-react",
+  name: "Chakra UI React",
+  description: "Core UI component library \u2014 Chakra UI v2 components for layout, typography, inputs, data display, overlays, feedback, media, and navigation.",
   render(_ctx) {
-    return `## @blacksmith-ui/react \u2014 Core UI Components (60+)
+    return `## Chakra UI React \u2014 Core UI Components
 
-> **CRITICAL RULE: Every UI element MUST be built using \`@blacksmith-ui/react\` components \u2014 including layout and typography.**
-> Do NOT use raw HTML elements when a Blacksmith-UI component exists for that purpose.
-> This includes layout: use \`Flex\`, \`Stack\`, \`Grid\`, \`Box\`, \`Container\` instead of \`<div>\` with flex/grid classes.
-> This includes typography: use \`Text\` and \`Typography\` instead of raw \`<h1>\`\u2013\`<h6>\`, \`<p>\`, \`<span>\`.
+> **CRITICAL RULE: Every UI element MUST be built using \`@chakra-ui/react\` components \u2014 including layout and typography.**
+> Do NOT use raw HTML elements when a Chakra UI component exists for that purpose.
+> This includes layout: use \`HStack\`, \`VStack\`, \`SimpleGrid\`, \`Box\`, \`Container\` instead of \`<div>\` with flex/grid classes.
+> This includes typography: use \`Heading\` and \`Text\` instead of raw \`<h1>\`\u2013\`<h6>\`, \`<p>\`, \`<span>\`.
 
 ### Layout
 
 | Component | Use instead of | Description |
 |-----------|---------------|-------------|
 | \`Box\` | \`<div>\` | Base layout primitive with style props |
-| \`Flex\` | \`<div className="flex ...">\` | Flexbox container with style props (\`direction\`, \`align\`, \`justify\`, \`gap\`, \`wrap\`) |
-| \`Grid\` | \`<div className="grid ...">\` | CSS Grid container (\`columns\`, \`rows\`, \`gap\`) |
-| \`Stack\` | \`<div className="flex flex-col gap-...">\` | Vertical/horizontal stack (\`direction\`, \`gap\`) |
+| \`Flex\` / \`HStack\` | \`<div className="flex ...">\` | Flexbox container with style props (\`direction\`, \`align\`, \`justify\`, \`gap\`, \`wrap\`) |
+| \`SimpleGrid\` | \`<div className="grid ...">\` | CSS Grid container (\`columns\`, \`spacing\`) |
+| \`VStack\` | \`<div className="flex flex-col gap-...">\` | Vertical stack (\`spacing\`) |
+| \`HStack\` | \`<div className="flex flex-row gap-...">\` | Horizontal stack (\`spacing\`) |
 | \`Container\` | \`<div className="max-w-7xl mx-auto px-...">\` | Max-width centered container |
 | \`Divider\` | \`<hr>\` or border hacks | Visual separator (horizontal/vertical) |
 | \`AspectRatio\` | padding-bottom trick | Maintain aspect ratio for content |
-| \`Resizable\` | custom resize logic | Resizable panel groups |
-| \`ScrollArea\` | \`overflow-auto\` divs | Custom scrollbar container |
 
 ### Typography
 
 | Component | Use instead of | Description |
 |-----------|---------------|-------------|
-| \`Text\` | \`<p>\`, \`<span>\` | Text display with style props (\`size\`, \`weight\`, \`color\`, \`align\`) |
-| \`Typography\` | \`<h1>\`\u2013\`<h6>\`, \`<p>\` | Semantic heading/paragraph elements (\`variant\`: h1\u2013h6, p, lead, muted, etc.) |
-| \`Label\` | \`<label>\` | Form label with accessibility support |
+| \`Text\` | \`<p>\`, \`<span>\` | Text display with style props (\`fontSize\`, \`fontWeight\`, \`color\`, \`textAlign\`) |
+| \`Heading\` | \`<h1>\`\u2013\`<h6>\`, \`<p>\` | Semantic heading elements (\`as\`: h1\u2013h6, \`size\`: 2xl, xl, lg, md, sm, xs) |
+| \`FormLabel\` | \`<label>\` | Form label with accessibility support |
 
 ### Cards & Containers
 
-- \`Card\`, \`CardHeader\`, \`CardTitle\`, \`CardDescription\`, \`CardContent\`, \`CardFooter\` \u2014 Use instead of styled \`<div>\` containers
-- \`StatCard\` \u2014 Use for metric/stat display (value, label, trend)
-- \`EmptyState\` \u2014 Use for empty content placeholders instead of custom empty divs
+- \`Card\`, \`CardHeader\`, \`CardBody\`, \`CardFooter\` \u2014 Use instead of styled \`<div>\` containers. Use \`Heading\` and \`Text\` inside for title/description.
 
 ### Actions
 
 - \`Button\` \u2014 Use instead of \`<button>\` or \`<a>\` styled as buttons
-  - Variants: \`default\`, \`secondary\`, \`destructive\`, \`outline\`, \`ghost\`, \`link\`
-  - Sizes: \`sm\`, \`default\`, \`lg\`, \`icon\`
-- \`Toggle\`, \`ToggleGroup\` \u2014 Use for toggle buttons
-- \`DropdownMenu\`, \`DropdownMenuTrigger\`, \`DropdownMenuContent\`, \`DropdownMenuItem\`, \`DropdownMenuSeparator\`, \`DropdownMenuLabel\` \u2014 Use for action menus
-- \`ContextMenu\` \u2014 Use for right-click menus
-- \`Menubar\` \u2014 Use for application menu bars
-- \`AlertDialog\`, \`AlertDialogTrigger\`, \`AlertDialogContent\`, \`AlertDialogAction\`, \`AlertDialogCancel\` \u2014 Use for destructive action confirmations
+  - Variants: \`solid\`, \`outline\`, \`ghost\`, \`link\`
+  - Sizes: \`xs\`, \`sm\`, \`md\`, \`lg\`
+  - Use \`colorScheme\` for color: \`blue\`, \`red\`, \`green\`, \`gray\`, etc.
+- \`IconButton\` \u2014 Use for icon-only buttons
+- \`Menu\`, \`MenuButton\`, \`MenuList\`, \`MenuItem\`, \`MenuDivider\`, \`MenuGroup\` \u2014 Use for action menus
+- \`AlertDialog\`, \`AlertDialogOverlay\`, \`AlertDialogContent\`, \`AlertDialogHeader\`, \`AlertDialogBody\`, \`AlertDialogFooter\` \u2014 Use for destructive action confirmations
 
 ### Data Entry
 
 - \`Input\` \u2014 Use instead of \`<input>\`
-- \`SearchInput\` \u2014 Use for search fields (has built-in search icon)
+- \`InputGroup\`, \`InputLeftElement\`, \`InputRightElement\` \u2014 Use for input with icons/addons
 - \`Textarea\` \u2014 Use instead of \`<textarea>\`
-- \`NumberInput\` \u2014 Use for numeric inputs with increment/decrement
-- \`Select\`, \`SelectTrigger\`, \`SelectContent\`, \`SelectItem\`, \`SelectValue\` \u2014 Use instead of \`<select>\`
-- \`Checkbox\` \u2014 Use instead of \`<input type="checkbox">\`
-- \`RadioGroup\`, \`RadioGroupItem\` \u2014 Use instead of \`<input type="radio">\`
+- \`NumberInput\`, \`NumberInputField\`, \`NumberInputStepper\`, \`NumberIncrementStepper\`, \`NumberDecrementStepper\` \u2014 Use for numeric inputs
+- \`Select\` \u2014 Use instead of \`<select>\`
+- \`Checkbox\`, \`CheckboxGroup\` \u2014 Use instead of \`<input type="checkbox">\`
+- \`Radio\`, \`RadioGroup\` \u2014 Use instead of \`<input type="radio">\`
 - \`Switch\` \u2014 Use for toggle switches
-- \`Slider\` \u2014 Use for single range inputs
-- \`RangeSlider\` \u2014 Use for dual-handle range selection
-- \`DatePicker\` \u2014 Use for date selection with calendar popup
-- \`PinInput\` / \`InputOTP\` \u2014 Use for PIN/OTP code entry
-- \`ColorPicker\` \u2014 Use for color selection
-- \`FileUpload\` \u2014 Use for file upload with drag & drop
-- \`TagInput\` \u2014 Use for tag/chip input with add/remove
-- \`Rating\` \u2014 Use for star/icon rating selection
-- \`Label\` \u2014 Use instead of \`<label>\`
+- \`Slider\`, \`SliderTrack\`, \`SliderFilledTrack\`, \`SliderThumb\` \u2014 Use for range inputs
+- \`PinInput\`, \`PinInputField\` \u2014 Use for PIN/OTP code entry
+- \`FormLabel\` \u2014 Use instead of \`<label>\`
 
 ### Data Display
 
-- \`Table\`, \`TableHeader\`, \`TableBody\`, \`TableRow\`, \`TableHead\`, \`TableCell\` \u2014 Use instead of \`<table>\` elements
-- \`DataTable\` \u2014 Use for feature-rich tables with sorting, filtering, and pagination
-- \`Badge\` \u2014 Use for status indicators, tags, counts (variants: \`default\`, \`secondary\`, \`destructive\`, \`outline\`)
-- \`Avatar\`, \`AvatarImage\`, \`AvatarFallback\` \u2014 Use for user profile images
-- \`Tooltip\`, \`TooltipTrigger\`, \`TooltipContent\`, \`TooltipProvider\` \u2014 Use for hover hints
-- \`HoverCard\` \u2014 Use for rich hover content
-- \`Calendar\` \u2014 Use for full calendar display
-- \`Chart\` \u2014 Use for data visualization (powered by Recharts)
-- \`Timeline\` \u2014 Use for chronological event display
-- \`Tree\` \u2014 Use for hierarchical tree views
-- \`List\` \u2014 Use for structured list display instead of \`<ul>\`/\`<ol>\`
-- \`Skeleton\` \u2014 Use for loading placeholders
+- \`Table\`, \`Thead\`, \`Tbody\`, \`Tr\`, \`Th\`, \`Td\`, \`TableContainer\` \u2014 Use instead of \`<table>\` elements
+- \`Badge\` \u2014 Use for status indicators, tags, counts (\`colorScheme\`: \`green\`, \`red\`, \`blue\`, \`gray\`, etc.)
+- \`Avatar\` \u2014 Use for user profile images (use \`name\` prop for fallback initials)
+- \`Tooltip\` \u2014 Use for hover hints (\`label\` prop for content)
+- \`Stat\`, \`StatLabel\`, \`StatNumber\`, \`StatHelpText\`, \`StatArrow\` \u2014 Use for metric/stat display
+- \`Skeleton\`, \`SkeletonText\`, \`SkeletonCircle\` \u2014 Use for loading placeholders
 - \`Spinner\` \u2014 Use for loading indicators
 - \`Progress\` \u2014 Use for progress bars
-- \`Pagination\`, \`PaginationContent\`, \`PaginationItem\`, \`PaginationLink\`, \`PaginationNext\`, \`PaginationPrevious\` \u2014 Use for paginated lists
+- \`Tag\`, \`TagLabel\`, \`TagCloseButton\` \u2014 Use for removable tags
 
 ### Tabs & Accordion
 
-- \`Tabs\`, \`TabsList\`, \`TabsTrigger\`, \`TabsContent\` \u2014 Use for tabbed interfaces
-- \`Accordion\`, \`AccordionItem\`, \`AccordionTrigger\`, \`AccordionContent\` \u2014 Use for collapsible sections
+- \`Tabs\`, \`TabList\`, \`Tab\`, \`TabPanels\`, \`TabPanel\` \u2014 Use for tabbed interfaces
+- \`Accordion\`, \`AccordionItem\`, \`AccordionButton\`, \`AccordionPanel\`, \`AccordionIcon\` \u2014 Use for collapsible sections
 
 ### Overlays
 
-- \`Dialog\`, \`DialogTrigger\`, \`DialogContent\`, \`DialogHeader\`, \`DialogTitle\`, \`DialogDescription\`, \`DialogFooter\` \u2014 Use for modals
+- \`Modal\`, \`ModalOverlay\`, \`ModalContent\`, \`ModalHeader\`, \`ModalBody\`, \`ModalFooter\`, \`ModalCloseButton\` \u2014 Use for modals
 - \`AlertDialog\` \u2014 Use for confirmation dialogs
-- \`Drawer\` / \`Sheet\`, \`SheetTrigger\`, \`SheetContent\`, \`SheetHeader\`, \`SheetTitle\`, \`SheetDescription\` \u2014 Use for slide-out panels
-- \`Popover\` \u2014 Use for floating content panels
-- \`CommandPalette\` \u2014 Use for searchable command menus (cmdk-based)
+- \`Drawer\`, \`DrawerOverlay\`, \`DrawerContent\`, \`DrawerHeader\`, \`DrawerBody\`, \`DrawerFooter\`, \`DrawerCloseButton\` \u2014 Use for slide-out panels
+- \`Popover\`, \`PopoverTrigger\`, \`PopoverContent\`, \`PopoverHeader\`, \`PopoverBody\`, \`PopoverArrow\`, \`PopoverCloseButton\` \u2014 Use for floating content panels
 
 ### Navigation
 
-- \`Breadcrumb\`, \`BreadcrumbList\`, \`BreadcrumbItem\`, \`BreadcrumbLink\`, \`BreadcrumbSeparator\` \u2014 Use for breadcrumb trails
-- \`NavigationMenu\`, \`NavigationMenuList\`, \`NavigationMenuItem\`, \`NavigationMenuTrigger\`, \`NavigationMenuContent\` \u2014 Use for site navigation
-- \`Sidebar\` \u2014 Use for app sidebars
-- \`Dock\` \u2014 Use for macOS-style dock navigation
-- \`BackToTop\` \u2014 Use for scroll-to-top buttons
+- \`Breadcrumb\`, \`BreadcrumbItem\`, \`BreadcrumbLink\` \u2014 Use for breadcrumb trails
 
 ### Feedback
 
-- \`Alert\`, \`AlertTitle\`, \`AlertDescription\` \u2014 Use for inline messages/warnings
-- \`AlertBanner\` \u2014 Use for full-width alert banners
-- \`Toast\` / \`Toaster\` / \`useToast\` \u2014 Use for transient notifications
-- \`SonnerToaster\` \u2014 Sonner-based toast notifications
-
-### Media
-
-- \`Image\` \u2014 Use instead of \`<img>\` for optimized image display
-- \`VideoPlayer\` \u2014 Use for video playback
-- \`CodeBlock\` \u2014 Use for syntax-highlighted code (Shiki-powered)
-- \`Carousel\` \u2014 Use for image/content carousels
-- \`Lightbox\` \u2014 Use for full-screen media viewers
-
-### Specialized
-
-- \`Stepper\` / \`Wizard\` \u2014 Use for multi-step workflows
-- \`NotificationCenter\` / \`useNotificationCenter\` \u2014 Use for notification management
-- \`SpotlightTour\` \u2014 Use for guided feature tours
+- \`Alert\`, \`AlertIcon\`, \`AlertTitle\`, \`AlertDescription\` \u2014 Use for inline messages/warnings (\`status\`: \`error\`, \`warning\`, \`success\`, \`info\`)
+- \`useToast\` \u2014 Use for transient notifications
 
 ### Utilities & Hooks
 
-- \`cn()\` \u2014 Merge class names (clsx + tailwind-merge)
+- \`useColorMode()\` \u2014 Color mode toggle. Returns \`{ colorMode, toggleColorMode }\`
+- \`useDisclosure()\` \u2014 Open/close state for modals, drawers, etc. Returns \`{ isOpen, onOpen, onClose, onToggle }\`
+- \`useBreakpointValue()\` \u2014 Responsive values based on breakpoint
 - \`useToast()\` \u2014 Programmatic toast notifications
-- \`useMobile()\` \u2014 Responsive breakpoint detection
-- \`useDarkMode()\` \u2014 Dark mode toggle. Returns \`{ isDark, toggle }\`
+- \`useMediaQuery()\` \u2014 CSS media query matching
 
 ---
 
 ### Component-First Rules
 
-1. **Layout**: NEVER use \`<div className="flex ...">\` or \`<div className="grid ...">\`. Use \`<Flex>\`, \`<Grid>\`, \`<Stack>\`, \`<Box>\` from \`@blacksmith-ui/react\`.
+1. **Layout**: NEVER use \`<div className="flex ...">\` or \`<div className="grid ...">\`. Use \`<Flex>\`, \`<SimpleGrid>\`, \`<VStack>\`, \`<HStack>\`, \`<Box>\` from \`@chakra-ui/react\`.
 2. **Centering/max-width**: NEVER use \`<div className="max-w-7xl mx-auto px-...">\`. Use \`<Container>\`.
-3. **Typography**: NEVER use raw \`<h1>\`\u2013\`<h6>\` or \`<p>\` with Tailwind text classes. Use \`<Typography variant="h2">\` or \`<Text>\`.
+3. **Typography**: NEVER use raw \`<h1>\`\u2013\`<h6>\` or \`<p>\` with Tailwind text classes. Use \`<Heading as="h2" size="lg">\` or \`<Text>\`.
 4. **Separators**: NEVER use \`<hr>\` or border hacks. Use \`<Divider>\`.
-5. **Images**: NEVER use raw \`<img>\`. Use \`<Image>\` from \`@blacksmith-ui/react\` (use \`Avatar\` for profile pictures).
-6. **Lists**: NEVER use \`<ul>\`/\`<ol>\` for structured display lists. Use \`<List>\` from \`@blacksmith-ui/react\`. Plain \`<ul>\`/\`<ol>\` is only acceptable for simple inline content lists.
-7. **Buttons**: NEVER use \`<button>\` or \`<a>\` styled as a button. Use \`<Button>\`.
-8. **Inputs**: NEVER use \`<input>\`, \`<textarea>\`, \`<select>\` directly. Use the Blacksmith-UI equivalents.
-9. **Cards**: NEVER use a styled \`<div>\` as a card. Use \`Card\` + sub-components.
-10. **Tables**: NEVER use raw \`<table>\` HTML. Use \`Table\` or \`DataTable\`.
-11. **Loading**: NEVER use custom \`animate-pulse\` divs. Use \`Skeleton\` or \`Spinner\`.
-12. **Modals**: NEVER build custom modals. Use \`Dialog\`, \`AlertDialog\`, \`Drawer\`, or \`Sheet\`.
-13. **Feedback**: NEVER use plain styled text for errors/warnings. Use \`Alert\` or \`useToast\`.
-14. **Empty states**: NEVER build custom empty-state UIs. Use \`EmptyState\`.
-15. **Metrics**: NEVER build custom stat/metric cards. Use \`StatCard\`.
+5. **Buttons**: NEVER use \`<button>\` or \`<a>\` styled as a button. Use \`<Button>\`.
+6. **Inputs**: NEVER use \`<input>\`, \`<textarea>\`, \`<select>\` directly. Use the Chakra UI equivalents.
+7. **Cards**: NEVER use a styled \`<div>\` as a card. Use \`Card\` + sub-components.
+8. **Tables**: NEVER use raw \`<table>\` HTML. Use Chakra UI \`Table\` components.
+9. **Loading**: NEVER use custom \`animate-pulse\` divs. Use \`Skeleton\` or \`Spinner\`.
+10. **Modals**: NEVER build custom modals. Use \`Modal\`, \`AlertDialog\`, or \`Drawer\`.
+11. **Feedback**: NEVER use plain styled text for errors/warnings. Use \`Alert\` or \`useToast\`.
 
 ### When Raw HTML IS Acceptable
 
-- \`<main>\`, \`<section>\`, \`<header>\`, \`<footer>\`, \`<nav>\`, \`<article>\`, \`<aside>\` \u2014 semantic HTML landmarks for page structure (but use \`Flex\`/\`Stack\`/\`Grid\` inside them for layout)
-- \`<Link>\` from react-router-dom \u2014 for page navigation (use \`<Button asChild><Link>...</Link></Button>\` if it needs button styling)
+- \`<main>\`, \`<section>\`, \`<header>\`, \`<footer>\`, \`<nav>\`, \`<article>\`, \`<aside>\` \u2014 semantic HTML landmarks for page structure (but use \`Flex\`/\`VStack\`/\`SimpleGrid\` inside them for layout)
+- \`<Link>\` from react-router-dom \u2014 for page navigation (wrap with \`<Button as={Link}>...\` if it needs button styling)
 - Icon components from \`lucide-react\`
-- \`<form>\` element when used with React Hook Form (but use \`@blacksmith-ui/forms\` components inside)
+- \`<form>\` element when used with React Hook Form (but use Chakra UI form components inside)
 
 ### Design Tokens & Theming
 
-- \`ThemeProvider\` \u2014 Wrap app to apply preset or custom theme
-- Built-in presets: \`default\`, \`blue\`, \`green\`, \`violet\`, \`red\`, \`neutral\`
-- All components use HSL CSS variables (\`--background\`, \`--foreground\`, \`--primary\`, etc.)
-- Dark mode: \`.dark\` class strategy on \`<html>\`, or \`<ThemeProvider mode="dark">\`
-- Border radius: controlled by \`--radius\` CSS variable
-- Extend with \`className\` prop + \`cn()\` utility for custom styles
-- Global styles: \`@import '@blacksmith-ui/react/styles.css'\` in app entry
+- \`ChakraProvider\` \u2014 Wrap app with \`theme\` prop to apply preset or custom theme
+- Extend theme with \`extendTheme()\` from \`@chakra-ui/react\`
+- All components use design tokens from the theme
+- Color mode: \`useColorMode()\` hook, or \`ColorModeScript\` in document head
+- Extend with \`sx\` prop or \`style props\` for custom styles
 
 ### Example: HowItWorks Section (Correct Way)
 
 \`\`\`tsx
-import { Container, Stack, Flex, Grid, Text, Typography, Image } from '@blacksmith-ui/react'
+import { Container, VStack, Flex, SimpleGrid, Text, Heading, Box } from '@chakra-ui/react'
 import { howItWorksSteps } from '../data'
 
 export function HowItWorks() {
   return (
-    <Box as="section" className="py-16 sm:py-20">
-      <Container>
-        <Stack gap={3} align="center" className="mb-12">
-          <Typography variant="h2">How It Works</Typography>
-          <Text color="muted">Book your stay in three simple steps</Text>
-        </Stack>
-
-        <Grid columns={{ base: 1, md: 3 }} gap={8} className="max-w-4xl mx-auto">
+    <Box as="section" py={{ base: 16, sm: 20 }}>
+      <Container maxW="container.xl">
+        <VStack spacing={3} align="center" mb={12}>
+          <Heading as="h2" size="xl">How It Works</Heading>
+          <Text color="gray.500">Book your stay in three simple steps</Text>
+        </VStack>
+
+        <SimpleGrid columns={{ base: 1, md: 3 }} spacing={8} maxW="4xl" mx="auto">
           {howItWorksSteps.map((item) => (
-            <Stack key={item.step} align="center" gap={4}>
-              <Box className="relative">
-                <Flex align="center" justify="center" className="h-16 w-16 rounded-full bg-primary text-primary-foreground shadow-lg shadow-primary/30">
-                  <item.icon className="h-7 w-7" />
+            <VStack key={item.step} align="center" spacing={4}>
+              <Box position="relative">
+                <Flex align="center" justify="center" h={16} w={16} rounded="full" bg="blue.500" color="white" shadow="lg">
+                  <item.icon size={28} />
                 </Flex>
-                <Flex align="center" justify="center" className="absolute -top-1 -right-1 h-6 w-6 rounded-full bg-background border-2 border-primary">
-                  <Text size="xs" weight="bold" color="primary">{item.step}</Text>
+                <Flex align="center" justify="center" position="absolute" top={-1} right={-1} h={6} w={6} rounded="full" bg="white" borderWidth={2} borderColor="blue.500">
+                  <Text fontSize="xs" fontWeight="bold" color="blue.500">{item.step}</Text>
                 </Flex>
               </Box>
-              <Stack gap={2} align="center">
-                <Text size="lg" weight="bold">{item.title}</Text>
-                <Text size="sm" color="muted" align="center" className="max-w-xs">
+              <VStack spacing={2} align="center">
+                <Text fontSize="lg" fontWeight="bold">{item.title}</Text>
+                <Text fontSize="sm" color="gray.500" textAlign="center" maxW="xs">
                   {item.description}
                 </Text>
-              </Stack>
-            </Stack>
+              </VStack>
+            </VStack>
           ))}
-        </Grid>
+        </SimpleGrid>
       </Container>
     </Box>
   )
@@ -2122,28 +2857,34 @@ export function HowItWorks() {
 
 \`\`\`tsx
 import {
-  Stack, Flex,
-  Card, CardHeader, CardTitle, CardContent,
-  Button, Badge, Skeleton,
-  Table, TableHeader, TableBody, TableRow, TableHead, TableCell,
-  DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem,
-  AlertDialog, AlertDialogTrigger, AlertDialogContent,
-  AlertDialogAction, AlertDialogCancel,
-} from '@blacksmith-ui/react'
+  VStack, Flex, Box,
+  Card, CardHeader, CardBody,
+  Button, Badge, Skeleton, Heading,
+  Table, Thead, Tbody, Tr, Th, Td, TableContainer,
+  Menu, MenuButton, MenuList, MenuItem, MenuDivider,
+  AlertDialog, AlertDialogOverlay, AlertDialogContent,
+  AlertDialogHeader, AlertDialogBody, AlertDialogFooter,
+  IconButton, useDisclosure,
+} from '@chakra-ui/react'
 import { MoreHorizontal, Plus, Trash2, Edit } from 'lucide-react'
 import { Link } from 'react-router-dom'
+import { useRef } from 'react'
 
 function ResourceListPage({ resources, isLoading, onDelete }) {
+  const { isOpen, onOpen, onClose } = useDisclosure()
+  const cancelRef = useRef()
+  const [deleteId, setDeleteId] = useState(null)
+
   if (isLoading) {
     return (
       <Card>
-        <CardContent className="p-6">
-          <Stack gap={4}>
+        <CardBody p={6}>
+          <VStack spacing={4}>
             {Array.from({ length: 5 }).map((_, i) => (
-              <Skeleton key={i} className="h-12 w-full" />
+              <Skeleton key={i} h="48px" w="full" />
             ))}
-          </Stack>
-        </CardContent>
+          </VStack>
+        </CardBody>
       </Card>
     )
   }
@@ -2151,61 +2892,63 @@ function ResourceListPage({ resources, isLoading, onDelete }) {
   return (
     <Card>
       <CardHeader>
-        <Flex align="center" justify="between">
-          <CardTitle>Resources</CardTitle>
-          <Button asChild>
-            <Link to="/resources/new"><Plus className="mr-2 h-4 w-4" /> Create</Link>
+        <Flex align="center" justify="space-between">
+          <Heading size="md">Resources</Heading>
+          <Button as={Link} to="/resources/new" leftIcon={<Plus size={16} />} colorScheme="blue">
+            Create
           </Button>
         </Flex>
       </CardHeader>
-      <CardContent>
-        <Table>
-          <TableHeader>
-            <TableRow>
-              <TableHead>Title</TableHead>
-              <TableHead>Status</TableHead>
-              <TableHead className="w-12" />
-            </TableRow>
-          </TableHeader>
-          <TableBody>
-            {resources.map((r) => (
-              <TableRow key={r.id}>
-                <TableCell>{r.title}</TableCell>
-                <TableCell><Badge variant="outline">{r.status}</Badge></TableCell>
-                <TableCell>
-                  <DropdownMenu>
-                    <DropdownMenuTrigger asChild>
-                      <Button variant="ghost" size="icon">
-                        <MoreHorizontal className="h-4 w-4" />
-                      </Button>
-                    </DropdownMenuTrigger>
-                    <DropdownMenuContent>
-                      <DropdownMenuItem asChild>
-                        <Link to={\`/resources/\${r.id}/edit\`}>
-                          <Edit className="mr-2 h-4 w-4" /> Edit
-                        </Link>
-                      </DropdownMenuItem>
-                      <AlertDialog>
-                        <AlertDialogTrigger asChild>
-                          <DropdownMenuItem onSelect={(e) => e.preventDefault()}>
-                            <Trash2 className="mr-2 h-4 w-4" /> Delete
-                          </DropdownMenuItem>
-                        </AlertDialogTrigger>
-                        <AlertDialogContent>
-                          <AlertDialogAction onClick={() => onDelete(r.id)}>
-                            Delete
-                          </AlertDialogAction>
-                          <AlertDialogCancel>Cancel</AlertDialogCancel>
-                        </AlertDialogContent>
-                      </AlertDialog>
-                    </DropdownMenuContent>
-                  </DropdownMenu>
-                </TableCell>
-              </TableRow>
-            ))}
-          </TableBody>
-        </Table>
-      </CardContent>
+      <CardBody>
+        <TableContainer>
+          <Table>
+            <Thead>
+              <Tr>
+                <Th>Title</Th>
+                <Th>Status</Th>
+                <Th w="48px" />
+              </Tr>
+            </Thead>
+            <Tbody>
+              {resources.map((r) => (
+                <Tr key={r.id}>
+                  <Td>{r.title}</Td>
+                  <Td><Badge variant="outline">{r.status}</Badge></Td>
+                  <Td>
+                    <Menu>
+                      <MenuButton as={IconButton} icon={<MoreHorizontal size={16} />} variant="ghost" size="sm" />
+                      <MenuList>
+                        <MenuItem as={Link} to={\`/resources/\${r.id}/edit\`} icon={<Edit size={16} />}>
+                          Edit
+                        </MenuItem>
+                        <MenuDivider />
+                        <MenuItem icon={<Trash2 size={16} />} color="red.500" onClick={() => { setDeleteId(r.id); onOpen() }}>
+                          Delete
+                        </MenuItem>
+                      </MenuList>
+                    </Menu>
+                  </Td>
+                </Tr>
+              ))}
+            </Tbody>
+          </Table>
+        </TableContainer>
+      </CardBody>
+
+      <AlertDialog isOpen={isOpen} leastDestructiveRef={cancelRef} onClose={onClose}>
+        <AlertDialogOverlay>
+          <AlertDialogContent>
+            <AlertDialogHeader>Delete Resource</AlertDialogHeader>
+            <AlertDialogBody>Are you sure? This cannot be undone.</AlertDialogBody>
+            <AlertDialogFooter>
+              <Button ref={cancelRef} onClick={onClose}>Cancel</Button>
+              <Button colorScheme="red" onClick={() => { onDelete(deleteId); onClose() }} ml={3}>
+                Delete
+              </Button>
+            </AlertDialogFooter>
+          </AlertDialogContent>
+        </AlertDialogOverlay>
+      </AlertDialog>
     </Card>
   )
 }
@@ -2214,42 +2957,50 @@ function ResourceListPage({ resources, isLoading, onDelete }) {
   }
 };
 
-// src/skills/blacksmith-ui-forms.ts
-var blacksmithUiFormsSkill = {
-  id: "blacksmith-ui-forms",
-  name: "@blacksmith-ui/forms",
-  description: "Form components using React Hook Form + Zod for validation and submission.",
+// src/skills/chakra-ui-forms.ts
+init_esm_shims();
+var chakraUiFormsSkill = {
+  id: "chakra-ui-forms",
+  name: "Chakra UI Forms",
+  description: "Form components using Chakra UI + React Hook Form + Zod for validation and submission.",
   render(_ctx) {
-    return `## @blacksmith-ui/forms \u2014 Form Components (React Hook Form + Zod)
+    return `## Chakra UI Forms \u2014 Form Components (React Hook Form + Zod)
 
-> **RULE: ALWAYS use these for forms.** Do NOT build forms with raw \`<form>\`, \`<input>\`, \`<label>\`, or manual error display.
+> **RULE: ALWAYS use Chakra UI form components for forms.** Do NOT build forms with raw \`<form>\`, \`<input>\`, \`<label>\`, or manual error display.
 
 \`\`\`tsx
-import { Form, FormField, FormInput, FormTextarea, FormSelect } from '@blacksmith-ui/forms'
+import {
+  FormControl, FormLabel, FormErrorMessage, FormHelperText,
+  Input, Textarea, Select, Checkbox, Switch, NumberInput,
+  NumberInputField, NumberInputStepper, NumberIncrementStepper, NumberDecrementStepper,
+  Radio, RadioGroup, Button,
+} from '@chakra-ui/react'
 \`\`\`
 
 ### Components
 
-- \`Form\` \u2014 Wraps the entire form. Props: \`form\` (useForm instance), \`onSubmit\`
-- \`FormField\` \u2014 Wraps each field. Props: \`name\`, \`label\`, \`description?\`
-- \`FormInput\` \u2014 Text input within FormField. Props: \`type\`, \`placeholder\`
-- \`FormTextarea\` \u2014 Textarea within FormField. Props: \`rows\`, \`placeholder\`
-- \`FormSelect\` \u2014 Select within FormField. Props: \`options\`, \`placeholder\`
-- \`FormCheckbox\` \u2014 Checkbox within FormField
-- \`FormSwitch\` \u2014 Toggle switch within FormField
-- \`FormRadioGroup\` \u2014 Radio group within FormField. Props: \`options\`
-- \`FormDatePicker\` \u2014 Date picker within FormField
-- \`FormError\` \u2014 Displays field-level validation error (auto-handled by FormField)
-- \`FormDescription\` \u2014 Displays helper text below a field
+- \`FormControl\` \u2014 Wraps each field. Props: \`isInvalid\`, \`isRequired\`, \`isDisabled\`
+- \`FormLabel\` \u2014 Label for a form field
+- \`FormErrorMessage\` \u2014 Displays field-level validation error (shown when \`FormControl\` has \`isInvalid\`)
+- \`FormHelperText\` \u2014 Displays helper text below a field
+- \`Input\` \u2014 Text input. Props: \`type\`, \`placeholder\`, \`size\`
+- \`Textarea\` \u2014 Textarea. Props: \`rows\`, \`placeholder\`
+- \`Select\` \u2014 Select dropdown. Props: \`placeholder\`
+- \`Checkbox\` \u2014 Checkbox input
+- \`Switch\` \u2014 Toggle switch
+- \`RadioGroup\` + \`Radio\` \u2014 Radio group
+- \`NumberInput\` \u2014 Numeric input with stepper
 
 ### Rules
-- NEVER use raw \`<form>\` with manual \`<label>\` and error \`<p>\` tags. Always use \`Form\` + \`FormField\`.
-- NEVER use \`<input>\`, \`<textarea>\`, \`<select>\` inside forms. Use \`FormInput\`, \`FormTextarea\`, \`FormSelect\`.
+- NEVER use raw \`<form>\` with manual \`<label>\` and error \`<p>\` tags. Always use \`FormControl\` + \`FormLabel\` + \`FormErrorMessage\`.
+- NEVER use \`<input>\`, \`<textarea>\`, \`<select>\` inside forms. Use Chakra UI \`Input\`, \`Textarea\`, \`Select\`.
 
 ### Form Pattern \u2014 ALWAYS follow this:
 \`\`\`tsx
-import { Form, FormField, FormInput, FormTextarea, FormSelect } from '@blacksmith-ui/forms'
-import { Button } from '@blacksmith-ui/react'
+import {
+  FormControl, FormLabel, FormErrorMessage,
+  Input, Textarea, Select, Button, VStack,
+} from '@chakra-ui/react'
 import { useForm } from 'react-hook-form'
 import { zodResolver } from '@hookform/resolvers/zod'
 import { z } from 'zod'
@@ -2263,29 +3014,40 @@ const schema = z.object({
 type FormData = z.infer<typeof schema>
 
 function ResourceForm({ defaultValues, onSubmit, isSubmitting }: Props) {
-  const form = useForm<FormData>({
+  const { register, handleSubmit, formState: { errors } } = useForm<FormData>({
     resolver: zodResolver(schema),
     defaultValues: { title: '', description: '', status: 'draft', ...defaultValues },
   })
 
   return (
-    <Form form={form} onSubmit={onSubmit}>
-      <FormField name="title" label="Title">
-        <FormInput placeholder="Enter title" />
-      </FormField>
-      <FormField name="description" label="Description">
-        <FormTextarea rows={4} placeholder="Enter description" />
-      </FormField>
-      <FormField name="status" label="Status">
-        <FormSelect options={[
-          { label: 'Draft', value: 'draft' },
-          { label: 'Published', value: 'published' },
-        ]} />
-      </FormField>
-      <Button type="submit" disabled={isSubmitting}>
-        {isSubmitting ? 'Saving...' : 'Save'}
-      </Button>
-    </Form>
+    <form onSubmit={handleSubmit(onSubmit)}>
+      <VStack spacing={4} align="stretch">
+        <FormControl isInvalid={!!errors.title} isRequired>
+          <FormLabel>Title</FormLabel>
+          <Input placeholder="Enter title" {...register('title')} />
+          <FormErrorMessage>{errors.title?.message}</FormErrorMessage>
+        </FormControl>
+
+        <FormControl isInvalid={!!errors.description}>
+          <FormLabel>Description</FormLabel>
+          <Textarea rows={4} placeholder="Enter description" {...register('description')} />
+          <FormErrorMessage>{errors.description?.message}</FormErrorMessage>
+        </FormControl>
+
+        <FormControl isInvalid={!!errors.status}>
+          <FormLabel>Status</FormLabel>
+          <Select {...register('status')}>
+            <option value="draft">Draft</option>
+            <option value="published">Published</option>
+          </Select>
+          <FormErrorMessage>{errors.status?.message}</FormErrorMessage>
+        </FormControl>
+
+        <Button type="submit" colorScheme="blue" isLoading={isSubmitting}>
+          Save
+        </Button>
+      </VStack>
+    </form>
   )
 }
 \`\`\`
@@ -2293,12 +3055,13 @@ function ResourceForm({ defaultValues, onSubmit, isSubmitting }: Props) {
 ### Example: Detail Page with Edit Dialog
 \`\`\`tsx
 import {
-  Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter,
-  Button, Badge, Separator,
-  Dialog, DialogTrigger, DialogContent, DialogHeader, DialogTitle, DialogFooter,
-  Alert, AlertTitle, AlertDescription,
-} from '@blacksmith-ui/react'
-import { Form, FormField, FormInput, FormTextarea } from '@blacksmith-ui/forms'
+  Card, CardHeader, CardBody, CardFooter,
+  Button, Badge, Divider, Heading, Text,
+  Modal, ModalOverlay, ModalContent, ModalHeader, ModalBody, ModalFooter, ModalCloseButton,
+  Alert, AlertIcon, AlertTitle, AlertDescription,
+  FormControl, FormLabel, FormErrorMessage,
+  Input, Textarea, Flex, HStack, useDisclosure,
+} from '@chakra-ui/react'
 import { useForm } from 'react-hook-form'
 import { zodResolver } from '@hookform/resolvers/zod'
 import { z } from 'zod'
@@ -2311,7 +3074,8 @@ const editSchema = z.object({
 })
 
 function ResourceDetailPage({ resource, onUpdate, error }) {
-  const form = useForm({
+  const { isOpen, onOpen, onClose } = useDisclosure()
+  const { register, handleSubmit, formState: { errors } } = useForm({
     resolver: zodResolver(editSchema),
     defaultValues: { title: resource.title, description: resource.description },
   })
@@ -2319,52 +3083,62 @@ function ResourceDetailPage({ resource, onUpdate, error }) {
   return (
     <Card>
       <CardHeader>
-        <div className="flex items-center justify-between">
-          <div>
-            <CardTitle>{resource.title}</CardTitle>
-            <CardDescription>Created {new Date(resource.created_at).toLocaleDateString()}</CardDescription>
-          </div>
-          <div className="flex gap-2">
-            <Button variant="outline" asChild>
-              <Link to="/resources"><ArrowLeft className="mr-2 h-4 w-4" /> Back</Link>
+        <Flex align="center" justify="space-between">
+          <Box>
+            <Heading size="md">{resource.title}</Heading>
+            <Text fontSize="sm" color="gray.500">Created {new Date(resource.created_at).toLocaleDateString()}</Text>
+          </Box>
+          <HStack spacing={2}>
+            <Button variant="outline" as={Link} to="/resources" leftIcon={<ArrowLeft size={16} />}>
+              Back
+            </Button>
+            <Button leftIcon={<Edit size={16} />} colorScheme="blue" onClick={onOpen}>
+              Edit
             </Button>
-            <Dialog>
-              <DialogTrigger asChild>
-                <Button><Edit className="mr-2 h-4 w-4" /> Edit</Button>
-              </DialogTrigger>
-              <DialogContent>
-                <DialogHeader>
-                  <DialogTitle>Edit Resource</DialogTitle>
-                </DialogHeader>
-                <Form form={form} onSubmit={onUpdate}>
-                  <FormField name="title" label="Title">
-                    <FormInput />
-                  </FormField>
-                  <FormField name="description" label="Description">
-                    <FormTextarea rows={4} />
-                  </FormField>
-                  <DialogFooter>
-                    <Button type="submit">Save Changes</Button>
-                  </DialogFooter>
-                </Form>
-              </DialogContent>
-            </Dialog>
-          </div>
-        </div>
+          </HStack>
+        </Flex>
       </CardHeader>
-      <Separator />
-      <CardContent className="pt-6">
+      <Divider />
+      <CardBody>
         {error && (
-          <Alert variant="destructive" className="mb-4">
+          <Alert status="error" mb={4}>
+            <AlertIcon />
             <AlertTitle>Error</AlertTitle>
             <AlertDescription>{error}</AlertDescription>
           </Alert>
         )}
-        <p>{resource.description || 'No description provided.'}</p>
-      </CardContent>
+        <Text>{resource.description || 'No description provided.'}</Text>
+      </CardBody>
       <CardFooter>
         <Badge>{resource.status}</Badge>
       </CardFooter>
+
+      <Modal isOpen={isOpen} onClose={onClose}>
+        <ModalOverlay />
+        <ModalContent>
+          <ModalHeader>Edit Resource</ModalHeader>
+          <ModalCloseButton />
+          <form onSubmit={handleSubmit(onUpdate)}>
+            <ModalBody>
+              <VStack spacing={4}>
+                <FormControl isInvalid={!!errors.title}>
+                  <FormLabel>Title</FormLabel>
+                  <Input {...register('title')} />
+                  <FormErrorMessage>{errors.title?.message}</FormErrorMessage>
+                </FormControl>
+                <FormControl isInvalid={!!errors.description}>
+                  <FormLabel>Description</FormLabel>
+                  <Textarea rows={4} {...register('description')} />
+                  <FormErrorMessage>{errors.description?.message}</FormErrorMessage>
+                </FormControl>
+              </VStack>
+            </ModalBody>
+            <ModalFooter>
+              <Button type="submit" colorScheme="blue">Save Changes</Button>
+            </ModalFooter>
+          </form>
+        </ModalContent>
+      </Modal>
     </Card>
   )
 }
@@ -2373,232 +3147,222 @@ function ResourceDetailPage({ resource, onUpdate, error }) {
   }
 };
 
-// src/skills/blacksmith-ui-auth.ts
-var blacksmithUiAuthSkill = {
-  id: "blacksmith-ui-auth",
-  name: "@blacksmith-ui/auth",
-  description: "Authentication UI components and hooks for login, registration, and password reset.",
+// src/skills/chakra-ui-auth.ts
+init_esm_shims();
+var chakraUiAuthSkill = {
+  id: "chakra-ui-auth",
+  name: "Custom Auth System",
+  description: "Custom authentication context, hooks, and types for login, registration, and password reset.",
   render(_ctx) {
-    return `## @blacksmith-ui/auth \u2014 Authentication UI
+    return `## Custom Auth System \u2014 Authentication Context & Hooks
 
-> **RULE: ALWAYS use these for auth pages.** Do NOT build custom login/register forms.
+> **RULE: Use the local AuthProvider and useAuth hook for all auth functionality.**
+> Auth components (LoginForm, RegisterForm, etc.) are custom implementations in \`frontend/src/features/auth/\`.
 
 \`\`\`tsx
-import { AuthProvider, LoginForm, RegisterForm, useAuth } from '@blacksmith-ui/auth'
+import { AuthProvider } from '@/features/auth/context'
+import { useAuth } from '@/features/auth/hooks/use-auth'
+import type { User, AuthState } from '@/features/auth/types'
 \`\`\`
 
-### Components
+### Context & Provider
+
+- \`AuthProvider\` \u2014 Context provider wrapping the app. Manages auth state, token storage, and session lifecycle.
+  - Place at the app root, inside \`ChakraProvider\`.
+  - Props: \`config?: { adapter?: AuthAdapter }\`
+
+### Types
+
+\`\`\`tsx
+interface User {
+  id: string
+  email: string
+  displayName?: string
+  avatar?: string
+}
 
-- \`AuthProvider\` \u2014 Context provider wrapping the app. Props: \`config: { adapter, socialProviders? }\`
-- \`LoginForm\` \u2014 Complete login form with email/password fields, validation, and links
-  - Props: \`onSubmit: (data: { email, password }) => void\`, \`onRegisterClick\`, \`onForgotPasswordClick\`, \`error\`, \`loading\`
-- \`RegisterForm\` \u2014 Registration form with email, password, and display name
-  - Props: \`onSubmit: (data: { email, password, displayName }) => void\`, \`onLoginClick\`, \`error\`, \`loading\`
-- \`ForgotPasswordForm\` \u2014 Password reset email request
-  - Props: \`onSubmit: (data: { email }) => void\`, \`onLoginClick\`, \`error\`, \`loading\`
-- \`ResetPasswordForm\` \u2014 Set new password form
-  - Props: \`onSubmit: (data: { password, code }) => void\`, \`code\`, \`onLoginClick\`, \`error\`, \`loading\`
+interface AuthState {
+  user: User | null
+  loading: boolean
+  error: string | null
+  isAuthenticated: boolean
+}
+\`\`\`
 
 ### Hooks
 
-- \`useAuth\` \u2014 Hook for auth state and actions
-  - Returns: \`user\`, \`loading\`, \`error\`, \`signInWithEmail(email, password)\`, \`signUpWithEmail(email, password, displayName?)\`, \`signOut()\`, \`sendPasswordResetEmail(email)\`, \`confirmPasswordReset(code, newPassword)\`, \`socialProviders\`
+- \`useAuth()\` \u2014 Hook for auth state and actions
+  - Returns: \`user\`, \`loading\`, \`error\`, \`isAuthenticated\`, \`signInWithEmail(email, password)\`, \`signUpWithEmail(email, password, displayName?)\`, \`signOut()\`, \`sendPasswordResetEmail(email)\`, \`confirmPasswordReset(code, newPassword)\`
+
+### Auth Pages
+
+Auth pages are custom implementations in \`frontend/src/features/auth/pages/\`:
+
+- \`LoginPage\` \u2014 Login form with email/password, validation, and navigation links
+- \`RegisterPage\` \u2014 Registration form with email, password, and display name
+- \`ForgotPasswordPage\` \u2014 Password reset email request
+- \`ResetPasswordPage\` \u2014 Set new password form
+
+Each auth page uses Chakra UI form components (\`FormControl\`, \`FormLabel\`, \`Input\`, \`Button\`, etc.) with React Hook Form + Zod validation.
 
 ### Adapter
 
-- \`AuthAdapter\` \u2014 Interface for custom auth backends (Django JWT adapter already configured in \`frontend/src/features/auth/adapter.ts\`)
+- \`AuthAdapter\` \u2014 Interface for custom auth backends (Django JWT adapter in \`frontend/src/features/auth/adapter.ts\`)
 
 ### Rules
-- NEVER build custom login/register forms. Use \`LoginForm\`, \`RegisterForm\`, etc. from \`@blacksmith-ui/auth\`.
-- NEVER manage auth state manually. Use \`useAuth\` hook.
+- NEVER manage auth state manually. Use \`useAuth()\` hook.
+- Auth pages live in \`frontend/src/features/auth/pages/\` and use Chakra UI components.
+- Use the \`Path\` enum for auth route paths (\`Path.Login\`, \`Path.Register\`, etc.).
 `;
   }
 };
 
 // src/skills/blacksmith-hooks.ts
+init_esm_shims();
 var blacksmithHooksSkill = {
   id: "blacksmith-hooks",
-  name: "@blacksmith-ui/hooks",
-  description: "74 production-ready React hooks for state, DOM, timers, async, browser APIs, and layout.",
+  name: "Custom Hooks & Chakra UI Hooks",
+  description: "Custom React hooks (local implementations) and Chakra UI built-in hooks for state, UI, layout, and responsiveness.",
   render(_ctx) {
-    return `## @blacksmith-ui/hooks \u2014 React Hooks Library
+    return `## Custom Hooks & Chakra UI Hooks
 
-A collection of 74 production-ready React hooks. SSR-safe, fully typed, zero dependencies, tree-shakeable.
+A combination of local custom hooks and Chakra UI built-in hooks for common UI patterns.
 
-> **RULE: Use \`@blacksmith-ui/hooks\` instead of writing custom hooks when one exists for that purpose.**
+> **RULE: Use Chakra UI hooks when available, and local custom hooks for additional utilities.**
 > Before creating a new hook, check if one already exists below.
 
+### Chakra UI Built-in Hooks
+
 \`\`\`tsx
-import { useToggle, useLocalStorage, useDebounce, useClickOutside } from '@blacksmith-ui/hooks'
+import { useColorMode, useDisclosure, useBreakpointValue, useMediaQuery, useToast } from '@chakra-ui/react'
 \`\`\`
 
-### State & Data
-
 | Hook | Description |
 |------|-------------|
-| \`useToggle\` | Boolean state with \`toggle\`, \`on\`, \`off\` actions |
-| \`useDisclosure\` | Open/close/toggle state for modals, drawers, etc. |
-| \`useCounter\` | Numeric counter with optional min/max clamping |
-| \`useList\` | Array state with push, remove, update, insert, filter, clear |
-| \`useMap\` | Map state with set, remove, clear helpers |
-| \`useSet\` | Set state with add, remove, toggle, has, clear helpers |
-| \`useHistoryState\` | State with undo/redo history |
-| \`useDefault\` | State that falls back to a default when set to null/undefined |
-| \`useQueue\` | FIFO queue data structure |
-| \`useStack\` | LIFO stack data structure |
-| \`useLocalStorage\` | Persist state to localStorage with JSON serialization |
-| \`useSessionStorage\` | Persist state to sessionStorage with JSON serialization |
-| \`useUncontrolled\` | Controlled/uncontrolled component pattern helper |
+| \`useColorMode\` | Color mode toggle. Returns \`{ colorMode, toggleColorMode, setColorMode }\` |
+| \`useColorModeValue\` | Returns a value based on current color mode: \`useColorModeValue(lightValue, darkValue)\` |
+| \`useDisclosure\` | Open/close/toggle state for modals, drawers, popovers. Returns \`{ isOpen, onOpen, onClose, onToggle }\` |
+| \`useBreakpointValue\` | Responsive values: \`useBreakpointValue({ base: 1, md: 2, lg: 3 })\` |
+| \`useMediaQuery\` | CSS media query matching: \`useMediaQuery('(min-width: 768px)')\` |
+| \`useToast\` | Programmatic toast notifications |
+| \`useClipboard\` | Copy text to clipboard with status feedback |
+| \`useBoolean\` | Boolean state with \`on\`, \`off\`, \`toggle\` actions |
+| \`useOutsideClick\` | Detect clicks outside a ref element |
+| \`useControllable\` | Controlled/uncontrolled component pattern helper |
+| \`useMergeRefs\` | Merge multiple refs into one |
+| \`useTheme\` | Access the current Chakra UI theme object |
+
+### Custom Local Hooks
+
+These are implemented locally in the project (e.g., in \`frontend/src/shared/hooks/\`):
 
-### Values & Memoization
+\`\`\`tsx
+import { useDebounce } from '@/shared/hooks/use-debounce'
+import { useLocalStorage } from '@/shared/hooks/use-local-storage'
+\`\`\`
 
 | Hook | Description |
 |------|-------------|
 | \`useDebounce\` | Debounce a value with configurable delay |
 | \`useDebouncedCallback\` | Debounce a callback function |
-| \`useThrottle\` | Throttle a value with configurable interval |
-| \`useThrottledCallback\` | Throttle a callback function |
+| \`useLocalStorage\` | Persist state to localStorage with JSON serialization |
+| \`useSessionStorage\` | Persist state to sessionStorage with JSON serialization |
 | \`usePrevious\` | Track the previous value of a variable |
-| \`useLatest\` | Ref that always points to the latest value |
-| \`useConst\` | Compute a value once and return it on every render |
-| \`useSyncedRef\` | Keep a ref synchronized with the latest value |
-
-### DOM & Browser
-
-| Hook | Description |
-|------|-------------|
-| \`useClickOutside\` | Detect clicks outside a ref element |
+| \`useInterval\` | setInterval wrapper with pause support |
+| \`useTimeout\` | setTimeout wrapper with manual clear |
 | \`useEventListener\` | Attach event listeners to window or elements |
 | \`useElementSize\` | Track element width/height via ResizeObserver |
 | \`useHover\` | Track mouse hover state |
 | \`useKeyPress\` | Listen for a specific key press |
-| \`useKeyCombo\` | Listen for key + modifier combinations |
-| \`useLongPress\` | Detect long press gestures |
-| \`useFullscreen\` | Manage the Fullscreen API |
-| \`useTextSelection\` | Track currently selected text |
-| \`useFocusWithin\` | Track whether focus is inside a container |
-| \`useFocusTrap\` | Trap Tab/Shift+Tab focus within a container |
-| \`useBoundingClientRect\` | Track element bounding rect via ResizeObserver |
-| \`useSwipe\` | Detect touch swipe direction |
-| \`useDrag\` | Track mouse drag with position and delta |
-| \`useElementVisibility\` | Check if an element is in the viewport |
 | \`useScrollPosition\` | Track window scroll position |
 | \`useScrollLock\` | Lock/unlock body scroll |
-| \`useMutationObserver\` | Observe DOM mutations |
-| \`useIntersectionObserver\` | Observe element intersection with viewport |
-
-### Timers & Lifecycle
-
-| Hook | Description |
-|------|-------------|
-| \`useInterval\` | setInterval wrapper with pause support |
-| \`useTimeout\` | setTimeout wrapper with manual clear |
-| \`useCountdown\` | Countdown timer with start/pause/reset |
-| \`useStopwatch\` | Stopwatch with lap support |
-| \`useIdleTimer\` | Detect user idle time |
-| \`useUpdateEffect\` | useEffect that skips the initial render |
-| \`useIsomorphicLayoutEffect\` | SSR-safe useLayoutEffect |
-| \`useIsMounted\` | Check if component is currently mounted |
-| \`useIsFirstRender\` | Check if this is the first render |
-
-### Async & Network
-
-| Hook | Description |
-|------|-------------|
-| \`useFetch\` | Declarative data fetching with loading/error states (use for external URLs; use TanStack Query for API calls) |
-| \`useAsync\` | Execute async functions with status tracking |
-| \`useScript\` | Dynamically load external scripts |
-| \`useWebSocket\` | WebSocket connection with auto-reconnect |
-| \`useSSE\` | Server-Sent Events (EventSource) wrapper |
-| \`usePolling\` | Poll an async function at a fixed interval |
-| \`useAbortController\` | Manage AbortController lifecycle |
-| \`useRetry\` | Retry async operations with exponential backoff |
-| \`useSearch\` | Filter arrays with debounced search |
-
-### Browser APIs
-
-| Hook | Description |
-|------|-------------|
-| \`useMediaQuery\` | Reactive CSS media query matching |
-| \`useColorScheme\` | Detect system color scheme preference |
-| \`useCopyToClipboard\` | Copy text to clipboard with status feedback |
 | \`useOnline\` | Track network connectivity |
 | \`useWindowSize\` | Track window dimensions |
 | \`usePageVisibility\` | Detect page visibility state |
-| \`usePageLeave\` | Detect when the user leaves the page |
-| \`useFavicon\` | Dynamically change the favicon |
-| \`useReducedMotion\` | Respect prefers-reduced-motion |
-| \`useBreakpoint\` | Responsive breakpoint detection |
-| \`useIsClient\` | SSR-safe client-side detection |
-
-### Layout & UI
-
-| Hook | Description |
-|------|-------------|
-| \`useStickyHeader\` | Detect when header should be sticky |
-| \`useVirtualList\` | Virtualized list rendering for large datasets |
+| \`useIsMounted\` | Check if component is currently mounted |
+| \`useIsFirstRender\` | Check if this is the first render |
+| \`useUpdateEffect\` | useEffect that skips the initial render |
+| \`useIntersectionObserver\` | Observe element intersection with viewport |
 | \`useInfiniteScroll\` | Infinite scroll with threshold detection |
-| \`useCollapse\` | Collapse/expand animation with prop getters |
-| \`useSteps\` | Multi-step flow navigation |
 
 ### Common Patterns
 
-**Modal with click-outside dismiss:**
+**Modal with Chakra disclosure:**
 \`\`\`tsx
-import { useDisclosure, useClickOutside } from '@blacksmith-ui/hooks'
+import { useDisclosure } from '@chakra-ui/react'
+import { Modal, ModalOverlay, ModalContent, ModalHeader, ModalBody, ModalCloseButton, Button } from '@chakra-ui/react'
 
 function MyComponent() {
-  const [opened, { open, close }] = useDisclosure(false)
-  const ref = useClickOutside<HTMLDivElement>(close)
+  const { isOpen, onOpen, onClose } = useDisclosure()
 
   return (
     <>
-      <Button onClick={open}>Open</Button>
-      {opened && <div ref={ref}>Modal content</div>}
+      <Button onClick={onOpen}>Open</Button>
+      <Modal isOpen={isOpen} onClose={onClose}>
+        <ModalOverlay />
+        <ModalContent>
+          <ModalHeader>Modal Title</ModalHeader>
+          <ModalCloseButton />
+          <ModalBody>Modal content here</ModalBody>
+        </ModalContent>
+      </Modal>
     </>
   )
 }
 \`\`\`
 
-**Debounced search:**
+**Debounced search (custom hook):**
 \`\`\`tsx
-import { useDebounce, useSearch } from '@blacksmith-ui/hooks'
+import { useDebounce } from '@/shared/hooks/use-debounce'
+import { Input } from '@chakra-ui/react'
 
 function SearchPage({ items }) {
   const [query, setQuery] = useState('')
   const debouncedQuery = useDebounce(query, 300)
-  const results = useSearch(items, debouncedQuery, ['title', 'description'])
+  // Use debouncedQuery for API calls or filtering
 
   return (
-    <>
-      <Input value={query} onChange={(e) => setQuery(e.target.value)} />
-      {results.map(item => <div key={item.id}>{item.title}</div>)}
-    </>
+    <Input
+      value={query}
+      onChange={(e) => setQuery(e.target.value)}
+      placeholder="Search..."
+    />
   )
 }
 \`\`\`
 
-**Persisted state with undo:**
+**Responsive layout with Chakra hook:**
 \`\`\`tsx
-import { useLocalStorage, useHistoryState } from '@blacksmith-ui/hooks'
+import { useBreakpointValue } from '@chakra-ui/react'
 
-function Editor() {
-  const [saved, setSaved] = useLocalStorage('draft', '')
-  const [content, { set, undo, redo, canUndo, canRedo }] = useHistoryState(saved)
+function Layout({ children }) {
+  const columns = useBreakpointValue({ base: 1, md: 2, lg: 3 })
+  const isMobile = useBreakpointValue({ base: true, md: false })
 
-  const handleSave = () => setSaved(content)
+  return isMobile ? <MobileLayout>{children}</MobileLayout> : <DesktopLayout>{children}</DesktopLayout>
 }
 \`\`\`
 
-**Responsive layout:**
+**Color mode toggle:**
 \`\`\`tsx
-import { useBreakpoint, useWindowSize } from '@blacksmith-ui/hooks'
+import { useColorMode, useColorModeValue, IconButton } from '@chakra-ui/react'
+import { Sun, Moon } from 'lucide-react'
 
-function Layout({ children }) {
-  const breakpoint = useBreakpoint({ sm: 640, md: 768, lg: 1024 })
-  const isMobile = breakpoint === 'sm'
+function ColorModeToggle() {
+  const { colorMode, toggleColorMode } = useColorMode()
+  const icon = colorMode === 'light' ? <Moon size={16} /> : <Sun size={16} />
 
-  return isMobile ? <MobileLayout>{children}</MobileLayout> : <DesktopLayout>{children}</DesktopLayout>
+  return <IconButton aria-label="Toggle color mode" icon={icon} onClick={toggleColorMode} variant="ghost" />
+}
+\`\`\`
+
+**Persisted state with local storage:**
+\`\`\`tsx
+import { useLocalStorage } from '@/shared/hooks/use-local-storage'
+
+function Editor() {
+  const [saved, setSaved] = useLocalStorage('draft', '')
+  // saved persists across page refreshes
 }
 \`\`\`
 `;
@@ -2606,6 +3370,7 @@ function Layout({ children }) {
 };
 
 // src/skills/blacksmith-cli.ts
+init_esm_shims();
 var blacksmithCliSkill = {
   id: "blacksmith-cli",
   name: "Blacksmith CLI",
@@ -2697,21 +3462,22 @@ blacksmith init my-app -b 9000 -f 3000 --ai
 | \`-b, --backend-port <port>\` | Django port (default: 8000) |
 | \`-f, --frontend-port <port>\` | Vite port (default: 5173) |
 | \`--ai\` | Generate CLAUDE.md with project skills |
-| \`--no-blacksmith-ui-skill\` | Exclude blacksmith-ui skill from CLAUDE.md |
+| \`--no-chakra-ui-skill\` | Exclude Chakra UI skill from CLAUDE.md |
 `;
   }
 };
 
 // src/skills/ui-design.ts
+init_esm_shims();
 var uiDesignSkill = {
   id: "ui-design",
   name: "UI/UX Design System",
-  description: "Modern flat design principles, spacing, typography, color, layout patterns, and interaction guidelines aligned with the BlacksmithUI design language.",
+  description: "Modern flat design principles, spacing, typography, color, layout patterns, and interaction guidelines aligned with the Chakra UI design language.",
   render(_ctx) {
     return `## UI/UX Design System \u2014 Modern Flat Design
 
 > **Design philosophy: Clean, flat, content-first.**
-> BlacksmithUI follows the same design language as Anthropic, Apple, Linear, Vercel, and OpenAI \u2014 minimal chrome, generous whitespace, subtle depth, and purposeful motion. Every UI you build must conform to this standard.
+> Chakra UI follows a clean design language similar to Anthropic, Apple, Linear, Vercel, and OpenAI \u2014 minimal chrome, generous whitespace, subtle depth, and purposeful motion. Every UI you build must conform to this standard.
 
 ### Core Principles
 
@@ -2723,7 +3489,7 @@ var uiDesignSkill = {
 
 ### Spacing System
 
-Use Tailwind's spacing scale consistently. Do NOT use arbitrary values (\`p-[13px]\`) \u2014 stick to the system.
+Use Chakra UI's spacing scale consistently. Chakra uses a numeric spacing scale (1 = 4px, 2 = 8px, etc.).
 
 | Scale | Value | Use for |
 |-------|-------|---------|
@@ -2735,57 +3501,51 @@ Use Tailwind's spacing scale consistently. Do NOT use arbitrary values (\`p-[13p
 | \`16\`\u2013\`20\` | 64\u201380px | Page-level vertical padding (hero, landing sections) |
 
 **Rules:**
-- Use \`gap\` (via \`Flex\`, \`Stack\`, \`Grid\`) for spacing between siblings \u2014 not margin on individual items
-- Use \`Stack gap={...}\` for vertical rhythm within a section
-- Page content padding: \`px-4 sm:px-6 lg:px-8\` (use \`Container\` which handles this)
-- Card body padding: \`p-6\` standard, \`p-4\` for compact cards
-- Never mix spacing approaches in the same context \u2014 pick gap OR margin, not both
+- Use \`spacing\` (via \`VStack\`, \`HStack\`, \`SimpleGrid\`) for spacing between siblings \u2014 not margin on individual items
+- Use \`VStack spacing={...}\` for vertical rhythm within a section
+- Page content padding: use \`Container\` which handles responsive horizontal padding
+- Card body padding: \`p={6}\` standard, \`p={4}\` for compact cards
+- Never mix spacing approaches in the same context \u2014 pick spacing OR margin, not both
 
 ### Typography
 
-Use \`Typography\` and \`Text\` components from \`@blacksmith-ui/react\`. Do NOT style raw HTML headings.
+Use \`Heading\` and \`Text\` components from \`@chakra-ui/react\`. Do NOT style raw HTML headings.
 
 **Hierarchy:**
 | Level | Component | Use for |
 |-------|-----------|---------|
-| Page title | \`<Typography variant="h1">\` | One per page. The main heading. |
-| Section title | \`<Typography variant="h2">\` | Major sections within a page |
-| Sub-section | \`<Typography variant="h3">\` | Groups within a section |
-| Card title | \`<Typography variant="h4">\` or \`CardTitle\` | Card headings |
+| Page title | \`<Heading as="h1" size="2xl">\` | One per page. The main heading. |
+| Section title | \`<Heading as="h2" size="xl">\` | Major sections within a page |
+| Sub-section | \`<Heading as="h3" size="lg">\` | Groups within a section |
+| Card title | \`<Heading as="h4" size="md">\` | Card headings |
 | Body | \`<Text>\` | Paragraphs, descriptions |
-| Caption/label | \`<Text size="sm" color="muted">\` | Secondary info, metadata, timestamps |
-| Overline | \`<Text size="xs" weight="medium" className="uppercase tracking-wide">\` | Category labels, section overlines |
+| Caption/label | \`<Text fontSize="sm" color="gray.500">\` | Secondary info, metadata, timestamps |
+| Overline | \`<Text fontSize="xs" fontWeight="medium" textTransform="uppercase" letterSpacing="wide">\` | Category labels, section overlines |
 
 **Rules:**
 - One \`h1\` per page \u2014 it's the page title
-- Headings should never skip levels (h1 \u2192 h3 without h2)
-- Body text: \`text-sm\` (14px) for dense UIs (tables, sidebars), \`text-base\` (16px) for reading content
-- Line height: use Tailwind defaults (\`leading-relaxed\` for body copy, \`leading-tight\` for headings)
-- Max reading width: \`max-w-prose\` (~65ch) for long-form text. Never let paragraphs stretch full-width
-- Use \`text-muted-foreground\` for secondary text, never gray hardcoded values
-- Font weight: \`font-medium\` (500) for labels and emphasis, \`font-semibold\` (600) for headings, \`font-bold\` (700) sparingly
+- Headings should never skip levels (h1 -> h3 without h2)
+- Body text: \`fontSize="sm"\` (14px) for dense UIs (tables, sidebars), \`fontSize="md"\` (16px) for reading content
+- Max reading width: \`maxW="prose"\` (~65ch) for long-form text. Never let paragraphs stretch full-width
+- Use \`color="gray.500"\` or theme-aware \`useColorModeValue('gray.600', 'gray.400')\` for secondary text
+- Font weight: \`fontWeight="medium"\` (500) for labels, \`fontWeight="semibold"\` (600) for headings, \`fontWeight="bold"\` (700) sparingly
 
 ### Color
 
-Use design tokens (CSS variables), never hardcoded colors.
+Use Chakra UI's theme-aware color tokens, never hardcoded colors.
 
-**Semantic palette:**
+**Semantic palette (via colorScheme and theme tokens):**
 | Token | Usage |
 |-------|-------|
-| \`primary\` | Primary actions (buttons, links, active states) |
-| \`secondary\` | Secondary actions, subtle backgrounds |
-| \`destructive\` | Delete, error, danger states |
-| \`muted\` | Backgrounds for subtle sections, disabled states |
-| \`accent\` | Highlights, hover states, focus rings |
-| \`foreground\` | Primary text |
-| \`muted-foreground\` | Secondary/helper text |
-| \`border\` | Borders, dividers |
-| \`card\` | Card backgrounds |
-| \`background\` | Page background |
+| \`blue\` (colorScheme) | Primary actions (buttons, links, active states) |
+| \`gray\` (colorScheme) | Secondary actions, subtle backgrounds |
+| \`red\` (colorScheme) | Delete, error, danger states |
+| \`green\` (colorScheme) | Success states |
+| \`yellow\` / \`orange\` | Warning states |
 
 **Rules:**
-- NEVER use Tailwind color literals (\`text-gray-500\`, \`bg-blue-600\`, \`border-slate-200\`, \`bg-white\`, \`bg-black\`). Always use semantic tokens (\`text-muted-foreground\`, \`bg-primary\`, \`border-border\`, \`bg-background\`). This is non-negotiable \u2014 hardcoded colors break dark mode.
-- Status colors: use \`Badge\` variants (\`default\`, \`secondary\`, \`destructive\`, \`outline\`) \u2014 don't hand-roll colored pills.
+- Use \`useColorModeValue()\` for any colors that need to adapt between light and dark mode
+- Status colors: use \`Badge\` with \`colorScheme\` (\`green\`, \`red\`, \`blue\`, \`gray\`) \u2014 don't hand-roll colored pills.
 - Maximum 2\u20133 colors visible at any time (primary + foreground + muted). Colorful UIs feel noisy.
 - Every UI must render correctly in both light and dark mode. See the Dark Mode section below for the full rules.
 
@@ -2794,66 +3554,66 @@ Use design tokens (CSS variables), never hardcoded colors.
 **Page layout:**
 \`\`\`tsx
 <Box as="main">
-  <Container>
-    <Stack gap={8}>
+  <Container maxW="container.xl">
+    <VStack spacing={8} align="stretch">
       {/* Page header */}
-      <Flex align="center" justify="between">
-        <Stack gap={1}>
-          <Typography variant="h1">Page Title</Typography>
-          <Text color="muted">Brief description of this page</Text>
-        </Stack>
-        <Button>Primary Action</Button>
+      <Flex align="center" justify="space-between">
+        <VStack spacing={1} align="start">
+          <Heading as="h1" size="2xl">Page Title</Heading>
+          <Text color="gray.500">Brief description of this page</Text>
+        </VStack>
+        <Button colorScheme="blue">Primary Action</Button>
       </Flex>
 
       {/* Page content sections */}
-      <Stack gap={6}>
+      <VStack spacing={6} align="stretch">
         {/* ... */}
-      </Stack>
-    </Stack>
+      </VStack>
+    </VStack>
   </Container>
 </Box>
 \`\`\`
 
 **Card-based content:**
 \`\`\`tsx
-<Grid columns={{ base: 1, md: 2, lg: 3 }} gap={6}>
+<SimpleGrid columns={{ base: 1, md: 2, lg: 3 }} spacing={6}>
   {items.map((item) => (
     <Card key={item.id}>
       <CardHeader>
-        <CardTitle>{item.title}</CardTitle>
-        <CardDescription>{item.description}</CardDescription>
+        <Heading size="md">{item.title}</Heading>
+        <Text fontSize="sm" color="gray.500">{item.description}</Text>
       </CardHeader>
-      <CardContent>
+      <CardBody>
         {/* Content */}
-      </CardContent>
+      </CardBody>
     </Card>
   ))}
-</Grid>
+</SimpleGrid>
 \`\`\`
 
 **Sidebar + main content:**
 \`\`\`tsx
-<Flex className="min-h-screen">
-  <Sidebar>{/* Nav items */}</Sidebar>
-  <Box as="main" className="flex-1">
-    <Container>{/* Page content */}</Container>
+<Flex minH="100vh">
+  <Box as="aside" w="250px">{/* Nav items */}</Box>
+  <Box as="main" flex={1}>
+    <Container maxW="container.xl">{/* Page content */}</Container>
   </Box>
 </Flex>
 \`\`\`
 
 **Section with centered content (landing pages):**
 \`\`\`tsx
-<Box as="section" className="py-16 sm:py-20">
-  <Container>
-    <Stack gap={4} align="center" className="text-center">
-      <Typography variant="h2">Section Title</Typography>
-      <Text color="muted" className="max-w-2xl">
+<Box as="section" py={{ base: 16, sm: 20 }}>
+  <Container maxW="container.xl">
+    <VStack spacing={4} align="center" textAlign="center">
+      <Heading as="h2" size="xl">Section Title</Heading>
+      <Text color="gray.500" maxW="2xl">
         A concise description that explains the value proposition.
       </Text>
-    </Stack>
-    <Grid columns={{ base: 1, md: 3 }} gap={8} className="mt-12">
+    </VStack>
+    <SimpleGrid columns={{ base: 1, md: 3 }} spacing={8} mt={12}>
       {/* Feature cards or content */}
-    </Grid>
+    </SimpleGrid>
   </Container>
 </Box>
 \`\`\`
@@ -2862,15 +3622,15 @@ Use design tokens (CSS variables), never hardcoded colors.
 
 **Empty states:**
 \`\`\`tsx
-// GOOD \u2014 uses EmptyState component
-<EmptyState
-  icon={Inbox}
-  title="No messages yet"
-  description="Messages from your team will appear here."
-  action={<Button>Send a message</Button>}
-/>
-
-// BAD \u2014 hand-rolled empty state
+// GOOD \u2014 uses a well-structured empty state with Chakra components
+<VStack spacing={4} align="center" py={12} textAlign="center">
+  <Icon as={Inbox} boxSize={12} color="gray.400" />
+  <Heading size="md">No messages yet</Heading>
+  <Text color="gray.500">Messages from your team will appear here.</Text>
+  <Button colorScheme="blue">Send a message</Button>
+</VStack>
+
+// BAD \u2014 hand-rolled empty state with raw HTML
 <div className="flex flex-col items-center justify-center py-12 text-center">
   <Inbox className="h-12 w-12 text-gray-400 mb-4" />
   <h3 className="text-lg font-medium">No messages yet</h3>
@@ -2880,33 +3640,33 @@ Use design tokens (CSS variables), never hardcoded colors.
 
 **Stats/metrics:**
 \`\`\`tsx
-// GOOD \u2014 uses StatCard
-<Grid columns={{ base: 1, sm: 2, lg: 4 }} gap={4}>
-  <StatCard label="Total Users" value="2,847" trend="+12%" />
-  <StatCard label="Revenue" value="$48,290" trend="+8%" />
-</Grid>
-
-// BAD \u2014 hand-rolled stat cards
-<div className="grid grid-cols-4 gap-4">
-  <div className="bg-white rounded-lg p-6 shadow">
-    <p className="text-sm text-gray-500">Total Users</p>
-    <p className="text-2xl font-bold">2,847</p>
-  </div>
-</div>
+// GOOD \u2014 uses Chakra Stat component
+<SimpleGrid columns={{ base: 1, sm: 2, lg: 4 }} spacing={4}>
+  <Stat>
+    <StatLabel>Total Users</StatLabel>
+    <StatNumber>2,847</StatNumber>
+    <StatHelpText><StatArrow type="increase" />12%</StatHelpText>
+  </Stat>
+  <Stat>
+    <StatLabel>Revenue</StatLabel>
+    <StatNumber>$48,290</StatNumber>
+    <StatHelpText><StatArrow type="increase" />8%</StatHelpText>
+  </Stat>
+</SimpleGrid>
 \`\`\`
 
 **Loading states:**
 \`\`\`tsx
 // GOOD \u2014 Skeleton matches the layout structure
-<Stack gap={4}>
-  <Skeleton className="h-8 w-48" />       {/* Title */}
-  <Skeleton className="h-4 w-96" />       {/* Description */}
-  <Grid columns={3} gap={4}>
+<VStack spacing={4} align="stretch">
+  <Skeleton h="32px" w="200px" />
+  <SkeletonText noOfLines={2} />
+  <SimpleGrid columns={3} spacing={4}>
     {Array.from({ length: 3 }).map((_, i) => (
-      <Skeleton key={i} className="h-32" />
+      <Skeleton key={i} h="128px" />
     ))}
-  </Grid>
-</Stack>
+  </SimpleGrid>
+</VStack>
 
 // BAD \u2014 generic spinner with no layout hint
 <div className="flex justify-center py-12">
@@ -2918,87 +3678,52 @@ Use design tokens (CSS variables), never hardcoded colors.
 
 > **CRITICAL: Every screen, component, and custom style MUST look correct in both light and dark mode. No exceptions.**
 
-BlacksmithUI uses the \`.dark\` class strategy on \`<html>\`. All semantic CSS variables automatically switch between light and dark values. Your job is to never break this.
+Chakra UI supports color mode via \`useColorMode()\` and \`useColorModeValue()\`. All built-in components automatically adapt.
 
 **Rules:**
-- NEVER hardcode colors. \`text-gray-500\`, \`bg-white\`, \`bg-slate-900\`, \`border-gray-200\` \u2014 all of these break in one mode or the other. Use semantic tokens: \`text-muted-foreground\`, \`bg-background\`, \`bg-card\`, \`border-border\`.
-- NEVER use \`bg-white\` or \`bg-black\`. Use \`bg-background\` (page), \`bg-card\` (elevated surfaces), \`bg-muted\` (subtle sections).
-- NEVER use \`text-black\` or \`text-white\`. Use \`text-foreground\` (primary text), \`text-muted-foreground\` (secondary), \`text-primary-foreground\` (text on primary-colored backgrounds).
-- NEVER use hardcoded shadows like \`shadow-[0_2px_8px_rgba(0,0,0,0.1)]\`. Use Tailwind shadow utilities (\`shadow-sm\`, \`shadow-md\`) which respect the theme.
-- NEVER use opacity-based overlays with hardcoded colors (\`bg-black/50\`). Use \`bg-background/80\` or let overlay components (\`Dialog\`, \`Sheet\`) handle it.
-- SVG fills and strokes: use \`currentColor\` or \`fill-foreground\` / \`stroke-border\` \u2014 never \`fill-black\` or \`stroke-gray-300\`.
-- Image assets: if you use decorative images or illustrations, ensure they work on both backgrounds or use \`dark:hidden\` / \`hidden dark:block\` to swap variants.
-
-**Safe color tokens (always use these):**
-| Need | Light mode maps to | Dark mode maps to | Use |
-|------|----|----|-----|
-| Page background | white/light gray | near-black | \`bg-background\` |
-| Card/surface | white | dark gray | \`bg-card\` |
-| Subtle background | light gray | darker gray | \`bg-muted\` |
-| Primary text | near-black | near-white | \`text-foreground\` |
-| Secondary text | medium gray | lighter gray | \`text-muted-foreground\` |
-| Borders | light gray | dark gray | \`border-border\` |
-| Input borders | light gray | dark gray | \`border-input\` |
-| Focus ring | brand color | brand color | \`ring-ring\` |
-| Primary action | brand color | brand color | \`bg-primary text-primary-foreground\` |
-| Destructive | red | red | \`bg-destructive text-destructive-foreground\` |
-
-**Testing checklist (mental model):**
-Before considering any UI complete, verify these in your head:
-1. Does every text element use \`foreground\`, \`muted-foreground\`, or \`*-foreground\` tokens?
-2. Does every background use \`background\`, \`card\`, \`muted\`, or \`primary\`/\`secondary\`/\`accent\` tokens?
-3. Does every border use \`border\`, \`input\`, or \`ring\` tokens?
-4. Are there ANY hex values, rgb values, or Tailwind color names (gray, slate, blue, etc.) in the code? If yes, replace them.
-5. Do hover/focus/active states also use semantic tokens? (\`hover:bg-muted\` not \`hover:bg-gray-100\`)
+- Use \`useColorModeValue()\` for any custom colors that need to differ between modes
+- NEVER hardcode colors that only work in one mode. Use theme tokens or \`useColorModeValue()\`.
+- NEVER use \`bg="white"\` or \`bg="black"\`. Use \`bg={useColorModeValue('white', 'gray.800')}\` or Chakra semantic tokens.
+- All Chakra UI components automatically adapt to color mode \u2014 leverage this.
 
 ### Interactions & Feedback
 
-- **Hover states**: Subtle background change (\`hover:bg-muted\`) \u2014 not color shifts or scale transforms
-- **Focus**: Use focus-visible ring (\`focus-visible:ring-2 ring-ring\`). BlacksmithUI components handle this automatically
-- **Transitions**: \`transition-colors duration-150\` for color changes. No bounces, no springs, no dramatic animations
-- **Click feedback**: Use \`active:scale-[0.98]\` only on buttons and interactive cards, never on text or static elements
-- **Loading feedback**: Show \`Spinner\` on buttons during async actions. Use \`Skeleton\` for content areas. Never leave the user without feedback during loading
+- **Hover states**: Subtle background change \u2014 Chakra components handle this automatically
+- **Focus**: Chakra components include accessible focus rings by default
+- **Loading feedback**: Show \`Spinner\` on buttons via \`isLoading\` prop. Use \`Skeleton\` for content areas. Never leave the user without feedback during loading
 - **Success/error feedback**: Use \`useToast()\` for transient confirmations. Use \`Alert\` for persistent messages. Never use \`window.alert()\`
 - **Confirmation before destructive actions**: Always use \`AlertDialog\` for delete/remove actions. Never delete on single click
 
 ### Responsive Design
 
-- **Mobile-first**: Write base styles for mobile, add \`sm:\`/\`md:\`/\`lg:\` for larger screens
-- **Breakpoints**: \`sm\` (640px), \`md\` (768px), \`lg\` (1024px), \`xl\` (1280px)
-- **Grid collapse**: \`Grid columns={{ base: 1, md: 2, lg: 3 }}\` \u2014 single column on mobile, expand on larger screens
-- **Hide/show**: Use \`hidden md:block\` / \`md:hidden\` to toggle elements across breakpoints
-- **Touch targets**: Minimum 44\xD744px for interactive elements on mobile. Use \`Button size="lg"\` and adequate padding
-- **Stack on mobile, row on desktop**: Use \`Flex direction={{ base: 'column', md: 'row' }}\` or \`Stack\` that switches direction
+- **Mobile-first**: Chakra's responsive props use mobile-first breakpoints
+- **Breakpoints**: \`sm\` (480px), \`md\` (768px), \`lg\` (992px), \`xl\` (1280px), \`2xl\` (1536px)
+- **Responsive props**: \`columns={{ base: 1, md: 2, lg: 3 }}\` \u2014 single column on mobile, expand on larger screens
+- **Hide/show**: Use Chakra's \`Show\` and \`Hide\` components or \`display={{ base: 'none', md: 'block' }}\`
+- **Touch targets**: Minimum 44x44px for interactive elements on mobile. Use \`Button size="lg"\` and adequate padding
+- **Stack direction**: Use \`Stack direction={{ base: 'column', md: 'row' }}\` for responsive stacking
 - **Container**: Always wrap page content in \`<Container>\` \u2014 it handles responsive horizontal padding
 
 ### Anti-Patterns \u2014 NEVER Do These
 
 | Anti-pattern | What to do instead |
 |---|---|
-| Hardcoded colors (\`text-gray-500\`, \`bg-blue-600\`) | Use semantic tokens (\`text-muted-foreground\`, \`bg-primary\`) |
-| Heavy box shadows (\`shadow-xl\`, \`shadow-2xl\`) | Use \`shadow-sm\` on cards, \`shadow-md\` on elevated overlays only |
-| Rounded pill shapes (\`rounded-full\`) on cards/containers | Use \`rounded-lg\` or \`rounded-md\` (controlled by \`--radius\`) |
-| Gradient backgrounds on surfaces | Use solid \`bg-card\` or \`bg-background\` |
-| Decorative borders (\`border-l-4 border-blue-500\`) | Use \`Divider\` or \`border-border\` |
-| Custom scrollbars with CSS hacks | Use \`ScrollArea\` |
-| Animated entrances (fade-in, slide-up on mount) | Content should appear instantly. Only animate user-triggered changes |
-| Centering with \`absolute inset-0 flex items-center\` | Use \`Flex align="center" justify="center"\` |
-| Using \`<br />\` for spacing | Use \`Stack gap={...}\` or margin utilities |
-| Multiple font sizes in close proximity | Keep nearby text within 1\u20132 size steps |
-| Dense walls of text | Break into sections with headings, cards, or spacing |
-| Colored backgrounds on every section | Use \`bg-background\` as default, \`bg-muted\` sparingly for contrast |
-| Over-using badges/tags on everything | Badges are for status and categories, not decoration |
-| Inline styles (\`style={{ ... }}\`) | Use Tailwind classes via \`className\` |
-| \`bg-white\` / \`bg-black\` / \`bg-slate-*\` | Use \`bg-background\`, \`bg-card\`, \`bg-muted\` |
-| \`text-black\` / \`text-white\` / \`text-gray-*\` | Use \`text-foreground\`, \`text-muted-foreground\` |
-| \`border-gray-*\` / \`border-slate-*\` | Use \`border-border\`, \`border-input\` |
-| Hex/rgb values in className or style | Use CSS variable tokens exclusively |
-| UI that only looks right in light mode | Always verify both modes \u2014 use semantic tokens throughout |
+| Raw \`<div>\` with flex/grid classes | Use \`Flex\`, \`VStack\`, \`HStack\`, \`SimpleGrid\` |
+| Raw \`<h1>\`-\`<h6>\` tags | Use \`Heading\` with \`as\` and \`size\` props |
+| Raw \`<p>\` tags | Use \`Text\` |
+| Heavy box shadows | Use Chakra's built-in shadow prop: \`shadow="sm"\`, \`shadow="md"\` |
+| Gradient backgrounds on surfaces | Use solid backgrounds |
+| Custom scrollbar CSS hacks | Use Chakra's styling system |
+| Animated entrances (fade-in, slide-up) | Content should appear instantly. Only animate user-triggered changes |
+| Using \`<br />\` for spacing | Use \`VStack spacing={...}\` or Chakra spacing props |
+| Inline styles (\`style={{ ... }}\`) | Use Chakra style props (\`p\`, \`m\`, \`bg\`, \`color\`, etc.) |
+| Hardcoded color values | Use theme tokens and \`useColorModeValue()\` |
 `;
   }
 };
 
 // src/skills/programming-paradigms.ts
+init_esm_shims();
 var programmingParadigmsSkill = {
   id: "programming-paradigms",
   name: "Programming Paradigms",
@@ -3427,7 +4152,249 @@ class OrderService:
   }
 };
 
+// src/skills/frontend-testing.ts
+init_esm_shims();
+var frontendTestingSkill = {
+  id: "frontend-testing",
+  name: "Frontend Testing Conventions",
+  description: "Test infrastructure, file placement, test utilities, and rules for when and how to write frontend tests.",
+  render(_ctx) {
+    return `## Frontend Testing Conventions
+
+### Stack
+- **Vitest** \u2014 test runner (configured in \`vite.config.ts\`)
+- **jsdom** \u2014 browser environment
+- **React Testing Library** \u2014 component rendering and queries
+- **\`@testing-library/user-event\`** \u2014 user interaction simulation
+- **\`@testing-library/jest-dom\`** \u2014 DOM assertion matchers (e.g. \`toBeInTheDocument\`)
+
+### Running Tests
+- Run all tests: \`cd frontend && npm test\`
+- Watch mode: \`cd frontend && npm run test:watch\`
+- Run a specific file: \`cd frontend && npx vitest run src/pages/home/__tests__/home.spec.tsx\`
+- Coverage: \`cd frontend && npm run test:coverage\`
+
+### File Placement \u2014 Tests Live Next to the Code
+
+> **RULE: Every test file goes in a \`__tests__/\` folder co-located with the code it tests. Never put tests in a top-level \`tests/\` directory.**
+
+\`\`\`
+pages/customers/
+\u251C\u2500\u2500 customers-page.tsx
+\u251C\u2500\u2500 customer-detail-page.tsx
+\u251C\u2500\u2500 __tests__/                        # Page integration tests
+\u2502   \u251C\u2500\u2500 customers-page.spec.tsx
+\u2502   \u2514\u2500\u2500 customer-detail-page.spec.tsx
+\u251C\u2500\u2500 components/
+\u2502   \u251C\u2500\u2500 customer-card.tsx
+\u2502   \u251C\u2500\u2500 customer-list.tsx
+\u2502   \u251C\u2500\u2500 customer-form.tsx
+\u2502   \u2514\u2500\u2500 __tests__/                    # Component unit tests
+\u2502       \u251C\u2500\u2500 customer-card.spec.tsx
+\u2502       \u251C\u2500\u2500 customer-list.spec.tsx
+\u2502       \u2514\u2500\u2500 customer-form.spec.tsx
+\u2514\u2500\u2500 hooks/
+    \u251C\u2500\u2500 use-customers-page.ts
+    \u2514\u2500\u2500 __tests__/                    # Hook tests
+        \u2514\u2500\u2500 use-customers-page.spec.ts
+\`\`\`
+
+The same pattern applies to \`features/\`, \`shared/\`, and \`router/\`:
+\`\`\`
+features/auth/
+\u251C\u2500\u2500 pages/
+\u2502   \u251C\u2500\u2500 login-page.tsx
+\u2502   \u2514\u2500\u2500 __tests__/
+\u2502       \u2514\u2500\u2500 login-page.spec.tsx
+\u251C\u2500\u2500 hooks/
+\u2502   \u2514\u2500\u2500 __tests__/
+shared/
+\u251C\u2500\u2500 components/
+\u2502   \u2514\u2500\u2500 __tests__/
+\u251C\u2500\u2500 hooks/
+\u2502   \u2514\u2500\u2500 __tests__/
+router/
+\u251C\u2500\u2500 __tests__/
+\u2502   \u251C\u2500\u2500 paths.spec.ts
+\u2502   \u2514\u2500\u2500 auth-guard.spec.tsx
+\`\`\`
+
+### Test File Naming
+- Use \`.spec.tsx\` for component/page tests (JSX)
+- Use \`.spec.ts\` for pure logic tests (hooks, utilities, no JSX)
+- Name matches the source file: \`customer-card.tsx\` \u2192 \`customer-card.spec.tsx\`
+
+### Always Use \`renderWithProviders\`
+
+> **RULE: Never import \`render\` from \`@testing-library/react\` directly. Always use \`renderWithProviders\` from \`@/__tests__/test-utils\`.**
+
+\`renderWithProviders\` wraps components with all app providers (ChakraProvider, QueryClientProvider, MemoryRouter) so tests match the real app environment.
+
+\`\`\`tsx
+import { screen } from '@/__tests__/test-utils'
+import { renderWithProviders } from '@/__tests__/test-utils'
+import { MyComponent } from '../my-component'
+
+describe('MyComponent', () => {
+  it('renders correctly', () => {
+    renderWithProviders(<MyComponent />)
+    expect(screen.getByText('Hello')).toBeInTheDocument()
+  })
+})
+\`\`\`
+
+**Options:**
+\`\`\`tsx
+renderWithProviders(<MyComponent />, {
+  routerEntries: ['/customers/1'],  // Set initial route
+  queryClient: customQueryClient,   // Custom query client
+})
+\`\`\`
+
+**User interactions:**
+\`\`\`tsx
+const { user } = renderWithProviders(<MyComponent />)
+await user.click(screen.getByRole('button', { name: 'Submit' }))
+await user.type(screen.getByLabelText('Email'), 'test@example.com')
+\`\`\`
+
+### When to Write Tests
+
+> **RULE: Every code change that touches pages, components, hooks, or utilities must include corresponding test updates.**
+
+| What changed | Test required |
+|---|---|
+| New page | Add \`__tests__/<page>.spec.tsx\` with integration test |
+| New component | Add \`__tests__/<component>.spec.tsx\` |
+| New hook (with logic) | Add \`__tests__/<hook>.spec.ts\` |
+| New utility function | Add \`__tests__/<util>.spec.ts\` |
+| Modified page/component | Update existing test or add new test cases |
+| Bug fix | Add regression test that would have caught the bug |
+| Deleted page/component | Delete corresponding test file |
+
+### What to Test
+
+**Page integration tests** \u2014 test the page as a whole:
+- Renders correct heading/title
+- Loading state shows skeleton or spinner
+- Error state shows error message
+- Data renders correctly (mock the API hooks)
+- User interactions (navigation, form submission, delete confirmation)
+
+**Component unit tests** \u2014 test the component in isolation:
+- Renders with required props
+- Handles optional props correctly (present vs absent)
+- Displays correct content based on props
+- User interactions trigger correct callbacks
+- Conditional rendering (empty state, loading state)
+
+**Hook tests** \u2014 test custom hooks with logic:
+- Returns correct initial state
+- Transforms data correctly
+- Side effects fire as expected
+
+**Utility/pure function tests** \u2014 test input/output:
+- Happy path
+- Edge cases (empty input, null, special characters)
+- Error cases
+
+### Mocking Patterns
+
+**Mock hooks (for page tests):**
+\`\`\`tsx
+vi.mock('@/api/hooks/customers')
+vi.mock('@/features/auth/hooks/use-auth')
+
+import { useCustomers } from '@/api/hooks/customers'
+
+beforeEach(() => {
+  vi.mocked(useCustomers).mockReturnValue({
+    data: { customers: mockCustomers, total: 2 },
+    isLoading: false,
+    errorMessage: null,
+  } as any)
+})
+\`\`\`
+
+**Mock auth hook (for auth page tests):**
+\`\`\`tsx
+vi.mock('@/features/auth/hooks/use-auth', () => ({
+  useAuth: () => ({
+    user: null,
+    loading: false,
+    error: null,
+    isAuthenticated: false,
+    signInWithEmail: vi.fn(),
+    signOut: vi.fn(),
+  }),
+}))
+\`\`\`
+
+**Mock react-router-dom hooks (for detail pages):**
+\`\`\`tsx
+const mockNavigate = vi.fn()
+vi.mock('react-router-dom', async () => {
+  const actual = await vi.importActual('react-router-dom')
+  return { ...actual, useParams: () => ({ id: '1' }), useNavigate: () => mockNavigate }
+})
+\`\`\`
+
+### Test Structure
+\`\`\`tsx
+import { screen, waitFor } from '@/__tests__/test-utils'
+import { renderWithProviders } from '@/__tests__/test-utils'
+
+// Mocks at the top, before imports of modules that use them
+vi.mock('@/api/hooks/customers')
+
+import { useCustomers } from '@/api/hooks/customers'
+import CustomersPage from '../customers-page'
+
+const mockCustomers = [
+  { id: '1', title: 'Acme Corp', created_at: '2024-01-15T10:00:00Z' },
+]
+
+describe('CustomersPage', () => {
+  beforeEach(() => {
+    vi.mocked(useCustomers).mockReturnValue({ ... } as any)
+  })
+
+  it('renders page heading', () => {
+    renderWithProviders(<CustomersPage />)
+    expect(screen.getByText('Customers')).toBeInTheDocument()
+  })
+
+  it('shows error message when API fails', () => {
+    vi.mocked(useCustomers).mockReturnValue({
+      data: undefined,
+      isLoading: false,
+      errorMessage: 'Failed to load',
+    } as any)
+
+    renderWithProviders(<CustomersPage />)
+    expect(screen.getByText('Failed to load')).toBeInTheDocument()
+  })
+})
+\`\`\`
+
+### Key Rules
+
+1. **Tests live next to code** \u2014 \`__tests__/\` folder alongside the source, not in a separate top-level directory
+2. **Always use \`renderWithProviders\`** \u2014 never import render from \`@testing-library/react\` directly
+3. **Every page gets an integration test** \u2014 at minimum: renders heading, handles loading, handles errors
+4. **Every component gets a unit test** \u2014 at minimum: renders with required props, handles optional props
+5. **Mock at the hook level** \u2014 mock \`useCustomers\`, not \`fetch\`. Mock \`useAuth\`, not the auth adapter
+6. **Test behavior, not implementation** \u2014 query by role, text, or label, not by class names or internal state
+7. **No test-only IDs unless necessary** \u2014 prefer \`getByRole\`, \`getByText\`, \`getByLabelText\` over \`getByTestId\`
+8. **Keep tests focused** \u2014 each \`it()\` tests one behavior. Don't assert 10 things in one test
+9. **Clean up mocks** \u2014 use \`beforeEach\` to reset mock return values so tests don't leak state
+10. **Update tests when code changes** \u2014 if you modify a component, update its tests. If you delete a component, delete its tests
+`;
+  }
+};
+
 // src/skills/clean-code.ts
+init_esm_shims();
 var cleanCodeSkill = {
   id: "clean-code",
   name: "Clean Code Principles",
@@ -3462,7 +4429,7 @@ Write code that is easy to read, easy to change, and easy to delete. Treat clari
 - Props interfaces should be explicit and narrow \u2014 accept only what the component needs, not entire objects
 - Avoid prop drilling beyond 2 levels \u2014 use context or restructure the component tree
 - Destructure props in the function signature for clarity
-- Use \`@blacksmith-ui/react\` layout components (\`Stack\`, \`Flex\`, \`Grid\`) \u2014 never raw \`<div>\` with flex/grid classes
+- Use \`@chakra-ui/react\` layout components (\`VStack\`, \`HStack\`, \`Flex\`, \`SimpleGrid\`) \u2014 never raw \`<div>\` with flex/grid classes
 
 ### File Organization
 - Keep files short. If a file exceeds 200 lines, it is likely doing too much \u2014 split it
@@ -3531,6 +4498,7 @@ Write code that is easy to read, easy to change, and easy to delete. Treat clari
 };
 
 // src/skills/ai-guidelines.ts
+init_esm_shims();
 var aiGuidelinesSkill = {
   id: "ai-guidelines",
   name: "AI Development Guidelines",
@@ -3549,7 +4517,7 @@ var aiGuidelinesSkill = {
 - Use existing patterns in the codebase as reference before inventing new ones
 
 ### Frontend Architecture (Mandatory)
-- **Use \`@blacksmith-ui/react\` for ALL UI** \u2014 \`Stack\`, \`Flex\`, \`Grid\` for layout; \`Typography\`, \`Text\` for text; \`Card\`, \`Button\`, \`Badge\`, etc. for all elements. Never use raw HTML (\`<div>\`, \`<h1>\`, \`<p>\`, \`<button>\`) when a Blacksmith-UI component exists
+- **Use \`@chakra-ui/react\` for ALL UI** \u2014 \`VStack\`, \`HStack\`, \`Flex\`, \`SimpleGrid\` for layout; \`Heading\`, \`Text\` for text; \`Card\`, \`Button\`, \`Badge\`, etc. for all elements. Never use raw HTML (\`<div>\`, \`<h1>\`, \`<p>\`, \`<button>\`) when a Chakra UI component exists
 - **Pages are thin orchestrators** \u2014 compose child components from \`components/\`, extract logic into \`hooks/\`. A page file should be ~20-30 lines, not a monolith
 - **Use the \`Path\` enum** \u2014 all route paths come from \`src/router/paths.ts\`. Never hardcode path strings like \`'/login'\` or \`'/dashboard'\`
 - **Add new paths to the enum** \u2014 when creating a new page, add its path to the \`Path\` enum before the \`// blacksmith:path\` marker
@@ -3563,20 +4531,22 @@ var aiGuidelinesSkill = {
 
 ### Checklist Before Finishing a Task
 1. Backend tests pass: \`cd backend && ./venv/bin/python manage.py test\`
-2. Frontend builds: \`cd frontend && npm run build\`
-3. API types are in sync: \`blacksmith sync\`
-4. No lint errors in modified files
-5. All UI uses \`@blacksmith-ui/react\` components \u2014 no raw \`<div>\` for layout, no raw \`<h1>\`-\`<h6>\` for text
-6. Pages are modular \u2014 page file is a thin orchestrator, sections are in \`components/\`, logic in \`hooks/\`
-7. Logic is in hooks \u2014 no \`useApiQuery\`, \`useApiMutation\`, \`useEffect\`, or multi-\`useState\` in component bodies
-8. No hardcoded route paths \u2014 all paths use the \`Path\` enum from \`@/router/paths\`
-9. New routes have a corresponding \`Path\` enum entry
+2. Frontend tests pass: \`cd frontend && npm test\`
+3. Frontend builds: \`cd frontend && npm run build\`
+4. API types are in sync: \`blacksmith sync\`
+5. No lint errors in modified files
+6. All UI uses \`@chakra-ui/react\` components \u2014 no raw \`<div>\` for layout, no raw \`<h1>\`-\`<h6>\` for text
+7. Pages are modular \u2014 page file is a thin orchestrator, sections are in \`components/\`, logic in \`hooks/\`
+8. Logic is in hooks \u2014 no \`useApiQuery\`, \`useApiMutation\`, \`useEffect\`, or multi-\`useState\` in component bodies
+9. No hardcoded route paths \u2014 all paths use the \`Path\` enum from \`@/router/paths\`
+10. New routes have a corresponding \`Path\` enum entry
+11. **Tests are co-located** \u2014 every new or modified page, component, or hook has a corresponding \`.spec.tsx\` / \`.spec.ts\` in a \`__tests__/\` folder next to the source file (see the \`frontend-testing\` skill)
 `;
   }
 };
 
 // src/commands/ai-setup.ts
-async function setupAiDev({ projectDir, projectName, includeBlacksmithUiSkill }) {
+async function setupAiDev({ projectDir, projectName, includeChakraUiSkill }) {
   const aiSpinner = spinner("Setting up AI development environment...");
   try {
     const skills = [
@@ -3589,24 +4559,25 @@ async function setupAiDev({ projectDir, projectName, includeBlacksmithUiSkill })
       reactQuerySkill,
       pageStructureSkill
     ];
-    if (includeBlacksmithUiSkill) {
-      skills.push(blacksmithUiReactSkill);
-      skills.push(blacksmithUiFormsSkill);
-      skills.push(blacksmithUiAuthSkill);
+    if (includeChakraUiSkill) {
+      skills.push(chakraUiReactSkill);
+      skills.push(chakraUiFormsSkill);
+      skills.push(chakraUiAuthSkill);
       skills.push(blacksmithHooksSkill);
       skills.push(uiDesignSkill);
     }
     skills.push(blacksmithCliSkill);
+    skills.push(frontendTestingSkill);
     skills.push(programmingParadigmsSkill);
     skills.push(cleanCodeSkill);
     skills.push(aiGuidelinesSkill);
     const ctx = { projectName };
     const inlineSkills = skills.filter((s) => !s.name);
     const fileSkills = skills.filter((s) => s.name);
-    const skillsDir = path3.join(projectDir, ".claude", "skills");
+    const skillsDir = path4.join(projectDir, ".claude", "skills");
     if (fs3.existsSync(skillsDir)) {
       for (const entry of fs3.readdirSync(skillsDir)) {
-        const entryPath = path3.join(skillsDir, entry);
+        const entryPath = path4.join(skillsDir, entry);
         const stat = fs3.statSync(entryPath);
         if (stat.isDirectory()) {
           fs3.rmSync(entryPath, { recursive: true });
@@ -3617,7 +4588,7 @@ async function setupAiDev({ projectDir, projectName, includeBlacksmithUiSkill })
     }
     fs3.mkdirSync(skillsDir, { recursive: true });
     for (const skill of fileSkills) {
-      const skillDir = path3.join(skillsDir, skill.id);
+      const skillDir = path4.join(skillsDir, skill.id);
       fs3.mkdirSync(skillDir, { recursive: true });
       const frontmatter = `---
 name: ${skill.name}
@@ -3626,7 +4597,7 @@ description: ${skill.description}
 
 `;
       const content = skill.render(ctx).trim();
-      fs3.writeFileSync(path3.join(skillDir, "SKILL.md"), frontmatter + content + "\n", "utf-8");
+      fs3.writeFileSync(path4.join(skillDir, "SKILL.md"), frontmatter + content + "\n", "utf-8");
     }
     const inlineContent = inlineSkills.map((s) => s.render(ctx)).join("\n");
     const skillsList = fileSkills.map((s) => `- \`.claude/skills/${s.id}/SKILL.md\` \u2014 ${s.name}`).join("\n");
@@ -3642,7 +4613,7 @@ description: ${skill.description}
       "These files are auto-loaded by Claude Code. Run `blacksmith setup:ai` to regenerate.",
       ""
     ].join("\n");
-    fs3.writeFileSync(path3.join(projectDir, "CLAUDE.md"), claudeMd, "utf-8");
+    fs3.writeFileSync(path4.join(projectDir, "CLAUDE.md"), claudeMd, "utf-8");
     const skillNames = skills.filter((s) => s.id !== "project-overview" && s.id !== "ai-guidelines").map((s) => s.id).join(" + ");
     aiSpinner.succeed(`AI dev environment ready (${skillNames} skills)`);
   } catch (error) {
@@ -3691,9 +4662,9 @@ async function init(name, options) {
     "Theme": themePreset,
     "AI support": options.ai ? "Yes" : "No"
   });
-  const projectDir = path4.resolve(process.cwd(), name);
-  const backendDir = path4.join(projectDir, "backend");
-  const frontendDir = path4.join(projectDir, "frontend");
+  const projectDir = path5.resolve(process.cwd(), name);
+  const backendDir = path5.join(projectDir, "backend");
+  const frontendDir = path5.join(projectDir, "frontend");
   const templatesDir = getTemplatesDir();
   if (fs4.existsSync(projectDir)) {
     log.error(`Directory "${name}" already exists.`);
@@ -3720,7 +4691,7 @@ async function init(name, options) {
   };
   fs4.mkdirSync(projectDir, { recursive: true });
   fs4.writeFileSync(
-    path4.join(projectDir, "blacksmith.config.json"),
+    path5.join(projectDir, "blacksmith.config.json"),
     JSON.stringify(
       {
         name,
@@ -3735,13 +4706,13 @@ async function init(name, options) {
   const backendSpinner = spinner("Generating Django backend...");
   try {
     renderDirectory(
-      path4.join(templatesDir, "backend"),
+      path5.join(templatesDir, "backend"),
       backendDir,
       context
     );
     fs4.copyFileSync(
-      path4.join(backendDir, ".env.example"),
-      path4.join(backendDir, ".env")
+      path5.join(backendDir, ".env.example"),
+      path5.join(backendDir, ".env")
     );
     backendSpinner.succeed("Django backend generated");
   } catch (error) {
@@ -3784,7 +4755,7 @@ async function init(name, options) {
   const frontendSpinner = spinner("Generating React frontend...");
   try {
     renderDirectory(
-      path4.join(templatesDir, "frontend"),
+      path5.join(templatesDir, "frontend"),
       frontendDir,
       context
     );
@@ -3817,7 +4788,7 @@ async function init(name, options) {
     djangoProcess.unref();
     await new Promise((resolve) => setTimeout(resolve, 4e3));
     try {
-      await exec(process.execPath, [path4.join(frontendDir, "node_modules", ".bin", "openapi-ts")], { cwd: frontendDir, silent: true });
+      await exec(process.execPath, [path5.join(frontendDir, "node_modules", ".bin", "openapi-ts")], { cwd: frontendDir, silent: true });
       syncSpinner.succeed("OpenAPI types synced");
     } catch {
       syncSpinner.warn('OpenAPI sync skipped (run "blacksmith sync" after starting Django)');
@@ -3831,8 +4802,8 @@ async function init(name, options) {
   } catch {
     syncSpinner.warn('OpenAPI sync skipped (run "blacksmith sync" after starting Django)');
   }
-  const generatedDir = path4.join(frontendDir, "src", "api", "generated");
-  const stubFile = path4.join(generatedDir, "client.gen.ts");
+  const generatedDir = path5.join(frontendDir, "src", "api", "generated");
+  const stubFile = path5.join(generatedDir, "client.gen.ts");
   if (!fs4.existsSync(stubFile)) {
     if (!fs4.existsSync(generatedDir)) {
       fs4.mkdirSync(generatedDir, { recursive: true });
@@ -3862,16 +4833,17 @@ async function init(name, options) {
     await setupAiDev({
       projectDir,
       projectName: name,
-      includeBlacksmithUiSkill: options.blacksmithUiSkill !== false
+      includeChakraUiSkill: options.chakraUiSkill !== false
     });
   }
   printNextSteps(name, backendPort, frontendPort);
 }
 
 // src/commands/dev.ts
+init_esm_shims();
 import net from "net";
 import concurrently from "concurrently";
-import path5 from "path";
+import path6 from "path";
 function isPortAvailable(port) {
   return new Promise((resolve) => {
     const server = net.createServer();
@@ -3926,7 +4898,7 @@ async function dev() {
   log.step(`Swagger     \u2192 http://localhost:${backendPort}/api/docs/`);
   log.step("OpenAPI sync \u2192 watching backend .py files");
   log.blank();
-  const syncCmd = `${process.execPath} ${path5.join(frontendDir, "node_modules", ".bin", "openapi-ts")}`;
+  const syncCmd = `${process.execPath} ${path6.join(frontendDir, "node_modules", ".bin", "openapi-ts")}`;
   const watcherCode = [
     `const{watch}=require("fs"),{exec}=require("child_process");`,
     `let t=null,s=false;`,
@@ -3986,7 +4958,8 @@ async function dev() {
 }
 
 // src/commands/sync.ts
-import path6 from "path";
+init_esm_shims();
+import path7 from "path";
 import fs5 from "fs";
 async function sync() {
   let root;
@@ -4000,9 +4973,9 @@ async function sync() {
   const frontendDir = getFrontendDir(root);
   const s = spinner("Syncing OpenAPI schema to frontend...");
   try {
-    const schemaPath = path6.join(frontendDir, "_schema.yml");
+    const schemaPath = path7.join(frontendDir, "_schema.yml");
     await execPython(["manage.py", "spectacular", "--file", schemaPath], backendDir, true);
-    const configPath = path6.join(frontendDir, "openapi-ts.config.ts");
+    const configPath = path7.join(frontendDir, "openapi-ts.config.ts");
     const configBackup = fs5.readFileSync(configPath, "utf-8");
     const configWithFile = configBackup.replace(
       /path:\s*['"]http[^'"]+['"]/,
@@ -4010,7 +4983,7 @@ async function sync() {
     );
     fs5.writeFileSync(configPath, configWithFile, "utf-8");
     try {
-      await exec(process.execPath, [path6.join(frontendDir, "node_modules", ".bin", "openapi-ts")], {
+      await exec(process.execPath, [path7.join(frontendDir, "node_modules", ".bin", "openapi-ts")], {
         cwd: frontendDir,
         silent: true
       });
@@ -4034,10 +5007,12 @@ async function sync() {
 }
 
 // src/commands/make-resource.ts
-import path7 from "path";
+init_esm_shims();
+import path8 from "path";
 import fs6 from "fs";
 
 // src/utils/names.ts
+init_esm_shims();
 import { pascalCase, snakeCase, kebabCase, camelCase } from "change-case";
 import pluralize from "pluralize";
 function generateNames(input) {
@@ -4070,12 +5045,12 @@ async function makeResource(name) {
   const backendDir = getBackendDir(root);
   const frontendDir = getFrontendDir(root);
   const templatesDir = getTemplatesDir();
-  const backendAppDir = path7.join(backendDir, "apps", names.snakes);
+  const backendAppDir = path8.join(backendDir, "apps", names.snakes);
   if (fs6.existsSync(backendAppDir)) {
     log.error(`Backend app "${names.snakes}" already exists.`);
     process.exit(1);
   }
-  const frontendPageDir = path7.join(frontendDir, "src", "pages", names.kebabs);
+  const frontendPageDir = path8.join(frontendDir, "src", "pages", names.kebabs);
   if (fs6.existsSync(frontendPageDir)) {
     log.error(`Frontend page "${names.kebabs}" already exists.`);
     process.exit(1);
@@ -4084,7 +5059,7 @@ async function makeResource(name) {
   const backendSpinner = spinner(`Creating backend app: apps/${names.snakes}/`);
   try {
     renderDirectory(
-      path7.join(templatesDir, "resource", "backend"),
+      path8.join(templatesDir, "resource", "backend"),
       backendAppDir,
       context
     );
@@ -4096,7 +5071,7 @@ async function makeResource(name) {
   }
   const registerSpinner = spinner("Registering app in Django settings...");
   try {
-    const settingsPath = path7.join(backendDir, "config", "settings", "base.py");
+    const settingsPath = path8.join(backendDir, "config", "settings", "base.py");
     appendAfterMarker(
       settingsPath,
       "# blacksmith:apps",
@@ -4110,7 +5085,7 @@ async function makeResource(name) {
   }
   const urlSpinner = spinner("Registering API URLs...");
   try {
-    const urlsPath = path7.join(backendDir, "config", "urls.py");
+    const urlsPath = path8.join(backendDir, "config", "urls.py");
     insertBeforeMarker(
       urlsPath,
       "# blacksmith:urls",
@@ -4134,9 +5109,9 @@ async function makeResource(name) {
   }
   const syncSpinner = spinner("Syncing OpenAPI schema...");
   try {
-    const schemaPath = path7.join(frontendDir, "_schema.yml");
+    const schemaPath = path8.join(frontendDir, "_schema.yml");
     await execPython(["manage.py", "spectacular", "--file", schemaPath], backendDir, true);
-    const configPath = path7.join(frontendDir, "openapi-ts.config.ts");
+    const configPath = path8.join(frontendDir, "openapi-ts.config.ts");
     const configBackup = fs6.readFileSync(configPath, "utf-8");
     const configWithFile = configBackup.replace(
       /path:\s*['"]http[^'"]+['"]/,
@@ -4144,7 +5119,7 @@ async function makeResource(name) {
     );
     fs6.writeFileSync(configPath, configWithFile, "utf-8");
     try {
-      await exec(process.execPath, [path7.join(frontendDir, "node_modules", ".bin", "openapi-ts")], {
+      await exec(process.execPath, [path8.join(frontendDir, "node_modules", ".bin", "openapi-ts")], {
         cwd: frontendDir,
         silent: true
       });
@@ -4156,11 +5131,11 @@ async function makeResource(name) {
   } catch {
     syncSpinner.warn('Could not sync OpenAPI. Run "blacksmith sync" manually.');
   }
-  const apiHooksDir = path7.join(frontendDir, "src", "api", "hooks", names.kebabs);
+  const apiHooksDir = path8.join(frontendDir, "src", "api", "hooks", names.kebabs);
   const apiHooksSpinner = spinner(`Creating API hooks: api/hooks/${names.kebabs}/`);
   try {
     renderDirectory(
-      path7.join(templatesDir, "resource", "api-hooks"),
+      path8.join(templatesDir, "resource", "api-hooks"),
       apiHooksDir,
       context
     );
@@ -4173,7 +5148,7 @@ async function makeResource(name) {
   const frontendSpinner = spinner(`Creating frontend page: pages/${names.kebabs}/`);
   try {
     renderDirectory(
-      path7.join(templatesDir, "resource", "pages"),
+      path8.join(templatesDir, "resource", "pages"),
       frontendPageDir,
       context
     );
@@ -4185,7 +5160,7 @@ async function makeResource(name) {
   }
   const pathSpinner = spinner("Registering route path...");
   try {
-    const pathsFile = path7.join(frontendDir, "src", "router", "paths.ts");
+    const pathsFile = path8.join(frontendDir, "src", "router", "paths.ts");
     insertBeforeMarker(
       pathsFile,
       "// blacksmith:path",
@@ -4197,7 +5172,7 @@ async function makeResource(name) {
   }
   const routeSpinner = spinner("Registering frontend routes...");
   try {
-    const routesPath = path7.join(frontendDir, "src", "router", "routes.tsx");
+    const routesPath = path8.join(frontendDir, "src", "router", "routes.tsx");
     insertBeforeMarker(
       routesPath,
       "// blacksmith:import",
@@ -4218,6 +5193,7 @@ async function makeResource(name) {
 }
 
 // src/commands/build.ts
+init_esm_shims();
 async function build() {
   let root;
   try {
@@ -4259,8 +5235,9 @@ async function build() {
 }
 
 // src/commands/eject.ts
+init_esm_shims();
 import fs7 from "fs";
-import path8 from "path";
+import path9 from "path";
 async function eject() {
   let root;
   try {
@@ -4269,7 +5246,7 @@ async function eject() {
     log.error("Not inside a Blacksmith project.");
     process.exit(1);
   }
-  const configPath = path8.join(root, "blacksmith.config.json");
+  const configPath = path9.join(root, "blacksmith.config.json");
   if (fs7.existsSync(configPath)) {
     fs7.unlinkSync(configPath);
   }
@@ -4287,6 +5264,7 @@ async function eject() {
 }
 
 // src/commands/skills.ts
+init_esm_shims();
 import fs8 from "fs";
 var allSkills = [
   projectOverviewSkill,
@@ -4294,11 +5272,12 @@ var allSkills = [
   djangoRestAdvancedSkill,
   apiDocumentationSkill,
   reactSkill,
-  blacksmithUiReactSkill,
-  blacksmithUiFormsSkill,
-  blacksmithUiAuthSkill,
+  chakraUiReactSkill,
+  chakraUiFormsSkill,
+  chakraUiAuthSkill,
   blacksmithHooksSkill,
   blacksmithCliSkill,
+  frontendTestingSkill,
   cleanCodeSkill,
   aiGuidelinesSkill
 ];
@@ -4314,7 +5293,7 @@ async function setupSkills(options) {
   await setupAiDev({
     projectDir: root,
     projectName: config.name,
-    includeBlacksmithUiSkill: options.blacksmithUiSkill !== false
+    includeChakraUiSkill: options.chakraUiSkill !== false
   });
   log.blank();
   log.success("AI skills generated:");
@@ -4352,7 +5331,324 @@ function listSkills() {
   }
 }
 
+// src/commands/mcp-setup.ts
+init_esm_shims();
+import fs9 from "fs";
+import path10 from "path";
+var DONE_OPTION = "Done \u2014 save and exit";
+function getPresets(projectRoot) {
+  return [
+    {
+      id: "filesystem",
+      name: "Filesystem",
+      description: "Read and write project files",
+      command: "npx",
+      args: ["-y", "@modelcontextprotocol/server-filesystem"],
+      prompts: [
+        {
+          label: "Allowed directory path",
+          defaultValue: projectRoot,
+          target: "args"
+        }
+      ]
+    },
+    {
+      id: "postgres",
+      name: "PostgreSQL",
+      description: "Query PostgreSQL databases",
+      command: "npx",
+      args: ["-y", "@modelcontextprotocol/server-postgres"],
+      prompts: [
+        {
+          label: "PostgreSQL connection string (e.g. postgresql://user:pass@localhost:5432/dbname)",
+          target: "args"
+        }
+      ]
+    },
+    {
+      id: "fetch",
+      name: "Fetch",
+      description: "Make HTTP requests and fetch web content",
+      command: "npx",
+      args: ["-y", "@modelcontextprotocol/server-fetch"]
+    },
+    {
+      id: "github",
+      name: "GitHub",
+      description: "Interact with GitHub repos, issues, and PRs",
+      command: "npx",
+      args: ["-y", "@modelcontextprotocol/server-github"],
+      prompts: [
+        {
+          label: "GitHub personal access token",
+          target: "env",
+          envVar: "GITHUB_PERSONAL_ACCESS_TOKEN"
+        }
+      ]
+    },
+    {
+      id: "chakra-ui-docs",
+      name: "Chakra UI Docs",
+      description: "Chakra UI component documentation for AI assistance",
+      command: "npx",
+      args: [
+        "-y",
+        "@anthropic-ai/mcp-docs-server",
+        "--url",
+        "https://www.chakra-ui.com/docs",
+        "--name",
+        "chakra-ui-docs"
+      ]
+    },
+    {
+      id: "sentry",
+      name: "Sentry",
+      description: "Query errors, view issues, and manage releases in Sentry",
+      command: "npx",
+      args: ["-y", "@sentry/mcp-server"],
+      prompts: [
+        {
+          label: "Sentry auth token",
+          target: "env",
+          envVar: "SENTRY_AUTH_TOKEN"
+        },
+        {
+          label: "Sentry organization slug",
+          target: "env",
+          envVar: "SENTRY_ORG"
+        }
+      ]
+    },
+    {
+      id: "puppeteer",
+      name: "Puppeteer",
+      description: "Browser automation for testing, screenshots, and scraping",
+      command: "npx",
+      args: ["-y", "@modelcontextprotocol/server-puppeteer"]
+    },
+    {
+      id: "memory",
+      name: "Memory",
+      description: "Persistent knowledge graph for cross-session context",
+      command: "npx",
+      args: ["-y", "@modelcontextprotocol/server-memory"]
+    },
+    {
+      id: "slack",
+      name: "Slack",
+      description: "Read/send messages, search channels, and manage threads",
+      command: "npx",
+      args: ["-y", "@anthropic-ai/mcp-server-slack"],
+      prompts: [
+        {
+          label: "Slack bot token (xoxb-...)",
+          target: "env",
+          envVar: "SLACK_BOT_TOKEN"
+        },
+        {
+          label: "Slack team ID",
+          target: "env",
+          envVar: "SLACK_TEAM_ID"
+        }
+      ]
+    },
+    {
+      id: "redis",
+      name: "Redis",
+      description: "Query and manage Redis cache",
+      command: "npx",
+      args: ["-y", "@modelcontextprotocol/server-redis"],
+      prompts: [
+        {
+          label: "Redis URL (e.g. redis://localhost:6379)",
+          defaultValue: "redis://localhost:6379",
+          target: "env",
+          envVar: "REDIS_URL"
+        }
+      ]
+    }
+  ];
+}
+function readSettings(settingsPath) {
+  if (!fs9.existsSync(settingsPath)) {
+    return {};
+  }
+  try {
+    return JSON.parse(fs9.readFileSync(settingsPath, "utf-8"));
+  } catch {
+    return {};
+  }
+}
+function buildServerConfig(preset, promptValues) {
+  const args = [...preset.args];
+  const env = { ...preset.env };
+  let valueIndex = 0;
+  for (const prompt of preset.prompts || []) {
+    const value = promptValues[valueIndex++];
+    if (prompt.target === "args") {
+      args.push(value);
+    } else if (prompt.target === "env" && prompt.envVar) {
+      env[prompt.envVar] = value;
+    }
+  }
+  const config = { command: preset.command, args };
+  if (Object.keys(env).length > 0) {
+    config.env = env;
+  }
+  return config;
+}
+async function setupMcp() {
+  let root;
+  try {
+    root = findProjectRoot();
+  } catch {
+    log.error('Not inside a Blacksmith project. Run "blacksmith init <name>" first.');
+    process.exit(1);
+  }
+  const settingsPath = path10.join(root, ".claude", "settings.local.json");
+  const settings = readSettings(settingsPath);
+  const existingServers = settings.mcpServers || {};
+  const newServers = {};
+  const presets = getPresets(root);
+  log.blank();
+  log.info("Configure MCP servers for Claude Code.");
+  log.info('Select servers to add, then choose "Done" to save.');
+  log.blank();
+  while (true) {
+    const options = presets.map((p) => {
+      const configured = existingServers[p.id] || newServers[p.id];
+      const suffix = configured ? " (configured)" : "";
+      return `${p.name} \u2014 ${p.description}${suffix}`;
+    });
+    options.push(DONE_OPTION);
+    const choice = await promptSelect("Select an MCP server to configure", options);
+    if (choice === DONE_OPTION) {
+      break;
+    }
+    const selectedIndex = options.indexOf(choice);
+    const preset = presets[selectedIndex];
+    if (!preset) break;
+    if (existingServers[preset.id] || newServers[preset.id]) {
+      const overwrite = await promptYesNo(
+        `${preset.name} is already configured. Overwrite?`,
+        false
+      );
+      if (!overwrite) continue;
+    }
+    const values = [];
+    let skipped = false;
+    for (const prompt of preset.prompts || []) {
+      const value = await promptText(prompt.label, prompt.defaultValue);
+      if (!value && !prompt.defaultValue) {
+        log.warn(`Skipping ${preset.name} \u2014 required value not provided.`);
+        skipped = true;
+        break;
+      }
+      values.push(value);
+    }
+    if (skipped) continue;
+    newServers[preset.id] = buildServerConfig(preset, values);
+    log.success(`${preset.name} configured.`);
+    log.blank();
+  }
+  if (Object.keys(newServers).length === 0) {
+    log.info("No new servers configured.");
+    return;
+  }
+  settings.mcpServers = { ...existingServers, ...newServers };
+  try {
+    fs9.mkdirSync(path10.join(root, ".claude"), { recursive: true });
+    fs9.writeFileSync(settingsPath, JSON.stringify(settings, null, 2) + "\n", "utf-8");
+  } catch (error) {
+    log.error(`Failed to write settings: ${error.message}`);
+    process.exit(1);
+  }
+  log.blank();
+  log.success("MCP servers configured:");
+  for (const id of Object.keys(newServers)) {
+    const preset = presets.find((p) => p.id === id);
+    log.step(`  ${preset?.name || id}`);
+  }
+  log.blank();
+  log.info(`Settings written to ${path10.relative(root, settingsPath)}`);
+  log.blank();
+}
+
+// src/commands/studio.ts
+init_esm_shims();
+import net2 from "net";
+var DEFAULT_PORT = 3939;
+function isPortAvailable2(port) {
+  return new Promise((resolve) => {
+    const server = net2.createServer();
+    server.once("error", () => resolve(false));
+    server.once("listening", () => {
+      server.close(() => resolve(true));
+    });
+    server.listen(port);
+  });
+}
+async function findAvailablePort2(startPort) {
+  let port = startPort;
+  while (port < startPort + 100) {
+    if (await isPortAvailable2(port)) return port;
+    port++;
+  }
+  throw new Error(`No available port found in range ${startPort}-${port - 1}`);
+}
+async function studio(options) {
+  let root;
+  try {
+    root = findProjectRoot();
+  } catch {
+    log.error('Not inside a Blacksmith project. Run "blacksmith init <name>" first.');
+    process.exit(1);
+  }
+  const config = loadConfig(root);
+  const requestedPort = options.port ? parseInt(options.port, 10) : DEFAULT_PORT;
+  let port;
+  try {
+    port = await findAvailablePort2(requestedPort);
+  } catch (err) {
+    log.error(err.message);
+    process.exit(1);
+  }
+  if (port !== requestedPort) {
+    log.step(`Port ${requestedPort} in use, using ${port}`);
+  }
+  log.info(`Starting Blacksmith Studio for "${config.name}"...`);
+  log.blank();
+  try {
+    const { createStudioServer } = await import("@blacksmith/studio");
+    const { server } = await createStudioServer({ projectRoot: root, port });
+    const url = `http://localhost:${port}`;
+    log.success("Blacksmith Studio is running!");
+    log.blank();
+    log.step(`Studio  \u2192 ${url}`);
+    log.step(`Project \u2192 ${root}`);
+    log.blank();
+    log.info("Press Ctrl+C to stop.");
+    try {
+      const open2 = (await Promise.resolve().then(() => (init_open(), open_exports))).default;
+      await open2(url);
+    } catch {
+    }
+    const shutdown = () => {
+      log.blank();
+      log.info("Blacksmith Studio stopped.");
+      server.close();
+      process.exit(0);
+    };
+    process.on("SIGINT", shutdown);
+    process.on("SIGTERM", shutdown);
+  } catch (error) {
+    log.error(`Failed to start Studio: ${error.message}`);
+    process.exit(1);
+  }
+}
+
 // src/commands/backend.ts
+init_esm_shims();
 async function backend(args) {
   let root;
   try {
@@ -4376,6 +5672,7 @@ async function backend(args) {
 }
 
 // src/commands/frontend.ts
+init_esm_shims();
 async function frontend(args) {
   let root;
   try {
@@ -4403,13 +5700,15 @@ var program = new Command();
 program.name("blacksmith").description("Fullstack Django + React framework").version("0.1.0").hook("preAction", () => {
   banner();
 });
-program.command("init").argument("[name]", "Project name").option("--ai", "Set up AI development skills and documentation (CLAUDE.md)").option("--no-blacksmith-ui-skill", "Disable blacksmith-ui skill when using --ai").option("-b, --backend-port <port>", "Django backend port (default: 8000)").option("-f, --frontend-port <port>", "Vite frontend port (default: 5173)").option("-t, --theme-color <color>", "Theme color (zinc, slate, blue, green, orange, red, violet)").description("Create a new Blacksmith project").action(init);
+program.command("init").argument("[name]", "Project name").option("--ai", "Set up AI development skills and documentation (CLAUDE.md)").option("--no-chakra-ui-skill", "Disable Chakra UI skill when using --ai").option("-b, --backend-port <port>", "Django backend port (default: 8000)").option("-f, --frontend-port <port>", "Vite frontend port (default: 5173)").option("-t, --theme-color <color>", "Theme color (zinc, slate, blue, green, orange, red, violet)").description("Create a new Blacksmith project").action(init);
 program.command("dev").description("Start development servers (Django + Vite + OpenAPI sync)").action(dev);
 program.command("sync").description("Sync OpenAPI schema to frontend types, schemas, and hooks").action(sync);
 program.command("make:resource").argument("<name>", "Resource name (PascalCase, e.g. BlogPost)").description("Create a new resource (model, serializer, viewset, hooks, pages)").action(makeResource);
 program.command("build").description("Build both frontend and backend for production").action(build);
 program.command("eject").description("Remove Blacksmith, keep a clean Django + React project").action(eject);
-program.command("setup:ai").description("Generate CLAUDE.md with AI development skills for the project").option("--no-blacksmith-ui-skill", "Exclude blacksmith-ui skill").action(setupSkills);
+program.command("setup:ai").description("Generate CLAUDE.md with AI development skills for the project").option("--no-chakra-ui-skill", "Exclude Chakra UI skill").action(setupSkills);
+program.command("setup:mcp").description("Configure MCP servers for Claude Code AI integration").action(setupMcp);
+program.command("studio").description("Launch Blacksmith Studio \u2014 web UI for Claude Code").option("-p, --port <port>", "Port for the Studio server (default: 3939)").action(studio);
 program.command("skills").description("List all available AI development skills").action(listSkills);
 program.command("backend").argument("[args...]", "Django management command and arguments").description("Run a Django management command (e.g. blacksmith backend createsuperuser)").allowUnknownOption().action(backend);
 program.command("frontend").argument("[args...]", "npm command and arguments").description("Run an npm command in the frontend (e.g. blacksmith frontend install axios)").allowUnknownOption().action(frontend);