@agent-scope/cli 1.18.1 → 1.20.0

package/dist/index.cjs

@@ -191,13 +191,15 @@ function buildTable(headers, rows) {
 }
 function formatListTable(rows) {
   if (rows.length === 0) return "No components found.";
-  const headers = ["NAME", "FILE", "COMPLEXITY", "HOOKS", "CONTEXTS"];
+  const headers = ["NAME", "FILE", "COMPLEXITY", "HOOKS", "CONTEXTS", "COLLECTION", "INTERNAL"];
   const tableRows = rows.map((r) => [
     r.name,
     r.file,
     r.complexityClass,
     String(r.hookCount),
-    String(r.contextCount)
+    String(r.contextCount),
+    r.collection ?? "\u2014",
+    r.internal ? "yes" : "no"
   ]);
   return buildTable(headers, tableRows);
 }
@@ -228,6 +230,8 @@ function formatGetTable(name, descriptor) {
     `  Composes:       ${descriptor.composes.join(", ") || "none"}`,
     `  Composed By:    ${descriptor.composedBy.join(", ") || "none"}`,
     `  Side Effects:   ${formatSideEffects(descriptor.sideEffects)}`,
+    `  Collection:     ${descriptor.collection ?? "\u2014"}`,
+    `  Internal:       ${descriptor.internal}`,
     "",
     `  Props (${propNames.length}):`
   ];
