@askewly/design 0.1.0

package/data/tokens.css

@@ -0,0 +1,67 @@
+/* GENERATED from tokens/askewly.tokens.json — do not edit by hand. Regenerate: node scripts/generate-tokens.mjs */
+:root {
+  --radius: 0.5rem;
+  --background: oklch(0.985 0 0);
+  --foreground: oklch(0.16 0.015 270);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.16 0.015 270);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.16 0.015 270);
+  --primary: #6F2DBD;
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.94 0.02 270);
+  --secondary-foreground: oklch(0.25 0.03 270);
+  --muted: oklch(0.95 0.015 270);
+  --muted-foreground: oklch(0.46 0.03 270);
+  --accent: #B9FAF8;
+  --accent-foreground: oklch(0.16 0.015 270);
+  --destructive: oklch(0.58 0.22 27);
+  --border: oklch(0.88 0.015 270);
+  --input: oklch(0.88 0.015 270);
+  --ring: #6F2DBD;
+  --askewly-violet: #6F2DBD;
+  --askewly-orchid: #A663CC;
+  --askewly-lavender: #B298DC;
+  --askewly-sky: #B8D0EB;
+  --askewly-mint: #B9FAF8;
+  --space-1: 4px;
+  --space-2: 8px;
+  --space-4: 16px;
+  --space-8: 32px;
+  --space-12: 48px;
+  --space-16: 64px;
+  --font-size-sm: 14px;
+  --font-size-base: 16px;
+  --font-size-lg: 20px;
+  --font-size-xl: 28px;
+  --font-size-2xl: 40px;
+  --font-weight-regular: 400;
+  --font-weight-medium: 500;
+  --font-sans: Geist, "Noto Sans KR", ui-sans-serif, system-ui, sans-serif;
+  --font-mono: "Geist Mono", ui-monospace, monospace;
+  --radius-sm: 4px;
+  --radius-md: 6px;
+  --radius-lg: 8px;
+  --radius-xl: 12px;
+}
+
+.dark {
+  --background: oklch(0.16 0.015 270);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.25 0.03 270);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.25 0.03 270);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.985 0 0);
+  --primary-foreground: oklch(0.16 0.015 270);
+  --secondary: oklch(0.35 0.03 270);
+  --secondary-foreground: oklch(0.95 0.015 270);
+  --muted: oklch(0.35 0.03 270);
+  --muted-foreground: oklch(0.72 0.02 270);
+  --accent: oklch(0.35 0.03 270);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.58 0.22 27);
+  --border: oklch(0.35 0.03 270);
+  --input: oklch(0.35 0.03 270);
+  --ring: #B298DC;
+}

package/data/tokens.json

