qualia-framework 5.9.1 → 6.2.7

package/skills/qualia-vibe/scripts/tokens.mjs

@@ -0,0 +1,342 @@
+#!/usr/bin/env node
+/**
+ * tokens.mjs — read/write design tokens for /qualia-vibe.
+ *
+ * Commands:
+ *   tokens.mjs sync --design .planning/DESIGN.md [--write]
+ *     Diffs CSS vars + Tailwind tokens in code against DESIGN.md.
+ *     Reports drift; with --write, patches DESIGN.md to match code.
+ *
+ *   tokens.mjs propose-variants --product .planning/PRODUCT.md --design .planning/DESIGN.md --count 3
+ *     Generates N variant direction briefs from PRODUCT.md context.
+ *     This script only formats the prompt scaffold; the LLM does the
+ *     actual creative work and writes the final brief.
+ *
+ * Exit codes:
+ *   0  success (drift report or variants emitted)
+ *   1  drift found AND --write not set (informational, not a hard fail)
+ *   2  invocation error (missing files, bad flags)
+ */
+
+import { readFileSync, writeFileSync, existsSync, readdirSync, statSync } from "node:fs";
+import { join, basename, extname } from "node:path";
+import { argv, exit, cwd } from "node:process";
+
+function flag(name, fallback) {
+  const i = argv.indexOf(name);
+  if (i < 0) return fallback;
+  const next = argv[i + 1];
+  if (!next || next.startsWith("--")) return true;
+  return next;
+}
+function hasFlag(name) {
+  return argv.includes(name);
+}
+
+const CMD = argv[2];
+
+if (!CMD || CMD === "--help" || CMD === "-h") {
+  console.log(`tokens.mjs — design-token utility for /qualia-vibe
+
+Usage:
+  tokens.mjs sync --design <path> [--write]
+  tokens.mjs propose-variants --product <path> --design <path> --count <N>
+
+See skills/qualia-vibe/SKILL.md.
+`);
+  exit(0);
+}
+
+// ─── CSS var extraction ───────────────────────────────────────────────
+
+const CSS_ROOT_RE = /:root\s*\{([\s\S]*?)\}/g;
+const CSS_VAR_RE = /--([a-z][a-z0-9-]*)\s*:\s*([^;]+);/gi;
+
+function extractCssVarsFromFile(path) {
+  let content;
+  try { content = readFileSync(path, "utf8"); } catch { return []; }
+  const vars = [];
+  let m;
+  CSS_ROOT_RE.lastIndex = 0;
+  while ((m = CSS_ROOT_RE.exec(content)) !== null) {
+    const block = m[1];
+    let v;
+    CSS_VAR_RE.lastIndex = 0;
+    while ((v = CSS_VAR_RE.exec(block)) !== null) {
+      vars.push({ name: v[1], value: v[2].trim(), source: path });
+    }
+  }
+  return vars;
+}
+
+function findStyleFiles() {
+  const candidates = [
+    "app/globals.css", "app/global.css",
+    "src/app/globals.css", "src/app/global.css",
+    "src/styles/globals.css", "src/styles/global.css",
+    "styles/globals.css", "styles/global.css",
+  ];
+  return candidates.filter((p) => existsSync(p));
+}
+
+function findTailwindConfig() {
+  for (const name of ["tailwind.config.ts", "tailwind.config.js", "tailwind.config.mjs", "tailwind.config.cjs"]) {
+    if (existsSync(name)) return name;
+  }
+  return null;
+}
+
+function extractTailwindTokens(configPath) {
+  // Cheap parse: grep for color/font/spacing entries inside theme.extend.
+  // Not a real JS parser — but it catches the common cases without sandbox risk.
+  if (!configPath) return { colors: [], fonts: [], spacing: [] };
+  let content;
+  try { content = readFileSync(configPath, "utf8"); } catch { return { colors: [], fonts: [], spacing: [] }; }
+  const out = { colors: [], fonts: [], spacing: [] };
+  // Match: brand: '#abcdef' or brand: "oklch(...)"
+  const colorRe = /([a-zA-Z][\w-]*)\s*:\s*['"`]((?:#[0-9a-fA-F]{3,8}|oklch\([^)]+\)|hsl\([^)]+\)|rgb\([^)]+\))[^'"`]*)['"`]/g;
+  let m;
+  while ((m = colorRe.exec(content)) !== null) {
+    out.colors.push({ name: m[1], value: m[2], source: configPath });
+  }
+  // Match: fontFamily: { serif: ['Fraunces', ...], sans: [...] }
+  const fontRe = /fontFamily\s*:\s*\{([\s\S]*?)\}/;
+  const fontBlock = fontRe.exec(content);
+  if (fontBlock) {
+    const entryRe = /([a-zA-Z][\w-]*)\s*:\s*\[([^\]]+)\]/g;
+    let f;
+    while ((f = entryRe.exec(fontBlock[1])) !== null) {
+      const primary = f[2].split(",")[0].trim().replace(/['"`]/g, "");
+      out.fonts.push({ name: f[1], primary, source: configPath });
+    }
+  }
+  return out;
+}
+
+function extractFontImports() {
+  const fonts = new Set();
+  // CSS @import url(...)
+  for (const f of findStyleFiles()) {
+    const content = readFileSync(f, "utf8");
+    const importRe = /@import\s+url\(['"]?https?:\/\/fonts\.googleapis\.com\/css2?\?family=([A-Za-z0-9+%]+)/g;
+    let m;
+    while ((m = importRe.exec(content)) !== null) {
+      fonts.add(decodeURIComponent(m[1].replace(/\+/g, " ")));
+    }
+  }
+  // next/font usage in layout files
+  for (const layout of ["app/layout.tsx", "app/layout.jsx", "src/app/layout.tsx", "src/app/layout.jsx"]) {
+    if (!existsSync(layout)) continue;
+    const content = readFileSync(layout, "utf8");
+    const nextFontRe = /from\s+['"]next\/font\/google['"][\s\S]{0,400}?import\s*\{\s*([A-Z][a-zA-Z_]*)\s*\}/g;
+    // Reverse: import { Fraunces } from 'next/font/google'
+    const importRe = /import\s*\{\s*([^}]+)\s*\}\s*from\s*['"]next\/font\/google['"]/g;
+    let m;
+    while ((m = importRe.exec(content)) !== null) {
+      for (const name of m[1].split(",").map((s) => s.trim()).filter(Boolean)) {
+        fonts.add(name.replace(/_/g, " "));
+      }
+    }
+  }
+  return [...fonts];
+}
+
+// ─── DESIGN.md parsing ────────────────────────────────────────────────
+
+function readDesignMd(designPath) {
+  if (!existsSync(designPath)) {
+    console.error(`DESIGN.md not found at ${designPath}`);
+    exit(2);
+  }
+  const content = readFileSync(designPath, "utf8");
+  return content;
+}
+
+function extractDesignMdTokens(content) {
+  const tokens = { vars: [], fonts: [] };
+  // CSS-style vars anywhere in DESIGN.md
+  const varRe = /--([a-z][a-z0-9-]*)\s*:\s*([^;\n]+);/gi;
+  let m;
+  while ((m = varRe.exec(content)) !== null) {
+    tokens.vars.push({ name: m[1], value: m[2].trim() });
+  }
+  // Font-family lines
+  const fontFamilyRe = /font-family\s*:\s*['"`]?([A-Z][A-Za-z0-9 ]+)['"`]?/g;
+  while ((m = fontFamilyRe.exec(content)) !== null) {
+    tokens.fonts.push(m[1].trim());
+  }
+  // Bare font names in §3 (Typography). Match "Font: Fraunces" or "Fraunces" on its own line.
+  const namedFontRe = /^\s*(?:Font|font|Family|family)\s*:\s*([A-Z][A-Za-z0-9 ]+)\s*$/gm;
+  while ((m = namedFontRe.exec(content)) !== null) {
+    tokens.fonts.push(m[1].trim());
+  }
+  return tokens;
+}
+
+// ─── Sync ────────────────────────────────────────────────────────────
+
+function cmdSync() {
+  const designPath = flag("--design", ".planning/DESIGN.md");
+  const write = hasFlag("--write");
+  const designContent = readDesignMd(designPath);
+  const designTokens = extractDesignMdTokens(designContent);
+  const designVarMap = new Map(designTokens.vars.map((v) => [v.name, v.value]));
+  const designFonts = new Set(designTokens.fonts.map((f) => f.toLowerCase()));
+
+  const codeVars = [];
+  for (const f of findStyleFiles()) codeVars.push(...extractCssVarsFromFile(f));
+  const codeVarMap = new Map();
+  for (const v of codeVars) {
+    if (!codeVarMap.has(v.name)) codeVarMap.set(v.name, v);
+  }
+
+  const tw = extractTailwindTokens(findTailwindConfig());
+  const codeFonts = new Set([
+    ...extractFontImports().map((f) => f.toLowerCase()),
+    ...tw.fonts.map((f) => f.primary.toLowerCase()),
+  ]);
+
+  const undocumented = []; // in code, not in DESIGN.md
+  const orphaned = [];     // in DESIGN.md, not in code
+  const drifted = [];      // both, but value differs
+
+  for (const [name, v] of codeVarMap) {
+    if (!designVarMap.has(name)) {
+      undocumented.push({ name, value: v.value, source: v.source });
+    } else if (designVarMap.get(name) !== v.value) {
+      drifted.push({ name, code: v.value, design: designVarMap.get(name), source: v.source });
+    }
+  }
+  for (const [name, value] of designVarMap) {
+    if (!codeVarMap.has(name)) orphaned.push({ name, value });
+  }
+
+  const fontUndocumented = [...codeFonts].filter((f) => !designFonts.has(f));
+  const fontOrphaned = [...designFonts].filter((f) => !codeFonts.has(f));
+
+  // Report
+  const report = {
+    design_md: designPath,
+    style_files: findStyleFiles(),
+    tailwind_config: findTailwindConfig(),
+    undocumented_vars: undocumented,
+    orphaned_vars: orphaned,
+    drifted_vars: drifted,
+    undocumented_fonts: fontUndocumented,
+    orphaned_fonts: fontOrphaned,
+    counts: {
+      undocumented: undocumented.length + fontUndocumented.length,
+      orphaned: orphaned.length + fontOrphaned.length,
+      drifted: drifted.length,
+    },
+  };
+
+  if (hasFlag("--json")) {
+    console.log(JSON.stringify(report, null, 2));
+  } else {
+    const c = report.counts;
+    console.log(`design ↔ code drift report`);
+    console.log(`  DESIGN.md:        ${designPath}`);
+    console.log(`  Style files:      ${report.style_files.join(", ") || "(none found)"}`);
+    console.log(`  Tailwind config:  ${report.tailwind_config || "(none found)"}`);
+    console.log(``);
+    console.log(`  Undocumented in DESIGN.md: ${c.undocumented}  (in code, not declared)`);
+    for (const v of undocumented.slice(0, 10)) console.log(`    --${v.name}: ${v.value}  (${v.source})`);
+    if (undocumented.length > 10) console.log(`    …and ${undocumented.length - 10} more`);
+    for (const f of fontUndocumented.slice(0, 5)) console.log(`    font: ${f}  (loaded but not declared)`);
+    console.log(``);
+    console.log(`  Orphaned in DESIGN.md:     ${c.orphaned}  (declared, not used in code)`);
+    for (const v of orphaned.slice(0, 10)) console.log(`    --${v.name}: ${v.value}`);
+    if (orphaned.length > 10) console.log(`    …and ${orphaned.length - 10} more`);
+    for (const f of fontOrphaned.slice(0, 5)) console.log(`    font: ${f}  (declared but never imported)`);
+    console.log(``);
+    console.log(`  Drifted values:            ${c.drifted}  (different in code vs DESIGN.md)`);
+    for (const d of drifted.slice(0, 10)) {
+      console.log(`    --${d.name}:`);
+      console.log(`      code:    ${d.code}  (${d.source})`);
+      console.log(`      DESIGN:  ${d.design}`);
+    }
+    if (drifted.length > 10) console.log(`    …and ${drifted.length - 10} more`);
+  }
+
+  // Patch
+  if (write && (undocumented.length + drifted.length > 0)) {
+    let patched = designContent;
+    // Append an Updated tokens section with the code-truth values.
+    const stamp = new Date().toISOString();
+    const section = [
+      ``,
+      `## §sync — auto-synced from code (${stamp})`,
+      ``,
+      `<!-- Generated by /qualia-vibe --sync --write. Reflects values actually present in code at sync time. -->`,
+      ``,
+      "```css",
+      `:root {`,
+      ...undocumented.map((v) => `  --${v.name}: ${v.value};  /* from ${v.source} */`),
+      ...drifted.map((d) => `  --${d.name}: ${d.code};  /* was: ${d.design} */`),
+      `}`,
+      "```",
+      ``,
+    ].join("\n");
+    patched = patched.trimEnd() + "\n" + section;
+    writeFileSync(designPath, patched, "utf8");
+    console.log(``);
+    console.log(`✓ DESIGN.md patched with ${undocumented.length + drifted.length} token updates`);
+  }
+
+  // Exit code: success if no drift OR --write applied; informational fail otherwise.
+  const totalDrift = report.counts.undocumented + report.counts.orphaned + report.counts.drifted;
+  if (totalDrift === 0) exit(0);
+  if (write) exit(0);
+  exit(1);
+}
+
+// ─── Variants scaffold ───────────────────────────────────────────────
+
+function cmdProposeVariants() {
+  const productPath = flag("--product", ".planning/PRODUCT.md");
+  const designPath = flag("--design", ".planning/DESIGN.md");
+  const count = parseInt(flag("--count", "3"), 10);
+  if (!Number.isFinite(count) || count < 2 || count > 5) {
+    console.error("--count must be 2..5");
+    exit(2);
+  }
+
+  const product = existsSync(productPath) ? readFileSync(productPath, "utf8") : "";
+  const design = existsSync(designPath) ? readFileSync(designPath, "utf8") : "";
+
+  // Emit a structured scaffold the LLM uses to generate variants.
+  const scaffold = {
+    instruction: `Generate exactly ${count} aesthetic-direction variants for /qualia-vibe --variants. Each variant must be opinionated and concrete — no "modern minimal" hedging. Variants must be meaningfully different from each other AND from the current direction.`,
+    context: {
+      product_md: product.slice(0, 4000),
+      current_direction_lines: design
+        .split("\n")
+        .filter((l) => /aesthetic\s+direction|direction\s*:/i.test(l))
+        .slice(0, 5),
+    },
+    output_contract: {
+      shape: `One variant per block, exactly N=${count} blocks. Per variant: name, direction (1 sentence), color (1 sentence), typography (1 sentence), motion (1 sentence). No prose justification beyond those 4 lines.`,
+    },
+    rules: [
+      "No banned fonts (Inter/Roboto/Arial/Helvetica/system-ui/Space Grotesk/Montserrat/Poppins/Lato/Open Sans).",
+      "No purple-blue gradients.",
+      "No bounce/elastic easing.",
+      `Respect anti-references from PRODUCT.md if present.`,
+      "Each variant should be commit-able as-is — concrete enough that /qualia-vibe can apply it without further questions.",
+    ],
+  };
+
+  console.log(JSON.stringify(scaffold, null, 2));
+  exit(0);
+}
+
+// ─── Dispatch ────────────────────────────────────────────────────────
+
+switch (CMD) {
+  case "sync": cmdSync(); break;
+  case "propose-variants": cmdProposeVariants(); break;
+  default:
+    console.error(`Unknown command: ${CMD}`);
+    exit(2);
+}

package/templates/help.html

@@ -297,7 +297,7 @@
   <div class="header-content">
     <h1><span>Qualia</span> Framework</h1>
     <p>Plan, build, verify, ship. The AI-powered workflow for Qualia Solutions.</p>
-    <div class="version">{{VERSION}} &middot; 28 skills</div>
+    <div class="version">{{VERSION}} &middot; 33 skills</div>
   </div>
 </div>
 
@@ -366,6 +366,9 @@
         <div class="cmd"><span class="cmd-name">/qualia-review</span><span class="cmd-desc">Production audit with scored diagnostics. Runs real commands, scores findings by severity. Trigger on 'review', 'audit', 'code review', 'security check'.</span></div>
         <div class="cmd"><span class="cmd-name">/qualia-optimize</span><span class="cmd-desc">Deep optimization pass &mdash; reads .planning/ AND codebase to find performance, design, UI, backend, and frontend issues. Spawns parallel specialist agents. Supports --perf, --ui, --backend, --alignment, --fix flags.</span></div>
         <div class="cmd"><span class="cmd-name">/qualia-test</span><span class="cmd-desc">Generate or run tests for client projects. Trigger on 'write tests', 'add tests', 'test this', 'test coverage'.</span></div>
+        <div class="cmd"><span class="cmd-name">/qualia-zoom</span><span class="cmd-desc">Focus on a single file or function with full context (glossary terms, depending callers, ADRs touched). Use when a fresh agent needs surgical context for a tricky area.</span></div>
+        <div class="cmd"><span class="cmd-name">/qualia-issues</span><span class="cmd-desc">Break a phase plan into independent vertical-slice GitHub issues with needs-triage label. Externalizes work to the open queue so other sessions or contributors can pull from it.</span></div>
+        <div class="cmd"><span class="cmd-name">/qualia-triage</span><span class="cmd-desc">State machine over open GH issues — labels each as needs-triage, needs-info, ready-for-agent, ready-for-human, or wontfix. Pairs with /qualia-issues for the autonomous queue.</span></div>
       </div>
     </div>
 
@@ -376,6 +379,7 @@
       <div class="commands">
         <div class="cmd"><span class="cmd-name">/qualia-feature</span><span class="cmd-desc">Auto-scoped single-feature build. Inline for trivia (typo, config), fresh builder spawn for 1-5 file features. Refuses and routes to /qualia-plan for phase-sized work. Flags: --force-spawn, --force-inline.</span></div>
         <div class="cmd"><span class="cmd-name">/qualia-polish</span><span class="cmd-desc">Design pass, scope-adaptive &mdash; component, route, full app, redesign, critique, quick. Add --loop for the autonomous screenshot &rarr; score &rarr; fix loop.</span></div>
+        <div class="cmd"><span class="cmd-name">/qualia-vibe</span><span class="cmd-desc">Fast aesthetic pivot (~3 min) &mdash; swap design tokens (color, type, depth, motion), keep layout untouched. Default proposes ONE direction. Modes: --variants for A/B/C, --extract URL to reverse-engineer DESIGN.md from a reference site, --sync for code &harr; DESIGN.md back-sync.</span></div>
       </div>
     </div>
 
@@ -408,6 +412,7 @@
         <div class="cmd"><span class="cmd-name">/qualia</span><span class="cmd-desc">Smart router &mdash; reads project state, classifies your situation, tells you the exact next command. Use whenever you're unsure about your next step.</span></div>
         <div class="cmd"><span class="cmd-name">/qualia-idk</span><span class="cmd-desc">Diagnostic intelligence &mdash; spawns two isolated scans (planning + codebase) in parallel, cross-references against your confusion, explains the situation in plain language with a concrete next step. Use when something feels off or you need to understand what's going on.</span></div>
         <div class="cmd"><span class="cmd-name">/qualia-help</span><span class="cmd-desc">Open the Qualia Framework reference guide in the browser. A beautiful themed HTML page with all commands, rules, services, and the road.</span></div>
+        <div class="cmd"><span class="cmd-name">/qualia-road</span><span class="cmd-desc">Terminal workflow map — Project → Journey → Milestones → Phases → Tasks. Use in headless/SSH sessions or when you want the road in chat instead of the browser.</span></div>
       </div>
     </div>
 
@@ -418,6 +423,8 @@
       <div class="commands">
         <div class="cmd"><span class="cmd-name">/qualia-skill-new</span><span class="cmd-desc">Author a new Qualia skill or agent. Generates the SKILL.md, registers it in the right location, and optionally ships to the framework repo.</span></div>
         <div class="cmd"><span class="cmd-name">/qualia-postmortem</span><span class="cmd-desc">Analyze a verification failure and turn the lesson into a framework improvement.</span></div>
+        <div class="cmd"><span class="cmd-name">/qualia-hook-gen</span><span class="cmd-desc">Convert a CLAUDE.md or rules instruction into a deterministic Claude Code pre-tool-use hook. Lets you shrink your instruction budget instead of just hearing the advice.</span></div>
+        <div class="cmd"><span class="cmd-name">/zoho-workflow</span><span class="cmd-desc">Internal Qualia Solutions ops — Zoho Invoice and Mail integration via ERP-first routing.</span></div>
       </div>
     </div>
   </section>
@@ -430,7 +437,7 @@
         <div class="cmd"><span class="cmd-name">qualia-framework install</span><span class="cmd-desc">Install or reinstall the framework.</span></div>
         <div class="cmd"><span class="cmd-name">qualia-framework update</span><span class="cmd-desc">Update to the latest version.</span></div>
         <div class="cmd"><span class="cmd-name">qualia-framework version</span><span class="cmd-desc">Show installed version + check for updates.</span></div>
-        <div class="cmd"><span class="cmd-name">qualia-framework uninstall</span><span class="cmd-desc">Clean removal from ~/.claude/ while preserving user-owned settings.</span></div>
+        <div class="cmd"><span class="cmd-name">qualia-framework uninstall</span><span class="cmd-desc">Clean removal from installed Claude/Codex homes while preserving user-owned settings.</span></div>
         <div class="cmd"><span class="cmd-name">qualia-framework migrate</span><span class="cmd-desc">Upgrade legacy settings.json to the current hook layout.</span></div>
         <div class="cmd"><span class="cmd-name">qualia-framework analytics</span><span class="cmd-desc">Hook telemetry, verification pass rates, gap cycles.</span></div>
         <div class="cmd"><span class="cmd-name">qualia-framework set-erp-key</span><span class="cmd-desc">Save and enable the ERP API key.</span></div>
@@ -541,7 +548,7 @@
 <div class="footer">
   <strong>Welcome to the future with Qualia.</strong><br>
   Qualia Solutions &mdash; Nicosia, Cyprus
-  <span class="footer-version">qualia-framework {{VERSION}} &middot; 28 skills</span>
+  <span class="footer-version">qualia-framework {{VERSION}} &middot; 33 skills</span>
 </div>
 
 </body>

package/templates/knowledge/agents.md

@@ -6,11 +6,11 @@ once at session start.
 
 ## What's here
 
-`~/.claude/knowledge/` is the project-spanning memory tier. It holds three
+The installed `knowledge/` directory is the project-spanning memory tier. It holds three
 kinds of files, each with a clear purpose. Treat the structure as a contract.
 
 ```
-~/.claude/knowledge/
+knowledge/
 ├── agents.md              ← this file (system overview)
 ├── index.md               ← entry point — start here when answering questions
 ├── daily-log/
@@ -43,7 +43,7 @@ kinds of files, each with a clear purpose. Treat the structure as a contract.
 **Do not pretend something is in memory if it is not.** Better to say
 "INSUFFICIENT EVIDENCE: searched index.md and learned-patterns.md, no entry
 matches" than to hallucinate a recalled pattern. The grounding protocol
-(`~/.claude/rules/grounding.md`) applies here too.
+(`rules/grounding.md`) applies here too.
 
 ## Tiers
 

package/templates/knowledge/index.md

@@ -1,6 +1,6 @@
 # Knowledge Index
 
-Entry point for `~/.claude/knowledge/`. When answering a question, **read this
+Entry point for the installed `knowledge/` directory. When answering a question, **read this
 file first**, then jump to the specific file(s) that match.
 
 > Auto-maintained by `/qualia-learn`. Do not hand-edit unless the file is out

package/templates/tracking.json

@@ -5,6 +5,9 @@
   "assigned_to": "",
   "team_id": "",
   "project_id": "",
+  "erp_project_id": "",
+  "client_id": "",
+  "workspace_id": "",
   "git_remote": "",
   "milestone": 1,
   "milestone_name": "",

package/templates/work-packet.md

@@ -0,0 +1,46 @@
+# Work Packet — {{PROJECT_NAME}}
+
+Purpose: ERP-approved context for the next Framework session. This is the handoff from operations/control into Claude Code or Codex execution.
+
+## Source
+
+- ERP project:
+- ERP project ID (UUID):
+- Client:
+- Client ID (UUID):
+- Workspace ID (UUID):
+- Git remote:
+- Assigned to:
+- Prepared by:
+- Prepared at:
+
+## Current Truth
+
+- Current milestone:
+- Current phase:
+- Open blocker:
+- Latest report:
+- Deadline:
+- Client-visible status:
+
+## Approved Work
+
+1. 
+2. 
+3. 
+
+## Guardrails
+
+- Do not change deadlines, project status, or client-visible updates without approval.
+- Do not treat chat transcripts as final truth unless the ERP record confirms them.
+- Use Framework `.planning/` for execution state; use ERP as the operational source of truth.
+
+## Memory Context
+
+- Relevant client preferences:
+- Reusable lessons:
+- Known mistakes to avoid:
+
+## Next Framework Command
+
+`/qualia`