@@ -250,8 +254,16 @@ function formatGetJson(name, descriptor) {
 }
 function formatQueryTable(rows, queryDesc) {
   if (rows.length === 0) return `No components match: ${queryDesc}`;
-  const headers = ["NAME", "FILE", "COMPLEXITY", "HOOKS", "CONTEXTS"];
-  const tableRows = rows.map((r) => [r.name, r.file, r.complexityClass, r.hooks, r.contexts]);
+  const headers = ["NAME", "FILE", "COMPLEXITY", "HOOKS", "CONTEXTS", "COLLECTION", "INTERNAL"];
+  const tableRows = rows.map((r) => [
+    r.name,
+    r.file,
+    r.complexityClass,
+    r.hooks,
+    r.contexts,
+    r.collection ?? "\u2014",
+    r.internal ? "yes" : "no"
+  ]);
   return `Query: ${queryDesc}
 
 ${buildTable(headers, tableRows)}`;
@@ -541,10 +553,10 @@ async function getCompiledCssForClasses(cwd, classes) {
   return build3(deduped);
 }
 async function compileGlobalCssFile(cssFilePath, cwd) {
-  const { existsSync: existsSync15, readFileSync: readFileSync13 } = await import('fs');
+  const { existsSync: existsSync16, readFileSync: readFileSync14 } = await import('fs');
   const { createRequire: createRequire3 } = await import('module');
-  if (!existsSync15(cssFilePath)) return null;
-  const raw = readFileSync13(cssFilePath, "utf-8");
+  if (!existsSync16(cssFilePath)) return null;
+  const raw = readFileSync14(cssFilePath, "utf-8");
   const needsCompile = /@tailwind|@import\s+['"]tailwindcss/.test(raw);
   if (!needsCompile) {
     return raw;
@@ -970,7 +982,7 @@ function parseChecks(raw) {
 }
 function createCiCommand() {
   return new commander.Command("ci").description(
-    "Run a non-interactive CI pipeline (manifest -> render -> compliance -> regression) with exit codes"
+    "Run the full Scope pipeline non-interactively and exit with a structured code.\n\nPIPELINE STEPS (in order):\n  1. manifest generate    scan source, build .reactscope/manifest.json\n  2. render all           screenshot every component\n  3. tokens compliance    score on-token CSS coverage\n  4. visual regression    pixel diff against --baseline (if provided)\n\nCHECKS (--checks flag, comma-separated):\n  compliance        token coverage below --threshold \u2192 exit 1\n  a11y              accessibility violations \u2192 exit 2\n  console-errors    console.error during render \u2192 exit 3\n  visual-regression pixel diff against baseline \u2192 exit 4\n  (render failures always \u2192 exit 5 regardless of --checks)\n\nEXIT CODES:\n  0   all checks passed\n  1   compliance below threshold\n  2   accessibility violations\n  3   console errors during render\n  4   visual regression detected\n  5   component render failures\n\nExamples:\n  scope ci\n  scope ci --baseline .reactscope/baseline --threshold 0.95\n  scope ci --checks compliance,a11y --json -o ci-result.json\n  scope ci --viewport 1280x720"
   ).option(
     "-b, --baseline <dir>",
     "Baseline directory for visual regression comparison (omit to skip)"
@@ -1013,6 +1025,192 @@ function createCiCommand() {
     }
   );
 }
+function collectSourceFiles(dir) {
+  if (!fs.existsSync(dir)) return [];
+  const results = [];
+  for (const entry of fs.readdirSync(dir, { withFileTypes: true })) {
+    const full = path.join(dir, entry.name);
+    if (entry.isDirectory() && entry.name !== "node_modules" && entry.name !== ".reactscope") {
+      results.push(...collectSourceFiles(full));
+    } else if (entry.isFile() && /\.(tsx?|jsx?)$/.test(entry.name)) {
+      results.push(full);
+    }
+  }
+  return results;
+}
+function checkConfig(cwd) {
+  const configPath = path.resolve(cwd, "reactscope.config.json");
+  if (!fs.existsSync(configPath)) {
+    return {
+      name: "config",
+      status: "error",
+      message: "reactscope.config.json not found \u2014 run `scope init`"
+    };
+  }
+  try {
+    JSON.parse(fs.readFileSync(configPath, "utf-8"));
+    return { name: "config", status: "ok", message: "reactscope.config.json valid" };
+  } catch {
+    return { name: "config", status: "error", message: "reactscope.config.json is not valid JSON" };
+  }
+}
+function checkTokens(cwd) {
+  const configPath = path.resolve(cwd, "reactscope.config.json");
+  let tokensPath = path.resolve(cwd, "reactscope.tokens.json");
+  if (fs.existsSync(configPath)) {
+    try {
+      const cfg = JSON.parse(fs.readFileSync(configPath, "utf-8"));
+      if (cfg.tokens?.file) tokensPath = path.resolve(cwd, cfg.tokens.file);
+    } catch {
+    }
+  }
+  if (!fs.existsSync(tokensPath)) {
+    return {
+      name: "tokens",
+      status: "warn",
+      message: `Token file not found at ${tokensPath} \u2014 run \`scope init\``
+    };
+  }
+  try {
+    const raw = JSON.parse(fs.readFileSync(tokensPath, "utf-8"));
+    if (!raw.version) {
+      return { name: "tokens", status: "warn", message: "Token file is missing a `version` field" };
+    }
+    return { name: "tokens", status: "ok", message: "Token file valid" };
+  } catch {
+    return { name: "tokens", status: "error", message: "Token file is not valid JSON" };
+  }
+}
+function checkGlobalCss(cwd) {
+  const configPath = path.resolve(cwd, "reactscope.config.json");
+  let globalCss = [];
+  if (fs.existsSync(configPath)) {
+    try {
+      const cfg = JSON.parse(fs.readFileSync(configPath, "utf-8"));
+      globalCss = cfg.components?.wrappers?.globalCSS ?? [];
+    } catch {
+    }
+  }
+  if (globalCss.length === 0) {
+    return {
+      name: "globalCSS",
+      status: "warn",
+      message: "No globalCSS configured \u2014 Tailwind styles won't apply to renders. Add `components.wrappers.globalCSS` to reactscope.config.json"
+    };
+  }
+  const missing = globalCss.filter((f) => !fs.existsSync(path.resolve(cwd, f)));
+  if (missing.length > 0) {
+    return {
+      name: "globalCSS",
+      status: "error",
+      message: `globalCSS file(s) not found: ${missing.join(", ")}`
+    };
+  }
+  return {
+    name: "globalCSS",
+    status: "ok",
+    message: `${globalCss.length} globalCSS file(s) present`
+  };
+}
+function checkManifest(cwd) {
+  const manifestPath = path.resolve(cwd, ".reactscope", "manifest.json");
+  if (!fs.existsSync(manifestPath)) {
+    return {
+      name: "manifest",
+      status: "warn",
+      message: "Manifest not found \u2014 run `scope manifest generate`"
+    };
+  }
+  const manifestMtime = fs.statSync(manifestPath).mtimeMs;
+  const sourceDir = path.resolve(cwd, "src");
+  const sourceFiles = collectSourceFiles(sourceDir);
+  const stale = sourceFiles.filter((f) => fs.statSync(f).mtimeMs > manifestMtime);
+  if (stale.length > 0) {
+    return {
+      name: "manifest",
+      status: "warn",
+      message: `Manifest may be stale \u2014 ${stale.length} source file(s) modified since last generate. Run \`scope manifest generate\``
+    };
+  }
+  return { name: "manifest", status: "ok", message: "Manifest present and up to date" };
+}
+var ICONS = { ok: "\u2713", warn: "!", error: "\u2717" };
+function formatCheck(check) {
+  return `  [${ICONS[check.status]}] ${check.name.padEnd(12)} ${check.message}`;
+}
+function createDoctorCommand() {
+  return new commander.Command("doctor").description(
+    `Verify your Scope project setup before running other commands.
+
+CHECKS PERFORMED:
+  config      reactscope.config.json exists and is valid JSON
+  tokens      reactscope.tokens.json exists and passes validation
+  css         globalCSS files referenced in config actually exist
+  manifest    .reactscope/manifest.json exists and is not stale
+              (stale = source files modified after last generate)
+
+STATUS LEVELS: ok | warn | error
+
+Run this first whenever renders fail or produce unexpected output.
+
+Examples:
+  scope doctor
+  scope doctor --json
+  scope doctor --json | jq '.checks[] | select(.status == "error")'`
+  ).option("--json", "Emit structured JSON output", false).action((opts) => {
+    const cwd = process.cwd();
+    const checks = [
+      checkConfig(cwd),
+      checkTokens(cwd),
+      checkGlobalCss(cwd),
+      checkManifest(cwd)
+    ];
+    const errors = checks.filter((c) => c.status === "error").length;
+    const warnings = checks.filter((c) => c.status === "warn").length;
+    if (opts.json) {
+      process.stdout.write(
+        `${JSON.stringify({ passed: checks.length - errors - warnings, warnings, errors, checks }, null, 2)}
+`
+      );
+      if (errors > 0) process.exit(1);
+      return;
+    }
+    process.stdout.write("\nScope Doctor\n");
+    process.stdout.write("\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n");
+    for (const check of checks) process.stdout.write(`${formatCheck(check)}
+`);
+    process.stdout.write("\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n");
+    if (errors > 0) {
+      process.stdout.write(`  ${errors} error(s), ${warnings} warning(s)
+
+`);
+      process.exit(1);
+    } else if (warnings > 0) {
+      process.stdout.write(`  ${warnings} warning(s) \u2014 everything works but could be better
+
+`);
+    } else {
+      process.stdout.write("  All checks passed!\n\n");
+    }
+  });
+}
+
+// src/skill-content.ts
+var SKILL_CONTENT = '# Scope \u2014 Agent Skill\n\n## TLDR\nScope is a React codebase introspection toolkit. Use it to answer questions about component structure, props, context dependencies, side effects, and visual output \u2014 without running the app.\n\n**When to reach for it:** Any task requiring "which components use X", "what props does Y accept", "render Z for visual verification", "does this component depend on a provider", or "what design tokens are in use".\n\n**3-command workflow:**\n```\nscope init                               # scaffold config + auto-generate manifest\nscope manifest query --context ThemeContext  # ask questions about the codebase\nscope render Button                      # produce a PNG of a component\n```\n\n---\n\n---\n\n## Mental Model\n\nUnderstanding how Scope\'s data flows is the key to using it effectively as an agent.\n\n```\nSource TypeScript files\n       \u2193  (ts-morph AST parse)\n  manifest.json              \u2190 structural facts: props, hooks, contexts, complexity\n       \u2193  (esbuild + Playwright)\n  renders/*.json             \u2190 visual facts: screenshot, computedStyles, dom, a11y\n       \u2193  (token engine)\n  compliance-styles.json     \u2190 audit facts: which CSS values match tokens, which don\'t\n       \u2193  (site generator)\n  site/                      \u2190 human-readable docs combining all of the above\n```\n\nEach layer depends on the previous. If you\'re getting unexpected results, check whether the earlier layers are stale (run `scope doctor` to diagnose).\n\n---\n\n## The Four Subsystems\n\n### 1. Manifest (`scope manifest *`)\nThe manifest is a static analysis snapshot of your TypeScript source. It tells you:\n- What components exist, where they live, and how they\'re exported\n- What props each component accepts (types, defaults, required/optional)\n- What React hooks they call (`detectedHooks`)\n- What contexts they consume (`requiredContexts`) \u2014 must be provided for a render to succeed\n- Whether they compose other components (`composes` / `composedBy`)\n- Their **complexity class** \u2014 `"simple"` or `"complex"` \u2014 which determines the render engine\n\nThe manifest never runs your code. It only reads TypeScript. This means it\'s fast and safe, but it can\'t know about runtime values.\n\n### 2. Render Engine (`scope render *`)\nThe render engine compiles components with esbuild and renders them in Chromium (Playwright). Two paths exist:\n\n| Path | When | Speed | Capability |\n|------|------|-------|------------|\n| **Satori** | `complexityClass: "simple"` | ~8ms | Flexbox only, no JS, no CSS-in-JS |\n| **BrowserPool** | `complexityClass: "complex"` | ~200\u2013800ms | Full DOM, CSS, Tailwind, animations |\n\nMost real-world components route through BrowserPool. Scope defaults to `"complex"` when uncertain (safe fallback).\n\nEach render produces:\n- `screenshot` \u2014 retina-quality PNG (2\xD7 `deviceScaleFactor`; display at CSS px dimensions)\n- `width` / `height` \u2014 CSS pixel dimensions of the component root\n- `computedStyles` \u2014 per-node computed CSS keyed by `#node-0`, `#node-1`, etc.\n- `dom` \u2014 full DOM tree with bounding boxes (BrowserPool only)\n- `accessibility` \u2014 role, aria-name, violation list (BrowserPool only)\n- `renderTimeMs` \u2014 wall-clock render duration\n\n### 3. Scope Files (`.scope.tsx`)\nScope files let you define **named rendering scenarios** for a component alongside it in the source tree. They are the primary way to ensure `render all` produces meaningful screenshots.\n\n```tsx\n// Button.scope.tsx\nimport type { ScopeFile } from \'@agent-scope/cli\';\nimport { Button } from \'./Button\';\n\nexport default {\n  default: { variant: \'primary\', children: \'Click me\' },\n  ghost:   { variant: \'ghost\',   children: \'Cancel\' },\n  danger:  { variant: \'danger\',  children: \'Delete\' },\n  disabled: { variant: \'primary\', children: \'Disabled\', disabled: true },\n} satisfies ScopeFile<typeof Button>;\n```\n\nKey rules:\n- The file must be named `<ComponentName>.scope.tsx` in the same directory\n- Export a default object where keys are scenario names and values are props\n- `render all` uses the `default` scenario (or first defined) as the primary screenshot\n- If 2+ scenarios exist, `render all` automatically runs a matrix and merges cells into the component JSON\n- Scenarios also feed the interactive Playground in the docs site\n\nWhen a component renders blank with `{}` props, **the fix is usually to create a `.scope.tsx` file** with real props.\n\n### 4. Token Compliance\nThe compliance pipeline:\n1. `scope render all` captures `computedStyles` for every element in every component\n2. These are written to `.reactscope/compliance-styles.json`\n3. The token engine compares each computed CSS value against your `reactscope.tokens.json`\n4. `scope tokens compliance` reports the aggregate on-system percentage\n5. `scope ci` fails if the percentage is below `complianceThreshold` (default 90%)\n\n**On-system** means the value exactly matches a resolved token value. Off-system means it\'s a hardcoded value with no token backing it.\n\n---\n\n## Complexity Classes \u2014 Practical Guide\n\nThe `complexityClass` field determines which render engine runs. Scope auto-detects it, but agents should understand it:\n\n**`"simple"` components:**\n- Pure presentational, flexbox layout only\n- No CSS grid, no absolute/fixed/sticky positioning\n- No CSS animations, transitions, or transforms\n- No `className` values Scope can\'t statically trace (e.g. dynamic Tailwind classes)\n- Renders in ~8ms via Satori (SVG-based, no browser needed)\n\n**`"complex"` components:**\n- Anything using Tailwind (CSS injection required)\n- CSS grid, positioned elements, overflow, z-index\n- Components that read from context at render time\n- Any component Scope isn\'t sure about (conservative default)\n- Renders in ~200\u2013800ms via Playwright BrowserPool\n\nWhen in doubt: complex is always safe. Simple is an optimization.\n\n---\n\n## Required Contexts \u2014 Why Renders Fail\n\nIf `requiredContexts` is non-empty, the component calls `useContext` on one or more contexts. Without a provider, it will either render broken or throw entirely.\n\nTwo ways to fix:\n1. **Provider presets in config** (recommended): add provider names to `reactscope.config.json \u2192 components.wrappers.providers`\n2. **Scope file with wrapper**: wrap the component in a provider in the scenario itself\n\nBuilt-in mocks (always provided): `ThemeContext \u2192 { theme: \'light\' }`, `LocaleContext \u2192 { locale: \'en-US\' }`.\n\n---\n\n## `scope doctor` \u2014 Always Run This First\n\nBefore debugging any render issue, run:\n```bash\nscope doctor\n```\n\nIt checks:\n- `reactscope.config.json` is valid JSON\n- Token file exists and has a `version` field\n- Every path in `globalCSS` resolves on disk\n- Manifest is present and up to date (not stale relative to source)\n\n**If `globalCSS` is empty or missing**: Tailwind styles won\'t apply to renders. Every component will look unstyled. This is the most common footgun. Fix: add your CSS entry file (the one with `@tailwind base; @tailwind components; @tailwind utilities;`) to `globalCSS` in config.\n\n---\n\n## Agent Decision Tree\n\n**"I want to know what props Component X accepts"**\n\u2192 `scope manifest get X --format json | jq \'.props\'`\n\n**"I want to know which components will break if I change a context"**\n\u2192 `scope manifest query --context MyContext --format json`\n\n**"I want to render a component to verify visual output"**\n\u2192 Create a `.scope.tsx` file with real props first, then `scope render X`\n\n**"I want to render all variants of a component"**\n\u2192 Define all variants in `.scope.tsx`, then `scope render all` (auto-matrix)\n\u2192 Or: `scope render matrix X --axes \'variant:primary,secondary,danger\'`\n\n**"I want to audit token compliance"**\n\u2192 `scope render all` first (populates computedStyles), then `scope tokens compliance`\n\n**"Renders look unstyled / blank"**\n\u2192 Run `scope doctor` \u2014 likely missing `globalCSS`\n\u2192 If props are the issue: create/update the `.scope.tsx` file\n\n**"I want to understand blast radius of a token change"**\n\u2192 `scope tokens impact color.primary.500 --new-value \'#0077dd\'`\n\u2192 `scope tokens preview color.primary.500 --new-value \'#0077dd\'` for visual diff\n\n**"I need to set up Scope in a new project"**\n\u2192 `scope init --yes` (auto-detects Tailwind + CSS, generates manifest automatically)\n\u2192 `scope doctor` to validate\n\u2192 Create `.scope.tsx` files for key components\n\u2192 `scope render all`\n\n**"I want to run Scope in CI"**\n\u2192 `scope ci --json --output ci-result.json`\n\u2192 Exit code 0 = pass, non-zero = specific failure type\n\n---\n\n\n## Installation\n\n```bash\nnpm install -g @agent-scope/cli          # global\nnpm install --save-dev @agent-scope/cli  # per-project\n```\n\nBinary: `scope`\n\n---\n\n## Core Workflow\n\n```\ninit \u2192 manifest generate \u2192 manifest query/get/list \u2192 render \u2192 (token audit) \u2192 ci\n```\n\n- **init**: Scaffold `reactscope.config.json` + token stub, auto-detect framework/globalCSS, **immediately runs `manifest generate`** so you see results right away.\n- **doctor**: Health-check command \u2014 validates config, token file, globalCSS presence, and manifest staleness.\n- **generate**: Parse TypeScript AST and emit `.reactscope/manifest.json`. Run once per codebase change (or automatically via `scope init`).\n- **query / get / list**: Ask structural questions. No network required. Works from manifest alone. Supports filtering by `--collection` and `--internal`.\n- **render**: Produce PNGs of components via esbuild + Playwright (BrowserPool). Requires manifest for file paths. Auto-injects required prop defaults and globalCSS.\n- **token audit**: Validate design tokens via `@scope/tokens` CLI commands (`tokens list`, `tokens compliance`, `tokens impact`, `tokens preview`, `tokens export`).\n- **ci**: Run compliance checks and exit with code 0/1 for CI pipelines. `report pr-comment` posts results to GitHub PRs.\n\n---\n\n## Full CLI Reference\n\n### `scope init`\nScaffold config, detect framework, extract Tailwind tokens, detect globalCSS files, and **automatically run `scope manifest generate`**.\n\n```bash\nscope init\nscope init --force    # overwrite existing config\n```\n\nAfter init completes, the manifest is already written \u2014 no manual `scope manifest generate` step needed.\n\n**Tailwind token extraction**: reads `tailwind.config.js`, extracts colors (with nested scale support), spacing, fontFamily, borderRadius. Stored in `reactscope.tokens.json`.\n\n**globalCSS detection**: checks 9 common patterns (`src/styles.css`, `src/index.css`, `app/globals.css`, etc.). Stored in `components.wrappers.globalCSS` in config.\n\n---\n\n### `scope doctor`\nValidate the Scope setup. Exits non-zero on errors, zero on warnings-only.\n\n```bash\nscope doctor\nscope doctor --json\n```\n\nChecks:\n- `config` \u2014 `reactscope.config.json` is valid JSON with required fields\n- `tokens` \u2014 token file is present and has a valid `version` field\n- `globalCSS` \u2014 globalCSS files listed in config exist on disk\n- `manifest` \u2014 manifest exists and is not stale (compares source file mtimes)\n\n```\n$ scope doctor\nScope Doctor\n\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n  [\u2713] config       reactscope.config.json valid\n  [\u2713] tokens       Token file valid\n  [\u2713] globalCSS    1 globalCSS file(s) present\n  [!] manifest     Manifest may be stale \u2014 5 source file(s) modified since last generate\n\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n  1 warning(s) \u2014 everything works but could be better\n```\n\n---\n\n### `scope capture <url>`\nCapture a live React component tree from a running app URL.\n\n```bash\nscope capture http://localhost:3000\nscope capture http://localhost:3000 --output report.json --pretty\nscope capture http://localhost:3000 --timeout 15000 --wait 2000\n```\n\nFlags:\n| Flag | Type | Default | Description |\n|------|------|---------|-------------|\n| `-o, --output <path>` | string | stdout | Write JSON to file |\n| `--pretty` | bool | false | Pretty-print JSON |\n| `--timeout <ms>` | number | 10000 | Max wait for React to mount |\n| `--wait <ms>` | number | 0 | Additional wait after page load |\n\nOutput (stdout): serialized PageReport JSON (or path when `--output` is set)\n\n---\n\n### `scope tree <url>`\nPrint the React component tree from a live URL.\n\n```bash\nscope tree http://localhost:3000\nscope tree http://localhost:3000 --depth 3 --show-props --show-hooks\n```\n\nFlags:\n| Flag | Type | Default | Description |\n|------|------|---------|-------------|\n| `--depth <n>` | number | unlimited | Max depth to display |\n| `--show-props` | bool | false | Include prop names next to components |\n| `--show-hooks` | bool | false | Show hook counts per component |\n| `--timeout <ms>` | number | 10000 | Max wait for React to mount |\n| `--wait <ms>` | number | 0 | Additional wait after page load |\n\n---\n\n### `scope report <url>`\nCapture and print a human-readable summary of a React app.\n\n```bash\nscope report http://localhost:3000\nscope report http://localhost:3000 --json\n```\n\nFlags:\n| Flag | Type | Default | Description |\n|------|------|---------|-------------|\n| `--json` | bool | false | Emit structured JSON instead of text |\n| `--timeout <ms>` | number | 10000 | Max wait for React to mount |\n| `--wait <ms>` | number | 0 | Additional wait after page load |\n\n---\n\n### `scope report baseline`\nSave a baseline snapshot for future diff comparisons.\n\n```bash\nscope report baseline\nscope report baseline --output baselines/my-baseline.json\n```\n\n---\n\n### `scope report diff`\nDiff the current app state against a saved baseline.\n\n```bash\nscope report diff\nscope report diff --baseline baselines/my-baseline.json\nscope report diff --json\n```\n\n---\n\n### `scope report pr-comment`\nPost a Scope CI report as a GitHub PR comment. Used in CI pipelines via the reusable `scope-ci` workflow.\n\n```bash\nscope report pr-comment --report-path scope-ci-report.json\n```\n\nRequires `GITHUB_TOKEN`, `GITHUB_REPOSITORY`, and `GITHUB_PR_NUMBER` in environment.\n\n---\n\n### `scope manifest generate`\nScan source files and write `.reactscope/manifest.json`.\n\n```bash\nscope manifest generate\nscope manifest generate --root ./packages/ui\nscope manifest generate --include "src/**/*.tsx" --exclude "**/*.test.tsx"\nscope manifest generate --output custom/manifest.json\n```\n\nFlags:\n| Flag | Type | Default | Description |\n|------|------|---------|-------------|\n| `--root <path>` | string | cwd | Project root directory |\n| `--output <path>` | string | `.reactscope/manifest.json` | Output path |\n| `--include <globs>` | string | `src/**/*.tsx,src/**/*.ts` | Comma-separated include globs |\n| `--exclude <globs>` | string | `**/node_modules/**,...` | Comma-separated exclude globs |\n\n---\n\n### `scope manifest list`\nList all components in the manifest.\n\n```bash\nscope manifest list\nscope manifest list --filter "Button*"\nscope manifest list --format json\nscope manifest list --collection Forms          # filter to named collection\nscope manifest list --internal                  # only internal components\nscope manifest list --no-internal               # hide internal components\n```\n\nFlags:\n| Flag | Type | Default | Description |\n|------|------|---------|-------------|\n| `--format <fmt>` | `json\\|table` | auto (TTY\u2192table, pipe\u2192json) | Output format |\n| `--filter <glob>` | string | \u2014 | Filter component names by glob |\n| `--collection <name>` | string | \u2014 | Filter to named collection |\n| `--internal` | bool | false | Show only internal components |\n| `--no-internal` | bool | false | Hide internal components |\n| `--manifest <path>` | string | `.reactscope/manifest.json` | Manifest path |\n\nTTY table output (includes COLLECTION and INTERNAL columns):\n```\nNAME          FILE                         COMPLEXITY  HOOKS  CONTEXTS  COLLECTION  INTERNAL\n------------  ---------------------------  ----------  -----  --------  ----------  --------\nButton        src/components/Button.tsx    simple      1      0         \u2014           no\nThemeToggle   src/components/Toggle.tsx    complex     3      1         Forms        no\n```\n\n---\n\n### `scope manifest get <name>`\nGet full details of a single component.\n\n```bash\nscope manifest get Button\nscope manifest get Button --format json\n```\n\nJSON output includes `collection` and `internal` fields:\n```json\n{\n  "name": "Button",\n  "filePath": "src/components/Button.tsx",\n  "collection": "Primitives",\n  "internal": false,\n  ...\n}\n```\n\n---\n\n### `scope manifest query`\nQuery components by attributes.\n\n```bash\nscope manifest query --context ThemeContext\nscope manifest query --hook useEffect\nscope manifest query --complexity complex\nscope manifest query --side-effects\nscope manifest query --has-fetch\nscope manifest query --has-prop <propName>\nscope manifest query --composed-by <ComponentName>\nscope manifest query --internal\nscope manifest query --collection Forms\nscope manifest query --context ThemeContext --format json\n```\n\nFlags:\n| Flag | Type | Default | Description |\n|------|------|---------|-------------|\n| `--context <name>` | string | \u2014 | Find components consuming a context by name |\n| `--hook <name>` | string | \u2014 | Find components using a specific hook |\n| `--complexity <class>` | `simple\\|complex` | \u2014 | Filter by complexity class |\n| `--side-effects` | bool | false | Any side effects detected |\n| `--has-fetch` | bool | false | Components with fetch calls specifically |\n| `--has-prop <name>` | string | \u2014 | Components that accept a specific prop |\n| `--composed-by <name>` | string | \u2014 | Components rendered inside a specific parent |\n| `--internal` | bool | false | Only internal components |\n| `--collection <name>` | string | \u2014 | Filter to named collection |\n| `--format <fmt>` | `json\\|table` | auto | Output format |\n| `--manifest <path>` | string | `.reactscope/manifest.json` | Manifest path |\n\n---\n\n### `scope render <component>`\nRender a single component to PNG (TTY) or JSON (pipe).\n\n**Auto prop defaults**: if `--props` is omitted, Scope injects sensible defaults so required props don\'t produce blank renders: strings/nodes \u2192 component name, unions \u2192 first value, booleans \u2192 `false`, numbers \u2192 `0`.\n\n**globalCSS auto-injection**: reads `components.wrappers.globalCSS` from config and compiles/injects CSS (supports Tailwind v3 via PostCSS) into the render harness. A warning is printed to stderr if no globalCSS is configured (common cause of unstyled renders).\n\n```bash\nscope render Button\nscope render Button --props \'{"variant":"primary","children":"Click me"}\'\nscope render Button --viewport 375x812\nscope render Button --output button.png\nscope render Button --format json\n```\n\nFlags:\n| Flag | Type | Default | Description |\n|------|------|---------|-------------|\n| `--props <json>` | string | `{}` | Inline props as JSON string |\n| `--viewport <WxH>` | string | `375x812` | Viewport size |\n| `--theme <name>` | string | \u2014 | Theme name from token system |\n| `-o, --output <path>` | string | \u2014 | Write PNG to specific path |\n| `--format <fmt>` | `png\\|json` | auto (TTY\u2192file, pipe\u2192json) | Output format |\n| `--manifest <path>` | string | `.reactscope/manifest.json` | Manifest path |\n\n---\n\n### `scope render matrix <component>`\nRender across a Cartesian product of prop axes. Accepts both `key:v1,v2` and `{"key":["v1","v2"]}` JSON format for `--axes`.\n\n```bash\nscope render matrix Button --axes \'variant:primary,secondary,danger\'\nscope render matrix Button --axes \'{"variant":["primary","secondary"]}\'\nscope render matrix Button --axes \'variant:primary,secondary size:sm,md,lg\'\nscope render matrix Button --sprite button-matrix.png --format json\n```\n\n---\n\n### `scope render all`\nRender every component in the manifest.\n\n```bash\nscope render all\nscope render all --concurrency 4 --output-dir renders/\n```\n\nHandles imports of CSS files in components (maps to empty loader so styles are injected at page level). SVG and font imports are handled via dataurl loaders.\n\n---\n\n### `scope instrument tree`\nCapture the live React component tree with instrumentation metadata.\n\n```bash\nscope instrument tree http://localhost:3000\nscope instrument tree http://localhost:3000 --depth 5 --show-props\n```\n\n**Implementation note**: uses a fresh `chromium.launch()` + `newContext()` + `newPage()` per call (not BrowserPool), with `addInitScript` called before `setContent` to ensure the Scope runtime is injected at document-start before React loads.\n\n---\n\n### `scope instrument hooks`\nProfile hook execution in live components.\n\n```bash\nscope instrument hooks http://localhost:3000\nscope instrument hooks http://localhost:3000 --component Button\n```\n\n**Implementation note**: requires `addInitScript({ content: getBrowserEntryScript() })` before `setContent` so `__REACT_DEVTOOLS_GLOBAL_HOOK__` is present when React loads its renderer.\n\n---\n\n### `scope instrument profile`\nProfile render performance of live components.\n\n```bash\nscope instrument profile http://localhost:3000\n```\n\n---\n\n### `scope instrument renders`\nRe-render causality analysis \u2014 what triggered each render.\n\n```bash\nscope instrument renders http://localhost:3000\n```\n\n---\n\n### `scope tokens get <name>`\nGet details of a single design token.\n\n### `scope tokens list`\nList all tokens. Token file must have a `version` field (written by `scope init`).\n\n```bash\nscope tokens list\nscope tokens list --type color\nscope tokens list --format json\n```\n\n### `scope tokens search <query>`\nFull-text search across token names/values.\n\n### `scope tokens resolve <value>`\nResolve a CSS value or alias back to its token name.\n\n### `scope tokens validate`\nValidate token file schema.\n\n### `scope tokens compliance`\nCheck rendered components for design token compliance.\n\n```bash\nscope tokens compliance\nscope tokens compliance --threshold 95\n```\n\n### `scope tokens impact <token>`\nAnalyze impact of changing a token \u2014 which components use it.\n\n```bash\nscope tokens impact --token color.primary.500\n```\n\n### `scope tokens preview <token>`\nPreview a token value change visually before committing.\n\n### `scope tokens export`\nExport tokens in multiple formats.\n\n```bash\nscope tokens export --format flat-json\nscope tokens export --format css\nscope tokens export --format scss\nscope tokens export --format ts\nscope tokens export --format tailwind\nscope tokens export --format style-dictionary\n```\n\n**Format aliases** (auto-corrected with "Did you mean?" hint):\n- `json` \u2192 `flat-json`\n- `js` \u2192 `ts`\n- `sass` \u2192 `scss`\n- `tw` \u2192 `tailwind`\n\n---\n\n### `scope ci`\nRun all CI checks (compliance, accessibility, console errors) and exit 0/1.\n\n```bash\nscope ci\nscope ci --json\nscope ci --threshold 90    # compliance threshold (default: 90)\n```\n\n```\n$ scope ci --json\n\u2192 CI passed in 3.2s\n\u2192 Compliance 100.0% >= threshold 90.0% \u2705\n\u2192 Accessibility audit not yet implemented \u2014 skipped \u2705\n\u2192 No console errors detected \u2705\n\u2192 Exit code 0\n```\n\nThe `scope-ci` **reusable GitHub Actions workflow** is available at `.github/workflows/scope-ci.yml` and can be included in any repo\'s CI to run `scope ci` and post results as a PR comment via `scope report pr-comment`.\n\n---\n\n### `scope site build`\nGenerate a static HTML component gallery site from the manifest.\n\n```bash\nscope site build\nscope site build --output ./dist/site\n```\n\n**Collections support**: components are grouped under named collection sections in the sidebar and index grid. Internal components are hidden from the sidebar and card grid but appear in composition detail sections with an `internal` badge.\n\n**Collection display rules**:\n- Sidebar: one section divider per collection + an "Ungrouped" section; internal components excluded\n- Index page: named sections with heading + optional description; internal components excluded\n- Component detail page: Composes/Composed By lists ALL components including internal ones (with subtle badge)\n- Falls back to flat list when no collections configured (backwards-compatible)\n\n### `scope site serve`\nServe the generated site locally.\n\n```bash\nscope site serve\nscope site serve --port 4000\n```\n\n---\n\n## Collections & Internal Components\n\nComponents can be organized into named **collections** and flagged as **internal** (library implementation details not shown in the public gallery).\n\n### Defining collections\n\n**1. TSDoc tag** (highest precedence):\n```tsx\n/**\n * @collection Forms\n */\nexport function Input() { ... }\n```\n\n**2. `.scope.ts` co-located file**:\n```ts\n// Input.scope.ts\nexport const collection = "Forms"\n```\n\n**3. Config-level glob patterns**:\n```json\n// reactscope.config.json\n{\n  "collections": [\n    { "name": "Forms", "description": "Form inputs and controls", "patterns": ["src/forms/**"] },\n    { "name": "Primitives", "patterns": ["src/primitives/**"] }\n  ]\n}\n```\n\nResolution precedence: TSDoc `@collection` > `.scope.ts` export > config pattern.\n\n### Flagging internal components\n\n**TSDoc tag**:\n```tsx\n/**\n * @internal\n */\nexport function InternalHelperButton() { ... }\n```\n\n**Config glob patterns**:\n```json\n{\n  "internalPatterns": ["src/internal/**", "src/**/*Internal*"]\n}\n```\n\n---\n\n## Manifest Output Schema\n\nFile: `.reactscope/manifest.json`\n\n```typescript\n{\n  version: "0.1",\n  generatedAt: string,          // ISO 8601\n  collections: CollectionConfig[],  // echoes config.collections, [] when not set\n  components: Record<string, ComponentDescriptor>,\n  tree: Record<string, { children: string[], parents: string[] }>\n}\n```\n\n### `ComponentDescriptor` fields\n\n| Field | Type | Description |\n|-------|------|-------------|\n| `filePath` | `string` | Relative path from project root to source file |\n| `exportType` | `"named" \\| "default" \\| "none"` | How the component is exported |\n| `displayName` | `string` | `displayName` if set, else function/class name |\n| `collection` | `string?` | Resolved collection name (`undefined` = ungrouped) |\n| `internal` | `boolean` | `true` if flagged as internal (default: `false`) |\n| `props` | `Record<string, PropDescriptor>` | Extracted prop types keyed by prop name |\n| `composes` | `string[]` | Components this one renders in its JSX |\n| `composedBy` | `string[]` | Components that render this one in their JSX |\n| `complexityClass` | `"simple" \\| "complex"` | Render path: simple = Satori-safe, complex = requires BrowserPool |\n| `requiredContexts` | `string[]` | React context names consumed |\n| `detectedHooks` | `string[]` | All hooks called, sorted alphabetically |\n| `sideEffects` | `SideEffects` | Side effect categories detected |\n| `memoized` | `boolean` | Wrapped with `React.memo` |\n| `forwardedRef` | `boolean` | Wrapped with `React.forwardRef` |\n| `hocWrappers` | `string[]` | HOC wrapper names (excluding memo/forwardRef) |\n| `loc` | `{ start: number, end: number }` | Line numbers in source file |\n\n---\n\n## Common Agent Workflows\n\n### Structural queries\n\n```bash\n# Which components use ThemeContext?\nscope manifest query --context ThemeContext\n\n# What props does Button accept?\nscope manifest get Button --format json | jq \'.props\'\n\n# Which components are safe to render without a provider?\nscope manifest query --complexity simple  # + check requiredContexts === []\n\n# Show all components with side effects\nscope manifest query --side-effects\n\n# Which components make fetch calls?\nscope manifest query --has-fetch\n\n# Which components use useEffect?\nscope manifest query --hook useEffect\n\n# Which components accept a disabled prop?\nscope manifest query --has-prop disabled\n\n# Which components are composed inside Modal?\nscope manifest query --composed-by Modal\n\n# All components in the Forms collection\nscope manifest list --collection Forms\n\n# All internal components (library implementation details)\nscope manifest list --internal\n\n# Public components only (hide internals)\nscope manifest list --no-internal\n```\n\n### Render workflows\n\n```bash\n# Render Button in all variants (auto-defaults props if not provided)\nscope render matrix Button --axes \'variant:primary,secondary,danger\'\n\n# Render with JSON axes format\nscope render matrix Button --axes \'{"variant":["primary","secondary"]}\'\n\n# Render with explicit props\nscope render Button --props \'{"variant":"primary","disabled":true}\'\n\n# Render all components (handles CSS/SVG/font imports automatically)\nscope render all --concurrency 8\n\n# Get render as JSON\nscope render Button --format json | jq \'.screenshot\' | base64 -d > button.png\n```\n\n### Token workflows\n\n```bash\n# List all tokens\nscope tokens list\n\n# Check compliance\nscope tokens compliance --threshold 95\n\n# See what a token change impacts\nscope tokens impact --token color.primary.500\n\n# Export for Tailwind\nscope tokens export --format tailwind\n```\n\n### CI workflow\n\n```bash\n# Full compliance check\nscope ci --json\n\n# In GitHub Actions \u2014 use the reusable workflow\n# .github/workflows/ci.yml:\n# uses: FlatFilers/Scope/.github/workflows/scope-ci.yml@main\n```\n\n---\n\n## Error Patterns\n\n| Error | Cause | Fix |\n|-------|-------|-----|\n| `"React root not found"` | App not running, wrong URL, or Vite HMR interfering | Use `scope capture --wait 2000` |\n| `"Component not in manifest"` | Manifest is stale | Run `scope manifest generate` first |\n| `"Manifest not found"` | Missing manifest | Run `scope init` or `scope manifest generate` |\n| `"requiredContexts missing"` | Component needs a provider | Add provider presets to `reactscope.config.json` |\n| Blank PNG / 16\xD76px renders | No globalCSS injected (common with Tailwind) | Set `components.wrappers.globalCSS` in config; run `scope doctor` to verify |\n| `"Invalid props JSON"` | Malformed JSON in `--props` | Use single outer quotes: `--props \'{"key":"val"}\'` |\n| `"SCOPE_CAPTURE_JSON not available"` | Scope runtime not injected before React loaded | Fixed in PR #83 \u2014 update CLI |\n| `"No React DevTools hook found"` | Hook instrumentation init order bug | Fixed in PR #83 \u2014 update CLI |\n| `"ERR_MODULE_NOT_FOUND"` after tokens commands | Old Node shebang in CLI binary | Fixed in PR #90 \u2014 CLI now uses `#!/usr/bin/env bun` |\n| `"version" field missing in tokens` | Token stub written by old `scope init` | Re-run `scope init --force` or add `"version": "1"` to token file |\n| `"unknown option --has-prop"` | Old CLI version | Fixed in PR #90 \u2014 update CLI |\n| Format alias error (`json`, `js`, `sass`, `tw`) | Wrong format name for `tokens export` | Use `flat-json`, `ts`, `scss`, `tailwind`; CLI shows "Did you mean?" hint |\n\n---\n\n## `reactscope.config.json`\n\n```json\n{\n  "components": {\n    "wrappers": {\n      "globalCSS": ["src/styles.css"]\n    }\n  },\n  "tokens": {\n    "file": "reactscope.tokens.json"\n  },\n  "collections": [\n    { "name": "Forms", "description": "Form inputs and controls", "patterns": ["src/forms/**"] },\n    { "name": "Primitives", "patterns": ["src/primitives/**"] }\n  ],\n  "internalPatterns": ["src/internal/**"],\n  "providers": {\n    "theme": { "component": "ThemeProvider", "props": { "theme": "light" } },\n    "router": { "component": "MemoryRouter", "props": { "initialEntries": ["/"] } }\n  }\n}\n```\n\n**Built-in mock providers** (always available, no config needed):\n- `ThemeContext` \u2192 `{ theme: \'light\' }` (or `--theme <name>`)\n- `LocaleContext` \u2192 `{ locale: \'en-US\' }`\n\n---\n\n## What Scope Cannot Do\n\n- **Runtime state**: `useState` values after user interaction\n- **Network requests**: `fetch`, `XHR`, `WebSocket`\n- **User interactions**: click, type, hover, drag\n- **Auth/session-gated components**: components that redirect or throw without a session\n- **Server components (RSC)**: React Server Components\n- **Dynamic CSS**: CSS-in-JS styles computed at runtime from props Scope can\'t infer\n\n---\n\n## Version History\n\n| Version | Date | Summary |\n|---------|------|---------|\n| v1.0 | 2026-03-11 | Initial SKILL.md (PR #36) \u2014 manifest, render, capture, tree, report, tokens, ci commands |\n| v1.1 | 2026-03-11 | Updated through PR #82 \u2014 Phase 2 CLI commands complete |\n| v1.2 | 2026-03-13 | PRs #83\u2013#95: runtime injection fix, dogfooding fixes (12 bugs), `scope doctor`, `scope init` auto-manifest, globalCSS render warning, collections & internal components feature |\n';
+
+// src/get-skill-command.ts
+function createGetSkillCommand() {
+  return new commander.Command("get-skill").description(
+    'Print the embedded Scope SKILL.md to stdout.\n\nAgents: pipe this command into your context loader to bootstrap Scope knowledge.\nThe skill covers: when to use each command, config requirements, output format,\nrender engine selection, and common failure modes.\n\nEMBEDDED AT BUILD TIME \u2014 works in any install context (global npm, npx, local).\n\nExamples:\n  scope get-skill                     # raw markdown to stdout\n  scope get-skill --json              # { "skill": "..." } for structured ingestion\n  scope get-skill | head -50          # preview the skill\n  scope get-skill > /tmp/SKILL.md     # save locally'
+  ).option("--json", "Wrap output in JSON { skill: string } instead of raw markdown").action((opts) => {
+    if (opts.json) {
+      process.stdout.write(`${JSON.stringify({ skill: SKILL_CONTENT }, null, 2)}
+`);
+    } else {
+      process.stdout.write(SKILL_CONTENT);
+    }
+  });
+}
 function hasConfigFile(dir, stem) {
   if (!fs.existsSync(dir)) return false;
   try {
@@ -1223,9 +1421,9 @@ function createRL() {
   });
 }
 async function ask(rl, question) {
-  return new Promise((resolve18) => {
+  return new Promise((resolve19) => {
     rl.question(question, (answer) => {
-      resolve18(answer.trim());
+      resolve19(answer.trim());
     });
   });
 }
@@ -1300,7 +1498,7 @@ function extractTailwindTokens(tokenSources) {
             }
           }
           if (Object.keys(colorTokens).length > 0) {
-            tokens["color"] = colorTokens;
+            tokens.color = colorTokens;
           }
         }
       }
@@ -1313,7 +1511,7 @@ function extractTailwindTokens(tokenSources) {
         for (const [key, val] of Object.entries(spacingValues)) {
           spacingTokens[key] = { value: val, type: "dimension" };
         }
-        tokens["spacing"] = spacingTokens;
+        tokens.spacing = spacingTokens;
       }
     }
     const fontFamilyMatch = raw.match(/fontFamily\s*:\s*\{([\s\S]*?)\n\s*\}/);
@@ -1326,7 +1524,7 @@ function extractTailwindTokens(tokenSources) {
         }
       }
       if (Object.keys(fontTokens).length > 0) {
-        tokens["font"] = fontTokens;
+        tokens.font = fontTokens;
       }
     }
     const borderRadiusMatch = raw.match(/borderRadius\s*:\s*\{([\s\S]*?)\n\s*\}/);
