create-izi-noir 0.2.2 → 0.2.6

package/dist/index.js

@@ -6,7 +6,7 @@ import { Command } from "commander";
 // src/commands/init.ts
 import path2 from "path";
 import { execSync } from "child_process";
-import pc4 from "picocolors";
+import pc3 from "picocolors";
 
 // src/prompts/project.ts
 import prompts from "prompts";
@@ -17,8 +17,7 @@ var TEMPLATES = [
   { title: "Balance Proof only", value: "balance-proof" }
 ];
 var NETWORKS = [
-  { title: "Solana (recommended)", value: "solana", description: "Uses Groth16 for on-chain verification" },
-  { title: "EVM (Ethereum, Base, etc.)", value: "evm", description: "Uses UltraHonk proofs" }
+  { title: "Solana", value: "solana", description: "Uses Groth16 for on-chain verification" }
 ];
 function networkToProvider(network) {
   return network === "solana" ? "arkworks" : "barretenberg";
@@ -69,6 +68,16 @@ async function promptProjectOptions(defaults) {
       name: "initGit",
       message: "Initialize git repository?",
       initial: !defaults.skipGit
+    },
+    {
+      type: "select",
+      name: "aiTool",
+      message: "Which AI coding assistant do you use?",
+      choices: [
+        { title: "Claude Code", value: "claude", description: "Install IZI-NOIR circuit patterns skill" },
+        { title: "None / Other", value: "none", description: "Skip AI assistant configuration" }
+      ],
+      initial: 0
     }
   );
   try {
@@ -83,7 +92,8 @@ async function promptProjectOptions(defaults) {
       template: response.template || defaults.template || "default",
       provider: networkToProvider(network),
       skipInstall: response.installDeps === false,
-      skipGit: response.initGit === false
+      skipGit: response.initGit === false,
+      aiTool: response.aiTool || "none"
     };
   } catch {
     return null;
@@ -117,44 +127,8 @@ async function isDirectoryEmpty(dir) {
   }
 }
 
-// src/utils/spinner.ts
-import pc2 from "picocolors";
-var frames = ["\u280B", "\u2819", "\u2839", "\u2838", "\u283C", "\u2834", "\u2826", "\u2827", "\u2807", "\u280F"];
-var Spinner = class {
-  message;
-  interval = null;
-  frameIndex = 0;
-  constructor(message) {
-    this.message = message;
-  }
-  start() {
-    process.stdout.write("\x1B[?25l");
-    this.interval = setInterval(() => {
-      const frame = pc2.cyan(frames[this.frameIndex]);
-      process.stdout.write(`\r${frame} ${this.message}`);
-      this.frameIndex = (this.frameIndex + 1) % frames.length;
-    }, 80);
-  }
-  stop(success = true) {
-    if (this.interval) {
-      clearInterval(this.interval);
-      this.interval = null;
-    }
-    process.stdout.write("\x1B[?25h");
-    const icon = success ? pc2.green("\u2713") : pc2.red("\u2717");
-    process.stdout.write(`\r${icon} ${this.message}
-`);
-  }
-  update(message) {
-    this.message = message;
-  }
-};
-function createSpinner(message) {
-  return new Spinner(message);
-}
-
 // src/utils/progress.ts