@@ -0,0 +1 @@
+{"$description":"Askewly Design token SSOT (DTCG-compatible, stable 2025.10 subset). Tier rule: component -> semantic -> primitive, one direction only. Dark mode lives in $extensions['com.askewly.modes'].dark on semantic tokens. Generated artifacts: DESIGN.md frontmatter, examples/ui-vocabulary-site/src/tokens.css. Do not edit generated files by hand.","color":{"primitive":{"$description":"Raw values only. gray is the site's violet-tinted neutral (hue 270) formalized as a 12-step ramp; usage convention: 1-2 app background, 3-5 interactive component states, 6-8 borders, 9-10 solid/low-contrast foreground, 11-12 text.","white":{"$type":"color","$value":{"colorSpace":"oklch","components":[1,0,0]}},"gray":{"1":{"$value":{"colorSpace":"oklch","components":[0.985,0,0]}},"2":{"$value":{"colorSpace":"oklch","components":[0.97,0.005,270]}},"3":{"$value":{"colorSpace":"oklch","components":[0.95,0.015,270]}},"4":{"$value":{"colorSpace":"oklch","components":[0.94,0.02,270]}},"5":{"$value":{"colorSpace":"oklch","components":[0.91,0.015,270]}},"6":{"$value":{"colorSpace":"oklch","components":[0.88,0.015,270]}},"7":{"$value":{"colorSpace":"oklch","components":[0.72,0.02,270]}},"8":{"$value":{"colorSpace":"oklch","components":[0.6,0.025,270]}},"9":{"$value":{"colorSpace":"oklch","components":[0.46,0.03,270]}},"10":{"$value":{"colorSpace":"oklch","components":[0.35,0.03,270]}},"11":{"$value":{"colorSpace":"oklch","components":[0.25,0.03,270]}},"12":{"$value":{"colorSpace":"oklch","components":[0.16,0.015,270]}},"$type":"color"},"askewly":{"$type":"color","$description":"Brand palette extracted from the landing planning reference image (2026-07-05). Canonical purple: violet.","violet":{"$value":{"colorSpace":"srgb","components":[0.435294,0.176471,0.741176],"hex":"#6F2DBD"}},"orchid":{"$value":{"colorSpace":"srgb","components":[0.65098,0.388235,0.8],"hex":"#A663CC"}},"lavender":{"$value":{"colorSpace":"srgb","components":[0.698039,0.596078,0.862745],"hex":"#B298DC"}},"sky":{"$value":{"colorSpace":"srgb","components":[0.721569,0.815686,0.921569],"hex":"#B8D0EB"}},"mint":{"$value":{"colorSpace":"srgb","components":[0.72549,0.980392,0.972549],"hex":"#B9FAF8"}}},"red":{"9":{"$value":{"colorSpace":"oklch","components":[0.58,0.22,27]}},"$type":"color"}},"semantic":{"$description":"Role tokens. Components and site CSS consume this layer only. Dark values in $extensions['com.askewly.modes'].dark.","surface":{"$type":"color","base":{"$value":"{color.primitive.gray.1}","$extensions":{"com.askewly.modes":{"dark":"{color.primitive.gray.12}"}}},"raised":{"$description":"Cards, panels sitting on base.","$value":"{color.primitive.white}","$extensions":{"com.askewly.modes":{"dark":"{color.primitive.gray.11}"}}},"overlay":{"$description":"Popovers, dropdowns, floating layers.","$value":"{color.primitive.white}","$extensions":{"com.askewly.modes":{"dark":"{color.primitive.gray.11}"}}},"muted":{"$value":"{color.primitive.gray.3}","$extensions":{"com.askewly.modes":{"dark":"{color.primitive.gray.10}"}}},"secondary":{"$description":"Secondary button / subtle filled surface.","$value":"{color.primitive.gray.4}","$extensions":{"com.askewly.modes":{"dark":"{color.primitive.gray.10}"}}},"tint":{"$description":"Informational wash, agent-ready signal surface.","$value":"{color.primitive.askewly.mint}","$extensions":{"com.askewly.modes":{"dark":"{color.primitive.gray.10}"}}}},"text":{"$type":"color","default":{"$value":"{color.primitive.gray.12}","$extensions":{"com.askewly.modes":{"dark":"{color.primitive.gray.1}"}}},"muted":{"$value":"{color.primitive.gray.9}","$extensions":{"com.askewly.modes":{"dark":"{color.primitive.gray.7}"}}},"secondary":{"$description":"Foreground on surface.secondary.","$value":"{color.primitive.gray.11}","$extensions":{"com.askewly.modes":{"dark":"{color.primitive.gray.3}"}}},"on-accent":{"$description":"Text/icon on action.primary solid fills.","$value":"{color.primitive.gray.1}","$extensions":{"com.askewly.modes":{"dark":"{color.primitive.gray.12}"}}}},"action":{"$type":"color","primary":{"$value":"{color.primitive.askewly.violet}","$extensions":{"com.askewly.modes":{"dark":"{color.primitive.gray.1}"}}},"secondary":{"$value":"{color.primitive.askewly.orchid}","$extensions":{"com.askewly.modes":{"dark":"{color.primitive.askewly.mint}"}}},"destructive":{"$value":"{color.primitive.red.9}","$extensions":{"com.askewly.modes":{"dark":"{color.primitive.red.9}"}}}},"accent":{"$type":"color","base":{"$description":"Informational accent wash (mint family).","$value":"{color.primitive.askewly.mint}","$extensions":{"com.askewly.modes":{"dark":"{color.primitive.gray.10}"}}},"foreground":{"$value":"{color.primitive.gray.12}","$extensions":{"com.askewly.modes":{"dark":"{color.primitive.gray.1}"}}}},"border":{"$type":"color","default":{"$value":"{color.primitive.gray.6}","$extensions":{"com.askewly.modes":{"dark":"{color.primitive.gray.10}"}}},"input":{"$value":"{color.primitive.gray.6}","$extensions":{"com.askewly.modes":{"dark":"{color.primitive.gray.10}"}}},"focus":{"$description":"Focus ring.","$value":"{color.primitive.askewly.violet}","$extensions":{"com.askewly.modes":{"dark":"{color.primitive.askewly.lavender}"}}},"accent":{"$description":"Selected/active edges only.","$value":"{color.primitive.askewly.lavender}","$extensions":{"com.askewly.modes":{"dark":"{color.primitive.askewly.orchid}"}}}}},"component":{"$description":"Minimal by policy (survey criterion A-5): only overrides that semantic roles cannot express. Exemplar tier for the lint chain.","button":{"$type":"color","bg":{"$value":"{color.semantic.action.primary}"},"text":{"$value":"{color.semantic.text.on-accent}"}}}},"dimension":{"space":{"1":{"$value":{"value":4,"unit":"px"}},"2":{"$value":{"value":8,"unit":"px"}},"4":{"$value":{"value":16,"unit":"px"}},"8":{"$value":{"value":32,"unit":"px"}},"12":{"$value":{"value":48,"unit":"px"}},"16":{"$value":{"value":64,"unit":"px"}},"$type":"dimension","$description":"4/8 grid. Reference variables only - not bound into the Tailwind theme namespace."},"radius":{"$type":"dimension","$description":"Canonical = shipped site values (PSS1 visually approved), not the older 2/4px draft.","sm":{"$value":{"value":4,"unit":"px"}},"md":{"$value":{"value":6,"unit":"px"}},"lg":{"$value":{"value":8,"unit":"px"}},"xl":{"$value":{"value":12,"unit":"px"}},"2xl":{"$description":"SD gen2 (2026-07-12): large-surface corner radius for sheets/overlays that sit above the base scale — device-frame inner viewport, bottom-sheet-detents. Recurs identically in >=2 mobile components as Tailwind's built-in rounded-2xl (16px), currently outside the tokenized sm-xl range.","$value":{"value":16,"unit":"px"}}},"size":{"$type":"dimension","$description":"Fixed-purpose sizing constants that are not part of the 4/8 spacing grid. SD gen2 (2026-07-12): touch-target minimum recurs across mobile surfaces (large-title-collapsing-header back button, mobile-signup-field-stack inputs/submit, plus pre-existing search-autocomplete/showcase-card/term-visual usage) as Tailwind size-11/h-11/min-h-11 (44px) — the WCAG 2.5.5 / iOS HIG minimum hit target.","touch-target-min":{"$value":{"value":44,"unit":"px"}}},"z-index":{"$type":"number","$description":"SD gen2 (2026-07-12): layering scale distilled from recurring hardcoded z-index values across mobile overlays and dense-data sticky headers. 'sticky' = content pinned within its own scroll container (collapsing header bar, bottom-sheet/action-sheet root within DeviceFrame, table sticky header row). 'elevated' = a second layer above a sticky layer in the same local stacking context (permission-matrix-editor-grid's sticky corner cell, which must sit above both its own header row and column). 'overlay' = page-level modal/scrim/popover stacking context (ui/dialog, ui/sheet, ui/popover, ui/tooltip, full-screen confirm overlays).","sticky":{"$value":10},"elevated":{"$value":20},"overlay":{"$value":50}}},"typography":{"font":{"$type":"fontFamily","sans":{"$value":["Geist","Noto Sans KR","ui-sans-serif","system-ui","sans-serif"]},"mono":{"$value":["Geist Mono","ui-monospace","monospace"]}},"scale":{"$type":"dimension","sm":{"$value":{"value":14,"unit":"px"}},"base":{"$value":{"value":16,"unit":"px"}},"lg":{"$value":{"value":20,"unit":"px"}},"xl":{"$value":{"value":28,"unit":"px"}},"2xl":{"$value":{"value":40,"unit":"px"}}},"weight":{"$type":"fontWeight","regular":{"$value":400},"medium":{"$value":500}}},"motion":{"$description":"SD gen2 (2026-07-12): motion timing constants. Kept minimal by the same policy as color.component — only the value that actually recurs, not a full scale invented ahead of need.","duration":{"$type":"duration","overlay":{"$description":"Open/close transition for modal-style surfaces. Recurs identically (200ms) in bottom-sheet-detents.tsx and ui/dialog.tsx.","$value":{"value":200,"unit":"ms"}}}}}

