oh-my-opencode 4.12.1 → 4.13.0

package/packages/omo-codex/plugin/scripts/auto-update.mjs

@@ -1,9 +1,7 @@
 #!/usr/bin/env node
 
 import { spawn, spawnSync } from "node:child_process";
-import { readFileSync } from "node:fs";
-import { dirname, join } from "node:path";
-import { fileURLToPath, pathToFileURL } from "node:url";
+import { pathToFileURL } from "node:url";
 import {
 	DEFAULT_LOCK_STALE_MS,
 	acquireLock,
@@ -13,17 +11,27 @@ import {
 	resolveStatePath,
 	writeState,
 } from "./auto-update-state.mjs";
-import { detectInstallFlow, resolveInstallSnapshotPath } from "./install-flow.mjs";
+import {
+	compareVersions,
+	defaultRunCommandForManualUpdate,
+	detectAutoUpdateInstallFlow,
+	parsePositiveInteger,
+	parseVersion,
+	resolveArgs,
+	resolveCommand,
+	resolveCurrentVersion,
+	resolveLatestVersion,
+	resolveLazyCodexUpdatePlan,
+} from "./auto-update-plan.mjs";
+import { formatMarketplaceFlowNotice, formatUpdateStartedNotice, resolveReleaseNotes } from "./auto-update-release-notes.mjs";
 import { migrateCodexConfig } from "./migrate-codex-config.mjs";
 import { migrateOmoSotConfig } from "./migrate-omo-sot.mjs";
 import { resolveSpawnInvocation } from "./spawn-command.mjs";
 
 const DEFAULT_INTERVAL_MS = 24 * 60 * 60 * 1_000;
 const DEFAULT_RETRY_INTERVAL_MS = 30 * 60 * 1_000;
-const DEFAULT_UPDATE_COMMAND = "npx";
-const DEFAULT_UPDATE_ARGS = ["--yes", "lazycodex-ai@latest", "install", "--no-tui", "--codex-autonomous"];
-const MARKETPLACE_FLOW_NOTICE =
-	"[LazyCodex] Auto-update skipped: this LazyCodex install is managed by the Codex plugin marketplace, so the npx self-update was not started. Tell the user to upgrade with `codex plugin marketplace upgrade sisyphuslabs`, and that Codex will require hook re-approval after the upgrade.";
+
+export { resolveLazyCodexUpdatePlan };
 
 export function resolveAutoUpdatePlan({ env = process.env, now = Date.now(), lastCheckedAt, lastAttemptedAt, lastStatus, installFlow } = {}) {
 	if (env.LAZYCODEX_AUTO_UPDATE_DISABLED === "1" || env.OMO_CODEX_AUTO_UPDATE_DISABLED === "1") {
@@ -67,15 +75,6 @@ export function resolveAutoUpdatePlan({ env = process.env, now = Date.now(), las
 	};
 }
 
-export function resolveLazyCodexUpdatePlan({ currentVersion, latestVersion, command = DEFAULT_UPDATE_COMMAND, args = DEFAULT_UPDATE_ARGS } = {}) {
-	const current = parseVersion(currentVersion);
-	if (current === null) return { shouldUpdate: false, reason: "unknown-current" };
-	const latest = parseVersion(latestVersion);
-	if (latest === null) return { shouldUpdate: false, reason: "unknown-latest" };
-	if (compareVersions(latest, current) <= 0) return { shouldUpdate: false, reason: "up-to-date" };
-	return { shouldUpdate: true, command, args };
-}
-
 export async function runLazyCodexManualUpdate({ env = process.env, dryRun = false, log = console.log, runCommand } = {}) {
 	const commandRunner = runCommand ?? defaultRunCommandForManualUpdate;
 	const currentVersion = resolveCurrentVersion(env);
@@ -122,7 +121,11 @@ export async function runAutoUpdateCheck({ env = process.env, now = Date.now() }
 		if (plan.reason === "marketplace-flow") {
 			await appendUpdateLog(env, now, "skipped", { kind: "marketplace-flow" });
 			await writeState(statePath, { ...state, lastCheckedAt: now, lastStatus: "success" });
-			notices.push(MARKETPLACE_FLOW_NOTICE);
+			const updateContext = resolveUpdateContext({ env });
+			const releaseNotes = updateContext.shouldUpdate
+				? await resolveReleaseNotes({ env, latestVersion: updateContext.latestVersion })
+				: undefined;
+			notices.push(formatMarketplaceFlowNotice({ updateContext, releaseNotes }));
 			return { started: false, reason: plan.reason, notices };
 		}
 		await appendUpdateLog(env, now, "skipped", { reason: plan.reason });
@@ -141,6 +144,7 @@ export async function runAutoUpdateCheck({ env = process.env, now = Date.now() }
 	try {
 		await appendUpdateLog(env, now, "started", { command: plan.command, args: plan.args });
 		const pendingNotice = { fromVersion: plan.currentVersion, toVersion: plan.latestVersion, startedAt: now };
+		const releaseNotes = await resolveReleaseNotes({ env, latestVersion: plan.latestVersion });
 		if (env.LAZYCODEX_AUTO_UPDATE_WAIT === "1") {
 			const invocation = resolveSpawnInvocation(plan.command, plan.args);
 			const result = spawnSync(invocation.command, invocation.args, {
@@ -151,7 +155,7 @@ export async function runAutoUpdateCheck({ env = process.env, now = Date.now() }
 			await appendUpdateLog(env, now, "finished", { status });
 			if (status === 0) {
 				await writeState(statePath, { lastCheckedAt: now, lastAttemptedAt: now, lastStatus: "success", pendingNotice });
-				await recordUpdateStartedNotice({ env, now, notices, pendingNotice });
+				await recordUpdateStartedNotice({ env, now, notices, pendingNotice, releaseNotes });
 			} else {
 				await writeState(statePath, { lastAttemptedAt: now, lastStatus: "failed" });
 			}
@@ -165,7 +169,7 @@ export async function runAutoUpdateCheck({ env = process.env, now = Date.now() }
 			detached: true,
 		});
 		await writeState(statePath, { lastAttemptedAt: now, lastStatus: "started", pendingNotice });
-		await recordUpdateStartedNotice({ env, now, notices, pendingNotice });
+		await recordUpdateStartedNotice({ env, now, notices, pendingNotice, releaseNotes });
 		child.unref();
 		return { started: true, notices };
 	} finally {
@@ -193,8 +197,8 @@ async function settlePendingNotice({ env, now, statePath, state, notices }) {
 	return nextState;
 }
 
-async function recordUpdateStartedNotice({ env, now, notices, pendingNotice }) {
-	notices.push(`[LazyCodex] Auto-update started in the background: v${pendingNotice.fromVersion} -> v${pendingNotice.toVersion}. Tell the user a new LazyCodex version is installing and that they should start a new Codex session after it completes to apply it.`);
+async function recordUpdateStartedNotice({ env, now, notices, pendingNotice, releaseNotes }) {
+	notices.push(formatUpdateStartedNotice({ pendingNotice, releaseNotes }));
 	await appendUpdateLog(env, now, "notified", {
 		kind: "update-started",
 		fromVersion: pendingNotice.fromVersion,
@@ -202,6 +206,13 @@ async function recordUpdateStartedNotice({ env, now, notices, pendingNotice }) {
 	});
 }
 
+function resolveUpdateContext({ env }) {
+	const currentVersion = resolveCurrentVersion(env);
+	const latestVersion = resolveLatestVersion(env);
+	const plan = resolveLazyCodexUpdatePlan({ currentVersion, latestVersion });
+	return { currentVersion, latestVersion, shouldUpdate: plan.shouldUpdate };
+}
+
 async function runConfigMigration({ env }) {
 	if (env.LAZYCODEX_CONFIG_MIGRATION_DISABLED === "1" || env.OMO_CODEX_CONFIG_MIGRATION_DISABLED === "1") return;
 	try {
@@ -213,117 +224,6 @@ async function runConfigMigration({ env }) {
 	}
 }
 
-function resolveCommand(env) {
-	return env.LAZYCODEX_AUTO_UPDATE_COMMAND?.trim() || DEFAULT_UPDATE_COMMAND;
-}
-
-function resolveArgs(env) {
-	if (env.LAZYCODEX_AUTO_UPDATE_ARGS_JSON) {
-		const parsed = JSON.parse(env.LAZYCODEX_AUTO_UPDATE_ARGS_JSON);
-		if (!Array.isArray(parsed) || parsed.some((value) => typeof value !== "string")) {
-			throw new TypeError("LAZYCODEX_AUTO_UPDATE_ARGS_JSON must be a JSON string array");
-		}
-		return parsed;
-	}
-	return DEFAULT_UPDATE_ARGS;
-}
-
-function detectAutoUpdateInstallFlow(env) {
-	return detectInstallFlow({ pluginRoot: resolveAutoUpdatePluginRoot(env), env });
-}
-
-function resolveAutoUpdatePluginRoot(env) {
-	if (env.PLUGIN_ROOT?.trim()) return env.PLUGIN_ROOT.trim();
-	return dirname(dirname(fileURLToPath(import.meta.url)));
-}
-
-function resolveCurrentVersion(env) {
-	if (env.LAZYCODEX_CURRENT_VERSION?.trim()) return env.LAZYCODEX_CURRENT_VERSION.trim();
-	const pluginRoot = dirname(dirname(fileURLToPath(import.meta.url)));
-	return (
-		readVersionManifest(resolveInstallSnapshotPath(env, pluginRoot)) ??
-		readVersionManifest(join(pluginRoot, "..", "..", "..", "package.json")) ??
-		readVersionManifest(join(pluginRoot, ".codex-plugin", "plugin.json"))
-	);
-}
-
-function resolveLatestVersion(env) {
-	if (env.LAZYCODEX_LATEST_VERSION?.trim()) return env.LAZYCODEX_LATEST_VERSION.trim();
-	const invocation = resolveSpawnInvocation("npm", ["view", "lazycodex-ai", "version", "--silent"]);
-	const result = spawnSync(invocation.command, invocation.args, {
-		encoding: "utf8",
-		stdio: ["ignore", "pipe", "ignore"],
-	});
-	if (result.status !== 0) return undefined;
-	const version = result.stdout.trim();
-	return version.length > 0 ? version : undefined;
-}
-
-function defaultRunCommandForManualUpdate(command, args, options) {
-	return new Promise((resolve, reject) => {
-		const invocation = resolveSpawnInvocation(command, args);
-		const child = spawn(invocation.command, invocation.args, {
-			cwd: options.cwd,
-			env: options.env,
-			stdio: "inherit",
-		});
-		child.once("error", reject);
-		child.once("close", (code) => {
-			if (code === 0) {
-				resolve();
-				return;
-			}
-			reject(new Error(`${command} ${args.join(" ")} exited with ${code ?? "unknown status"}`));
-		});
-	});
-}
-
-function parseVersion(version) {
-	if (typeof version !== "string") return null;
-	const match = /^(\d+)\.(\d+)\.(\d+)(?:-([^+]+))?(?:\+.*)?$/.exec(version.trim());
-	if (match === null) return null;
-	const major = Number.parseInt(match[1], 10);
-	const minor = Number.parseInt(match[2], 10);
-	const patch = Number.parseInt(match[3], 10);
-	const prerelease = match[4];
-	return Number.isFinite(major) && Number.isFinite(minor) && Number.isFinite(patch)
-		? { major, minor, patch, prerelease }
-		: null;
-}
-
-function compareVersions(left, right) {
-	for (const key of ["major", "minor", "patch"]) {
-		const leftValue = left[key];
-		const rightValue = right[key];
-		if (leftValue > rightValue) return 1;
-		if (leftValue < rightValue) return -1;
-	}
-	if (left.prerelease === undefined && right.prerelease !== undefined) return 1;
-	if (left.prerelease !== undefined && right.prerelease === undefined) return -1;
-	if (left.prerelease !== undefined && right.prerelease !== undefined) {
-		return left.prerelease.localeCompare(right.prerelease);
-	}
-	return 0;
-}
-
-function readVersionManifest(path) {
-	try {
-		const parsed = JSON.parse(readFileSync(path, "utf8"));
-		if (typeof parsed.version !== "string") return undefined;
-		const version = parsed.version.trim();
-		return version.length > 0 ? version : undefined;
-	} catch (error) {
-		if (error instanceof Error) return undefined;
-		throw error;
-	}
-}
-
-function parsePositiveInteger(value, fallback) {
-	if (value === undefined || value === "") return fallback;
-	const parsed = Number.parseInt(value, 10);
-	return Number.isFinite(parsed) && parsed >= 0 ? parsed : fallback;
-}
-
 if (process.argv[1] !== undefined && import.meta.url === pathToFileURL(process.argv[1]).href) {
 	runAutoUpdateCheck()
 		.then(({ notices }) => {

package/packages/omo-codex/plugin/scripts/materialize-shared-upstreams.mjs

@@ -0,0 +1,41 @@
+import { execFileSync } from "node:child_process";
+import { dirname, join } from "node:path";
+import { fileURLToPath, pathToFileURL } from "node:url";
+
+const pluginScriptsDir = dirname(fileURLToPath(import.meta.url));
+const repoRoot = join(pluginScriptsDir, "..", "..", "..", "..");
+const sharedSkillsScripts = join(repoRoot, "packages", "shared-skills", "scripts");
+const materializeScript = join(sharedSkillsScripts, "materialize-frontend-refs.mjs");
+
+const upstreamPaths = [
+	"packages/shared-skills/upstreams/open-design",
+	"packages/shared-skills/upstreams/taste-skill",
+	"packages/shared-skills/upstreams/ui-ux-pro-max",
+];
+
+function initSubmodules({ strict }) {
+	try {
+		execFileSync("git", ["submodule", "update", "--init", "--recursive", ...upstreamPaths], {
+			cwd: repoRoot,
+			stdio: "inherit",
+		});
+		return true;
+	} catch (error) {
+		const message = `[materialize-shared-upstreams] git submodule init failed: ${error instanceof Error ? error.message : String(error)}`;
+		if (strict) throw new Error(message);
+		process.stderr.write(`${message} - continuing without submodule refresh\n`);
+		return false;
+	}
+}
+
+export async function materializeSharedUpstreams({ strict }) {
+	initSubmodules({ strict });
+	const { materializeFrontendRefs } = await import(pathToFileURL(materializeScript).href);
+	return materializeFrontendRefs({ strict });
+}
+
+if (process.argv[1] && import.meta.url === pathToFileURL(process.argv[1]).href) {
+	const strict = process.env.OMO_MATERIALIZE_STRICT === "1" || process.argv.includes("--strict");
+	const result = await materializeSharedUpstreams({ strict });
+	if (result.skipped && strict) process.exit(1);
+}

package/packages/omo-codex/plugin/shared/src/config-loader.ts

@@ -1,3 +1,5 @@
+import { homedir } from "node:os"
+
 import {
 	loadOmoConfig,
 	type LoadOmoConfigOptions,
@@ -9,20 +11,36 @@ export type CodexOmoConfigOptions = Omit<LoadOmoConfigOptions, "harness">
 
 export type CodexOmoConfig = OmoConfig & {
 	readonly sources: readonly OmoConfigSource[]
+	readonly trustedCodegraphInstallDir?: string
 	readonly warnings: readonly string[]
 }
 
 export function getCodexOmoConfig(options: CodexOmoConfigOptions = {}): CodexOmoConfig {
+	const env = options.env ?? process.env
+	const homeDir = resolveHomeDir(options)
 	const result = loadOmoConfig({
 		...(options.cwd === undefined ? {} : { cwd: options.cwd }),
-		...(options.env === undefined ? {} : { env: options.env }),
-		...(options.homeDir === undefined ? {} : { homeDir: options.homeDir }),
+		env,
+		homeDir,
+		harness: "codex",
+	})
+	const trustedConfig = loadOmoConfig({
+		cwd: homeDir,
+		env,
+		homeDir,
 		harness: "codex",
 	})
+	const trustedCodegraphInstallDir = trustedConfig.config.codegraph?.install_dir
 
 	return {
 		...result.config,
 		sources: result.sources,
+		...(trustedCodegraphInstallDir === undefined ? {} : { trustedCodegraphInstallDir }),
 		warnings: result.warnings,
 	}
 }
+
+function resolveHomeDir(options: CodexOmoConfigOptions): string {
+	const env = options.env ?? process.env
+	return options.homeDir ?? env["HOME"] ?? env["USERPROFILE"] ?? homedir()
+}

package/packages/omo-codex/plugin/shared/test/config-loader.test.ts

@@ -49,6 +49,22 @@ describe("getCodexOmoConfig", () => {
 			install_dir: "/base",
 			telemetry: false,
 		})
+		expect(result.trustedCodegraphInstallDir).toBe("/base")
+	})
+
+	it("#given project SOT sets install_dir #when loading config #then only the effective value changes while trusted install root stays global", () => {
+		// given
+		const homeDir = createTemporaryDirectory("omo-codex-shared-trusted-home-")
+		const cwd = createTemporaryDirectory("omo-codex-shared-trusted-project-")
+		writeOmoConfig(homeDir, JSON.stringify({ codegraph: { enabled: true, install_dir: "/global-codegraph" } }))
+		writeOmoConfig(cwd, JSON.stringify({ codegraph: { install_dir: "/project-codegraph" } }))
+
+		// when
+		const result = getCodexOmoConfig({ cwd, homeDir, env: {} })
+
+		// then
+		expect(result.codegraph?.install_dir).toBe("/project-codegraph")
+		expect(result.trustedCodegraphInstallDir).toBe("/global-codegraph")
 	})
 
 	it("#given legacy env override and SOT value #when loading config #then env wins over the SOT", () => {

package/packages/omo-codex/plugin/skills/frontend/ATTRIBUTION.md

@@ -7,16 +7,27 @@ oh-my-opencode Software are licensed under the original license provided by the
 the applicable component"). Each upstream's license and required notices are reproduced
 below. Modifications to the original files are noted where applicable.
 
+These third-party references are NOT committed to this repository. Each upstream is
+tracked as a pinned git submodule under `packages/shared-skills/upstreams/<name>`, and the
+build materializes the referenced files verbatim, path-mapped into this skill's
+`references/` tree, when packaging the published artifact. The `Pinned upstream commit`
+line in each section below records the exact submodule commit that the materialization
+reads.
+
 ---
 
 ## 1. Open Design (brand design-system DESIGN.md references)
 
 The brand design-system reference files under `frontend/references/design/<brand>.md`
 (Apple, Stripe, Linear, Nike, BMW, Airbnb, Bugatti, Tesla, and the other named brands)
-are condensed/adapted derivatives of the `design-systems/<brand>/DESIGN.md` files from the
-Open Design project.
+are path-mapped verbatim copies of the `design-systems/<brand>/DESIGN.md` files from the
+Open Design project. They are not committed here; the build materializes them from the
+pinned submodule under `packages/shared-skills/upstreams/open-design` into
+`frontend/references/design/<brand>.md` (dots in `<brand>` map to dashes for the upstream
+directory name, e.g. `linear.app` -> `linear-app`).
 
 - Source: https://github.com/nexu-io/open-design
+- Pinned upstream commit: 6afe7eae156bfa29251a51fd0636649c257f7444
 - Copyright 2026 Open Design contributors
 - Licensed under the Apache License, Version 2.0 (the "License"); you may not use these
   files except in compliance with the License. You may obtain a copy of the License at:
@@ -29,10 +40,12 @@ Open Design project.
   permissions and limitations under the License. A full copy of the Apache-2.0 license
   text is provided in `LICENSE-Apache-2.0.txt` alongside this notice.
 
-- **Changes (Apache-2.0 §4(b)):** the original `DESIGN.md` design-system files have been
-  condensed/adapted from the Open Design project for use as frontend skill references.
-  Specifically, the leading "> Category: ..." blockquote was removed and the documents were
-  shortened into derivative single-file brand references.
+- **Changes (Apache-2.0 §4(b)):** the original `DESIGN.md` design-system files are
+  redistributed verbatim. The only modification is path-mapping: each upstream
+  `design-systems/<brand>/DESIGN.md` is renamed to `frontend/references/design/<brand>.md`
+  (with dots in the brand name mapped to dashes for the upstream directory lookup). The
+  file contents are byte-for-byte identical to the pinned upstream commit; no text is
+  abridged, summarized, or rewritten.
 
 - **Trademark notice:** All product names, brand names, trademarks, and registered
   trademarks referenced in these design-system files (e.g. Apple, BMW, Airbnb, Bugatti,
@@ -50,9 +63,14 @@ The taste-skill files and image-generation skills under `frontend/references/des
 (`taste-skill.md`, `gpt-tasteskill.md`, `minimalist-skill.md`, `brutalist-skill.md`,
 `soft-skill.md`, `redesign-skill.md`, `image-to-code-skill.md`, `output-skill.md`,
 `stitch-skill.md`, `imagegen-frontend-web.md`, `imagegen-frontend-mobile.md`,
-`imagegen-brandkit.md`) are derived from the taste-skill project.
+`imagegen-brandkit.md`) are path-mapped verbatim copies of the per-skill `SKILL.md` files
+from the taste-skill project (each `skills/<name>/SKILL.md` is renamed to
+`references/design/<name>.md`; `imagegen-brandkit.md` maps from `skills/brandkit/SKILL.md`).
+They are not committed here; the build materializes them from the pinned submodule under
+`packages/shared-skills/upstreams/taste-skill`.
 
 - Source: https://github.com/Leonxlnx/taste-skill
+- Pinned upstream commit: 06d6028b5c623016c59ce8536f578e5a1127b499
 
 ```
 MIT License
@@ -84,9 +102,15 @@ SOFTWARE.
 
 The search engine and dataset under `frontend/references/ui-ux-db/` (`scripts/core.py`,
 `scripts/search.py`, `scripts/design_system.py`, `README.md`, and the `data/*.csv`
-knowledge base) are derived from the UI/UX Pro Max skill.
+knowledge base) are path-mapped verbatim copies from the UI/UX Pro Max skill. They are not
+committed here; the build materializes them from the pinned submodule under
+`packages/shared-skills/upstreams/ui-ux-pro-max`:
+`scripts/*.py` from `src/ui-ux-pro-max/scripts/`, `data/*.csv` from
+`src/ui-ux-pro-max/data/` (`data/web-interface.csv` maps from the upstream
+`data/app-interface.csv`), and `README.md` from `.claude/skills/ui-ux-pro-max/SKILL.md`.
 
 - Source: https://github.com/nextlevelbuilder/ui-ux-pro-max-skill
+- Pinned upstream commit: f32d6a61cdf0bfd57404c45854583fd19ff95088
 - "UI/UX Pro Max" is the upstream project's branding; no trademark rights are granted by
   the MIT license, and this distribution does not claim that name as its own.
 

package/packages/omo-codex/plugin/skills/frontend/references/design/airbnb.md

@@ -1,5 +1,8 @@
 # Design System Inspired by Airbnb
 
+> Category: E-Commerce & Retail
+> Travel marketplace. Warm coral accent, photography-driven, rounded UI.
+
 ## 1. Visual Theme & Atmosphere
 
 Airbnb's 2026 design feels like a travel magazine that happens to be an app — pristine white canvases give way to full-bleed photography, and the interface itself disappears so the listings can breathe. The signature Rausch coral-pink (`#ff385c`) is used sparingly but unmistakably: search CTA, active tab indicator, primary action button, the occasional price or wishlist heart. Everything else is a disciplined grayscale, with `#222222` carrying almost every line of text.

package/packages/omo-codex/plugin/skills/frontend/references/design/airtable.md

@@ -1,5 +1,8 @@
 # Design System Inspired by Airtable
 
+> Category: Design & Creative
+> Spreadsheet-database hybrid. Colorful, friendly, structured data aesthetic.
+
 ## 1. Visual Theme & Atmosphere
 
 Airtable's website is a clean, enterprise-friendly platform that communicates "sophisticated simplicity" through a white canvas with deep navy text (`#181d26`) and Airtable Blue (`#1b61c9`) as the primary interactive accent. The Haas font family (display + text variants) creates a Swiss-precision typography system with positive letter-spacing throughout.

package/packages/omo-codex/plugin/skills/frontend/references/design/apple.md

@@ -1,5 +1,8 @@
 # Design System Inspired by Apple
 
+> Category: Media & Consumer
+> Consumer electronics. Premium white space, SF Pro, cinematic imagery.
+
 ## 1. Visual Theme & Atmosphere
 
 Apple's web language is a precision editorial system that alternates between gallery-like calm and retail-density information blocks. The visual tone stays restrained: broad neutral canvases, quiet chrome, and product imagery given almost all of the expressive weight. The interface is engineered to disappear so hardware, materials, and finish options become the narrative foreground.

package/packages/omo-codex/plugin/skills/frontend/references/design/binance.md

@@ -1,5 +1,8 @@
 # Design System Inspired by Binance.US
 
+> Category: Fintech & Crypto
+> Crypto exchange. Bold yellow accent on monochrome, trading-floor urgency.
+
 ## 1. Visual Theme & Atmosphere
 
 Binance.US radiates the polished urgency of a digital trading floor — a space where money moves and decisions happen in seconds. The design is a two-tone composition that alternates between stark white trading surfaces and deep near-black panels (`#222126`), creating a visual rhythm that mirrors the bull-and-bear duality of crypto markets. Binance Yellow (`#F0B90B`) cuts through this monochrome foundation like a gold ingot on a steel desk — unmistakable, confident, and engineered to guide every eye toward the next action.

package/packages/omo-codex/plugin/skills/frontend/references/design/bmw.md

@@ -1,5 +1,8 @@
 # Design System Inspired by BMW
 
+> Category: Automotive
+> Luxury automotive. Dark premium surfaces, precise German engineering aesthetic.
+
 ## 1. Visual Theme & Atmosphere
 
 BMW's website is automotive engineering made visual — a design system that communicates precision, performance, and German industrial confidence. The page alternates between deep dark hero sections (featuring full-bleed automotive photography) and clean white content areas, creating a cinematic rhythm reminiscent of a luxury car showroom where vehicles are lit against darkness. The BMW CI2020 design language (their corporate identity refresh) defines every element.

package/packages/omo-codex/plugin/skills/frontend/references/design/bugatti.md

@@ -1,5 +1,8 @@
 # Design System Inspired by Bugatti
 
+> Category: Automotive
+> Hypercar brand. Cinema-black canvas, monochrome austerity, monumental display type.
+
 ## 1. Visual Theme & Atmosphere
 
 Bugatti.com does not behave like a website — it behaves like a feature-length car film that a visitor happens to be standing inside. The canvas is pure `#000000`, the only color that appears at rest is white, and the entire page is carried by full-bleed hero video and photography with a single typographic moment laid over the top. There are no cards, no grids, no promotional modules, no newsletter signups, no three-column editorial layouts. It is one continuous cinema-black channel, interrupted only by the cars themselves and a few pill-shaped calls to action that quietly say things like "EXPLORE OUR OPPORTUNITIES" in ALL CAPS monospace.

package/packages/omo-codex/plugin/skills/frontend/references/design/cal.md

@@ -1,5 +1,8 @@
 # Design System Inspired by Cal.com
 
+> Category: Productivity & SaaS
+> Open-source scheduling. Clean neutral UI, developer-oriented simplicity.
+
 ## 1. Visual Theme & Atmosphere
 
 Cal.com's website is a masterclass in monochromatic restraint — a grayscale world where boldness comes not from color but from the sheer confidence of black text on white space. Inspired by Uber's minimal aesthetic, the palette is deliberately stripped of hue: near-black headings (`#242424`), mid-gray secondary text (`#898989`), and pure white surfaces. Color is treated as a foreign substance — when it appears (a rare blue link, a green trust badge), it feels like a controlled accent in an otherwise black-and-white photograph.

package/packages/omo-codex/plugin/skills/frontend/references/design/claude.md

@@ -1,5 +1,8 @@
 # Design System Inspired by Claude (Anthropic)
 
+> Category: AI & LLM
+> Anthropic's AI assistant. Warm terracotta accent, clean editorial layout.
+
 ## 1. Visual Theme & Atmosphere
 
 Claude's interface is a literary salon reimagined as a product page — warm, unhurried, and quietly intellectual. The entire experience is built on a parchment-toned canvas (`#f5f4ed`) that deliberately evokes the feeling of high-quality paper rather than a digital surface. Where most AI product pages lean into cold, futuristic aesthetics, Claude's design radiates human warmth, as if the AI itself has good taste in interior design.

package/packages/omo-codex/plugin/skills/frontend/references/design/clay.md

@@ -1,5 +1,8 @@
 # Design System Inspired by Clay
 
+> Category: Design & Creative
+> Creative agency. Organic shapes, soft gradients, art-directed layout.
+
 ## 1. Visual Theme & Atmosphere
 
 Clay's website is a warm, playful celebration of color that treats B2B data enrichment like a craft rather than an enterprise chore. The design language is built on a foundation of warm cream backgrounds (`#faf9f7`) and oat-toned borders (`#dad4c8`, `#eee9df`) that give every surface the tactile quality of handmade paper. Against this artisanal canvas, a vivid swatch palette explodes with personality — Matcha green, Slushie cyan, Lemon gold, Ube purple, Pomegranate pink, Blueberry navy, and Dragonfruit magenta — each named like flavors at a juice bar, not colors in an enterprise UI kit.

package/packages/omo-codex/plugin/skills/frontend/references/design/clickhouse.md

@@ -1,5 +1,8 @@
 # Design System Inspired by ClickHouse
 
+> Category: Backend & Data
+> Fast analytics database. Yellow-accented, technical documentation style.
+
 ## 1. Visual Theme & Atmosphere
 
 ClickHouse's interface is a high-performance cockpit rendered in acid yellow-green on obsidian black — a design that screams "speed" before you read a single word. The entire experience lives in darkness: pure black backgrounds (`#000000`) with dark charcoal cards (`#414141` borders) creating a terminal-grade aesthetic where the only chromatic interruption is the signature neon yellow-green (`#faff69`) that slashes across CTAs, borders, and highlighted moments like a highlighter pen on a dark console.

package/packages/omo-codex/plugin/skills/frontend/references/design/cohere.md

@@ -1,5 +1,8 @@
 # Design System Inspired by Cohere
 
+> Category: AI & LLM
+> Enterprise AI platform. Vibrant gradients, data-rich dashboard aesthetic.
+
 ## 1. Visual Theme & Atmosphere
 
 Cohere's interface is a polished enterprise command deck — confident, clean, and designed to make AI feel like serious infrastructure rather than a consumer toy. The experience lives on a bright white canvas where content is organized into generously rounded cards (22px radius) that create an organic, cloud-like containment language. This is a site that speaks to CTOs and enterprise architects: professional without being cold, sophisticated without being intimidating.

package/packages/omo-codex/plugin/skills/frontend/references/design/coinbase.md

@@ -1,5 +1,8 @@
 # Design System Inspired by Coinbase
 
+> Category: Fintech & Crypto
+> Crypto exchange. Clean blue identity, trust-focused, institutional feel.
+
 ## 1. Visual Theme & Atmosphere
 
 Coinbase's website is a clean, trustworthy crypto platform that communicates financial reliability through a blue-and-white binary palette. The design uses Coinbase Blue (`#0052ff`) — a deep, saturated blue — as the singular brand accent against white and near-black surfaces. The proprietary font family includes CoinbaseDisplay for hero headlines, CoinbaseSans for UI text, CoinbaseText for body reading, and CoinbaseIcons for iconography — a comprehensive four-font system.

package/packages/omo-codex/plugin/skills/frontend/references/design/composio.md

@@ -1,5 +1,8 @@
 # Design System Inspired by Composio
 
+> Category: Backend & Data
+> Tool integration platform. Modern dark with colorful integration icons.
+
 ## 1. Visual Theme & Atmosphere
 
 Composio's interface is a nocturnal command center — a dense, developer-focused darkness punctuated by electric cyan and deep cobalt signals. The entire experience is built on an almost-pure-black canvas (`#0f0f0f`) where content floats within barely-visible containment borders, creating the feeling of a high-tech control panel rather than a traditional marketing page. It's a site that whispers authority to developers who live in dark terminals.

package/packages/omo-codex/plugin/skills/frontend/references/design/cursor.md

@@ -1,5 +1,8 @@
 # Design System Inspired by Cursor
 
+> Category: Developer Tools
+> AI-first code editor. Sleek dark interface, gradient accents.
+
 ## 1. Visual Theme & Atmosphere
 
 Cursor's website is a study in warm minimalism meets code-editor elegance. The entire experience is built on a warm off-white canvas (`#f2f1ed`) with dark warm-brown text (`#26251e`) -- not pure black, not neutral gray, but a deeply warm near-black with a yellowish undertone that evokes old paper, ink, and craft. This warmth permeates every surface: backgrounds lean toward cream (`#e6e5e0`, `#ebeae5`), borders dissolve into transparent warm overlays using `oklab` color space, and even the error state (`#cf2d56`) carries warmth rather than clinical red. The result feels more like a premium print publication than a tech website.

package/packages/omo-codex/plugin/skills/frontend/references/design/elevenlabs.md

@@ -1,5 +1,8 @@
 # Design System Inspired by ElevenLabs
 
+> Category: AI & LLM
+> AI voice platform. Dark cinematic UI, audio-waveform aesthetics.
+
 ## 1. Visual Theme & Atmosphere
 
 ElevenLabs' website is a study in restrained elegance — a near-white canvas (`#ffffff`, `#f5f5f5`) where typography and subtle shadows do all the heavy lifting. The design feels like a premium audio product brochure: clean, spacious, and confident enough to let the content speak (literally, given ElevenLabs makes voice AI). There's an almost Apple-like quality to the whitespace strategy, but warmer — the occasional warm stone tint (`#f5f2ef`, `#777169`) prevents the purity from feeling clinical.

package/packages/omo-codex/plugin/skills/frontend/references/design/expo.md

@@ -1,5 +1,8 @@
 # Design System Inspired by Expo
 
+> Category: Developer Tools
+> React Native platform. Dark theme, tight letter-spacing, code-centric.
+
 ## 1. Visual Theme & Atmosphere
 
 Expo's interface is a luminous, confidence-radiating developer platform built on the premise that tools for building apps should feel as polished as the apps themselves. The entire experience lives on a bright, airy canvas — a cool-tinted off-white (`#f0f0f3`) that gives the page a subtle technological coolness without the starkness of pure white. This is a site that breathes: enormous vertical spacing between sections creates a gallery-like pace where each feature gets its own "room."

package/packages/omo-codex/plugin/skills/frontend/references/design/ferrari.md

@@ -1,5 +1,8 @@
 # Design System Inspired by Ferrari
 
+> Category: Automotive
+> Luxury automotive. Chiaroscuro editorial, Ferrari Red accents, cinematic black.
+
 ## 1. Visual Theme & Atmosphere
 
 Ferrari's website is a digital editorial — a curated magazine where the Prancing Horse brand is presented with the gravitas of an art institution and the precision of Italian coachwork. The page opens onto an expanse of absolute black, broken only by the iconic Prancing Horse emblem floating alone in its own atmosphere. Below, the content unfolds in dramatic alternations between inky-dark cinematic sections and crisp white editorial panels. This chiaroscuro rhythm — darkness yielding to light, machinery yielding to human story — feels more like paging through a Ferrari yearbook than scrolling a commercial website. Every section is a curated vignette: a concept car dissolving from shadow, two F1 drivers posed with sculptural stillness, a lineup of production models arranged in a jewel-toned parade.

package/packages/omo-codex/plugin/skills/frontend/references/design/figma.md

@@ -1,5 +1,8 @@
 # Design System Inspired by Figma
 
+> Category: Design & Creative
+> Collaborative design tool. Vibrant multi-color, playful yet professional.
+
 ## 1. Visual Theme & Atmosphere
 
 Figma's interface is the design tool that designed itself — a masterclass in typographic sophistication where a custom variable font (figmaSans) modulates between razor-thin (weight 320) and bold (weight 700) with stops at unusual intermediates (330, 340, 450, 480, 540) that most type systems never explore. This granular weight control gives every text element a precisely calibrated visual weight, creating hierarchy through micro-differences rather than the blunt instrument of "regular vs bold."

package/packages/omo-codex/plugin/skills/frontend/references/design/framer.md

@@ -1,5 +1,8 @@
 # Design System Inspired by Framer
 
+> Category: Design & Creative
+> Website builder. Bold black and blue, motion-first, design-forward.
+
 ## 1. Visual Theme & Atmosphere
 
 Framer's website is a cinematic, tool-obsessed dark canvas that radiates the confidence of a design tool built by designers who worship craft. The entire experience is drenched in pure black — not a warm charcoal or a cozy dark gray, but an absolute void (`#000000`) that makes every element, every screenshot, every typographic flourish feel like it's floating in deep space. This is a website that treats its own product UI as the hero art, embedding full-fidelity screenshots and interactive demos directly into the narrative flow.

package/packages/omo-codex/plugin/skills/frontend/references/design/hashicorp.md

@@ -1,5 +1,8 @@
 # Design System Inspired by HashiCorp
 
+> Category: Backend & Data
+> Infrastructure automation. Enterprise-clean, black and white.
+
 ## 1. Visual Theme & Atmosphere
 
 HashiCorp's website is enterprise infrastructure made tangible — a design system that must communicate the complexity of cloud infrastructure management while remaining approachable. The visual language splits between two modes: a clean white light-mode for informational sections and a dramatic dark-mode (`#15181e`, `#0d0e12`) for hero areas and product showcases, creating a day/night duality that mirrors the "build in light, deploy in dark" developer workflow.