@aayambansal/squint 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Aayam Bansal
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,150 @@
+# squint
+
+**Lovable for your terminal.** squint is a frontend harness that sits on top of the coding agents you already have — Claude Code, Codex CLI, Gemini CLI, OpenCode, Amp, Cursor CLI, Copilot CLI, Aider — and turns them into a design-obsessed app builder that works on **any repo**, local-first.
+
+Lovable proved the loop: prompt → generate → preview → auto-fix → iterate. But it's a closed SaaS. You can't point it at an existing codebase, choose your agent or model, or own the loop. squint is that missing layer, in your terminal.
+
+```
+┌──────────────────────────────────────────────────────────┐
+│  ❯ make the pricing page feel premium                    │
+│  ⚙ Read · src/pages/Pricing.tsx                          │
+│  ⚙ Edit · src/pages/Pricing.tsx                          │
+│  Reworked the tier cards around a real type scale and    │
+│  tightened the palette to ink + one accent…              │
+│  · done · 41s · $0.18                                    │
+│  ✗ dev server: 1 error line(s)                           │
+│    error TS2304: Cannot find name 'Tier'                 │
+│  · auto-fix attempt 1/2                                  │
+│  ⛑ fix dev server errors                                 │
+│  · done · 12s · $0.05                                    │
+│                                                          │
+│  ❯ ▏                                                     │
+│  claude · my-app · http://localhost:5173 · /help         │
+└──────────────────────────────────────────────────────────┘
+```
+
+## The loop
+
+1. **You describe.** Every ask is wrapped in squint's design brief — an opinionated standard built from studying Lovable's leaked prompts, v0's design rules, and the documented catalog of "AI slop" tells: commit to a direction before code, tokens are the system, banned generic patterns, real craft details. Override per project with `.squint/brief.md`.
+2. **Your agent builds.** squint drives whichever engine you choose, headlessly, streaming its work into the transcript token by token.
+3. **The dev server judges.** squint runs your dev server, watches for build errors after every turn, and routes fresh breakage straight back to the engine (`/fix`, or automatic with `autoFix`).
+4. **The runtime is watched.** After every clean turn, squint loads the page headlessly (CDP over Chrome, ~2s) and catches what the dev server never prints — blank pages, uncaught exceptions, console errors, failed requests — and feeds those back too.
+5. **The agent looks at its work.** `/review` screenshots the running app at mobile/tablet/desktop and re-prompts the engine to critique what it can *see* — then fix it.
+6. **Gates keep it honest.** `/check` runs typecheck → lint → test → build and feeds failures back, with instructions not to weaken the checks.
+7. **Everything is reversible.** Each ask is snapshotted via git plumbing; `/undo` reverts the whole turn — while your own uncommitted work survives.
+8. **Point at things.** `squint tag` (wired automatically in new apps) adds an element picker to your dev server: **Alt+S**, click any element, and a self-locating reference (`src/App.tsx <h1 class="…"> "Ready."`) lands on your clipboard to paste into squint.
+9. **Explore in parallel.** `squint variants gen 3 "landing page for …"` builds the same ask three ways — three git worktrees, three *different* committed aesthetic directions, one screenshot each. Pick with your eyes, `squint variants apply <id>`.
+
+## Install
+
+```sh
+npm install -g @aayambansal/squint   # then just: squint
+npx @aayambansal/squint              # or run without installing
+```
+
+From source:
+
+```sh
+git clone https://github.com/aayambansal/squint.git
+cd squint
+npm install && npm run build && npm link
+```
+
+You need at least one engine installed (`squint doctor` shows what's found):
+
+| Engine | id | Install |
+| --- | --- | --- |
+| Claude Code | `claude` | `npm i -g @anthropic-ai/claude-code` |
+| Codex CLI | `codex` | `npm i -g @openai/codex` |
+| Gemini CLI | `gemini` | `npm i -g @google/gemini-cli` |
+| OpenCode | `opencode` | `npm i -g opencode-ai` |
+| Amp | `amp` | `npm i -g @sourcegraph/amp` |
+| Cursor CLI | `cursor` | `curl https://cursor.com/install -fsS \| bash` |
+| Copilot CLI | `copilot` | `npm i -g @github/copilot` |
+| Aider | `aider` | `pip install aider-install && aider-install` |
+
+API keys stay wherever your agent CLIs already read them — squint stores no secrets.
+
+## Use
+
+**Start fresh** (Lovable-style, from nothing):
+
+```sh
+squint init my-app        # Vite + React + TS + Tailwind v4, token-first CSS
+cd my-app && squint       # open the TUI, describe what to build
+```
+
+**Or on any existing repo:**
+
+```sh
+cd your-project && squint
+```
+
+**Headless / scriptable:**
+
+```sh
+squint run "add a dark mode toggle to the navbar"
+squint run -e codex -m gpt-5 "tighten the hero spacing"
+squint run --json "…"             # normalized ndjson events for scripting
+squint check                      # quality gates: typecheck → lint → test → build
+squint shot http://localhost:5173 # screenshots at 390/768/1440
+squint brief                      # list design directions; squint brief terminal commits one
+squint engines                    # what's installed
+squint doctor                     # engines + Chrome + WebSocket check
+squint tag                        # add the Alt+S element picker to any Vite app
+squint variants gen 3 "<ask>"     # 3 parallel design explorations (3 engine runs)
+squint variants apply terminal    # keep the winner, discard the rest
+```
+
+**Commit a design direction** so every session holds the same look:
+
+```sh
+squint brief                 # editorial-minimal · terminal · warm-editorial · data-dense
+                             # cinematic-dark · playful · brutalist
+squint brief cinematic-dark  # writes .squint/brief.md — plain markdown, made to remix
+```
+
+**Configure** (global `~/.config/squint/config.json`, per-repo `.squint/config.json`):
+
+```sh
+squint config set engine claude
+squint config set models.claude claude-sonnet-5
+squint config set autoDev true              # start the dev server with the TUI
+squint config set autoFix true              # auto-send build/runtime errors back (max 2 tries)
+squint config set autoProbe false           # disable the post-turn runtime probe
+squint config set --project engine codex    # per-repo override
+```
+
+**Inside the TUI:**
+
+| Command | What it does |
+| --- | --- |
+| `/dev` | start/stop the project dev server (auto-detected script + package manager) |
+| `/check` | run quality gates |
+| `/fix` | send captured errors / failed gates to the engine |
+| `/shot` | screenshot the app at mobile/tablet/desktop |
+| `/review [focus]` | screenshots + the engine critiques its own rendered work, then fixes it |
+| `/undo` | revert the whole last ask (your own uncommitted work survives) |
+| `/resume` | pick the previous session back up after a restart |
+| `/engine <id>` · `/model <name>` | switch backend or model mid-session |
+| `/clear` | new session |
+| `Esc` | interrupt the running turn · `↑/↓` prompt history |
+
+## Design decisions
+
+- **Engines are dumb translators.** Each adapter is ~80 lines: build a headless invocation, parse the stream into one normalized event model. Claude Code, Amp, and Cursor share a single wire-protocol parser. All product behavior lives in the harness, so adding an engine is cheap.
+- **The brief is the product.** Direction-before-code, token-first, banned-tells — encoded from research (`docs/research/`), not vibes.
+- **Zero-dependency eyes.** Screenshots use Chrome's own one-shot headless mode — no Playwright/Puppeteer install.
+- **Sessions resume** where engines support it (Claude `--resume`, Codex `exec resume`, OpenCode `--session`, Amp threads, Cursor chats).
+
+## Roadmap
+
+- npm distribution
+- Variants inside the TUI with an inline picker
+- Deeper gates: axe accessibility audits, Lighthouse budgets, visual regression baselines
+
+Architecture notes in `docs/design/`, research base in `docs/research/`.
+
+## License
+
+MIT © Aayam Bansal

package/dist/cdp-5OHNGQXV.js

@@ -0,0 +1,9 @@
+#!/usr/bin/env node
+import {
+  cdpCapture,
+  hasWebSocket
+} from "./chunk-OJTW5SYY.js";
+export {
+  cdpCapture,
+  hasWebSocket
+};

package/dist/chrome-4WNYZZ42.js

@@ -0,0 +1,10 @@
+#!/usr/bin/env node
+import {
+  findChrome,
+  screenshot
+} from "./chunk-MURKQ7SI.js";
+import "./chunk-YIVPCWSG.js";
+export {
+  findChrome,
+  screenshot
+};

package/dist/chunk-43VZK47W.js

@@ -0,0 +1,118 @@
+#!/usr/bin/env node
+
+// src/gates/gates.ts
+import { spawn } from "child_process";
+import fs from "fs";
+import path from "path";
+function detectGates(cwd) {
+  let pkg;
+  try {
+    pkg = JSON.parse(fs.readFileSync(path.join(cwd, "package.json"), "utf8"));
+  } catch {
+    return [];
+  }
+  const scripts = pkg.scripts ?? {};
+  const gates = [];
+  const npmRun = (script) => ({
+    command: "npm",
+    args: ["run", script],
+    display: `npm run ${script}`
+  });
+  const hasTs = fs.existsSync(path.join(cwd, "tsconfig.json")) || Boolean(pkg.devDependencies?.typescript ?? pkg.dependencies?.typescript);
+  if (scripts.typecheck) {
+    gates.push({ id: "typecheck", ...npmRun("typecheck") });
+  } else if (hasTs) {
+    gates.push({ id: "typecheck", command: "npx", args: ["tsc", "--noEmit"], display: "tsc --noEmit" });
+  }
+  const hasEslintConfig = [
+    "eslint.config.js",
+    "eslint.config.mjs",
+    "eslint.config.cjs",
+    "eslint.config.ts",
+    ".eslintrc",
+    ".eslintrc.js",
+    ".eslintrc.cjs",
+    ".eslintrc.json"
+  ].some((file) => fs.existsSync(path.join(cwd, file)));
+  if (scripts.lint) {
+    gates.push({ id: "lint", ...npmRun("lint") });
+  } else if (hasEslintConfig) {
+    gates.push({ id: "lint", command: "npx", args: ["eslint", ".", "--max-warnings", "0"], display: "eslint ." });
+  }
+  const testScript = scripts.test;
+  if (testScript && !/no test specified/i.test(testScript)) {
+    gates.push({ id: "test", ...npmRun("test") });
+  }
+  if (scripts.build) {
+    gates.push({ id: "build", ...npmRun("build") });
+  }
+  return gates;
+}
+var TAIL_LINES = 40;
+var GATE_TIMEOUT_MS = 5 * 60 * 1e3;
+function runGate(cwd, gate) {
+  return new Promise((resolve) => {
+    const startedAt = Date.now();
+    let output = "";
+    const child = spawn(gate.command, gate.args, {
+      cwd,
+      // CI collapses watch modes (vitest etc.) into single runs.
+      env: { ...process.env, CI: "true", FORCE_COLOR: "0" },
+      stdio: ["ignore", "pipe", "pipe"]
+    });
+    const collect = (chunk) => {
+      output += chunk;
+      if (output.length > 6e4) output = output.slice(-6e4);
+    };
+    child.stdout.setEncoding("utf8");
+    child.stdout.on("data", collect);
+    child.stderr.setEncoding("utf8");
+    child.stderr.on("data", collect);
+    const finish = (ok) => {
+      clearTimeout(timer);
+      const lines = output.split("\n").filter((line) => line.trim().length > 0);
+      resolve({
+        gate,
+        ok,
+        durationMs: Date.now() - startedAt,
+        outputTail: lines.slice(-TAIL_LINES).join("\n")
+      });
+    };
+    const timer = setTimeout(() => {
+      child.kill("SIGKILL");
+      output += "\n[gate timed out]";
+    }, GATE_TIMEOUT_MS);
+    child.on("error", (err) => {
+      output += `
+${err.message}`;
+      finish(false);
+    });
+    child.on("close", (code) => finish(code === 0));
+  });
+}
+async function runGates(cwd, gates, onResult) {
+  const results = [];
+  for (const gate of gates) {
+    const result = await runGate(cwd, gate);
+    results.push(result);
+    onResult?.(result);
+  }
+  return results;
+}
+function buildGatePrompt(failures) {
+  const sections = failures.map((f) => `### ${f.gate.id} (\`${f.gate.display}\`)
+
+${f.outputTail}`).join("\n\n");
+  return `Quality gates failed. Fix the underlying problems \u2014 do not weaken the checks, skip tests, or loosen compiler/lint settings to get green.
+
+${sections}
+
+After fixing, the failing commands above must pass.`;
+}
+
+export {
+  detectGates,
+  runGate,
+  runGates,
+  buildGatePrompt
+};

package/dist/chunk-4XHTAWTH.js

@@ -0,0 +1,164 @@
+#!/usr/bin/env node
+import {
+  cdpCapture,
+  hasWebSocket
+} from "./chunk-OJTW5SYY.js";
+import {
+  findChrome,
+  screenshot
+} from "./chunk-MURKQ7SI.js";
+
+// src/preview/preview.ts
+import fs2 from "fs";
+import os from "os";
+import path2 from "path";
+
+// src/state/state.ts
+import fs from "fs";
+import path from "path";
+var IGNORED = ["preview/", "state.json", "variants/"];
+function ensureSquintIgnore(cwd) {
+  const dir = path.join(cwd, ".squint");
+  fs.mkdirSync(dir, { recursive: true });
+  const file = path.join(dir, ".gitignore");
+  let existing = "";
+  try {
+    existing = fs.readFileSync(file, "utf8");
+  } catch {
+  }
+  const lines = existing.split("\n").filter((l) => l.trim().length > 0);
+  const missing = IGNORED.filter((entry) => !lines.includes(entry));
+  if (missing.length > 0) {
+    fs.writeFileSync(file, [...lines, ...missing].join("\n") + "\n");
+  }
+}
+function stateFile(cwd) {
+  return path.join(cwd, ".squint", "state.json");
+}
+function loadState(cwd) {
+  try {
+    const raw = JSON.parse(fs.readFileSync(stateFile(cwd), "utf8"));
+    if (typeof raw?.engine === "string" && typeof raw?.sessionId === "string" && typeof raw?.at === "number") {
+      return raw;
+    }
+  } catch {
+  }
+  return null;
+}
+function saveState(cwd, state) {
+  ensureSquintIgnore(cwd);
+  fs.writeFileSync(stateFile(cwd), JSON.stringify(state, null, 2) + "\n");
+}
+function clearState(cwd) {
+  try {
+    fs.rmSync(stateFile(cwd));
+  } catch {
+  }
+}
+
+// src/preview/preview.ts
+var VIEWPORTS = [
+  { name: "mobile", width: 390, height: 844 },
+  { name: "tablet", width: 768, height: 1024 },
+  { name: "desktop", width: 1440, height: 900 }
+];
+function previewDir(cwd) {
+  const dir = path2.join(cwd, ".squint", "preview");
+  fs2.mkdirSync(dir, { recursive: true });
+  ensureSquintIgnore(cwd);
+  return dir;
+}
+async function captureViewports(cwd, url) {
+  const chrome = findChrome();
+  if (!chrome) return null;
+  const dir = previewDir(cwd);
+  if (hasWebSocket()) {
+    try {
+      const { report, shots: shots2 } = await cdpCapture(chrome, url, dir, VIEWPORTS);
+      return { shots: shots2, errors: [], runtime: report };
+    } catch {
+    }
+  }
+  const shots = [];
+  const errors = [];
+  for (const viewport of VIEWPORTS) {
+    const outPath = path2.join(dir, `${viewport.name}.png`);
+    const result = await screenshot(chrome, url, outPath, {
+      width: viewport.width,
+      height: viewport.height
+    });
+    if (result.ok) {
+      shots.push({ name: viewport.name, path: outPath });
+    } else {
+      errors.push(`${viewport.name}: ${result.error}`);
+    }
+  }
+  return { shots, errors };
+}
+function runtimeSummary(report) {
+  const parts = [];
+  if (report.pageErrors.length > 0) parts.push(`${report.pageErrors.length} page error(s)`);
+  if (report.consoleErrors.length > 0) parts.push(`${report.consoleErrors.length} console error(s)`);
+  if (report.failedRequests.length > 0) parts.push(`${report.failedRequests.length} failed request(s)`);
+  return parts.length > 0 ? parts.join(" \xB7 ") : null;
+}
+function runtimeSection(report) {
+  if (!report) return "";
+  const blocks = [];
+  if (report.pageErrors.length > 0) {
+    blocks.push(`Uncaught page errors:
+${report.pageErrors.slice(0, 10).join("\n")}`);
+  }
+  if (report.consoleErrors.length > 0) {
+    blocks.push(`Console errors:
+${report.consoleErrors.slice(0, 10).join("\n")}`);
+  }
+  if (report.failedRequests.length > 0) {
+    blocks.push(`Failed requests:
+${report.failedRequests.slice(0, 10).join("\n")}`);
+  }
+  if (blocks.length === 0) return "";
+  return `
+
+## Runtime errors observed while loading the page
+
+${blocks.join("\n\n")}
+
+Fix these first \u2014 a page that errors is broken regardless of how it looks.`;
+}
+async function probeRuntime(url) {
+  const chrome = findChrome();
+  if (!chrome || !hasWebSocket()) return null;
+  try {
+    const { report } = await cdpCapture(chrome, url, os.tmpdir(), [], 1500);
+    return report;
+  } catch {
+    return null;
+  }
+}
+function buildRuntimeFixPrompt(report) {
+  return `The running app has runtime problems.${runtimeSection(report)}
+
+Diagnose and fix the root causes, then confirm the app loads clean.`;
+}
+function buildReviewPrompt(shots, extra, runtime) {
+  const list = shots.map((s) => `- ${s.name}: ${s.path}`).join("\n");
+  return `Screenshots of the running app were just captured:
+
+${list}
+
+Read each screenshot and review the rendered UI against the design standards you were given. Check: visual hierarchy and spacing rhythm, typography, color and contrast, alignment, empty-looking or broken regions, and whether the mobile capture shows horizontal overflow or cramped layout. List the concrete issues you can SEE (not hypothetical ones), ranked by visual impact${extra ? `, with special attention to: ${extra}` : ""}. Then fix them and verify the app still builds.${runtimeSection(runtime)}`;
+}
+
+export {
+  loadState,
+  saveState,
+  clearState,
+  VIEWPORTS,
+  previewDir,
+  captureViewports,
+  runtimeSummary,
+  probeRuntime,
+  buildRuntimeFixPrompt,
+  buildReviewPrompt
+};

package/dist/chunk-5IR2AZVK.js

@@ -0,0 +1,127 @@
+#!/usr/bin/env node
+import {
+  DEFAULT_BRIEF
+} from "./chunk-NT2HR4RD.js";
+
+// src/prompt/families.ts
+var FAMILIES = [
+  {
+    id: "editorial-minimal",
+    name: "Editorial Minimalism",
+    summary: "Linear/Stripe lineage \u2014 restraint, typography does the work",
+    direction: `## Direction: Editorial Minimalism
+
+Quiet surfaces, decisive typography, one accent used sparingly. The design should feel edited, not decorated.
+
+- Type: a characterful grotesque or neo-grotesque for display (never Inter/Roboto), same family or a close neutral sans for body. Weight extremes carry hierarchy (300 vs 700+), not size alone.
+- Color: near-white paper, near-black ink, one accent on less than 10% of the surface. No gradients.
+- Space: generous whitespace on an 8px rhythm; wide margins; content max-width around 68ch.
+- Motion: almost none \u2014 150ms fades and position shifts only where they explain state.
+- Avoid: cards for everything (prefer rules and spacing to separate content), icon grids, decorative illustration.`
+  },
+  {
+    id: "terminal",
+    name: "Terminal-Core",
+    summary: "Monospace, dark, dense \u2014 software that looks like software",
+    direction: `## Direction: Terminal-Core
+
+Unapologetically technical: monospace-forward, dark, information-dense, zero chrome.
+
+- Type: a great monospace (JetBrains Mono, Berkeley Mono lineage) for UI and data; optionally one compact sans for long prose.
+- Color: true dark background (not gray soup), phosphor-inspired accent (green/amber/cyan \u2014 pick ONE), semantic red/yellow only for status. Body text stays high-contrast.
+- Space: tight but rhythmic \u2014 4px grid, table-like alignment, visible structure (rules, column guides).
+- Motion: instant. At most a cursor blink or a 100ms state flash.
+- Avoid: rounded-corner softness, shadows, any gradient, lowercase-only affectation that hurts scanning.`
+  },
+  {
+    id: "warm-editorial",
+    name: "Warm Editorial",
+    summary: "Serif display, humane warmth \u2014 carried by type and accents, never a beige page",
+    direction: `## Direction: Warm Editorial
+
+Bookish confidence: a serif with real character doing the talking, warmth carried in accents and imagery.
+
+- Type: expressive serif display (Fraunces/Newsreader lineage) paired with a geometric sans for UI. Big size jumps (3x+) between display and body.
+- Color: paper stays crisp near-white \u2014 warmth comes from a terracotta/ochre/oxblood accent and ink that leans warm-black. Never a cream/beige page background.
+- Space: editorial grid with asymmetry; pull-quotes and drop caps welcome where content supports them.
+- Motion: soft 200ms ease-out reveals on load, nothing on scroll.
+- Avoid: script fonts, sepia-toned everything, decorative dividers.`
+  },
+  {
+    id: "data-dense",
+    name: "Data-Dense Pro",
+    summary: "Dashboards and tools \u2014 density as a feature, hierarchy through alignment",
+    direction: `## Direction: Data-Dense Pro
+
+Built for people who live in the product eight hours a day: density, alignment, and speed over air.
+
+- Type: one compact sans with strong numerals (tabular figures mandatory for data); 13\u201314px body is correct here.
+- Color: neutral surface ladder (2\u20133 steps), one brand accent for primary actions, strict semantic palette for status. Charts get a deliberate categorical ramp, not rainbow defaults.
+- Space: 4px grid, table-first layouts, column alignment across widgets; every panel earns its border.
+- Motion: none on data; 120ms on overlays only.
+- Avoid: hero sections, marketing spacing, cards-inside-cards, centered text.`
+  },
+  {
+    id: "cinematic-dark",
+    name: "Cinematic Dark",
+    summary: "Dramatic dark surfaces, controlled glow, product as protagonist",
+    direction: `## Direction: Cinematic Dark
+
+Dark with intent \u2014 depth from lighting logic, not gray layers. The product shot is the hero.
+
+- Type: a wide/display sans with presence for headlines, tight tracking at size; clean sans body at high contrast (no mid-gray text on black).
+- Color: near-black stage, one luminous accent used like stage lighting (hover glows, focus rings, key CTAs). At most one gradient, in the accent hue, and only where light would fall.
+- Space: generous vertical rhythm; content emerges in layers.
+- Motion: one orchestrated entrance with staggered reveals (200\u2013250ms, ease-out), then calm.
+- Avoid: purple-on-black defaults, glassmorphism panels, glow on everything, starfields.`
+  },
+  {
+    id: "playful",
+    name: "Playful Color",
+    summary: "Saturated, confident color \u2014 joy with a grid underneath",
+    direction: `## Direction: Playful Color
+
+Color does the branding: saturated fields, chunky type, real personality \u2014 held together by a strict grid.
+
+- Type: a rounded or geometric display face with real weight (800+) for headlines; simple sans body.
+- Color: commit \u2014 the surface IS the color (drenched sections in 2\u20133 saturated hues that share a tonal family). Text stays black or white, always AA.
+- Space: big blocks, hard edges between color fields, 8px rhythm inside them.
+- Motion: springy but short (200ms, one bounce maximum); hover states that visibly react.
+- Avoid: pastel timidity, rainbow spread (pick a family), emoji as design elements.`
+  },
+  {
+    id: "brutalist",
+    name: "Neo-Brutalist",
+    summary: "Raw structure, stark type, hard edges \u2014 the grid is the aesthetic",
+    direction: `## Direction: Neo-Brutalist
+
+Structure exposed: visible borders, stark type, unapologetic contrast. Honest, loud, precise.
+
+- Type: oversized display type (grotesque or mono), often uppercase, tracking tightened; body stays small and functional.
+- Color: black on white (or one inverted section), plus a single shock accent. Solid fills only.
+- Space: hard 2\u20134px borders, no shadows, no rounding (or one deliberate radius used everywhere); layouts that show their grid.
+- Motion: abrupt on purpose \u2014 instant state changes, maybe one marquee if the content earns it.
+- Avoid: soft shadows sneaking in, gradient anything, politeness.`
+  }
+];
+function getFamily(id) {
+  return FAMILIES.find((f) => f.id === id);
+}
+function coreStandards() {
+  const marker = "Tokens are the system:";
+  const index = DEFAULT_BRIEF.indexOf(marker);
+  return DEFAULT_BRIEF.slice(index);
+}
+function renderFamilyBrief(family) {
+  return `You are acting as a senior product designer and frontend engineer. Treat every change as production work, not a demo. This project has a committed design direction \u2014 hold it consistently in every change.
+
+${family.direction}
+
+${coreStandards()}`;
+}
+
+export {
+  FAMILIES,
+  getFamily,
+  renderFamilyBrief
+};