package/dist/index.js

@@ -0,0 +1,213 @@
+#!/usr/bin/env node
+import { readFileSync } from "node:fs";
+import path from "node:path";
+import { Command } from "commander";
+import { addRecipe, initProject, InjectError } from "./inject.js";
+import { verifyDir } from "./verify.js";
+import { loadRecipes, loadTerms, loadTokens, loadTokensCss, searchTerms, tokensForTier, } from "./load.js";
+const pkg = JSON.parse(readFileSync(new URL("../package.json", import.meta.url), "utf8"));
+const program = new Command();
+program
+    .name("askewly-design")
+    .description("Query the Askewly Design system: UI vocabulary terms, design tokens, and component recipes.")
+    .version(pkg.version);
+function fail(message) {
+    console.error(message);
+    process.exit(1);
+}
+function asList(value) {
+    if (!value)
+        return [];
+    return Array.isArray(value) ? value.map(String) : [String(value)];
+}
+function printTermLine(term) {
+    const en = term.en?.name ?? term.id;
+    const ko = term.ko?.name ? ` (${term.ko.name})` : "";
+    console.log(`${term.id}  —  ${en}${ko}`);
+    if (term.one_liner)
+        console.log(`    ${term.one_liner}`);
+}
+const terms = program.command("terms").description("UI vocabulary (536+ terms)");
+terms
+    .command("search")
+    .argument("<query>", "text to match against id, names, aliases, prompt phrases")
+    .option("--json", "machine-readable output")
+    .option("--limit <n>", "max results", "10")
+    .description("search terms")
+    .action((query, options) => {
+    const results = searchTerms(loadTerms(), query).slice(0, Number(options.limit) || 10);
+    if (results.length === 0)
+        fail(`no terms match "${query}"`);
+    if (options.json) {
+        console.log(JSON.stringify(results.map((t) => ({ id: t.id, en: t.en?.name, ko: t.ko?.name, one_liner: t.one_liner, category: t.category, group: t.group })), null, 2));
+        return;
+    }
+    for (const term of results)
+        printTermLine(term);
+});
+terms
+    .command("show")
+    .argument("<id>", "term id, e.g. hero")
+    .option("--json", "machine-readable output")
+    .description("show one term in full")
+    .action((id, options) => {
+    const term = loadTerms().find((t) => t.id === id);
+    if (!term)
+        fail(`unknown term "${id}" — try: askewly-design terms search ${id}`);
+    if (options.json) {
+        console.log(JSON.stringify(term, null, 2));
+        return;
+    }
+    printTermLine(term);
+    console.log(`    category: ${term.category} / ${term.group}`);
+    if (term.description)
+        console.log(`\n${term.description}`);
+    const sections = [
+        ["When to use", asList(term.when_to_use)],
+        ["Anti-use", asList(term.anti_use)],
+        ["Prompt phrases", term.prompt_phrases ?? []],
+    ];
+    for (const [title, items] of sections) {
+        if (items.length === 0)
+            continue;
+        console.log(`\n${title}:`);
+        for (const item of items)
+            console.log(`  - ${item}`);
+    }
+});
+program
+    .command("tokens")
+    .option("--tier <tier>", "color tier: primitive | semantic | component")
+    .option("--format <format>", "json | css", "json")
+    .description("design tokens (DTCG source or generated CSS)")
+    .action((options) => {
+    if (options.format === "css") {
+        if (options.tier)
+            fail("--tier only applies to --format json (the CSS output is generated as a whole)");
+        process.stdout.write(loadTokensCss());
+        return;
+    }
+    if (options.format !== "json")
+        fail(`unknown format "${options.format}" — use json or css`);
+    const tokens = loadTokens();
+    if (options.tier) {
+        const subtree = tokensForTier(tokens, options.tier);
+        if (subtree === null)
+            fail(`unknown tier "${options.tier}" — use primitive, semantic, or component`);
+        console.log(JSON.stringify(subtree, null, 2));
+        return;
+    }
+    console.log(JSON.stringify(tokens, null, 2));
+});
+program
+    .command("init")
+    .argument("[dir]", "target directory", ".")
+    .option("--force", "overwrite existing files")
+    .description("write DESIGN.md and tokens.css into a project")
+    .action((dir, options) => {
+    try {
+        const written = initProject(path.resolve(dir), Boolean(options.force));
+        for (const file of written)
+            console.log(`wrote ${file}`);
+        console.log('\nNext: add `@import "./askewly.css";` after `@import "tailwindcss";` in your global stylesheet, then `askewly-design add <recipe>`.');
+    }
+    catch (error) {
+        if (error instanceof InjectError)
+            fail(error.message);
+        throw error;
+    }
+});
+program
+    .command("add")
+    .argument("<recipe>", "recipe id, e.g. button")
+    .option("--out <dir>", "output directory for the component file", ".")
+    .option("--tokens <file>", "path to the project's tokens.css", "tokens.css")
+    .option("--force", "overwrite an existing file")
+    .description("inject a recipe's Code excerpt into the project")
+    .action((id, options) => {
+    const recipe = loadRecipes().find((r) => r.id === id);
+    if (!recipe)
+        fail(`unknown recipe "${id}" — try: askewly-design recipes list`);
+    try {
+        const result = addRecipe(recipe, path.resolve(options.out), Boolean(options.force), path.resolve(options.tokens));
+        console.log(`wrote ${result.file}`);
+        if (result.missingTokens.length > 0) {
+            console.log(`\n⚠ tokens not found in ${options.tokens} — run \`askewly-design init\` first. Required:`);
+            for (const token of result.missingTokens)
+                console.log(`  - ${token}`);
+        }
+        if (recipe.code_asset)
+            console.log(`\nFull implementation reference: ${recipe.code_asset} (ui-dictionary repo)`);
+        if (result.checks.length > 0) {
+            console.log("\nChecks before you ship:");
+            for (const check of result.checks)
+                console.log(`  - ${check}`);
+        }
+        if (result.antiPatterns.length > 0) {
+            console.log("\nAnti-patterns to avoid:");
+            for (const anti of result.antiPatterns)
+                console.log(`  - ${anti}`);
+        }
+    }
+    catch (error) {
+        if (error instanceof InjectError)
+            fail(error.message);
+        throw error;
+    }
+});
+program
+    .command("verify")
+    .argument("[dir]", "directory to scan", ".")
+    .option("--ext <list>", "comma-separated extensions to scan", "tsx,ts,jsx,js,css,html")
+    .description("scan for color values that bypass the token system (hex literals, raw rgb/hsl/oklch)")
+    .action((dir, options) => {
+    const target = path.resolve(dir);
+    const { files, violations } = verifyDir(target, options.ext.split(",").map((e) => e.trim()));
+    if (violations.length === 0) {
+        console.log(`verify PASS — ${files} file(s) scanned, no color literals (tokens.css/askewly.css and build dirs are excluded)`);
+        return;
+    }
+    console.error(`verify FAIL — ${violations.length} violation(s) in ${files} file(s):`);
+    for (const violation of violations) {
+        console.error(`  ${path.relative(target, violation.file)}:${violation.line} [${violation.rule}] ${violation.excerpt}`);
+    }
+    console.error("\nFix: replace literals with semantic token utilities (bg-primary, text-foreground, border-border, ...).");
+    process.exit(1);
+});
+const recipes = program.command("recipes").description("component recipes (agent-ready implementation contracts)");
+recipes
+    .command("list")
+    .option("--json", "machine-readable output")
+    .description("list all recipes")
+    .action((options) => {
+    const all = loadRecipes();
+    if (options.json) {
+        console.log(JSON.stringify(all.map((r) => ({ id: r.id, name: r.name, pattern_group: r.pattern_group, source_path: r.source_path })), null, 2));
+        return;
+    }
+    for (const recipe of all) {
+        console.log(`${recipe.id}  (${recipe.pattern_group ?? "-"})  —  ${recipe.name ?? recipe.id}`);
+    }
+});
+recipes
+    .command("show")
+    .argument("<id>", "recipe id, e.g. button")
+    .option("--json", "machine-readable output (frontmatter + body)")
+    .description("show one recipe in full")
+    .action((id, options) => {
+    const recipe = loadRecipes().find((r) => r.id === id);
+    if (!recipe)
+        fail(`unknown recipe "${id}" — try: askewly-design recipes list`);
+    if (options.json) {
+        console.log(JSON.stringify(recipe, null, 2));
+        return;
+    }
+    console.log(`# ${recipe.name ?? recipe.id}  (${recipe.pattern_group ?? "-"})`);
+    if (recipe.tokens_used?.length)
+        console.log(`tokens_used: ${recipe.tokens_used.join(", ")}`);
+    if (recipe.code_asset)
+        console.log(`code_asset: ${recipe.code_asset}`);
+    console.log("");
+    console.log(recipe.body);
+});
+program.parse();