-import pc3 from "picocolors";
+import pc2 from "picocolors";
 var THINKING_PHRASES = [
   "Initializing ZK environment",
   "Configuring proof system",
@@ -191,15 +165,15 @@ var ProgressReporter = class {
     this.showThinking();
   }
   showThinking() {
-    const frames2 = ["\u280B", "\u2819", "\u2839", "\u2838", "\u283C", "\u2834", "\u2826", "\u2827", "\u2807", "\u280F"];
+    const frames = ["\u280B", "\u2819", "\u2839", "\u2838", "\u283C", "\u2834", "\u2826", "\u2827", "\u2807", "\u280F"];
     let frameIndex = 0;
     let dotCount = 0;
     this.thinkingInterval = setInterval(() => {
-      const frame = pc3.cyan(frames2[frameIndex]);
+      const frame = pc2.cyan(frames[frameIndex]);
       const phrase = THINKING_PHRASES[this.thinkingIndex % THINKING_PHRASES.length];
       const dots = ".".repeat(dotCount % 4);
-      process.stdout.write(`\r${frame} ${pc3.dim(phrase)}${dots}   `);
-      frameIndex = (frameIndex + 1) % frames2.length;
+      process.stdout.write(`\r${frame} ${pc2.dim(phrase)}${dots}   `);
+      frameIndex = (frameIndex + 1) % frames.length;
       dotCount++;
       if (dotCount % 12 === 0) {
         this.thinkingIndex++;
@@ -215,29 +189,29 @@ var ProgressReporter = class {
   }
   async reportFile(filename, isLast = false) {
     const icon = getFileIcon(filename);
-    const line = `  ${icon} ${pc3.dim("created")} ${pc3.white(filename)}`;
-    process.stdout.write("  " + icon + " " + pc3.dim("created") + " ");
+    const line = `  ${icon} ${pc2.dim("created")} ${pc2.white(filename)}`;
+    process.stdout.write("  " + icon + " " + pc2.dim("created") + " ");
     for (const char of filename) {
-      process.stdout.write(pc3.white(char));
+      process.stdout.write(pc2.white(char));
       await sleep(8 + Math.random() * 12);
     }
     process.stdout.write("\n");
     this.currentLine = line;
   }
   async reportDirectory(dirname) {
-    process.stdout.write(`  \u{1F4C1} ${pc3.dim("mkdir")}   ${pc3.blue(dirname)}/
+    process.stdout.write(`  \u{1F4C1} ${pc2.dim("mkdir")}   ${pc2.blue(dirname)}/
 `);
     await sleep(30);
   }
   showSuccess(message) {
     process.stdout.write("\x1B[?25h");
     console.log();
-    console.log(pc3.green("\u2713") + " " + message);
+    console.log(pc2.green("\u2713") + " " + message);
   }
   showError(message) {
     process.stdout.write("\x1B[?25h");
     console.log();
-    console.log(pc3.red("\u2717") + " " + message);
+    console.log(pc2.red("\u2717") + " " + message);
   }
 };
 function createProgressReporter() {
@@ -260,18 +234,18 @@ var InstallProgress = class {
   start() {
     process.stdout.write("\x1B[?25l");
     const barWidth = 30;
-    const frames2 = ["\u25D0", "\u25D3", "\u25D1", "\u25D2"];
+    const frames = ["\u25D0", "\u25D3", "\u25D1", "\u25D2"];
     let frameIndex = 0;
     this.interval = setInterval(() => {
-      const frame = pc3.cyan(frames2[frameIndex]);
+      const frame = pc2.cyan(frames[frameIndex]);
       const filled = Math.floor(this.progress / 100 * barWidth);
       const empty = barWidth - filled;
-      const bar = pc3.green("\u2588".repeat(filled)) + pc3.dim("\u2591".repeat(empty));
+      const bar = pc2.green("\u2588".repeat(filled)) + pc2.dim("\u2591".repeat(empty));
       const pkg = this.packages[this.currentPackage % this.packages.length];
       process.stdout.write(
-        `\r${frame} Installing dependencies ${bar} ${pc3.dim(pkg)}   `
+        `\r${frame} Installing dependencies ${bar} ${pc2.dim(pkg)}   `
       );
-      frameIndex = (frameIndex + 1) % frames2.length;
+      frameIndex = (frameIndex + 1) % frames.length;
       if (this.progress < 95) {
         this.progress += Math.random() * 3;
         if (this.progress > (this.currentPackage + 1) * 12) {
@@ -287,7 +261,7 @@ var InstallProgress = class {
     }
     process.stdout.write("\x1B[?25h");
     process.stdout.write("\r\x1B[K");
-    const icon = success ? pc3.green("\u2713") : pc3.red("\u2717");
+    const icon = success ? pc2.green("\u2713") : pc2.red("\u2717");
     const message = success ? "Dependencies installed" : "Failed to install dependencies";
     console.log(`${icon} ${message}`);
   }
@@ -295,12 +269,54 @@ var InstallProgress = class {
 function createInstallProgress() {
   return new InstallProgress();
 }
+var GitProgress = class {
+  interval = null;
+  phases = [
+    "Initializing repository",
+    "Setting up version control",
+    "Creating .git directory",
+    "Configuring git objects",
+    "Preparing initial branch"
+  ];
+  phaseIndex = 0;
+  dotCount = 0;
+  start() {
+    process.stdout.write("\x1B[?25l");
+    const frames = ["\u280B", "\u2819", "\u2839", "\u2838", "\u283C", "\u2834", "\u2826", "\u2827", "\u2807", "\u280F"];
+    let frameIndex = 0;
+    this.interval = setInterval(() => {
+      const frame = pc2.cyan(frames[frameIndex]);
+      const phase = this.phases[this.phaseIndex % this.phases.length];
+      const dots = ".".repeat(this.dotCount % 4);
+      process.stdout.write(`\r${frame} ${pc2.dim(phase)}${dots}   `);
+      frameIndex = (frameIndex + 1) % frames.length;
+      this.dotCount++;
+      if (this.dotCount % 8 === 0) {
+        this.phaseIndex++;
+      }
+    }, 80);
+  }
+  stop(success = true) {
+    if (this.interval) {
+      clearInterval(this.interval);
+      this.interval = null;
+    }
+    process.stdout.write("\x1B[?25h");
+    process.stdout.write("\r\x1B[K");
+    const icon = success ? pc2.green("\u2713") : pc2.red("\u2717");
+    const message = success ? "Git repository initialized" : "Failed to initialize git";
+    console.log(`${icon} ${message}`);
+  }
+};
+function createGitProgress() {
+  return new GitProgress();
+}
 
 // src/generators/package-json.ts
 function generatePackageJson(options) {
   const isSolana = options.provider === "arkworks";
   const dependencies = {
-    "@izi-noir/sdk": "^0.1.4",
+    "@izi-noir/sdk": "^0.1.5",
     "@noir-lang/acvm_js": "1.0.0-beta.13-1d260df.nightly",
     "@noir-lang/noirc_abi": "1.0.0-beta.13-1d260df.nightly",
     "react": "^18.3.1",
@@ -599,9 +615,17 @@ export default defineConfig({
   },
   define: {
     "global": "globalThis",
+    "process.env": {},
   },
   optimizeDeps: {
-    exclude: ["@noir-lang/noir_wasm", "@aztec/bb.js", "@izi-noir/sdk"],
+    exclude: [
+      "@noir-lang/noir_wasm",
+      "@noir-lang/noir_js",
+      "@noir-lang/acvm_js",
+      "@noir-lang/noirc_abi",
+      "@aztec/bb.js",
+      "@izi-noir/sdk",
+    ],
     include: ["buffer", "util"],
   },
   build: {
@@ -636,6 +660,9 @@ function generateIndexHtml(options) {
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>${options.projectName} - ZK Proof Demo</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">
   </head>
   <body>
     <div id="root"></div>
@@ -768,10 +795,17 @@ import { Chain, Network } from '@izi-noir/sdk';` : "";
                 </div>
 
                 <div className="verify-box">
+                  {publicInputs && (
+                    <div className="public-inputs-display">
+                      <span>Public inputs:</span>
+                      <code>{JSON.stringify(publicInputs)}</code>
+                    </div>
+                  )}
                   <button
                     onClick={handleVerify}
                     disabled={!vkAccount || isVerifying}
                     className="btn btn-primary"
+                    style={{ marginTop: publicInputs ? '0.5rem' : 0 }}
                   >
                     {isVerifying ? 'Verifying...' : verified ? 'Verified!' : 'Verify On-Chain'}
                   </button>
@@ -839,6 +873,7 @@ function App() {
   const [proofTime, setProofTime] = useState<number | null>(null);
   const [proofError, setProofError] = useState<string | null>(null);
   const [localVerified, setLocalVerified] = useState<boolean | null>(null);
+  const [publicInputs, setPublicInputs] = useState<string[] | null>(null);
 
   // IziNoir instance
   const [iziInstance, setIziInstance] = useState<IziNoir | null>(null);
@@ -855,6 +890,7 @@ ${solanaState}
       setProof(null);
       setProofTime(null);
       setLocalVerified(null);
+      setPublicInputs(null);
       setNoirCode(null);
     }
   }, [selectedCircuit]);
@@ -927,6 +963,7 @@ ${solanaState}
       const endTime = performance.now();
       setProof(proofBytes);
       setProofTime(Math.round(endTime - startTime));
+      setPublicInputs(publicInputsHex);
     } catch (error) {
       console.error('Proof generation error:', error);
       setProofError((error as Error).message);
@@ -940,7 +977,7 @@ ${solanaHandlers}
     <div className="app">
       <header>
         <h1>${options.projectName}</h1>
-        <p>Zero-Knowledge Proof Demo</p>
+        <p>Built with IZI-NOIR</p>
       </header>
 
       <main>
@@ -1103,29 +1140,65 @@ function capitalizeFirst(str) {
   return str.charAt(0).toUpperCase() + str.slice(1);
 }
 function generateAppCss() {
-  return `* {
+  return `/* ================================
+   CSS Variables - IZI-NOIR Theme
+   ================================ */
+:root {
+  --solana-purple: #9945FF;
+  --solana-green: #14F195;
+  --noir-primary: #050505;
+  --noir-elevated: #0A0A0A;
+  --noir-orange: #FF6B35;
+  --izi-cyan: #00D4FF;
+  --text: #ffffff;
+  --text-muted: #888888;
+  --border: rgba(255, 255, 255, 0.1);
+}
+
+/* ================================
+   Reset & Base Styles
+   ================================ */
+* {
   box-sizing: border-box;
   margin: 0;
   padding: 0;
 }
 
-:root {
-  --purple: #9945FF;
-  --green: #14F195;
-  --bg: #0a0a0a;
-  --bg-elevated: #111111;
-  --border: #222222;
-  --text: #ffffff;
-  --text-muted: #888888;
+html {
+  scroll-behavior: smooth;
 }
 
 body {
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-  background: var(--bg);
+  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+  background-color: var(--noir-primary);
+  /* Noise texture + radial gradients like the main frontend */
+  background-image:
+    url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.015'/%3E%3C/svg%3E"),
+    radial-gradient(
+      ellipse 60% 40% at 50% 30%,
+      rgba(153, 69, 255, 0.06) 0%,
+      transparent 50%
+    ),
+    radial-gradient(
+      ellipse 80% 50% at 50% 110%,
+      rgba(20, 241, 149, 0.04) 0%,
+      transparent 40%
+    );
+  background-attachment: fixed;
   color: var(--text);
   line-height: 1.6;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+::selection {
+  background: rgba(153, 69, 255, 0.3);
+  color: white;
 }
 
+/* ================================
+   Layout
+   ================================ */
 .app {
   min-height: 100vh;
   display: flex;
@@ -1136,11 +1209,14 @@ header {
   padding: 2rem;
   text-align: center;
   border-bottom: 1px solid var(--border);
+  backdrop-filter: blur(8px);
+  background: rgba(0, 0, 0, 0.3);
 }
 
 header h1 {
   font-size: 2rem;
-  background: linear-gradient(90deg, var(--purple), var(--green));
+  font-weight: 700;
+  background: linear-gradient(135deg, var(--solana-purple) 0%, var(--noir-orange) 100%);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
@@ -1159,34 +1235,51 @@ main {
   width: 100%;
 }
 
+/* ================================
+   Section Cards - Glassmorphism
+   ================================ */
 .section {
   margin-bottom: 2rem;
   padding: 1.5rem;
-  background: var(--bg-elevated);
+  background: rgba(0, 0, 0, 0.3);
+  backdrop-filter: blur(8px);
   border: 1px solid var(--border);
-  border-radius: 12px;
+  border-radius: 16px;
+  transition: border-color 0.3s ease, box-shadow 0.3s ease;
+}
+
+.section:hover {
+  border-color: rgba(255, 255, 255, 0.15);
+  box-shadow: 0 0 30px rgba(153, 69, 255, 0.1);
 }
 
 .section h2 {
   font-size: 1.25rem;
+  font-weight: 600;
   margin-bottom: 1rem;
   color: var(--text);
 }
 
+/* ================================
+   Form Controls
+   ================================ */
 .select {
   width: 100%;
-  padding: 0.75rem;
-  background: var(--bg);
+  padding: 0.75rem 1rem;
+  background: rgba(0, 0, 0, 0.4);
   border: 1px solid var(--border);
-  border-radius: 8px;
+  border-radius: 12px;
   color: var(--text);
+  font-family: inherit;
   font-size: 1rem;
   cursor: pointer;
+  transition: border-color 0.3s ease, box-shadow 0.3s ease;
 }
 
 .select:focus {
   outline: none;
-  border-color: var(--purple);
+  border-color: var(--solana-purple);
+  box-shadow: 0 0 20px rgba(153, 69, 255, 0.2);
 }
 
 .inputs-grid {
@@ -1211,71 +1304,93 @@ main {
 
 .input-badge {
   font-size: 0.625rem;
-  padding: 0.125rem 0.375rem;
-  border-radius: 4px;
+  padding: 0.125rem 0.5rem;
+  border-radius: 6px;
   text-transform: uppercase;
   font-weight: 600;
+  letter-spacing: 0.05em;
 }
 
 .input-badge.public {
-  background: var(--green);
-  color: #000;
+  background: rgba(20, 241, 149, 0.2);
+  color: var(--solana-green);
+  border: 1px solid rgba(20, 241, 149, 0.3);
 }
 
 .input-badge.private {
-  background: var(--purple);
-  color: #fff;
+  background: rgba(153, 69, 255, 0.2);
+  color: var(--solana-purple);
+  border: 1px solid rgba(153, 69, 255, 0.3);
 }
 
 .input-group input {
-  padding: 0.75rem;
-  background: var(--bg);
+  padding: 0.75rem 1rem;
+  background: rgba(0, 0, 0, 0.4);
   border: 1px solid var(--border);
-  border-radius: 8px;
+  border-radius: 12px;
   color: var(--text);
+  font-family: 'JetBrains Mono', 'Fira Code', monospace;
   font-size: 1rem;
+  transition: border-color 0.3s ease, box-shadow 0.3s ease;
 }
 
 .input-group input:focus {
   outline: none;
-  border-color: var(--purple);
+  border-color: var(--solana-purple);
+  box-shadow: 0 0 20px rgba(153, 69, 255, 0.2);
 }
 
+/* ================================
+   Buttons - Animated Gradient
+   ================================ */
 .btn {
   padding: 0.75rem 1.5rem;
   font-size: 1rem;
   font-weight: 600;
   border: none;
-  border-radius: 8px;
+  border-radius: 12px;
   cursor: pointer;
-  transition: all 0.2s;
+  transition: all 0.3s ease;
 }
 
 .btn:disabled {
-  opacity: 0.5;
+  opacity: 0.4;
   cursor: not-allowed;
 }
 
 .btn-primary {
-  background: linear-gradient(90deg, var(--purple), var(--green));
+  background: linear-gradient(
+    90deg,
+    var(--solana-purple) 0%,
+    var(--solana-purple) 50%,
+    var(--solana-green) 100%
+  );
+  background-size: 200% 100%;
+  background-position: 0% 0%;
   color: white;
+  box-shadow: 0 0 20px rgba(153, 69, 255, 0.3);
 }
 
 .btn-primary:hover:not(:disabled) {
+  background-position: 100% 0%;
   transform: translateY(-2px);
-  box-shadow: 0 4px 20px rgba(153, 69, 255, 0.3);
+  box-shadow: 0 0 30px rgba(20, 241, 149, 0.3);
 }
 
 .btn-secondary {
-  background: var(--bg);
+  background: rgba(0, 0, 0, 0.4);
   border: 1px solid var(--border);
   color: var(--text);
 }
 
 .btn-secondary:hover:not(:disabled) {
-  border-color: var(--purple);
+  border-color: var(--solana-purple);
+  box-shadow: 0 0 20px rgba(153, 69, 255, 0.15);
 }
 
+/* ================================
+   Results Grid
+   ================================ */
 .results {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
@@ -1283,22 +1398,36 @@ main {
   margin-top: 1rem;
 }
 
+@media (max-width: 640px) {
+  .results {
+    grid-template-columns: 1fr;
+  }
+}
+
 .result-card {
-  padding: 1rem;
-  background: var(--bg);
+  padding: 1.25rem;
+  background: rgba(0, 0, 0, 0.3);
   border: 1px solid var(--border);
-  border-radius: 8px;
+  border-radius: 12px;
   text-align: center;
+  transition: border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
+}
+
+.result-card:hover {
+  border-color: rgba(255, 255, 255, 0.15);
+  transform: translateY(-4px);
+  box-shadow: 0 0 25px rgba(153, 69, 255, 0.15);
 }
 
 .result-value {
-  font-size: 1.25rem;
-  font-weight: 600;
+  font-size: 1.5rem;
+  font-weight: 700;
+  font-family: 'JetBrains Mono', monospace;
   display: block;
 }
 
 .result-value.success {
-  color: var(--green);
+  color: var(--solana-green);
 }
 
 .result-value.error {
@@ -1309,22 +1438,40 @@ main {
   font-size: 0.75rem;
   color: var(--text-muted);
   text-transform: uppercase;
-  margin-top: 0.25rem;
+  letter-spacing: 0.1em;
+  margin-top: 0.5rem;
   display: block;
 }
 
+/* ================================
+   Messages
+   ================================ */
 .error {
-  color: #ff4444;
+  color: #ff6b6b;
   font-size: 0.875rem;
   margin-top: 0.5rem;
+  padding: 0.75rem 1rem;
+  background: rgba(255, 107, 107, 0.1);
+  border: 1px solid rgba(255, 107, 107, 0.2);
+  border-radius: 8px;
+  word-break: break-word;
+  overflow-wrap: break-word;
+  max-width: 100%;
 }
 
 .success {
-  color: var(--green);
+  color: var(--solana-green);
   font-size: 0.875rem;
   margin-top: 0.5rem;
+  padding: 0.75rem 1rem;
+  background: rgba(20, 241, 149, 0.1);
+  border: 1px solid rgba(20, 241, 149, 0.2);
+  border-radius: 8px;
 }
 
+/* ================================
+   Noir Code Details
+   ================================ */
 .noir-details {
   margin-top: 1rem;
 }
@@ -1333,12 +1480,21 @@ main {
   cursor: pointer;
   color: var(--text-muted);
   font-size: 0.875rem;
+  padding: 0.5rem 0;
+  transition: color 0.3s ease;
 }
 
 .noir-details summary:hover {
-  color: var(--text);
+  color: var(--solana-purple);
 }
 
+.noir-details[open] summary {
+  color: var(--solana-purple);
+}
+
+/* ================================
+   Deploy & Verify Section
+   ================================ */
 .deploy-verify-row {
   display: grid;
   grid-template-columns: 1fr 1fr;
@@ -1346,38 +1502,118 @@ main {
   margin-top: 1rem;
 }
 
+@media (max-width: 640px) {
+  .deploy-verify-row {
+    grid-template-columns: 1fr;
+  }
+}
+
 .deploy-box,
 .verify-box {
-  padding: 1rem;
-  background: var(--bg);
+  padding: 1.25rem;
+  background: rgba(0, 0, 0, 0.3);
+  border: 1px solid var(--border);
+  border-radius: 12px;
+  overflow: hidden;
+  word-break: break-word;
+  transition: border-color 0.3s ease, box-shadow 0.3s ease;
+}
+
+.deploy-box:hover,
+.verify-box:hover {
+  border-color: rgba(255, 255, 255, 0.15);
+  box-shadow: 0 0 20px rgba(153, 69, 255, 0.1);
+}
+
+.public-inputs-display {
+  margin-top: 0.75rem;
+  font-size: 0.75rem;
+  color: var(--text-muted);
+}
+
+.public-inputs-display code {
+  display: block;
+  margin-top: 0.5rem;
+  padding: 0.75rem;
+  background: rgba(0, 0, 0, 0.4);
   border: 1px solid var(--border);
   border-radius: 8px;
+  font-family: 'JetBrains Mono', monospace;
+  font-size: 0.7rem;
+  overflow-x: auto;
+  max-width: 100%;
 }
 
+/* ================================
+   Footer
+   ================================ */
 footer {
   padding: 1.5rem;
   text-align: center;
   border-top: 1px solid var(--border);
+  backdrop-filter: blur(8px);
+  background: rgba(0, 0, 0, 0.3);
   color: var(--text-muted);
   font-size: 0.875rem;
 }
 
 footer a {
-  color: var(--purple);
+  color: var(--solana-purple);
   text-decoration: none;
+  transition: color 0.3s ease;
 }
 
 footer a:hover {
-  text-decoration: underline;
+  color: var(--solana-green);
+}
+
+/* ================================
+   Custom Scrollbar
+   ================================ */
+::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+
+::-webkit-scrollbar-track {
+  background: var(--noir-primary);
+}
+
+::-webkit-scrollbar-thumb {
+  background: rgba(255, 255, 255, 0.1);
+  border-radius: 9999px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: rgba(255, 255, 255, 0.2);
+}
+
+/* ================================
+   Accessibility - Reduced Motion
+   ================================ */
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
 }
 `;
 }
 function generateIndexCss() {
-  return `body {
+  return `/* Base styles - fonts are loaded in index.html */
+body {
   margin: 0;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
+
+/* Ensure mono font is applied to code elements */
+code, pre, .mono {
+  font-family: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;
+}
 `;
 }
 function generateViteEnvDts() {
@@ -1535,6 +1771,810 @@ export function EditableCodeBlock({
 `;
 }
 
+// src/generators/claude-skills.ts
+function generateClaudeSkills() {
+  return {
+    ".claude/skills/izi-noir-circuit-patterns/SKILL.md": SKILL_MD,
+    ".claude/skills/izi-noir-circuit-patterns/assets/valid-examples.ts": VALID_EXAMPLES_TS,
+    ".claude/skills/izi-noir-circuit-patterns/assets/operator-mapping.md": OPERATOR_MAPPING_MD
+  };
+}
+var SKILL_MD = `---
+name: izi-noir-circuit-patterns
+description: >
+  Patterns for writing JS/TS code that transpiles to Noir ZK circuits.
+  Trigger: When writing circuit functions, IziNoir API, Solana deployment, Provider/Chain selection, or JS-to-Noir transformations.
+license: MIT
+metadata:
+  author: izi-noir
+  version: "2.0"
+  scope: [sdk, frontend, solana-contracts]
+  auto_invoke:
+    - "circuit function"
+    - "createProof"
+    - "IziNoir"
+    - "assert statement"
+    - "JS to Noir"
+    - "zero knowledge"
+    - "Solana proof"
+    - "Chain.Solana"
+    - "Provider.Arkworks"
+allowed-tools: Read, Glob, Grep
+---
+
+# IZI-NOIR Circuit Patterns
+
+Patterns for writing JavaScript/TypeScript code that the SDK can parse and transpile 1:1 to Noir ZK circuits, with Solana on-chain verification support.
+
+## When to Use
+
+- Writing circuit functions for \`createProof()\`
+- Using the IziNoir class API (init, compile, prove, deploy, verifyOnChain)
+- Deploying proofs to Solana
+- Choosing between providers (Arkworks, Barretenberg)
+- Debugging parsing or Noir generation errors
+- Understanding JS \u2192 Noir type mapping
+
+## Architecture Overview
+
+\`\`\`
+JS Function \u2192 AcornParser \u2192 NoirGenerator \u2192 Noir WASM \u2192 ArkworksWasm \u2192 Solana
+\`\`\`
+
+**Pipeline layers:**
+1. **Domain Layer** - Core types: Circuit, Proof, VerifyingKey, Provider, Chain, Network
+2. **Application Layer** - Services: NoirGenerator, createProof orchestration
+3. **Infrastructure Layer** - Parsers (Acorn), Compilers (Noir WASM), Provers (Arkworks/BB)
+
+## IziNoir Class API
+
+### Initialization
+
+\`\`\`typescript
+import { IziNoir, Provider, Chain, Network } from '@izi-noir/sdk';
+
+// Basic initialization (development)
+const izi = await IziNoir.init({
+  provider: Provider.Arkworks,
+});
+
+// With Solana chain targeting
+const izi = await IziNoir.init({
+  provider: Provider.Arkworks,
+  chain: Chain.Solana,
+  network: Network.Devnet,
+});
+\`\`\`
+
+### Providers
+
+| Provider | Use Case | Proof Size | Notes |
+|----------|----------|------------|-------|
+| \`Provider.Arkworks\` | **Solana production** | 256 bytes | Groth16, native syscalls |
+| \`Provider.Barretenberg\` | Development/testing | ~2KB | UltraPlonk, faster setup |
+
+**Rule:** Always use \`Provider.Arkworks\` for Solana on-chain verification.
+
+### Chain and Network
+
+\`\`\`typescript
+// Chain enum
+Chain.Solana     // Format proofs for Solana verification
+Chain.EVM        // Format proofs for EVM verification (future)
+
+// Network enum
+Network.Devnet   // Solana devnet
+Network.Mainnet  // Solana mainnet
+Network.Localnet // Local validator
+\`\`\`
+
+### Creating Proofs
+
+\`\`\`typescript
+// Define circuit function
+const balanceProof = (
+  [threshold]: [number],    // public inputs
+  [balance]: [number]       // private inputs
+) => {
+  assert(balance >= threshold);
+};
+
+// Generate proof
+const result = await izi.createProof(
+  balanceProof,
+  [100],      // public: threshold
+  [1500]      // private: actual balance
+);
+
+console.log(result.verified);  // true
+console.log(result.proof);     // Uint8Array (256 bytes for Arkworks)
+\`\`\`
+
+### Solana Deployment
+
+\`\`\`typescript
+// Deploy verifying key to Solana
+const deployment = await izi.deploy(balanceProof, {
+  payer: wallet,
+  network: Network.Devnet,
+});
+
+console.log(deployment.vkAccount);  // PublicKey of VK account
+console.log(deployment.programId);  // Verifier program ID
+
+// Verify proof on-chain
+const txSignature = await izi.verifyOnChain(result.proof, {
+  vkAccount: deployment.vkAccount,
+  payer: wallet,
+});
+\`\`\`
+
+### SolanaProofData Structure
+
+When \`chain: Chain.Solana\`, proof data is formatted as:
+
+\`\`\`typescript
+interface SolanaProofData {
+  verifyingKey: {
+    nr_pubinputs: number;
+    vk_alpha_g1: number[];    // 64 bytes
+    vk_beta_g2: number[];     // 128 bytes
+    vk_gamma_g2: number[];    // 128 bytes
+    vk_delta_g2: number[];    // 128 bytes
+    vk_ic: number[][];        // (nr_pubinputs + 1) \xD7 64 bytes
+  };
+  proof: {
+    ar: number[];             // 64 bytes - A point (G1)
+    bs: number[];             // 128 bytes - B point (G2)
+    krs: number[];            // 64 bytes - C point (G1)
+  };
+  publicInputs: number[][];   // Each input as 32-byte array
+}
+\`\`\`
+
+## Critical Patterns
+
+### 1. Function Signature (REQUIRED)
+
+\`\`\`typescript
+// MUST use array destructuring for both parameters
+([publicInputs], [privateInputs]) => {
+  // body with assert statements
+}
+
+// Example with multiple inputs
+([expected, threshold], [secret, salt]) => {
+  assert(secret * secret == expected);
+  assert(secret > threshold);
+}
+\`\`\`
+
+- First array: **public inputs** (marked \`pub\` in Noir)
+- Second array: **private inputs** (witness values)
+- Arrow function or function expression
+- Body: block statement \`{ }\` or single expression
+
+### 2. Mutability Convention
+
+\`\`\`typescript
+// Immutable (default)
+let x = a + b;           // \u2192 let x: Field = a + b;
+
+// Mutable (use mut_ prefix)
+let mut_sum = 0;         // \u2192 let mut sum: Field = 0;
+mut_sum = mut_sum + 1;   // \u2192 sum = sum + 1;
+\`\`\`
+
+**Rule:** Prefix variable name with \`mut_\` for mutable variables. The prefix is stripped in generated Noir.
+
+### 3. Operators
+
+| JavaScript | Noir | Notes |
+|------------|------|-------|
+| \`==\` / \`===\` | \`==\` | Both map to equality |
+| \`!=\` / \`!==\` | \`!=\` | Both map to inequality |
+| \`+\` | \`+\` | Addition |
+| \`-\` | \`-\` | Subtraction |
+| \`*\` | \`*\` | Multiplication |
+| \`/\` | \`/\` | Division |
+| \`%\` | \`%\` | Modulo |
+| \`<\` | \`<\` | Less than |
+| \`>\` | \`>\` | Greater than |
+| \`<=\` | \`<=\` | Less than or equal |
+| \`>=\` | \`>=\` | Greater than or equal |
+| \`&&\` | \`&\` | **Converted to bitwise AND** |
+| \`\\|\\|\` | \`\\|\` | **Converted to bitwise OR** |
+| \`!\` | \`!\` | Logical NOT |
+| \`-x\` | \`-x\` | Negation |
+
+**Warning:** \`&&\` and \`||\` are converted to bitwise operators in Noir!
+
+### 4. Statements
+
+#### Assert
+\`\`\`typescript
+assert(condition);              // Basic assertion
+assert(condition, "message");   // With error message
+\`\`\`
+
+#### Variable Declaration
+\`\`\`typescript
+let x = a + b;           // Immutable
+let mut_counter = 0;     // Mutable (mut_ prefix)
+const y = 10;            // Immutable (const supported)
+\`\`\`
+
+#### Assignment (mutable only)
+\`\`\`typescript
+mut_x = mut_x + 1;       // Only valid for mut_ variables
+\`\`\`
+
+#### If/Else
+\`\`\`typescript
+if (condition) {
+  // consequent
+} else {
+  // alternate
+}
+\`\`\`
+
+#### For Loop
+\`\`\`typescript
+// Exclusive range (i < end)
+for (let i = 0; i < 10; i++) { }
+// \u2192 for i in 0..10 { }
+
+// Inclusive range (i <= end)
+for (let i = 1; i <= 5; i++) { }
+// \u2192 for i in 1..=5 { }
+
+// Variable bounds
+for (let i = start; i < end; i++) { }
+// \u2192 for i in start..end { }
+\`\`\`
+
+**Loop constraints:**
+- Init: \`let i = start\`
+- Test: \`i < end\` or \`i <= end\`
+- Update: \`i++\`, \`++i\`, or \`i = i + 1\`
+
+### 5. Expressions
+
+#### Literals
+\`\`\`typescript
+5                  // number \u2192 Field
+100n               // bigint \u2192 Field
+"string"           // string literal
+0x1234             // hex value
+true / false       // boolean \u2192 bool
+\`\`\`
+
+#### Arrays
+\`\`\`typescript
+let arr = [a, b, c];      // \u2192 [Field; 3]
+arr[0]                    // static index
+arr[i]                    // dynamic index
+arr.length                // \u2192 arr.len()
+\`\`\`
+
+#### Ternary (conditional)
+\`\`\`typescript
+let result = cond ? a : b;
+// \u2192 let result: Field = if cond { a } else { b };
+\`\`\`
+
+#### Method Calls
+\`\`\`typescript
+arr.len()                 // Array length
+\`\`\`
+
+### 6. Type Mapping
+
+| JavaScript | Noir Type | Notes |
+|------------|-----------|-------|
+| \`number\` | \`Field\` | Default for all numerics |
+| \`bigint\` | \`Field\` | Converted to string |
+| \`boolean\` | \`bool\` | Only \`true\`/\`false\` literals |
+| \`[a,b,c]\` | \`[Field; 3]\` | Fixed-size array |
+
+**Default type:** Everything is \`Field\` unless explicitly boolean.
+
+## NOT Supported
+
+These JavaScript features **cannot** be parsed:
+
+- Object literals \`{ key: value }\`
+- Destructuring (except function parameters)
+- Spread operator \`...\`
+- Rest parameters \`...args\`
+- Template literals \`\\\`\${x}\\\`\`
+- Async/await
+- While/do-while loops
+- Switch statements
+- Function declarations inside circuit
+- Closures over external variables
+- Class methods
+- Regular expressions
+- Try/catch
+- Break/continue
+- Return statements
+- Computed property assignment \`arr[i] = x\`
+
+## Code Examples
+
+See [assets/valid-examples.ts](assets/valid-examples.ts) for complete working examples.
+
+## CLI: create-izi-noir
+
+Scaffold new projects quickly:
+
+\`\`\`bash
+# Interactive mode
+npx create-izi-noir
+
+# Quick setup
+npx create-izi-noir my-project --yes
+
+# With specific template
+npx create-izi-noir my-project --template balance-proof
+
+# With specific provider
+npx create-izi-noir my-project --provider arkworks
+\`\`\`
+
+**Templates:**
+- \`default\` - Balance proof + age verification circuits
+- \`minimal\` - Blank canvas with empty circuit
+- \`balance-proof\` - Just balance proof circuit
+
+**Options:**
+- \`-t, --template <template>\` - Template to use
+- \`-p, --provider <provider>\` - Proving provider (arkworks/barretenberg)
+- \`-y, --yes\` - Skip prompts
+- \`--skip-install\` - Skip npm install
+- \`--skip-git\` - Skip git init
+
+## Frontend Integration (Vite)
+
+\`\`\`typescript
+// vite.config.ts
+export default defineConfig({
+  optimizeDeps: {
+    exclude: ['@noir-lang/noirc_abi', '@noir-lang/acvm_js'],
+  },
+});
+
+// main.ts - Initialize WASM before use
+import initNoirC from '@noir-lang/noirc_abi';
+import initACVM from '@noir-lang/acvm_js';
+import acvm from '@noir-lang/acvm_js/web/acvm_js_bg.wasm?url';
+import noirc from '@noir-lang/noirc_abi/web/noirc_abi_wasm_bg.wasm?url';
+import { markWasmInitialized, IziNoir, Provider } from '@izi-noir/sdk';
+
+await Promise.all([initACVM(fetch(acvm)), initNoirC(fetch(noirc))]);
+markWasmInitialized();
+
+// Now IziNoir is ready
+const izi = await IziNoir.init({ provider: Provider.Arkworks });
+\`\`\`
+
+## Resources
+
+- [Operator Mapping Table](assets/operator-mapping.md)
+- Parser: \`packages/sdk/src/infra/parser/AcornParser.ts\`
+- Generator: \`packages/sdk/src/application/services/NoirGenerator.ts\`
+- IziNoir Class: \`packages/sdk/src/IziNoir.ts\`
+`;
+var VALID_EXAMPLES_TS = `/**
+ * Valid JS/TS Circuit Patterns for IZI-NOIR
+ *
+ * Each example shows the JS input and the generated Noir output.
+ * All examples are valid and can be used with createProof().
+ */
+
+// Declare assert for TypeScript (SDK parses it, not executed)
+declare function assert(condition: boolean, message?: string): void;
+
+// =============================================================================
+// Example 1: Basic Assertion (simplest circuit)
+// =============================================================================
+/**
+ * JS Input:
+ */
+export const basicAssertion = ([expected]: number[], [secret]: number[]) => {
+  assert(secret * secret == expected);
+};
+/**
+ * Generated Noir:
+ * \`\`\`noir
+ * fn main(secret: Field, expected: pub Field) {
+ *     assert(secret * secret == expected);
+ * }
+ * \`\`\`
+ */
+
+// =============================================================================
+// Example 2: Multiple Inputs with Arithmetic
+// =============================================================================
+/**
+ * JS Input:
+ */
+export const multipleInputs = (
+  [sum, product]: number[],
+  [a, b]: number[]
+) => {
+  assert(a + b == sum);
+  assert(a * b == product);
+};
+/**
+ * Generated Noir:
+ * \`\`\`noir
+ * fn main(a: Field, b: Field, sum: pub Field, product: pub Field) {
+ *     assert(a + b == sum);
+ *     assert(a * b == product);
+ * }
+ * \`\`\`
+ */
+
+// =============================================================================
+// Example 3: Variables and Mutability
+// =============================================================================
+/**
+ * JS Input:
+ */
+export const variablesAndMutability = (
+  [expected]: number[],
+  [a, b]: number[]
+) => {
+  // Immutable variable
+  let sum = a + b;
+
+  // Mutable variable (mut_ prefix)
+  let mut_result = 0;
+  mut_result = sum * 2;
+
+  assert(mut_result == expected);
+};
+/**
+ * Generated Noir:
+ * \`\`\`noir
+ * fn main(a: Field, b: Field, expected: pub Field) {
+ *     let sum: Field = a + b;
+ *     let mut result: Field = 0;
+ *     result = sum * 2;
+ *     assert(result == expected);
+ * }
+ * \`\`\`
+ */
+
+// =============================================================================
+// Example 4: Conditional Logic (if/else)
+// =============================================================================
+/**
+ * JS Input:
+ */
+export const conditionalLogic = (
+  [threshold]: number[],
+  [value]: number[]
+) => {
+  let mut_result = 0;
+
+  if (value > threshold) {
+    mut_result = 1;
+  } else {
+    mut_result = 0;
+  }
+
+  assert(mut_result == 1);
+};
+/**
+ * Generated Noir:
+ * \`\`\`noir
+ * fn main(value: Field, threshold: pub Field) {
+ *     let mut result: Field = 0;
+ *     if value > threshold {
+ *         result = 1;
+ *     } else {
+ *         result = 0;
+ *     }
+ *     assert(result == 1);
+ * }
+ * \`\`\`
+ */
+
+// =============================================================================
+// Example 5: Ternary Expression
+// =============================================================================
+/**
+ * JS Input:
+ */
+export const ternaryExpression = (
+  [threshold]: number[],
+  [value]: number[]
+) => {
+  // Ternary converts to Noir if-expression
+  let result = value > threshold ? 1 : 0;
+  assert(result == 1);
+};
+/**
+ * Generated Noir:
+ * \`\`\`noir
+ * fn main(value: Field, threshold: pub Field) {
+ *     let result: Field = if value > threshold { 1 } else { 0 };
+ *     assert(result == 1);
+ * }
+ * \`\`\`
+ */
+
+// =============================================================================
+// Example 6: For Loop with Array
+// =============================================================================
+/**
+ * JS Input:
+ */
+export const forLoopWithArray = (
+  [expected]: number[],
+  [a, b, c, d]: number[]
+) => {
+  let arr = [a, b, c, d];
+  let mut_sum = 0;
+
+  // Exclusive range: i < 4 \u2192 for i in 0..4
+  for (let i = 0; i < 4; i++) {
+    mut_sum = mut_sum + arr[i];
+  }
+
+  assert(mut_sum == expected);
+};
+/**
+ * Generated Noir:
+ * \`\`\`noir
+ * fn main(a: Field, b: Field, c: Field, d: Field, expected: pub Field) {
+ *     let arr: [Field; 4] = [a, b, c, d];
+ *     let mut sum: Field = 0;
+ *     for i in 0..4 {
+ *         sum = sum + arr[i];
+ *     }
+ *     assert(sum == expected);
+ * }
+ * \`\`\`
+ */
+
+// =============================================================================
+// Example 7: Inclusive Range Loop
+// =============================================================================
+/**
+ * JS Input:
+ */
+export const inclusiveRangeLoop = ([expected]: number[], [n]: number[]) => {
+  let mut_sum = 0;
+
+  // Inclusive range: i <= n \u2192 for i in 1..=n
+  for (let i = 1; i <= n; i++) {
+    mut_sum = mut_sum + i;
+  }
+
+  assert(mut_sum == expected);
+};
+/**
+ * Generated Noir:
+ * \`\`\`noir
+ * fn main(n: Field, expected: pub Field) {
+ *     let mut sum: Field = 0;
+ *     for i in 1..=n {
+ *         sum = sum + i;
+ *     }
+ *     assert(sum == expected);
+ * }
+ * \`\`\`
+ */
+
+// =============================================================================
+// Example 8: Nested Control Flow
+// =============================================================================
+/**
+ * JS Input:
+ */
+export const nestedControlFlow = ([max]: number[], []: number[]) => {
+  let mut_evenSum = 0;
+
+  for (let i = 1; i <= max; i++) {
+    // Nested if inside loop
+    if (i % 2 == 0) {
+      mut_evenSum = mut_evenSum + i;
+    }
+  }
+
+  assert(mut_evenSum > 0);
+};
+/**
+ * Generated Noir:
+ * \`\`\`noir
+ * fn main(max: pub Field) {
+ *     let mut evenSum: Field = 0;
+ *     for i in 1..=max {
+ *         if i % 2 == 0 {
+ *             evenSum = evenSum + i;
+ *         }
+ *     }
+ *     assert(evenSum > 0);
+ * }
+ * \`\`\`
+ */
+
+// =============================================================================
+// Example 9: Comparison Operators
+// =============================================================================
+/**
+ * JS Input:
+ */
+export const comparisonOperators = (
+  [min, max]: number[],
+  [value]: number[]
+) => {
+  // All comparison operators
+  assert(value >= min);
+  assert(value <= max);
+  assert(value != 0);
+
+  // Combined with arithmetic
+  let doubled = value * 2;
+  assert(doubled < max * 2);
+};
+/**
+ * Generated Noir:
+ * \`\`\`noir
+ * fn main(value: Field, min: pub Field, max: pub Field) {
+ *     assert(value >= min);
+ *     assert(value <= max);
+ *     assert(value != 0);
+ *     let doubled: Field = value * 2;
+ *     assert(doubled < max * 2);
+ * }
+ * \`\`\`
+ */
+
+// =============================================================================
+// Example 10: Array Length Access
+// =============================================================================
+/**
+ * JS Input:
+ */
+export const arrayLengthAccess = (
+  [expectedLen]: number[],
+  [a, b, c]: number[]
+) => {
+  let arr = [a, b, c];
+
+  // .length converts to .len() in Noir
+  assert(arr.length == expectedLen);
+};
+/**
+ * Generated Noir:
+ * \`\`\`noir
+ * fn main(a: Field, b: Field, c: Field, expectedLen: pub Field) {
+ *     let arr: [Field; 3] = [a, b, c];
+ *     assert(arr.len() == expectedLen);
+ * }
+ * \`\`\`
+ */
+`;
+var OPERATOR_MAPPING_MD = `# JavaScript to Noir Mapping Reference
+
+Complete mapping of JavaScript constructs to their Noir equivalents.
+
+## Binary Operators
+
+| JavaScript | Noir | Category | Example |
+|------------|------|----------|---------|
+| \`==\` | \`==\` | Equality | \`a == b\` \u2192 \`a == b\` |
+| \`===\` | \`==\` | Strict equality | \`a === b\` \u2192 \`a == b\` |
+| \`!=\` | \`!=\` | Inequality | \`a != b\` \u2192 \`a != b\` |
+| \`!==\` | \`!=\` | Strict inequality | \`a !== b\` \u2192 \`a != b\` |
+| \`+\` | \`+\` | Addition | \`a + b\` \u2192 \`a + b\` |
+| \`-\` | \`-\` | Subtraction | \`a - b\` \u2192 \`a - b\` |
+| \`*\` | \`*\` | Multiplication | \`a * b\` \u2192 \`a * b\` |
+| \`/\` | \`/\` | Division | \`a / b\` \u2192 \`a / b\` |
+| \`%\` | \`%\` | Modulo | \`a % b\` \u2192 \`a % b\` |
+| \`<\` | \`<\` | Less than | \`a < b\` \u2192 \`a < b\` |
+| \`>\` | \`>\` | Greater than | \`a > b\` \u2192 \`a > b\` |
+| \`<=\` | \`<=\` | Less or equal | \`a <= b\` \u2192 \`a <= b\` |
+| \`>=\` | \`>=\` | Greater or equal | \`a >= b\` \u2192 \`a >= b\` |
+| \`&&\` | \`&\` | Logical AND | \`a && b\` \u2192 \`a & b\` |
+| \`\\|\\|\` | \`\\|\` | Logical OR | \`a \\|\\| b\` \u2192 \`a \\| b\` |
+
+> **Warning:** Logical operators \`&&\` and \`||\` are converted to bitwise operators \`&\` and \`|\` in Noir.
+
+## Unary Operators
+
+| JavaScript | Noir | Category | Example |
+|------------|------|----------|---------|
+| \`!\` | \`!\` | Logical NOT | \`!a\` \u2192 \`!a\` |
+| \`-\` (prefix) | \`-\` | Negation | \`-a\` \u2192 \`-a\` |
+
+## Type Mapping
+
+| JavaScript Type | Noir Type | Notes |
+|-----------------|-----------|-------|
+| \`number\` | \`Field\` | Default numeric type |
+| \`bigint\` | \`Field\` | Converted to string |
+| \`boolean\` | \`bool\` | Only \`true\`/\`false\` literals |
+| \`string\` | String literal | Quoted in Noir |
+| \`number[]\` | \`[Field; N]\` | Fixed-size array |
+
+## Statement Mapping
+
+| JavaScript | Noir | Notes |
+|------------|------|-------|
+| \`assert(cond)\` | \`assert(cond)\` | Direct mapping |
+| \`assert(cond, "msg")\` | \`assert(cond, "msg")\` | With message |
+| \`let x = expr\` | \`let x: Type = expr\` | Immutable |
+| \`let mut_x = expr\` | \`let mut x: Type = expr\` | Mutable (prefix stripped) |
+| \`const x = expr\` | \`let x: Type = expr\` | Treated as let |
+| \`mut_x = expr\` | \`x = expr\` | Assignment (mutable only) |
+| \`if (c) { } else { }\` | \`if c { } else { }\` | No parens in Noir |
+| \`for (let i=s; i<e; i++)\` | \`for i in s..e { }\` | Exclusive range |
+| \`for (let i=s; i<=e; i++)\` | \`for i in s..=e { }\` | Inclusive range |
+
+## Expression Mapping
+
+| JavaScript | Noir | Notes |
+|------------|------|-------|
+| \`x\` | \`x\` | Identifier |
+| \`5\` | \`5\` | Number literal |
+| \`100n\` | \`100\` | BigInt to Field |
+| \`"str"\` | \`"str"\` | String literal |
+| \`0x1234\` | \`0x1234\` | Hex preserved |
+| \`true\` / \`false\` | \`true\` / \`false\` | Boolean |
+| \`[a, b, c]\` | \`[a, b, c]\` | Array literal |
+| \`arr[i]\` | \`arr[i]\` | Index access |
+| \`arr.length\` | \`arr.len()\` | Length method |
+| \`c ? a : b\` | \`if c { a } else { b }\` | Ternary \u2192 if expr |
+| \`a + b * c\` | \`a + b * c\` | Precedence preserved |
+
+## Function Parameter Mapping
+
+\`\`\`typescript
+// JavaScript
+([pub1, pub2], [priv1, priv2]) => { ... }
+
+// Noir (private params first, then public with 'pub')
+fn main(priv1: Field, priv2: Field, pub1: pub Field, pub2: pub Field) { ... }
+\`\`\`
+
+## Variable Naming Convention
+
+| JavaScript | Noir | Rule |
+|------------|------|------|
+| \`x\` | \`x\` | Regular immutable |
+| \`mut_x\` | \`mut x\` | Mutable (prefix stripped) |
+| \`mut_counter\` | \`mut counter\` | Mutable (prefix stripped) |
+
+## For Loop Patterns
+
+| JavaScript | Noir | Range Type |
+|------------|------|------------|
+| \`for (let i = 0; i < 10; i++)\` | \`for i in 0..10\` | Exclusive |
+| \`for (let i = 1; i <= 5; i++)\` | \`for i in 1..=5\` | Inclusive |
+| \`for (let i = start; i < end; i++)\` | \`for i in start..end\` | Variable bounds |
+| \`for (let i = 0; i < n; i = i + 1)\` | \`for i in 0..n\` | Alternative update |
+
+## Unsupported Operators
+
+| JavaScript | Status | Alternative |
+|------------|--------|-------------|
+| \`**\` (exponent) | Not supported | Use multiplication loop |
+| \`<<\` (left shift) | Not supported | N/A |
+| \`>>\` (right shift) | Not supported | N/A |
+| \`>>>\` (unsigned shift) | Not supported | N/A |
+| \`&\` (bitwise AND) | Use \`&&\` | Converted to \`&\` |
+| \`\\|\` (bitwise OR) | Use \`\\|\\|\` | Converted to \`\\|\` |
+| \`^\` (XOR) | Not supported | N/A |
+| \`~\` (NOT) | Not supported | N/A |
+| \`in\` | Not supported | N/A |
+| \`instanceof\` | Not supported | N/A |
+`;
+
 // src/commands/init.ts
 async function initCommand(projectName, options) {
   let projectOptions;
@@ -1544,7 +2584,8 @@ async function initCommand(projectName, options) {
       template: options.template,
       provider: options.provider,
       skipInstall: options.skipInstall,
-      skipGit: options.skipGit
+      skipGit: options.skipGit,
+      aiTool: "none"
     };
   } else {
     projectOptions = await promptProjectOptions({
@@ -1556,14 +2597,14 @@ async function initCommand(projectName, options) {
     });
   }
   if (!projectOptions) {
-    console.log(pc4.yellow("\nOperation cancelled."));
+    console.log(pc3.yellow("\nOperation cancelled."));
     process.exit(0);
   }
   const projectDir = path2.resolve(process.cwd(), projectOptions.projectName);
   if (await directoryExists(projectDir)) {
     if (!await isDirectoryEmpty(projectDir)) {
       console.log(
-        pc4.red(`
+        pc3.red(`
 Error: Directory "${projectOptions.projectName}" already exists and is not empty.`)
       );
       process.exit(1);
@@ -1575,23 +2616,23 @@ Error: Directory "${projectOptions.projectName}" already exists and is not empty
     await progress.startThinking();
     await new Promise((r) => setTimeout(r, 800));
     progress.stopThinking();
-    console.log(pc4.bold("\n  Scaffolding your ZK project...\n"));
+    console.log(pc3.bold("\n  Scaffolding your ZK project...\n"));
     await createProjectStructure(projectDir, projectOptions, progress);
     progress.showSuccess("Project structure created");
   } catch (error) {
     progress.showError("Failed to create project structure");
-    console.error(pc4.red("\n"), error);
+    console.error(pc3.red("\n"), error);
     process.exit(1);
   }
   if (!projectOptions.skipGit) {
-    const gitSpinner = createSpinner("Initializing git repository...");
-    gitSpinner.start();
+    const gitProgress = createGitProgress();
+    gitProgress.start();
     try {
       execSync("git init", { cwd: projectDir, stdio: "ignore" });
-      gitSpinner.stop(true);
+      gitProgress.stop(true);
     } catch {
-      gitSpinner.stop(false);
-      console.log(pc4.yellow("  Warning: Failed to initialize git repository"));
+      gitProgress.stop(false);
+      console.log(pc3.yellow("  Warning: Failed to initialize git repository"));
     }
   }
   if (!projectOptions.skipInstall) {
@@ -1602,7 +2643,7 @@ Error: Directory "${projectOptions.projectName}" already exists and is not empty
       installProgress.stop(true);
     } catch {
       installProgress.stop(false);
-      console.log(pc4.yellow('  Run "npm install" manually.'));
+      console.log(pc3.yellow('  Run "npm install" manually.'));
     }
   }
   printSuccessMessage(projectOptions);
@@ -1648,34 +2689,47 @@ async function createProjectStructure(projectDir, options, progress) {
   }
   files.push(["circuits/index.ts", generateCircuitsIndex(options.template)]);
   files.push(["circuits/types.d.ts", generateCircuitTypes()]);
+  const hasSkills = options.aiTool === "claude";
   for (let i = 0; i < files.length; i++) {
     const [relativePath, content] = files[i];
     await writeFile(path2.join(projectDir, relativePath), content);
-    await progress.reportFile(relativePath, i === files.length - 1);
+    await progress.reportFile(relativePath, !hasSkills && i === files.length - 1);
+  }
+  if (hasSkills) {
+    const skillFiles = generateClaudeSkills();
+    const skillEntries = Object.entries(skillFiles);
+    for (let i = 0; i < skillEntries.length; i++) {
+      const [relativePath, content] = skillEntries[i];
+      await writeFile(path2.join(projectDir, relativePath), content);
+      await progress.reportFile(relativePath, i === skillEntries.length - 1);
+    }
   }
 }
 function printSuccessMessage(options) {
   console.log();
-  console.log(pc4.green("\u2713") + " Project created successfully!");
+  console.log(pc3.green("\u2713") + " Project created successfully!");
+  if (options.aiTool === "claude") {
+    console.log(pc3.green("\u2713") + " Claude Code skill installed " + pc3.dim("(.claude/skills/izi-noir-circuit-patterns)"));
+  }
   console.log();
   console.log("Next steps:");
   console.log();
-  console.log(pc4.cyan(`  cd ${options.projectName}`));
+  console.log(pc3.cyan(`  cd ${options.projectName}`));
   if (options.skipInstall) {
-    console.log(pc4.cyan("  npm install"));
+    console.log(pc3.cyan("  npm install"));
   }
-  console.log(pc4.cyan("  npm run dev"));
+  console.log(pc3.cyan("  npm run dev"));
   console.log();
-  console.log("Then open " + pc4.blue("http://localhost:5173") + " in your browser.");
+  console.log("Then open " + pc3.blue("http://localhost:5173") + " in your browser.");
   console.log();
   console.log("To add circuits:");
   console.log();
-  console.log(pc4.dim("  1. Create a new circuit in circuits/*.ts"));
-  console.log(pc4.dim("  2. Export it from circuits/index.ts"));
-  console.log(pc4.dim("  3. Add it to CIRCUITS array in src/App.tsx"));
+  console.log(pc3.dim("  1. Create a new circuit in circuits/*.ts"));
+  console.log(pc3.dim("  2. Export it from circuits/index.ts"));
+  console.log(pc3.dim("  3. Add it to CIRCUITS array in src/App.tsx"));
   console.log();
   console.log(
-    pc4.dim("Learn more: ") + pc4.blue("https://github.com/izi-noir/izi-noir")
+    pc3.dim("Learn more: ") + pc3.blue("https://github.com/izi-noir/izi-noir")
   );
   console.log();
 }