@@ -1337,7 +1535,7 @@ function extractTailwindTokens(tokenSources) {
         for (const [key, val] of Object.entries(radiusValues)) {
           radiusTokens[key] = { value: val, type: "dimension" };
         }
-        tokens["radius"] = radiusTokens;
+        tokens.radius = radiusTokens;
       }
     }
     return Object.keys(tokens).length > 0 ? tokens : null;
@@ -1456,7 +1654,28 @@ async function runInit(options) {
     process.stdout.write(`     ${p}
 `);
   }
-  process.stdout.write("\n   Next steps: run `scope manifest` to scan your components.\n\n");
+  process.stdout.write("\n   Scanning components...\n");
+  try {
+    const manifestConfig = {
+      include: config.components.include,
+      rootDir
+    };
+    const manifest$1 = await manifest.generateManifest(manifestConfig);
+    const manifestCount = Object.keys(manifest$1.components).length;
+    const manifestOutPath = path.join(rootDir, config.output.dir, "manifest.json");
+    fs.mkdirSync(path.join(rootDir, config.output.dir), { recursive: true });
+    fs.writeFileSync(manifestOutPath, `${JSON.stringify(manifest$1, null, 2)}
+`);
+    process.stdout.write(
+      `   Found ${manifestCount} component(s) \u2014 manifest written to ${manifestOutPath}
+`
+    );
+  } catch {
+    process.stdout.write(
+      "   (manifest generate skipped \u2014 run `scope manifest generate` manually)\n"
+    );
+  }
+  process.stdout.write("\n");
   return {
     success: true,
     message: "Project initialised successfully.",
@@ -1465,7 +1684,9 @@ async function runInit(options) {
   };
 }
 function createInitCommand() {
-  return new commander.Command("init").description("Initialise a Scope project \u2014 scaffold reactscope.config.json and friends").option("-y, --yes", "Accept all detected defaults without prompting", false).option("--force", "Overwrite existing reactscope.config.json if present", false).action(async (opts) => {
+  return new commander.Command("init").description(
+    "Auto-detect your project layout and scaffold reactscope.config.json.\n\nWHAT IT DOES:\n  - Detects component glob patterns from tsconfig / package.json / directory scan\n  - Detects globalCSS files (Tailwind, PostCSS)\n  - Writes reactscope.config.json with all detected values\n  - Adds .reactscope/ to .gitignore\n  - Creates .reactscope/ output directory\n\nCONFIG FIELDS GENERATED:\n  components.include      glob patterns for component discovery\n  components.wrappers     providers + globalCSS to inject on every render\n  render.viewport         default viewport (1280\xD7800)\n  tokens.file             path to reactscope.tokens.json\n  output.dir              .reactscope/ (all outputs go here)\n  ci.complianceThreshold  0.90 (90% on-token required to pass CI)\n\nSafe to re-run \u2014 will not overwrite existing config unless --force.\n\nExamples:\n  scope init\n  scope init --yes          # accept all detected defaults, no prompts\n  scope init --force        # overwrite existing config"
+  ).option("-y, --yes", "Accept all detected defaults without prompting", false).option("--force", "Overwrite existing reactscope.config.json if present", false).action(async (opts) => {
     try {
       const result = await runInit({ yes: opts.yes, force: opts.force });
       if (!result.success && !result.skipped) {
@@ -1494,34 +1715,56 @@ function resolveFormat(formatFlag) {
   return isTTY() ? "table" : "json";
 }
 function registerList(manifestCmd) {
-  manifestCmd.command("list").description("List all components in the manifest").option("--format <fmt>", "Output format: json or table (default: auto-detect)").option("--filter <glob>", "Filter components by name glob pattern").option("--manifest <path>", "Path to manifest.json", MANIFEST_PATH).action((opts) => {
-    try {
-      const manifest = loadManifest(opts.manifest);
-      const format = resolveFormat(opts.format);
-      let entries = Object.entries(manifest.components);
-      if (opts.filter !== void 0) {
-        const filterPattern = opts.filter ?? "";
-        entries = entries.filter(([name]) => matchGlob(filterPattern, name));
-      }
-      const rows = entries.map(([name, descriptor]) => ({
-        name,
-        file: descriptor.filePath,
-        complexityClass: descriptor.complexityClass,
-        hookCount: descriptor.detectedHooks.length,
-        contextCount: descriptor.requiredContexts.length
-      }));
-      const output = format === "json" ? formatListJson(rows) : formatListTable(rows);
-      process.stdout.write(`${output}
+  manifestCmd.command("list").description(
+    `List all components in the manifest as a table (TTY) or JSON (piped).
+
+Examples:
+  scope manifest list
+  scope manifest list --format json | jq '.[].name'
+  scope manifest list --filter "Button*"`
+  ).option("--format <fmt>", "Output format: json or table (default: auto-detect)").option("--filter <glob>", "Filter components by name glob pattern").option("--collection <name>", "Filter to only components in the named collection").option("--internal", "Show only internal components").option("--no-internal", "Hide internal components from output").option("--manifest <path>", "Path to manifest.json", MANIFEST_PATH).action(
+    (opts) => {
+      try {
+        const manifest = loadManifest(opts.manifest);
+        const format = resolveFormat(opts.format);
+        let entries = Object.entries(manifest.components);
+        if (opts.filter !== void 0) {
+          const filterPattern = opts.filter ?? "";
+          entries = entries.filter(([name]) => matchGlob(filterPattern, name));
+        }
+        if (opts.collection !== void 0) {
+          const col = opts.collection;
+          entries = entries.filter(([, d]) => d.collection === col);
+        }
+        if (opts.internal === true) {
+          entries = entries.filter(([, d]) => d.internal);
+        } else if (opts.internal === false) {
+          entries = entries.filter(([, d]) => !d.internal);
+        }
+        const rows = entries.map(([name, descriptor]) => ({
+          name,
+          file: descriptor.filePath,
+          complexityClass: descriptor.complexityClass,
+          hookCount: descriptor.detectedHooks.length,
+          contextCount: descriptor.requiredContexts.length,
+          collection: descriptor.collection,
+          internal: descriptor.internal
+        }));
+        const output = format === "json" ? formatListJson(rows) : formatListTable(rows);
+        process.stdout.write(`${output}
 `);
-    } catch (err) {
-      process.stderr.write(`Error: ${err instanceof Error ? err.message : String(err)}
+      } catch (err) {
+        process.stderr.write(`Error: ${err instanceof Error ? err.message : String(err)}
 `);
-      process.exit(1);
+        process.exit(1);
+      }
     }
-  });
+  );
 }
 function registerGet(manifestCmd) {
-  manifestCmd.command("get <name>").description("Get full details of a single component by name").option("--format <fmt>", "Output format: json or table (default: auto-detect)").option("--manifest <path>", "Path to manifest.json", MANIFEST_PATH).action((name, opts) => {
+  manifestCmd.command("get <name>").description(
+    "Get full details of a single component: props, hooks, complexity class, file path.\n\nExamples:\n  scope manifest get Button\n  scope manifest get Button --format json\n  scope manifest get Button --format json | jq '.complexity'"
+  ).option("--format <fmt>", "Output format: json or table (default: auto-detect)").option("--manifest <path>", "Path to manifest.json", MANIFEST_PATH).action((name, opts) => {
     try {
       const manifest = loadManifest(opts.manifest);
       const format = resolveFormat(opts.format);
@@ -1545,10 +1788,12 @@ Available: ${available}${hint}`
   });
 }
 function registerQuery(manifestCmd) {
-  manifestCmd.command("query").description("Query components by attributes").option("--context <name>", "Find components consuming a context").option("--hook <name>", "Find components using a specific hook").option("--complexity <class>", "Filter by complexity class: simple or complex").option("--side-effects", "Find components with any side effects", false).option("--has-fetch", "Find components with fetch calls", false).option(
+  manifestCmd.command("query").description(
+    'Filter components by structural attributes. All flags are AND-combined.\n\nCOMPLEXITY CLASSES:\n  simple   \u2014 pure/presentational, no side effects, Satori-renderable\n  complex  \u2014 uses context/hooks/effects, requires BrowserPool to render\n\nExamples:\n  scope manifest query --complexity simple\n  scope manifest query --has-fetch\n  scope manifest query --hook useContext --side-effects\n  scope manifest query --has-prop "variant:union" --format json\n  scope manifest query --composed-by Layout'
+  ).option("--context <name>", "Find components consuming a context").option("--hook <name>", "Find components using a specific hook").option("--complexity <class>", "Filter by complexity class: simple or complex").option("--side-effects", "Find components with any side effects", false).option("--has-fetch", "Find components with fetch calls", false).option(
     "--has-prop <spec>",
     "Find components with a prop matching name or name:type (e.g. 'loading' or 'variant:union')"
-  ).option("--composed-by <name>", "Find components that compose the named component").option("--format <fmt>", "Output format: json or table (default: auto-detect)").option("--manifest <path>", "Path to manifest.json", MANIFEST_PATH).action(
+  ).option("--composed-by <name>", "Find components that compose the named component").option("--internal", "Find only internal components", false).option("--collection <name>", "Filter to only components in the named collection").option("--format <fmt>", "Output format: json or table (default: auto-detect)").option("--manifest <path>", "Path to manifest.json", MANIFEST_PATH).action(
     (opts) => {
       try {
         const manifest = loadManifest(opts.manifest);
@@ -1561,9 +1806,11 @@ function registerQuery(manifestCmd) {
         if (opts.hasFetch) queryParts.push("has-fetch");
         if (opts.hasProp !== void 0) queryParts.push(`has-prop=${opts.hasProp}`);
         if (opts.composedBy !== void 0) queryParts.push(`composed-by=${opts.composedBy}`);
+        if (opts.internal) queryParts.push("internal");
+        if (opts.collection !== void 0) queryParts.push(`collection=${opts.collection}`);
         if (queryParts.length === 0) {
           process.stderr.write(
-            "No query flags specified. Use --context, --hook, --complexity, --side-effects, --has-fetch, --has-prop, or --composed-by.\n"
+            "No query flags specified. Use --context, --hook, --complexity, --side-effects, --has-fetch, --has-prop, --composed-by, --internal, or --collection.\n"
           );
           process.exit(1);
         }
@@ -1608,15 +1855,24 @@ function registerQuery(manifestCmd) {
           const targetName = opts.composedBy;
           entries = entries.filter(([, d]) => {
             const composedBy = d.composedBy;
-            return composedBy !== void 0 && composedBy.includes(targetName);
+            return composedBy?.includes(targetName);
           });
         }
+        if (opts.internal) {
+          entries = entries.filter(([, d]) => d.internal);
+        }
+        if (opts.collection !== void 0) {
+          const col = opts.collection;
+          entries = entries.filter(([, d]) => d.collection === col);
+        }
         const rows = entries.map(([name, d]) => ({
           name,
           file: d.filePath,
           complexityClass: d.complexityClass,
           hooks: d.detectedHooks.join(", ") || "\u2014",
-          contexts: d.requiredContexts.join(", ") || "\u2014"
+          contexts: d.requiredContexts.join(", ") || "\u2014",
+          collection: d.collection,
+          internal: d.internal
         }));
         const output = format === "json" ? formatQueryJson(rows) : formatQueryTable(rows, queryDesc);
         process.stdout.write(`${output}
@@ -1631,7 +1887,7 @@ function registerQuery(manifestCmd) {
 }
 function registerGenerate(manifestCmd) {
   manifestCmd.command("generate").description(
-    "Generate the component manifest from source and write to .reactscope/manifest.json"
+    'Scan source files and generate .reactscope/manifest.json.\n\nUses Babel static analysis \u2014 no runtime or bundler required.\nRe-run whenever components are added, removed, or significantly changed.\n\nWHAT IT CAPTURES per component:\n  - File path and export name\n  - All props with types and default values\n  - Hook usage (useState, useEffect, useContext, custom hooks)\n  - Side effects (fetch, timers, subscriptions)\n  - Complexity class: simple | complex\n  - Context dependencies and composed child components\n\nExamples:\n  scope manifest generate\n  scope manifest generate --root ./packages/ui\n  scope manifest generate --include "src/components/**/*.tsx" --exclude "**/*.stories.tsx"\n  scope manifest generate --output ./custom-manifest.json'
   ).option("--root <path>", "Project root directory (default: cwd)").option("--output <path>", "Output path for manifest.json", MANIFEST_PATH).option("--include <globs>", "Comma-separated glob patterns to include").option("--exclude <globs>", "Comma-separated glob patterns to exclude").action(async (opts) => {
     try {
       const rootDir = path.resolve(process.cwd(), opts.root ?? ".");
@@ -1666,7 +1922,7 @@ function registerGenerate(manifestCmd) {
 }
 function createManifestCommand() {
   const manifestCmd = new commander.Command("manifest").description(
-    "Query and explore the component manifest"
+    "Query and explore the component manifest (.reactscope/manifest.json).\n\nThe manifest is the source-of-truth registry of every React component\nin your codebase \u2014 generated by static analysis (no runtime needed).\n\nRun `scope manifest generate` first, then use list/get/query to explore.\n\nExamples:\n  scope manifest generate\n  scope manifest list\n  scope manifest get Button\n  scope manifest query --complexity complex --has-fetch"
   );
   registerList(manifestCmd);
   registerGet(manifestCmd);
@@ -1982,7 +2238,19 @@ async function runHooksProfiling(componentName, filePath, props) {
 }
 function createInstrumentHooksCommand() {
   const cmd = new commander.Command("hooks").description(
-    "Profile per-hook-instance data for a component: update counts, cache hit rates, effect counts, and more"
+    `Profile per-hook-instance data for a component.
+
+METRICS CAPTURED per hook instance:
+  useState    update count, current value
+  useCallback cache hit rate (stable reference %)
+  useMemo     cache hit rate (recompute %)
+  useEffect   execution count
+  useRef      current value snapshot
+
+Examples:
+  scope instrument hooks SearchInput
+  scope instrument hooks SearchInput --props '{"value":"hello"}' --json
+  scope instrument hooks Dropdown --json | jq '.hooks[] | select(.type == "useMemo")'  `
   ).argument("<component>", "Component name (must exist in the manifest)").option("--props <json>", "Inline props JSON passed to the component", "{}").option("--manifest <path>", "Path to manifest.json", MANIFEST_PATH2).option("--format <fmt>", "Output format: json|text (default: auto)", "json").option("--show-flags", "Show heuristic flags only (useful for CI checks)", false).action(
     async (componentName, opts) => {
       try {
@@ -2266,7 +2534,19 @@ async function runInteractionProfile(componentName, filePath, props, interaction
 }
 function createInstrumentProfileCommand() {
   const cmd = new commander.Command("profile").description(
-    "Capture a full interaction-scoped performance profile: renders, timing, layout shifts"
+    `Capture a full performance profile for an interaction sequence.
+
+PROFILE INCLUDES:
+  renders       total re-renders triggered by the interaction
+  timing        interaction start \u2192 paint time (ms)
+  layoutShifts  cumulative layout shift (CLS) score
+  scriptTime    JS execution time (ms)
+  longTasks     count of tasks >50ms
+
+Examples:
+  scope instrument profile Button --interaction '[{"action":"click","target":"button"}]'
+  scope instrument profile Modal --interaction '[{"action":"click","target":".open-btn"}]' --json
+  scope instrument profile Form --json | jq '.summary.renderCount'`
   ).argument("<component>", "Component name (must exist in the manifest)").option(
     "--interaction <json>",
     `Interaction steps JSON, e.g. '[{"action":"click","target":"button.primary"}]'`,
@@ -2602,7 +2882,21 @@ async function runInstrumentTree(options) {
   }
 }
 function createInstrumentTreeCommand() {
-  return new commander.Command("tree").description("Render a component via BrowserPool and output a structured instrumentation tree").argument("<component>", "Component name to instrument (must exist in the manifest)").option("--sort-by <field>", "Sort nodes by field: renderCount | depth").option("--limit <n>", "Limit output to the first N nodes (depth-first)").option("--uses-context <name>", "Filter to components that use a specific context").option("--provider-depth", "Annotate each node with its context-provider nesting depth", false).option(
+  return new commander.Command("tree").description(
+    `Render a component and output the full instrumentation tree:
+DOM structure, computed styles per node, a11y roles, and React fibers.
+
+OUTPUT STRUCTURE per node:
+  tag / id / className    DOM identity
+  computedStyles          resolved CSS properties
+  a11y                    role, name, focusable
+  children                nested child nodes
+
+Examples:
+  scope instrument tree Card
+  scope instrument tree Button --props '{"variant":"primary"}' --json
+  scope instrument tree Input --json | jq '.tree.computedStyles'`
+  ).argument("<component>", "Component name to instrument (must exist in the manifest)").option("--sort-by <field>", "Sort nodes by field: renderCount | depth").option("--limit <n>", "Limit output to the first N nodes (depth-first)").option("--uses-context <name>", "Filter to components that use a specific context").option("--provider-depth", "Annotate each node with its context-provider nesting depth", false).option(
     "--wasted-renders",
     "Filter to components with wasted renders (no prop/state/context changes, not memoized)",
     false
@@ -2996,7 +3290,8 @@ Available: ${available}`
   }
   const rootDir = process.cwd();
   const filePath = path.resolve(rootDir, descriptor.filePath);
-  const preScript = playwright.getBrowserEntryScript() + "\n" + buildInstrumentationScript();
+  const preScript = `${playwright.getBrowserEntryScript()}
+${buildInstrumentationScript()}`;
   const htmlHarness = await buildComponentHarness(
     filePath,
     options.componentName,
@@ -3085,7 +3380,24 @@ function formatRendersTable(result) {
   return lines.join("\n");
 }
 function createInstrumentRendersCommand() {
-  return new commander.Command("renders").description("Trace re-render causality chains for a component during an interaction sequence").argument("<component>", "Component name to instrument (must be in manifest)").option(
+  return new commander.Command("renders").description(
+    `Trace every re-render triggered by an interaction and identify root causes.
+
+OUTPUT INCLUDES per render event:
+  component      which component re-rendered
+  trigger        why it re-rendered: state_change | props_change | context_change |
+                 parent_rerender | force_update | hook_dependency
+  wasted         true if re-rendered with no changed inputs and not memoized
+  chain          full causality chain from root cause to this render
+
+WASTED RENDERS: propsChanged=false AND stateChanged=false AND contextChanged=false
+AND memoized=false \u2014 these are optimisation opportunities.
+
+Examples:
+  scope instrument renders SearchPage --interaction '[{"action":"type","target":"input","text":"hello"}]'
+  scope instrument renders Button --interaction '[{"action":"click","target":"button"}]' --json
+  scope instrument renders Form --json | jq '.events[] | select(.wasted == true)'`
+  ).argument("<component>", "Component name to instrument (must be in manifest)").option(
     "--interaction <json>",
     `Interaction sequence JSON, e.g. '[{"action":"click","target":"button"}]'`,
     "[]"
@@ -3131,7 +3443,28 @@ function createInstrumentRendersCommand() {
 }
 function createInstrumentCommand() {
   const instrumentCmd = new commander.Command("instrument").description(
-    "Structured instrumentation commands for React component analysis"
+    `Runtime instrumentation for React component behaviour analysis.
+
+All instrument commands:
+  1. Build an esbuild harness for the component
+  2. Load it in a Playwright browser
+  3. Inject instrumentation hooks into React DevTools fiber
+  4. Execute interactions and collect events
+
+PREREQUISITES:
+  scope manifest generate   (component must be in manifest)
+  reactscope.config.json    (for wrappers/globalCSS)
+
+INTERACTION FORMAT:
+  JSON array of step objects: [{action, target, text?}]
+  Actions: click | type | focus | blur | hover | key
+  Target: CSS selector for the element to interact with
+
+Examples:
+  scope instrument renders Button --interaction '[{"action":"click","target":"button"}]'
+  scope instrument hooks SearchInput --props '{"value":"hello"}'
+  scope instrument profile Modal --interaction '[{"action":"click","target":".open-btn"}]'
+  scope instrument tree Card`
   );
   instrumentCmd.addCommand(createInstrumentRendersCommand());
   instrumentCmd.addCommand(createInstrumentHooksCommand());
@@ -3370,7 +3703,7 @@ function buildRenderer(filePath, componentName, viewportWidth, viewportHeight, g
             }
           });
           return [...set];
-        });
+        }) ?? [];
         const projectCss2 = await getCompiledCssForClasses(rootDir, classes);
         if (projectCss2 != null && projectCss2.length > 0) {
           await page.addStyleTag({ content: projectCss2 });
@@ -3383,49 +3716,147 @@ function buildRenderer(filePath, componentName, viewportWidth, viewportHeight, g
             `Component "${componentName}" rendered with zero bounding box \u2014 it may be invisible or not mounted`
           );
         }
-        const PAD = 24;
-        const MIN_W = 320;
-        const MIN_H = 200;
+        const PAD = 8;
         const clipX = Math.max(0, boundingBox.x - PAD);
         const clipY = Math.max(0, boundingBox.y - PAD);
         const rawW = boundingBox.width + PAD * 2;
         const rawH = boundingBox.height + PAD * 2;
-        const clipW = Math.max(rawW, MIN_W);
-        const clipH = Math.max(rawH, MIN_H);
-        const safeW = Math.min(clipW, viewportWidth - clipX);
-        const safeH = Math.min(clipH, viewportHeight - clipY);
+        const safeW = Math.min(rawW, viewportWidth - clipX);
+        const safeH = Math.min(rawH, viewportHeight - clipY);
         const screenshot = await page.screenshot({
           clip: { x: clipX, y: clipY, width: safeW, height: safeH },
           type: "png"
         });
+        const STYLE_PROPS = [
+          "display",
+          "width",
+          "height",
+          "color",
+          "backgroundColor",
+          "fontSize",
+          "fontFamily",
+          "fontWeight",
+          "lineHeight",
+          "padding",
+          "paddingTop",
+          "paddingRight",
+          "paddingBottom",
+          "paddingLeft",
+          "margin",
+          "marginTop",
+          "marginRight",
+          "marginBottom",
+          "marginLeft",
+          "gap",
+          "borderRadius",
+          "borderWidth",
+          "borderColor",
+          "borderStyle",
+          "boxShadow",
+          "opacity",
+          "position",
+          "flexDirection",
+          "alignItems",
+          "justifyContent",
+          "overflow"
+        ];
+        const _domResult = await page.evaluate(
+          (args) => {
+            let count = 0;
+            const styles = {};
+            function captureStyles(el, id, propList) {
+              const computed = window.getComputedStyle(el);
+              const out = {};
+              for (const prop of propList) {
+                const val = computed[prop] ?? "";
+                if (val && val !== "none" && val !== "normal" && val !== "auto") out[prop] = val;
+              }
+              styles[id] = out;
+            }
+            function walk(node) {
+              if (node.nodeType === Node.TEXT_NODE) {
+                return {
+                  tag: "#text",
+                  attrs: {},
+                  text: node.textContent?.trim() ?? "",
+                  children: []
+                };
+              }
+              const el = node;
+              const id = count++;
+              captureStyles(el, id, args.props);
+              const attrs = {};
+              for (const attr of Array.from(el.attributes)) {
+                attrs[attr.name] = attr.value;
+              }
+              const children = Array.from(el.childNodes).filter(
+                (n) => n.nodeType === Node.ELEMENT_NODE || n.nodeType === Node.TEXT_NODE && (n.textContent?.trim() ?? "").length > 0
+              ).map(walk);
+              return { tag: el.tagName.toLowerCase(), attrs, nodeId: id, children };
+            }
+            const root = document.querySelector(args.sel);
+            if (!root)
+              return {
+                tree: { tag: "div", attrs: {}, children: [] },
+                elementCount: 0,
+                nodeStyles: {}
+              };
+            return { tree: walk(root), elementCount: count, nodeStyles: styles };
+          },
+          { sel: "[data-reactscope-root] > *", props: STYLE_PROPS }
+        );
+        const domTree = _domResult?.tree ?? { tag: "div", attrs: {}, children: [] };
+        const elementCount = _domResult?.elementCount ?? 0;
+        const nodeStyles = _domResult?.nodeStyles ?? {};
         const computedStyles = {};
-        const styles = await page.evaluate((sel) => {
-          const el = document.querySelector(sel);
-          if (el === null) return {};
-          const computed = window.getComputedStyle(el);
-          const out = {};
-          for (const prop of [
-            "display",
-            "width",
-            "height",
-            "color",
-            "backgroundColor",
-            "fontSize",
-            "fontFamily",
-            "padding",
-            "margin"
-          ]) {
-            out[prop] = computed.getPropertyValue(prop);
+        if (nodeStyles[0]) computedStyles["[data-reactscope-root] > *"] = nodeStyles[0];
+        for (const [nodeId, styles] of Object.entries(nodeStyles)) {
+          computedStyles[`#node-${nodeId}`] = styles;
+        }
+        const dom = {
+          tree: domTree,
+          elementCount,
+          boundingBox: {
+            x: boundingBox.x,
+            y: boundingBox.y,
+            width: boundingBox.width,
+            height: boundingBox.height
           }
-          return out;
-        }, "[data-reactscope-root] > *");
-        computedStyles["[data-reactscope-root] > *"] = styles;
+        };
+        const a11yInfo = await page.evaluate((sel) => {
+          const wrapper = document.querySelector(sel);
+          const el = wrapper?.firstElementChild ?? wrapper;
+          if (!el) return { role: "generic", name: "" };
+          return {
+            role: el.getAttribute("role") ?? el.tagName.toLowerCase() ?? "generic",
+            name: el.getAttribute("aria-label") ?? el.getAttribute("aria-labelledby") ?? el.textContent?.trim().slice(0, 100) ?? ""
+          };
+        }, "[data-reactscope-root]") ?? {
+          role: "generic",
+          name: ""
+        };
+        const imgViolations = await page.evaluate((sel) => {
+          const container = document.querySelector(sel);
+          if (!container) return [];
+          const issues = [];
+          container.querySelectorAll("img").forEach((img) => {
+            if (!img.alt) issues.push("Image missing accessible name");
+          });
+          return issues;
+        }, "[data-reactscope-root]") ?? [];
+        const accessibility = {
+          role: a11yInfo.role,
+          name: a11yInfo.name,
+          violations: imgViolations
+        };
         return {
           screenshot,
           width: Math.round(safeW),
           height: Math.round(safeH),
           renderTimeMs,
-          computedStyles
+          computedStyles,
+          dom,
+          accessibility
         };
       } finally {
         pool.release(slot);
@@ -3463,7 +3894,27 @@ Available: ${available}`
   return { __default__: {} };
 }
 function registerRenderSingle(renderCmd) {
-  renderCmd.command("component <component>", { isDefault: true }).description("Render a single component to PNG or JSON").option("--props <json>", `Inline props JSON, e.g. '{"variant":"primary"}'`).option("--scenario <name>", "Run a named scenario from the component's .scope file").option("--viewport <WxH>", "Viewport size e.g. 1280x720", "375x812").option("--theme <name>", "Theme name from the token system").option("-o, --output <path>", "Write PNG to file instead of stdout").option("--format <fmt>", "Output format: png or json (default: auto)").option("--manifest <path>", "Path to manifest.json", MANIFEST_PATH6).action(
+  renderCmd.command("component <component>", { isDefault: true }).description(
+    `Render one component to a PNG screenshot or JSON data object.
+
+PROP SOURCES (in priority order):
+  --scenario <name>    named scenario from <ComponentName>.scope file
+  --props <json>       inline props JSON string
+  (no flag)            component rendered with all-default props
+
+FORMAT DETECTION:
+  --format png    always write PNG
+  --format json   always write JSON render data
+  auto (default)  PNG when -o has .png extension or stdout is file;
+                  JSON when stdout is a pipe
+
+Examples:
+  scope render component Button
+  scope render component Button --props '{"variant":"primary","size":"lg"}'
+  scope render component Button --scenario hover-state -o button-hover.png
+  scope render component Card --viewport 375x812 --theme dark
+  scope render component Badge --format json | jq '.a11y'`
+  ).option("--props <json>", `Inline props JSON, e.g. '{"variant":"primary"}'`).option("--scenario <name>", "Run a named scenario from the component's .scope file").option("--viewport <WxH>", "Viewport size e.g. 1280x720", "375x812").option("--theme <name>", "Theme name from the token system").option("-o, --output <path>", "Write PNG to file instead of stdout").option("--format <fmt>", "Output format: png or json (default: auto)").option("--manifest <path>", "Path to manifest.json", MANIFEST_PATH6).action(
     async (componentName, opts) => {
       try {
         const manifest = loadManifest(opts.manifest);
@@ -3506,6 +3957,11 @@ Available: ${available}`
         const wrapperScript = scopeData?.hasWrapper === true ? await buildWrapperScript(scopeData.filePath) : void 0;
         const scenarios = buildScenarioMap(opts, scopeData);
         const globalCssFiles = loadGlobalCssFilesFromConfig(rootDir);
+        if (globalCssFiles.length === 0) {
+          process.stderr.write(
+            "warning: No globalCSS files configured. Tailwind/CSS styles will not be applied to renders.\n  Add `components.wrappers.globalCSS` to reactscope.config.json\n"
+          );
+        }
         const renderer = buildRenderer(
           filePath,
           componentName,
@@ -3583,7 +4039,9 @@ Available: ${available}`
   );
 }
 function registerRenderMatrix(renderCmd) {
-  renderCmd.command("matrix <component>").description("Render a component across a matrix of prop axes").option(
+  renderCmd.command("matrix <component>").description(
+    'Render every combination of values across one or more prop axes.\nProduces a matrix of screenshots \u2014 one cell per combination.\n\nAXES FORMAT (two equivalent forms):\n  Short:  --axes "variant:primary,ghost size:sm,md,lg"\n  JSON:   --axes {"variant":["primary","ghost"],"size":["sm","md","lg"]}\n\nCOMPOSITION CONTEXTS (--contexts):\n  Test component in different layout environments.\n  Available IDs: centered, rtl, sidebar, dark-bg, light-bg\n  (Define custom contexts in reactscope.config.json)\n\nSTRESS PRESETS (--stress):\n  Inject adversarial content to test edge cases.\n  Available IDs: text.long, text.unicode, text.empty\n\nExamples:\n  scope render matrix Button --axes "variant:primary,ghost,destructive"\n  scope render matrix Button --axes "variant:primary,ghost size:sm,lg" --sprite matrix.png\n  scope render matrix Badge --axes "type:info,warn,error" --contexts centered,rtl\n  scope render matrix Input --stress text.long,text.unicode --format json'
+  ).option(
     "--axes <spec>",
     `Axis definitions: key:v1,v2 space-separated OR JSON object e.g. 'variant:primary,ghost size:sm,lg' or '{"variant":["primary","ghost"],"size":["sm","lg"]}'`
   ).option(
@@ -3742,7 +4200,9 @@ Available: ${available}`
   );
 }
 function registerRenderAll(renderCmd) {
-  renderCmd.command("all").description("Render all components from the manifest").option("--concurrency <n>", "Max parallel renders", "4").option("--output-dir <dir>", "Output directory for renders", DEFAULT_OUTPUT_DIR).option("--manifest <path>", "Path to manifest.json", MANIFEST_PATH6).option("--format <fmt>", "Output format: json|png (default: png)", "png").action(
+  renderCmd.command("all").description(
+    "Render every component in the manifest and write to .reactscope/renders/.\n\nAlso emits .reactscope/compliance-styles.json (computed CSS class\u2192value map)\nwhich is required by `scope tokens compliance`.\n\nSCENARIO SELECTION:\n  Each component is rendered using its default scenario from its .scope file\n  if one exists, otherwise with all-default props.\n\nMATRIX AUTO-DETECTION:\n  If a component has a .scope file with a matrix block, render all\n  will render the matrix cells in addition to the default screenshot.\n\nExamples:\n  scope render all\n  scope render all --concurrency 8\n  scope render all --format json --output-dir .reactscope/renders\n  scope render all --manifest ./custom/manifest.json"
+  ).option("--concurrency <n>", "Max parallel renders", "4").option("--output-dir <dir>", "Output directory for renders", DEFAULT_OUTPUT_DIR).option("--manifest <path>", "Path to manifest.json", MANIFEST_PATH6).option("--format <fmt>", "Output format: json|png (default: png)", "png").action(
     async (opts) => {
       try {
         const manifest = loadManifest(opts.manifest);
@@ -3759,17 +4219,31 @@ function registerRenderAll(renderCmd) {
         process.stderr.write(`Rendering ${total} components (concurrency: ${concurrency})\u2026
 `);
         const results = [];
+        const complianceStylesMap = {};
         let completed = 0;
         const renderOne = async (name) => {
           const descriptor = manifest.components[name];
           if (descriptor === void 0) return;
           const filePath = path.resolve(rootDir, descriptor.filePath);
           const allCssFiles = loadGlobalCssFilesFromConfig(process.cwd());
-          const renderer = buildRenderer(filePath, name, 375, 812, allCssFiles, process.cwd());
+          const scopeData = await loadScopeFileForComponent(filePath);
+          const scenarioEntries = scopeData !== null ? Object.entries(scopeData.scenarios) : [];
+          const defaultEntry = scenarioEntries.find(([k]) => k === "default") ?? scenarioEntries[0];
+          const renderProps = defaultEntry !== void 0 ? defaultEntry[1] : {};
+          const wrapperScript = scopeData?.hasWrapper === true ? await buildWrapperScript(scopeData.filePath) : void 0;
+          const renderer = buildRenderer(
+            filePath,
+            name,
+            375,
+            812,
+            allCssFiles,
+            process.cwd(),
+            wrapperScript
+          );
           const outcome = await render.safeRender(
-            () => renderer.renderCell({}, descriptor.complexityClass),
+            () => renderer.renderCell(renderProps, descriptor.complexityClass),
             {
-              props: {},
+              props: renderProps,
               sourceLocation: {
                 file: descriptor.filePath,
                 line: descriptor.loc.start,
@@ -3809,6 +4283,77 @@ function registerRenderAll(renderCmd) {
           fs.writeFileSync(pngPath, result.screenshot);
           const jsonPath = path.resolve(outputDir, `${name}.json`);
           fs.writeFileSync(jsonPath, JSON.stringify(formatRenderJson(name, {}, result), null, 2));
+          const rawStyles = result.computedStyles["[data-reactscope-root] > *"] ?? {};
+          const compStyles = {
+            colors: {},
+            spacing: {},
+            typography: {},
+            borders: {},
+            shadows: {}
+          };
+          for (const [prop, val] of Object.entries(rawStyles)) {
+            if (!val || val === "none" || val === "") continue;
+            const lower = prop.toLowerCase();
+            if (lower.includes("color") || lower.includes("background")) {
+              compStyles.colors[prop] = val;
+            } else if (lower.includes("padding") || lower.includes("margin") || lower.includes("gap") || lower.includes("width") || lower.includes("height")) {
+              compStyles.spacing[prop] = val;
+            } else if (lower.includes("font") || lower.includes("lineheight") || lower.includes("letterspacing") || lower.includes("texttransform")) {
+              compStyles.typography[prop] = val;
+            } else if (lower.includes("border") || lower.includes("radius") || lower.includes("outline")) {
+              compStyles.borders[prop] = val;
+            } else if (lower.includes("shadow")) {
+              compStyles.shadows[prop] = val;
+            }
+          }
+          complianceStylesMap[name] = compStyles;
+          if (scopeData !== null && Object.keys(scopeData.scenarios).length >= 2) {
+            try {
+              const scenarioEntries2 = Object.entries(scopeData.scenarios);
+              const scenarioAxis = {
+                name: "scenario",
+                values: scenarioEntries2.map(([k]) => k)
+              };
+              const scenarioPropsMap = Object.fromEntries(scenarioEntries2);
+              const matrixRenderer = buildRenderer(
+                filePath,
+                name,
+                375,
+                812,
+                allCssFiles,
+                process.cwd(),
+                wrapperScript
+              );
+              const wrappedRenderer = {
+                _satori: matrixRenderer._satori,
+                async renderCell(props, cc) {
+                  const scenarioName = props.scenario;
+                  const realProps = scenarioName !== void 0 ? scenarioPropsMap[scenarioName] ?? props : props;
+                  return matrixRenderer.renderCell(realProps, cc ?? "simple");
+                }
+              };
+              const matrix = new render.RenderMatrix(wrappedRenderer, [scenarioAxis], {
+                concurrency: 2
+              });
+              const matrixResult = await matrix.render();
+              const matrixCells = matrixResult.cells.map((cell) => ({
+                axisValues: [scenarioEntries2[cell.axisIndices[0] ?? 0]?.[0] ?? ""],
+                screenshot: cell.result.screenshot.toString("base64"),
+                width: cell.result.width,
+                height: cell.result.height,
+                renderTimeMs: cell.result.renderTimeMs
+              }));
+              const existingJson = JSON.parse(fs.readFileSync(jsonPath, "utf-8"));
+              existingJson.cells = matrixCells;
+              existingJson.axisLabels = [scenarioAxis.values];
+              fs.writeFileSync(jsonPath, JSON.stringify(existingJson, null, 2));
+            } catch (matrixErr) {
+              process.stderr.write(
+                `  [warn] Matrix render for ${name} failed: ${matrixErr instanceof Error ? matrixErr.message : String(matrixErr)}
+`
+              );
+            }
+          }
           if (isTTY()) {
             process.stdout.write(
               `\u2713 ${name} \u2192 ${opts.outputDir}/${name}.png (${result.width}\xD7${result.height}, ${result.renderTimeMs.toFixed(0)}ms)
@@ -3832,6 +4377,14 @@ function registerRenderAll(renderCmd) {
         }
         await Promise.all(workers);
         await shutdownPool3();
+        const compStylesPath = path.resolve(
+          path.resolve(process.cwd(), opts.outputDir),
+          "..",
+          "compliance-styles.json"
+        );
+        fs.writeFileSync(compStylesPath, JSON.stringify(complianceStylesMap, null, 2));
+        process.stderr.write(`[scope/render] \u2713 Wrote compliance-styles.json
+`);
         process.stderr.write("\n");
         const summary = formatSummaryText(results, outputDir);
         process.stderr.write(`${summary}
@@ -3871,7 +4424,7 @@ function resolveMatrixFormat(formatFlag, spriteAlreadyWritten) {
 }
 function createRenderCommand() {
   const renderCmd = new commander.Command("render").description(
-    "Render components to PNG or JSON via esbuild + BrowserPool"
+    'Render React components to PNG screenshots or JSON render data.\n\nScope uses two render engines depending on component complexity:\n  Satori     \u2014 fast SVG\u2192PNG renderer for simple/presentational components\n  BrowserPool \u2014 Playwright headless browser for complex components\n               (context providers, hooks, async, global CSS)\n\nPREREQUISITES:\n  1. reactscope.config.json exists  (scope init)\n  2. manifest.json is up to date    (scope manifest generate)\n  3. If using globalCSS: Tailwind/PostCSS is configured in the project\n\nOUTPUTS (written to .reactscope/renders/<ComponentName>/):\n  screenshot.png     retina-quality PNG (2\xD7 physical pixels, displayed at 1\xD7)\n  render.json        props, dimensions, DOM snapshot, a11y, computed styles\n  compliance-styles.json (render all only) \u2014 token matching input\n\nExamples:\n  scope render component Button\n  scope render matrix Button --axes "variant:primary,ghost size:sm,md,lg"\n  scope render all\n  scope render all --format json --output-dir ./out'
   );
   registerRenderSingle(renderCmd);
   registerRenderMatrix(renderCmd);
@@ -4031,12 +4584,12 @@ async function runBaseline(options = {}) {
   fs.mkdirSync(rendersDir, { recursive: true });
   let manifest$1;
   if (manifestPath !== void 0) {
-    const { readFileSync: readFileSync13 } = await import('fs');
+    const { readFileSync: readFileSync14 } = await import('fs');
     const absPath = path.resolve(rootDir, manifestPath);
     if (!fs.existsSync(absPath)) {
       throw new Error(`Manifest not found at ${absPath}.`);
     }
-    manifest$1 = JSON.parse(readFileSync13(absPath, "utf-8"));
+    manifest$1 = JSON.parse(readFileSync14(absPath, "utf-8"));
     process.stderr.write(`Loaded manifest from ${manifestPath}
 `);
   } else {
@@ -5089,7 +5642,9 @@ var MIME_TYPES = {
   ".ico": "image/x-icon"
 };
 function registerBuild(siteCmd) {
-  siteCmd.command("build").description("Build a static HTML gallery from .reactscope/ output").option("-i, --input <path>", "Path to .reactscope input directory", ".reactscope").option("-o, --output <path>", "Output directory for generated site", ".reactscope/site").option("--base-path <path>", "Base URL path prefix for subdirectory deployment", "/").option("--compliance <path>", "Path to compliance batch report JSON").option("--title <text>", "Site title", "Scope \u2014 Component Gallery").action(
+  siteCmd.command("build").description(
+    'Build the static HTML site from manifest + render outputs.\n\nINPUT DIRECTORY (.reactscope/ by default) must contain:\n  manifest.json       component registry\n  renders/            screenshots and render.json files from `scope render all`\n\nOPTIONAL:\n  --compliance <path>   include token compliance scores on detail pages\n  --base-path <path>    set if deploying to a subdirectory (e.g. /ui-docs)\n\nExamples:\n  scope site build\n  scope site build --title "Design System" -o .reactscope/site\n  scope site build --compliance .reactscope/compliance-styles.json\n  scope site build --base-path /ui'
+  ).option("-i, --input <path>", "Path to .reactscope input directory", ".reactscope").option("-o, --output <path>", "Output directory for generated site", ".reactscope/site").option("--base-path <path>", "Base URL path prefix for subdirectory deployment", "/").option("--compliance <path>", "Path to compliance batch report JSON").option("--title <text>", "Site title", "Scope \u2014 Component Gallery").action(
     async (opts) => {
       try {
         const inputDir = path.resolve(process.cwd(), opts.input);
@@ -5131,7 +5686,9 @@ Run \`scope manifest generate\` first.`
   );
 }
 function registerServe(siteCmd) {
-  siteCmd.command("serve").description("Serve the built static site locally").option("-p, --port <number>", "Port to listen on", "3000").option("-d, --dir <path>", "Directory to serve", ".reactscope/site").action((opts) => {
+  siteCmd.command("serve").description(
+    "Start a local HTTP server for the built site directory.\n\nRun `scope site build` first.\nCtrl+C to stop.\n\nExamples:\n  scope site serve\n  scope site serve --port 8080\n  scope site serve --dir ./my-site-output"
+  ).option("-p, --port <number>", "Port to listen on", "3000").option("-d, --dir <path>", "Directory to serve", ".reactscope/site").action((opts) => {
     try {
       const port = Number.parseInt(opts.port, 10);
       if (Number.isNaN(port) || port < 1 || port > 65535) {
@@ -5195,7 +5752,7 @@ Run \`scope site build\` first.`
 }
 function createSiteCommand() {
   const siteCmd = new commander.Command("site").description(
-    "Build and serve the static component gallery site"
+    'Build and serve the static HTML component gallery site.\n\nPREREQUISITES:\n  scope manifest generate   (manifest.json)\n  scope render all          (renders/ + compliance-styles.json)\n\nSITE CONTENTS:\n  /index.html               component gallery with screenshots + metadata\n  /<component>/index.html   detail page: props, renders, matrix, X-Ray, compliance\n\nExamples:\n  scope site build && scope site serve\n  scope site build --title "Acme UI" --compliance .reactscope/compliance-styles.json\n  scope site serve --port 8080'
   );
   registerBuild(siteCmd);
   registerServe(siteCmd);
@@ -5333,7 +5890,9 @@ function formatComplianceReport(batch, threshold) {
   return lines.join("\n");
 }
 function registerCompliance(tokensCmd) {
-  tokensCmd.command("compliance").description("Aggregate token compliance report across all components (Token Spec \xA73.3 format)").option("--file <path>", "Path to token file (overrides config)").option("--styles <path>", `Path to compliance styles JSON (default: ${DEFAULT_STYLES_PATH})`).option("--threshold <n>", "Exit code 1 if compliance score is below this percentage (0-100)").option("--format <fmt>", "Output format: json or text (default: auto-detect)").action((opts) => {
+  tokensCmd.command("compliance").description(
+    "Compute a token compliance score across all rendered components.\n\nCompares computed CSS values from .reactscope/compliance-styles.json\nagainst the token file \u2014 reports what % of style values are on-token.\n\nPREREQUISITES:\n  scope render all must have run first (produces compliance-styles.json)\n\nSCORING:\n  compliant     value exactly matches a token\n  near-match    value is within tolerance of a token (e.g. close color)\n  off-token     value not found in token file\n\nEXIT CODES:\n  0   compliance >= threshold (or no --threshold set)\n  1   compliance < threshold\n\nExamples:\n  scope tokens compliance\n  scope tokens compliance --threshold 90\n  scope tokens compliance --format json | jq '.summary'\n  scope tokens compliance --styles ./custom/compliance-styles.json"
+  ).option("--file <path>", "Path to token file (overrides config)").option("--styles <path>", `Path to compliance styles JSON (default: ${DEFAULT_STYLES_PATH})`).option("--threshold <n>", "Exit code 1 if compliance score is below this percentage (0-100)").option("--format <fmt>", "Output format: json or text (default: auto-detect)").action((opts) => {
     try {
       const tokenFilePath = resolveTokenFilePath(opts.file);
       const { tokens: tokens$1 } = loadTokens(tokenFilePath);
@@ -5391,7 +5950,9 @@ function resolveTokenFilePath2(fileFlag) {
   return path.resolve(process.cwd(), DEFAULT_TOKEN_FILE);
 }
 function createTokensExportCommand() {
-  return new commander.Command("export").description("Export design tokens to a downstream format").requiredOption("--format <fmt>", `Output format: ${SUPPORTED_FORMATS.join(", ")}`).option("--file <path>", "Path to token file (overrides config)").option("--out <path>", "Write output to file instead of stdout").option("--prefix <prefix>", "CSS/SCSS: prefix for variable names (e.g. 'scope')").option("--selector <selector>", "CSS: custom root selector (default: ':root')").option(
+  return new commander.Command("export").description(
+    'Export design tokens to CSS variables, TypeScript, SCSS, Tailwind config, Figma, or flat JSON.\n\nFORMATS:\n  css          CSS custom properties (:root { --color-primary-500: #3b82f6; })\n  scss         SCSS variables ($color-primary-500: #3b82f6;)\n  ts           TypeScript const export (export const tokens = {...})\n  tailwind     Tailwind theme.extend block (paste into tailwind.config.js)\n  flat-json    Flat { path: value } map (useful for tooling integration)\n  figma        Figma Tokens plugin format\n\nExamples:\n  scope tokens export --format css --out src/tokens.css\n  scope tokens export --format css --prefix brand --selector ":root, [data-theme]"\n  scope tokens export --format tailwind --out tailwind-tokens.js\n  scope tokens export --format ts --out src/tokens.ts\n  scope tokens export --format css --theme dark --out dark-tokens.css'
+  ).requiredOption("--format <fmt>", `Output format: ${SUPPORTED_FORMATS.join(", ")}`).option("--file <path>", "Path to token file (overrides config)").option("--out <path>", "Write output to file instead of stdout").option("--prefix <prefix>", "CSS/SCSS: prefix for variable names (e.g. 'scope')").option("--selector <selector>", "CSS: custom root selector (default: ':root')").option(
     "--theme <name>",
     "Include theme overrides for the named theme (applies to css, ts, scss, tailwind, figma)"
   ).action(
@@ -5531,7 +6092,9 @@ function formatImpactSummary(report) {
   return `\u2192 ${parts.join(", ")}`;
 }
 function registerImpact(tokensCmd) {
-  tokensCmd.command("impact <path>").description("List all components and elements that consume a given token (Token Spec \xA74.3)").option("--file <path>", "Path to token file (overrides config)").option("--styles <path>", `Path to compliance styles JSON (default: ${DEFAULT_STYLES_PATH2})`).option("--new-value <value>", "Proposed new value \u2014 report visual severity of the change").option("--format <fmt>", "Output format: json or text (default: auto-detect)").action(
+  tokensCmd.command("impact <path>").description(
+    "List every component and CSS element that uses a given token.\nUse this to understand the blast radius before changing a token value.\n\nPREREQUISITE: scope render all (populates compliance-styles.json)\n\nExamples:\n  scope tokens impact color.primary.500\n  scope tokens impact spacing.4 --format json\n  scope tokens impact font.size.base | grep Button"
+  ).option("--file <path>", "Path to token file (overrides config)").option("--styles <path>", `Path to compliance styles JSON (default: ${DEFAULT_STYLES_PATH2})`).option("--new-value <value>", "Proposed new value \u2014 report visual severity of the change").option("--format <fmt>", "Output format: json or text (default: auto-detect)").action(
     (tokenPath, opts) => {
       try {
         const tokenFilePath = resolveTokenFilePath(opts.file);
@@ -5620,7 +6183,9 @@ async function renderComponentWithCssOverride(filePath, componentName, cssOverri
   }
 }
 function registerPreview(tokensCmd) {
-  tokensCmd.command("preview <path>").description("Render before/after sprite sheet for components affected by a token change").requiredOption("--new-value <value>", "The proposed new resolved value for the token").option("--sprite", "Output a PNG sprite sheet (default when TTY)", false).option("-o, --output <path>", "Output PNG path (default: .reactscope/previews/<token>.png)").option("--file <path>", "Path to token file (overrides config)").option("--styles <path>", `Path to compliance styles JSON (default: ${DEFAULT_STYLES_PATH3})`).option("--manifest <path>", "Path to manifest.json", DEFAULT_MANIFEST_PATH).option("--format <fmt>", "Output format: json or text (default: auto-detect)").option("--timeout <ms>", "Browser timeout per render (ms)", "10000").option("--viewport-width <px>", "Viewport width in pixels", "1280").option("--viewport-height <px>", "Viewport height in pixels", "720").action(
+  tokensCmd.command("preview <path>").description(
+    'Render before/after screenshots of all components affected by a token change.\nUseful for visual review before committing a token value update.\n\nPREREQUISITE: scope render all (provides baseline renders)\n\nExamples:\n  scope tokens preview color.primary.500\n  scope tokens preview color.primary.500 --new-value "#2563eb" -o preview.png'
+  ).requiredOption("--new-value <value>", "The proposed new resolved value for the token").option("--sprite", "Output a PNG sprite sheet (default when TTY)", false).option("-o, --output <path>", "Output PNG path (default: .reactscope/previews/<token>.png)").option("--file <path>", "Path to token file (overrides config)").option("--styles <path>", `Path to compliance styles JSON (default: ${DEFAULT_STYLES_PATH3})`).option("--manifest <path>", "Path to manifest.json", DEFAULT_MANIFEST_PATH).option("--format <fmt>", "Output format: json or text (default: auto-detect)").option("--timeout <ms>", "Browser timeout per render (ms)", "10000").option("--viewport-width <px>", "Viewport width in pixels", "1280").option("--viewport-height <px>", "Viewport height in pixels", "720").action(
     async (tokenPath, opts) => {
       try {
         const tokenFilePath = resolveTokenFilePath(opts.file);
@@ -5867,7 +6432,9 @@ function buildResolutionChain(startPath, rawTokens) {
   return chain;
 }
 function registerGet2(tokensCmd) {
-  tokensCmd.command("get <path>").description("Resolve a token path to its computed value").option("--file <path>", "Path to token file (overrides config)").option("--format <fmt>", "Output format: json or text (default: auto-detect)").action((tokenPath, opts) => {
+  tokensCmd.command("get <path>").description(
+    "Resolve a token path and print its final computed value.\nFollows all {ref} chains to the raw value.\n\nExamples:\n  scope tokens get color.primary.500\n  scope tokens get spacing.4 --format json\n  scope tokens get font.size.base --file ./tokens/brand.json"
+  ).option("--file <path>", "Path to token file (overrides config)").option("--format <fmt>", "Output format: json or text (default: auto-detect)").action((tokenPath, opts) => {
     try {
       const filePath = resolveTokenFilePath(opts.file);
       const { tokens: tokens$1 } = loadTokens(filePath);
@@ -5892,7 +6459,18 @@ function registerGet2(tokensCmd) {
   });
 }
 function registerList2(tokensCmd) {
-  tokensCmd.command("list [category]").description("List tokens, optionally filtered by category or type").option("--type <type>", "Filter by token type (color, dimension, fontFamily, etc.)").option("--file <path>", "Path to token file (overrides config)").option("--format <fmt>", "Output format: json or table (default: auto-detect)").action(
+  tokensCmd.command("list [category]").description(
+    `List all tokens, optionally filtered by category prefix or type.
+
+CATEGORY: top-level token namespace (e.g. "color", "spacing", "typography")
+TYPE: token value type \u2014 color | spacing | typography | shadow | radius | opacity
+
+Examples:
+  scope tokens list
+  scope tokens list color
+  scope tokens list --type spacing
+  scope tokens list color --format json | jq '.[].path'`
+  ).option("--type <type>", "Filter by token type (color, dimension, fontFamily, etc.)").option("--file <path>", "Path to token file (overrides config)").option("--format <fmt>", "Output format: json or table (default: auto-detect)").action(
     (category, opts) => {
       try {
         const filePath = resolveTokenFilePath(opts.file);
@@ -5922,7 +6500,9 @@ function registerList2(tokensCmd) {
   );
 }
 function registerSearch(tokensCmd) {
-  tokensCmd.command("search <value>").description("Find which token(s) match a computed value (supports fuzzy color matching)").option("--type <type>", "Restrict search to a specific token type").option("--fuzzy", "Return nearest match even if no exact match exists", false).option("--file <path>", "Path to token file (overrides config)").option("--format <fmt>", "Output format: json or table (default: auto-detect)").action(
+  tokensCmd.command("search <value>").description(
+    'Find the token(s) whose computed value matches the given raw value.\nSupports fuzzy color matching (hex \u2194 rgb \u2194 hsl equivalence).\n\nExamples:\n  scope tokens search "#3b82f6"\n  scope tokens search "16px"\n  scope tokens search "rgb(59, 130, 246)"   # fuzzy-matches #3b82f6'
+  ).option("--type <type>", "Restrict search to a specific token type").option("--fuzzy", "Return nearest match even if no exact match exists", false).option("--file <path>", "Path to token file (overrides config)").option("--format <fmt>", "Output format: json or table (default: auto-detect)").action(
     (value, opts) => {
       try {
         const filePath = resolveTokenFilePath(opts.file);
@@ -6005,7 +6585,9 @@ Tip: use --fuzzy for nearest-match search.
   );
 }
 function registerResolve(tokensCmd) {
-  tokensCmd.command("resolve <path>").description("Show the full resolution chain for a token").option("--file <path>", "Path to token file (overrides config)").option("--format <fmt>", "Output format: json or text (default: auto-detect)").action((tokenPath, opts) => {
+  tokensCmd.command("resolve <path>").description(
+    "Print the full reference chain from a token path down to its raw value.\nUseful for debugging circular references or understanding token inheritance.\n\nExamples:\n  scope tokens resolve color.primary.500\n  scope tokens resolve button.background --format json"
+  ).option("--file <path>", "Path to token file (overrides config)").option("--format <fmt>", "Output format: json or text (default: auto-detect)").action((tokenPath, opts) => {
     try {
       const filePath = resolveTokenFilePath(opts.file);
       const absFilePath = filePath;
@@ -6041,7 +6623,19 @@ function registerResolve(tokensCmd) {
 }
 function registerValidate(tokensCmd) {
   tokensCmd.command("validate").description(
-    "Validate the token file for errors (circular refs, missing refs, type mismatches)"
+    `Validate the token file and report errors.
+
+CHECKS:
+  - Circular reference chains (A \u2192 B \u2192 A)
+  - Broken references ({path.that.does.not.exist})
+  - Type mismatches (token declared as "color" but value is a number)
+  - Duplicate paths
+
+Exits 1 if any errors are found (suitable for CI).
+
+Examples:
+  scope tokens validate
+  scope tokens validate --format json | jq '.errors'`
   ).option("--file <path>", "Path to token file (overrides config)").option("--format <fmt>", "Output format: json or text (default: auto-detect)").action((opts) => {
     try {
       const filePath = resolveTokenFilePath(opts.file);
@@ -6120,7 +6714,7 @@ function outputValidationResult(filePath, errors, useJson) {
 }
 function createTokensCommand() {
   const tokensCmd = new commander.Command("tokens").description(
-    "Query and validate design tokens from a reactscope.tokens.json file"
+    'Query, validate, and export design tokens from reactscope.tokens.json.\n\nTOKEN FILE RESOLUTION (in priority order):\n  1. --file <path>                  explicit override\n  2. tokens.file in reactscope.config.json\n  3. reactscope.tokens.json         default (project root)\n\nTOKEN FILE FORMAT (reactscope.tokens.json):\n  Nested JSON. Each leaf is a token with { value, type } or just a raw value.\n  Paths use dot notation: color.primary.500, spacing.4, font.size.base\n  References use {path.to.other.token} syntax.\n  Themes: top-level "themes" key with named override maps.\n\nTOKEN TYPES: color | spacing | typography | shadow | radius | opacity | other\n\nExamples:\n  scope tokens validate\n  scope tokens list color\n  scope tokens get color.primary.500\n  scope tokens compliance\n  scope tokens export --format css --out tokens.css'
   );
   registerGet2(tokensCmd);
   registerList2(tokensCmd);
@@ -6136,8 +6730,12 @@ function createTokensCommand() {
 
 // src/program.ts
 function createProgram(options = {}) {
-  const program = new commander.Command("scope").version(options.version ?? "0.1.0").description("Scope \u2014 React instrumentation toolkit");
-  program.command("capture <url>").description("Capture a React component tree from a live URL and output as JSON").option("-o, --output <path>", "Write JSON to file instead of stdout").option("--pretty", "Pretty-print JSON output (default: minified)", false).option("--timeout <ms>", "Max wait time for React to mount (ms)", "10000").option("--wait <ms>", "Additional wait after page load before capture (ms)", "0").action(
+  const program = new commander.Command("scope").version(options.version ?? "0.1.0").description(
+    'Scope \u2014 static analysis + visual rendering toolkit for React component libraries.\n\nScope answers questions about React codebases \u2014 structure, props, visual output,\ndesign token compliance \u2014 without running the full application.\n\nQUICKSTART (new project):\n  scope init              # detect config, scaffold reactscope.config.json\n  scope doctor            # verify setup before doing anything else\n  scope manifest generate # scan source and build component manifest\n  scope render all        # screenshot every component\n  scope site build        # build HTML gallery\n  scope site serve        # open at http://localhost:3000\n\nQUICKSTART (existing project / CI):\n  scope ci                # manifest \u2192 render \u2192 compliance \u2192 regression in one step\n\nAGENT BOOTSTRAP:\n  scope get-skill         # print SKILL.md to stdout \u2014 pipe into agent context\n\nCONFIG FILE: reactscope.config.json (created by `scope init`)\n  components.include      glob patterns for component files (e.g. "src/**/*.tsx")\n  components.wrappers     providers and globalCSS to wrap every render\n  render.viewport         default viewport width\xD7height in px\n  tokens.file             path to reactscope.tokens.json (default)\n  output.dir              output root (default: .reactscope/)\n  ci.complianceThreshold  fail threshold for `scope ci` (default: 0.90)\n\nOUTPUT DIRECTORY: .reactscope/\n  manifest.json           component registry \u2014 updated by `scope manifest generate`\n  renders/<Name>/         PNGs + render.json per component\n  compliance-styles.json  computed-style map for token matching\n  site/                   static HTML gallery (built by `scope site build`)\n\nRun `scope <command> --help` for detailed flags and examples.'
+  );
+  program.command("capture <url>").description(
+    "Capture the live React component tree from a running app and emit it as JSON.\nRequires a running dev server at the given URL (e.g. http://localhost:5173).\n\nExamples:\n  scope capture http://localhost:5173\n  scope capture http://localhost:5173 -o report.json --pretty\n  scope capture http://localhost:5173 --timeout 15000 --wait 500"
+  ).option("-o, --output <path>", "Write JSON to file instead of stdout").option("--pretty", "Pretty-print JSON output (default: minified)", false).option("--timeout <ms>", "Max wait time for React to mount (ms)", "10000").option("--wait <ms>", "Additional wait after page load before capture (ms)", "0").action(
     async (url, opts) => {
       try {
         const { report } = await browserCapture({
@@ -6161,7 +6759,9 @@ function createProgram(options = {}) {
       }
     }
   );
-  program.command("tree <url>").description("Display the React component tree from a live URL").option("--depth <n>", "Max depth to display (default: unlimited)").option("--show-props", "Include prop names next to components", false).option("--show-hooks", "Show hook counts per component", false).option("--timeout <ms>", "Max wait time for React to mount (ms)", "10000").option("--wait <ms>", "Additional wait after page load before capture (ms)", "0").action(
+  program.command("tree <url>").description(
+    "Print a formatted React component tree from a running app.\nUseful for quickly understanding component hierarchy without full capture.\n\nExamples:\n  scope tree http://localhost:5173\n  scope tree http://localhost:5173 --show-props --show-hooks\n  scope tree http://localhost:5173 --depth 4"
+  ).option("--depth <n>", "Max depth to display (default: unlimited)").option("--show-props", "Include prop names next to components", false).option("--show-hooks", "Show hook counts per component", false).option("--timeout <ms>", "Max wait time for React to mount (ms)", "10000").option("--wait <ms>", "Additional wait after page load before capture (ms)", "0").action(
     async (url, opts) => {
       try {
         const { report } = await browserCapture({
@@ -6184,7 +6784,9 @@ function createProgram(options = {}) {
       }
     }
   );
-  program.command("report <url>").description("Capture and display a human-readable summary of a React app").option("--json", "Output as structured JSON instead of human-readable text", false).option("--timeout <ms>", "Max wait time for React to mount (ms)", "10000").option("--wait <ms>", "Additional wait after page load before capture (ms)", "0").action(
+  program.command("report <url>").description(
+    "Capture a React app and print a human-readable analysis summary.\nIncludes component count, hook usage, side-effect summary, and more.\n\nExamples:\n  scope report http://localhost:5173\n  scope report http://localhost:5173 --json\n  scope report http://localhost:5173 --json -o report.json"
+  ).option("--json", "Output as structured JSON instead of human-readable text", false).option("--timeout <ms>", "Max wait time for React to mount (ms)", "10000").option("--wait <ms>", "Additional wait after page load before capture (ms)", "0").action(
     async (url, opts) => {
       try {
         const { report } = await browserCapture({
@@ -6208,7 +6810,9 @@ function createProgram(options = {}) {
       }
     }
   );
-  program.command("generate").description("Generate a Playwright test from a Scope trace file").argument("<trace>", "Path to a serialized Scope trace (.json)").option("-o, --output <path>", "Output file path", "scope.spec.ts").option("-d, --description <text>", "Test description").action((tracePath, opts) => {
+  program.command("generate").description(
+    'Generate a Playwright test file from a Scope trace (.json).\nTraces are produced by scope instrument renders or scope capture.\n\nExamples:\n  scope generate trace.json\n  scope generate trace.json -o tests/scope.spec.ts -d "User login flow"'
+  ).argument("<trace>", "Path to a serialized Scope trace (.json)").option("-o, --output <path>", "Output file path", "scope.spec.ts").option("-d, --description <text>", "Test description").action((tracePath, opts) => {
     const raw = fs.readFileSync(tracePath, "utf-8");
     const trace = playwright.loadTrace(raw);
     const source = playwright.generateTest(trace, {
@@ -6224,6 +6828,8 @@ function createProgram(options = {}) {
   program.addCommand(createInstrumentCommand());
   program.addCommand(createInitCommand());
   program.addCommand(createCiCommand());
+  program.addCommand(createDoctorCommand());
+  program.addCommand(createGetSkillCommand());
   const existingReportCmd = program.commands.find((c) => c.name() === "report");
   if (existingReportCmd !== void 0) {
     registerBaselineSubCommand(existingReportCmd);
@@ -6236,6 +6842,8 @@ function createProgram(options = {}) {
 
 exports.CI_EXIT = CI_EXIT;
 exports.createCiCommand = createCiCommand;
+exports.createDoctorCommand = createDoctorCommand;
+exports.createGetSkillCommand = createGetSkillCommand;
 exports.createInitCommand = createInitCommand;
 exports.createInstrumentCommand = createInstrumentCommand;
 exports.createManifestCommand = createManifestCommand;