package/dist/inject.js

@@ -0,0 +1,90 @@
+import { existsSync, mkdirSync, readFileSync, writeFileSync } from "node:fs";
+import path from "node:path";
+export class InjectError extends Error {
+}
+function readBundled(relative) {
+    return readFileSync(new URL(`../data/${relative}`, import.meta.url), "utf8");
+}
+/**
+ * Writes DESIGN.md and tokens.css into targetDir.
+ * Refuses to overwrite existing files unless force is set.
+ */
+export function initProject(targetDir, force) {
+    const files = [
+        ["DESIGN.md", readBundled("DESIGN.md")],
+        ["tokens.css", readBundled("tokens.css")],
+        ["askewly.css", readBundled("askewly.css")],
+    ];
+    const conflicts = files
+        .map(([name]) => path.join(targetDir, name))
+        .filter((file) => existsSync(file));
+    if (conflicts.length > 0 && !force) {
+        throw new InjectError(`refusing to overwrite: ${conflicts.join(", ")} (use --force to overwrite)`);
+    }
+    mkdirSync(targetDir, { recursive: true });
+    const written = [];
+    for (const [name, content] of files) {
+        const file = path.join(targetDir, name);
+        writeFileSync(file, content);
+        written.push(file);
+    }
+    return written;
+}
+/** Extracts the first fenced code block under the recipe's `## Code` section. */
+export function extractCodeSnippet(recipe) {
+    const codeSection = recipe.body.split(/^## Code\s*$/m)[1];
+    if (!codeSection) {
+        throw new InjectError(`recipe "${recipe.id}" has no ## Code section`);
+    }
+    const fence = codeSection.match(/```[a-z]*\n([\s\S]*?)```/);
+    if (!fence) {
+        throw new InjectError(`recipe "${recipe.id}" has no fenced code block under ## Code`);
+    }
+    return fence[1].trimEnd() + "\n";
+}
+/** Extracts list items of a `## <title>` section (used for Checks / Anti-patterns notes). */
+export function extractSectionNotes(recipe, title) {
+    const section = recipe.body.split(new RegExp(`^## ${title}\\s*$`, "m"))[1];
+    if (!section)
+        return [];
+    const untilNext = section.split(/^## /m)[0];
+    return untilNext
+        .split("\n")
+        .filter((line) => line.trim().startsWith("- "))
+        .map((line) => line.trim().slice(2));
+}
+/**
+ * Writes the recipe's Code excerpt to <outDir>/<id>.tsx and reports which
+ * tokens_used entries are not covered by an existing tokens.css in outDir's
+ * project root (heuristic: tokens.css next to outDir or in cwd).
+ */
+export function addRecipe(recipe, outDir, force, tokensCssPath) {
+    const snippet = extractCodeSnippet(recipe);
+    const file = path.join(outDir, `${recipe.id}.tsx`);
+    if (existsSync(file) && !force) {
+        throw new InjectError(`refusing to overwrite: ${file} (use --force to overwrite)`);
+    }
+    mkdirSync(outDir, { recursive: true });
+    writeFileSync(file, snippet);
+    let missingTokens = [];
+    const tokensUsed = recipe.tokens_used ?? [];
+    if (tokensUsed.length > 0) {
+        if (tokensCssPath && existsSync(tokensCssPath)) {
+            const css = readFileSync(tokensCssPath, "utf8");
+            const bundledCss = readBundled("tokens.css");
+            // The generated css does not embed DTCG paths; equality with the bundled
+            // generation is the practical "tokens are present and current" check.
+            if (css !== bundledCss)
+                missingTokens = [...tokensUsed];
+        }
+        else {
+            missingTokens = [...tokensUsed];
+        }
+    }
+    return {
+        file,
+        missingTokens,
+        checks: extractSectionNotes(recipe, "Checks"),
+        antiPatterns: extractSectionNotes(recipe, "Anti-patterns"),
+    };
+}

package/dist/load.js

@@ -0,0 +1,51 @@
+import { readFileSync } from "node:fs";
+function loadJson(relative) {
+    const url = new URL(`../data/${relative}`, import.meta.url);
+    return JSON.parse(readFileSync(url, "utf8"));
+}
+export function loadTerms() {
+    return loadJson("terms.json");
+}
+export function loadTokens() {
+    return loadJson("tokens.json");
+}
+export function loadTokensCss() {
+    return readFileSync(new URL("../data/tokens.css", import.meta.url), "utf8");
+}
+export function loadRecipes() {
+    return loadJson("recipes.json");
+}
+/** Case-insensitive substring search over id, names, aliases, one-liner, prompt phrases. */
+export function searchTerms(terms, query) {
+    const needle = query.trim().toLowerCase();
+    if (!needle)
+        return [];
+    const scored = [];
+    for (const term of terms) {
+        const id = term.id.toLowerCase();
+        const en = term.en?.name?.toLowerCase() ?? "";
+        const ko = term.ko?.name ?? "";
+        const aliases = (term.aliases ?? []).map((a) => String(a).toLowerCase());
+        const oneLiner = term.one_liner?.toLowerCase() ?? "";
+        const phrases = (term.prompt_phrases ?? []).map((p) => String(p).toLowerCase());
+        let score = 0;
+        if (id === needle || en === needle || ko === query.trim())
+            score = 100;
+        else if (id.includes(needle) || en.includes(needle) || ko.includes(query.trim()))
+            score = 60;
+        else if (aliases.some((a) => a.includes(needle)))
+            score = 50;
+        else if (oneLiner.includes(needle) || phrases.some((p) => p.includes(needle)))
+            score = 20;
+        if (score > 0)
+            scored.push({ term, score });
+    }
+    return scored.sort((a, b) => b.score - a.score || a.term.id.localeCompare(b.term.id)).map((s) => s.term);
+}
+/** Returns the color subtree for a tier, or null when the tier does not exist. */
+export function tokensForTier(tokens, tier) {
+    const color = tokens.color;
+    if (!color || !(tier in color))
+        return null;
+    return color[tier];
+}

package/dist/verify.js

@@ -0,0 +1,147 @@
+import { readFileSync, readdirSync, statSync } from "node:fs";
+import path from "node:path";
+const DEFAULT_EXTENSIONS = ["tsx", "ts", "jsx", "js", "css", "html"];
+const SKIP_DIRS = new Set(["node_modules", "dist", "build", ".git", ".next"]);
+// Generated token files legitimately contain raw color values.
+const SKIP_FILES = new Set(["tokens.css", "askewly.css"]);
+const HEX_RULE = /#[0-9a-fA-F]{3,8}\b/;
+const COLOR_FN_RULE = /\b(?:rgb|rgba|hsl|hsla|oklch)\(/;
+// Every rule is checked independently per line. A single ternary would report
+// only the first match and silently drop the rest — `"#111" + "rgb(1,2,3)"`
+// hid its raw-color-fn violation that way (DOG1 step-1 baseline).
+const RULES = [
+    { name: "hex-literal", pattern: HEX_RULE },
+    { name: "raw-color-fn", pattern: COLOR_FN_RULE },
+];
+// `//` starts a comment in JS-family sources only. In CSS it does not, and
+// blanking to end-of-line there would hide real declarations.
+const LINE_COMMENT_EXTENSIONS = new Set(["ts", "tsx", "js", "jsx"]);
+// Two SVG shapes: paired <svg>…</svg> and self-closing <svg … />.
+const SVG_PAIRED = /<svg\b[\s\S]*?<\/svg\s*>/gi;
+const SVG_SELF_CLOSING = /<svg\b[^>]*\/>/gi;
+/**
+ * Blanks regions whose color literals are not rendered output — comments and
+ * SVG markup — while preserving every character position and newline, so
+ * reported line numbers still point at the original source.
+ *
+ * Masking happens BEFORE rule matching, deliberately. Attaching per-rule
+ * exceptions instead would mean re-implementing the same context handling for
+ * every future rule, and DOG1 step-1 observed that both existing rules already
+ * had the identical false positive.
+ */
+export function maskIgnoredRegions(source, ext) {
+    const chars = source.split("");
+    const blank = (index) => {
+        if (chars[index] !== "\n")
+            chars[index] = " ";
+    };
+    // Pass 1 — comments, string-aware so `"https://…"` is not read as a comment.
+    const allowLineComment = LINE_COMMENT_EXTENSIONS.has(ext);
+    let state = "code";
+    let i = 0;
+    while (i < source.length) {
+        const c = source[i];
+        const next = source[i + 1];
+        switch (state) {
+            case "code":
+                if (c === "/" && next === "*") {
+                    state = "block-comment";
+                    blank(i);
+                    blank(i + 1);
+                    i += 2;
+                    continue;
+                }
+                if (allowLineComment && c === "/" && next === "/") {
+                    state = "line-comment";
+                    blank(i);
+                    blank(i + 1);
+                    i += 2;
+                    continue;
+                }
+                if (c === "'")
+                    state = "single";
+                else if (c === '"')
+                    state = "double";
+                else if (c === "`")
+                    state = "template";
+                break;
+            case "line-comment":
+                if (c === "\n")
+                    state = "code";
+                else
+                    blank(i);
+                break;
+            case "block-comment":
+                blank(i);
+                if (c === "*" && next === "/") {
+                    blank(i + 1);
+                    state = "code";
+                    i += 2;
+                    continue;
+                }
+                break;
+            case "single":
+            case "double":
+            case "template": {
+                if (c === "\\") {
+                    i += 2;
+                    continue;
+                }
+                const closes = (state === "single" && c === "'") || (state === "double" && c === '"') || (state === "template" && c === "`");
+                if (closes)
+                    state = "code";
+                break;
+            }
+        }
+        i += 1;
+    }
+    // Pass 2 — SVG markup, matched against the comment-masked text so a commented
+    // out `</svg>` cannot terminate a block early.
+    let masked = chars.join("");
+    for (const pattern of [SVG_PAIRED, SVG_SELF_CLOSING]) {
+        masked = masked.replace(pattern, (match) => match.replace(/[^\n]/g, " "));
+    }
+    return masked;
+}
+function collectFiles(dir, extensions) {
+    const files = [];
+    for (const entry of readdirSync(dir)) {
+        const full = path.join(dir, entry);
+        const stats = statSync(full);
+        if (stats.isDirectory()) {
+            if (!SKIP_DIRS.has(entry))
+                files.push(...collectFiles(full, extensions));
+            continue;
+        }
+        if (SKIP_FILES.has(entry))
+            continue;
+        const ext = path.extname(entry).slice(1);
+        if (extensions.includes(ext))
+            files.push(full);
+    }
+    return files;
+}
+/**
+ * Scans project files for color values that bypass the token system:
+ * hex literals and raw color functions. Token indirection means UI code
+ * should only reference semantic utilities (bg-primary, text-foreground, ...).
+ */
+export function verifyDir(dir, extensions = DEFAULT_EXTENSIONS) {
+    const files = collectFiles(dir, extensions);
+    const violations = [];
+    for (const file of files) {
+        const source = readFileSync(file, "utf8");
+        const scanned = maskIgnoredRegions(source, path.extname(file).slice(1)).split("\n");
+        const original = source.split("\n");
+        scanned.forEach((text, index) => {
+            for (const { name, pattern } of RULES) {
+                if (!pattern.test(text))
+                    continue;
+                // Report the untouched source line — the mask is a matching device,
+                // not something the reader should have to decode.
+                violations.push({ file, line: index + 1, rule: name, excerpt: original[index].trim().slice(0, 120) });
+            }
+        });
+    }
+    return { files: files.length, violations };
+}

package/package.json

@@ -0,0 +1,50 @@
+{
+  "name": "@askewly/design",
+  "version": "0.1.0",
+  "description": "Query, inject, and verify the Askewly Design system (tokens, UI vocabulary, recipes) from your terminal or coding agent.",
+  "license": "MIT",
+  "homepage": "https://ui.askewly.com",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/lumatic2/ui-dictionary.git",
+    "directory": "packages/cli"
+  },
+  "keywords": [
+    "design-system",
+    "design-tokens",
+    "linter",
+    "ui",
+    "coding-agent"
+  ],
+  "type": "module",
+  "bin": {
+    "askewly-design": "./dist/index.js"
+  },
+  "files": [
+    "dist",
+    "data",
+    "README.md",
+    "LICENSE"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "engines": {
+    "node": ">=18"
+  },
+  "scripts": {
+    "build:data": "node scripts/build-data.mjs",
+    "build": "npm run build:data && tsc",
+    "test": "vitest run",
+    "prepack": "npm run build"
+  },
+  "dependencies": {
+    "commander": "^13.1.0"
+  },
+  "devDependencies": {
+    "@types/node": "^22.10.0",
+    "typescript": "^5.7.0",
+    "vitest": "^3.0.0",
+    "yaml": "^2.6.0"
+  }
+}