@askewly/design 0.6.4 → 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (11) hide show
  1. package/README.md +36 -34
  2. package/data/askewly.css +56 -56
  3. package/data/assets.json +1 -1
  4. package/data/knowledge.json +1 -1
  5. package/data/recipes.json +1 -1
  6. package/dist/data.js +25 -6
  7. package/dist/index.js +121 -69
  8. package/dist/local.js +76 -0
  9. package/dist/mascot.js +25 -25
  10. package/dist/site.js +11 -43
  11. package/package.json +50 -50
package/README.md CHANGED
@@ -1,34 +1,36 @@
1
- # @askewly/design
2
-
3
- Query, inject, and verify the [Askewly Design](https://ui.askewly.com) system from your terminal or coding agent.
4
-
5
- ```bash
6
- npx @askewly/design verify src
7
- ```
8
-
9
- ## Commands
10
-
11
- | Command | What it does |
12
- |---|---|
13
- | `verify [dir]` | Scan for color values that bypass the token system — hex literals and raw `rgb()`/`hsl()`/`oklch()`. Comments and SVG markup are exempt. |
14
- | `terms search <query>` | Search the UI vocabulary (562 terms, Korean + English). |
15
- | `terms show <id>` | Definition, aliases, visual anatomy, anti-use cases, prompt phrases. |
16
- | `tokens` | Print the design token set. |
17
- | `init [dir]` | Drop token CSS into a project. |
18
- | `add <id>` | Add the finished component — the same registry item `npx shadcn add https://ui.askewly.com/r/<id>.json` installs: its files, lib files, and registry dependencies (resolved recursively). Keeps files you changed unless `--force`, prints the `npm i` list and any missing CSS variables. If the registry has no item for the id (or is unreachable), it says so and writes the recipe's Code excerpt instead; `--excerpt` forces that offline path (0.6.4). |
19
- | `recipes list` / `recipes show <id>` | Agent-ready implementation contracts (45 recipes). |
20
- | `assets search <query>` / `assets show <id>` | One md per asset (registry + recipes): definition, usage rules, install command. Bundled, works offline. `show` on an unknown id exits `1` with 3 closest ids (0.6.0). |
21
- | `site list` / `site get <slug> [dir]` | Download a reproduced-site bundle: structure only (code, layout, motion, text). Images are same-size blank placeholders; video, audio and fonts are left out (originals stay with their owners). Verifies sha256, refuses a non-empty dir, unknown slug exits `1` with closest slugs. Base URL override: `ASKEWLY_SITE_BUNDLE_URL`. |
22
- | `prompt <id>` | Paste-ready agent prompt: asset md URL + install command + usage rules + one-line instruction (0.6.0). |
23
-
24
- ## Why `verify` exists
25
-
26
- A screenshot cannot tell `#3B82F6` from `var(--color-accent)` — they render identically. Whether a screen actually uses the token system is a question for a machine, not an eye.
27
-
28
- `verify` exits `1` on violations and prints `file:line [rule] excerpt`, so a coding agent can read the list, fix, and re-measure.
29
-
30
- Exempt by design: generated token files (`tokens.css`, `askewly.css`), build directories, comments, and SVG markup.
31
-
32
- ## License
33
-
34
- MIT
1
+ # @askewly/design
2
+
3
+ Query, inject, and verify the [Askewly Design](https://ui.askewly.com) system from your terminal or coding agent.
4
+
5
+ ```bash
6
+ npx @askewly/design verify src
7
+ ```
8
+
9
+ ## Commands
10
+
11
+ | Command | What it does |
12
+ |---|---|
13
+ | `verify [dir]` | Scan for color values that bypass the token system — hex literals and raw `rgb()`/`hsl()`/`oklch()`. Comments and SVG markup are exempt. |
14
+ | `find <query>` | Search terms, recipes, assets and knowledge in one pass. Prints an index with the next command for each hit. `data recall` is a permanent alias. |
15
+ | `terms search <query>` | Search the UI vocabulary (600+ terms, Korean + English). |
16
+ | `terms show <id>` | Definition, aliases, visual anatomy, anti-use cases, prompt phrases. |
17
+ | `tokens` | Print the design token set. |
18
+ | `init [dir]` | Drop token CSS into a project. |
19
+ | `add <id>` | Add the finished component — the same registry item `npx shadcn add https://ui.askewly.com/r/<id>.json` installs: its files, lib files, and registry dependencies (resolved recursively). Keeps files you changed unless `--force`, prints the `npm i` list and any missing CSS variables. If the registry has no item for the id (or is unreachable), it says so and writes the recipe's Code excerpt instead; `--excerpt` forces that offline path (0.6.4). |
20
+ | `recipes list` / `recipes show <id>` | Agent-ready implementation contracts (200+ recipes). |
21
+ | `knowledge list` / `search <query>` / `show <id>` | Design knowledge rules: decision tables and judgment gates. |
22
+ | `assets search <query>` / `assets show <id>` | One md per asset (registry + recipes): definition, usage rules, install command. Bundled, works offline. `show` on an unknown id exits `1` with 3 closest ids (0.6.0). |
23
+ | `site list` / `site get` | No longer available. Whole-site bundles are not published since 2026-11-06; each site's design guide and notes are at https://ui.askewly.com/sites. |
24
+ | `prompt <id>` | Paste-ready agent prompt: asset md URL + install command + usage rules + one-line instruction (0.6.0). |
25
+
26
+ ## Why `verify` exists
27
+
28
+ A screenshot cannot tell `#3B82F6` from `var(--color-accent)` — they render identically. Whether a screen actually uses the token system is a question for a machine, not an eye.
29
+
30
+ `verify` exits `1` on violations and prints `file:line [rule] excerpt`, so a coding agent can read the list, fix, and re-measure.
31
+
32
+ Exempt by design: generated token files (`tokens.css`, `askewly.css`), build directories, comments, and SVG markup.
33
+
34
+ ## License
35
+
36
+ MIT
package/data/askewly.css CHANGED
@@ -5,60 +5,60 @@
5
5
 
6
6
  @custom-variant dark (&:is(.dark *));
7
7
 
8
- @theme inline {
9
- --font-sans: Geist, "Noto Sans KR", ui-sans-serif, system-ui, sans-serif;
10
- --font-mono: "Geist Mono", ui-monospace, monospace;
11
- /* 타이포 스케일 SSOT 경유 (M6) — 값이 Tailwind 기본값과 동일한 단계만 배선(렌더 무손실).
12
- lg(20)·2xl(40)은 Tailwind 동명 기본값과 달라 배선하지 않는다. 2xs 는 신설 유틸(라인하이트 쌍 없음 — text-[10px] 관례와 동일). */
13
- --text-2xs: var(--font-size-2xs);
14
- --text-xs: var(--font-size-xs);
15
- --text-3xl: var(--font-size-3xl);
16
- --text-5xl: var(--font-size-5xl);
17
- --text-7xl: var(--font-size-7xl);
18
- --color-background: var(--background);
19
- --color-foreground: var(--foreground);
20
- --color-card: var(--card);
21
- --color-card-foreground: var(--card-foreground);
22
- --color-popover: var(--popover);
23
- --color-popover-foreground: var(--popover-foreground);
24
- --color-primary: var(--primary);
25
- --color-primary-foreground: var(--primary-foreground);
26
- --color-secondary: var(--secondary);
27
- --color-secondary-foreground: var(--secondary-foreground);
28
- --color-muted: var(--muted);
29
- --color-muted-foreground: var(--muted-foreground);
30
- --color-accent: var(--accent);
31
- --color-accent-foreground: var(--accent-foreground);
32
- --color-destructive: var(--destructive);
33
- --color-destructive-foreground: var(--destructive-foreground);
34
- --color-border: var(--border);
35
- --color-input: var(--input);
36
- --color-ring: var(--ring);
37
- --color-scrim: var(--scrim);
38
- --color-primary-hover: var(--primary-hover);
39
- --color-emphasis-surface: var(--emphasis-surface);
40
- --color-emphasis-foreground: var(--emphasis-foreground);
41
- --color-emphasis-solid: var(--emphasis-solid);
42
- --color-emphasis-solid-hover: var(--emphasis-solid-hover);
43
- --color-emphasis-ring: var(--emphasis-ring);
44
- --color-emphasis-on-solid: var(--emphasis-on-solid);
45
- --color-info-surface: var(--info-surface);
46
- --color-info-foreground: var(--info-foreground);
47
- --color-info-link: var(--info-link);
48
- --color-info-link-hover: var(--info-link-hover);
49
- --color-success-surface: var(--success-surface);
50
- --color-success-foreground: var(--success-foreground);
51
- --color-danger-surface: var(--danger-surface);
52
- --color-danger-foreground: var(--danger-foreground);
53
- --color-danger-solid: var(--danger-solid);
54
- --color-danger-solid-hover: var(--danger-solid-hover);
55
- --radius-sm: calc(var(--radius) - 4px);
56
- --radius-md: calc(var(--radius) - 2px);
57
- --radius-lg: var(--radius);
58
- --radius-xl: calc(var(--radius) + 4px);
59
- --color-askewly-violet: var(--askewly-violet);
60
- --color-askewly-orchid: var(--askewly-orchid);
61
- --color-askewly-lavender: var(--askewly-lavender);
62
- --color-askewly-sky: var(--askewly-sky);
63
- --color-askewly-mint: var(--askewly-mint);
8
+ @theme inline {
9
+ --font-sans: Geist, "Noto Sans KR", ui-sans-serif, system-ui, sans-serif;
10
+ --font-mono: "Geist Mono", ui-monospace, monospace;
11
+ /* 타이포 스케일 SSOT 경유 (M6) — 값이 Tailwind 기본값과 동일한 단계만 배선(렌더 무손실).
12
+ lg(20)·2xl(40)은 Tailwind 동명 기본값과 달라 배선하지 않는다. 2xs 는 신설 유틸(라인하이트 쌍 없음 — text-[10px] 관례와 동일). */
13
+ --text-2xs: var(--font-size-2xs);
14
+ --text-xs: var(--font-size-xs);
15
+ --text-3xl: var(--font-size-3xl);
16
+ --text-5xl: var(--font-size-5xl);
17
+ --text-7xl: var(--font-size-7xl);
18
+ --color-background: var(--background);
19
+ --color-foreground: var(--foreground);
20
+ --color-card: var(--card);
21
+ --color-card-foreground: var(--card-foreground);
22
+ --color-popover: var(--popover);
23
+ --color-popover-foreground: var(--popover-foreground);
24
+ --color-primary: var(--primary);
25
+ --color-primary-foreground: var(--primary-foreground);
26
+ --color-secondary: var(--secondary);
27
+ --color-secondary-foreground: var(--secondary-foreground);
28
+ --color-muted: var(--muted);
29
+ --color-muted-foreground: var(--muted-foreground);
30
+ --color-accent: var(--accent);
31
+ --color-accent-foreground: var(--accent-foreground);
32
+ --color-destructive: var(--destructive);
33
+ --color-destructive-foreground: var(--destructive-foreground);
34
+ --color-border: var(--border);
35
+ --color-input: var(--input);
36
+ --color-ring: var(--ring);
37
+ --color-scrim: var(--scrim);
38
+ --color-primary-hover: var(--primary-hover);
39
+ --color-emphasis-surface: var(--emphasis-surface);
40
+ --color-emphasis-foreground: var(--emphasis-foreground);
41
+ --color-emphasis-solid: var(--emphasis-solid);
42
+ --color-emphasis-solid-hover: var(--emphasis-solid-hover);
43
+ --color-emphasis-ring: var(--emphasis-ring);
44
+ --color-emphasis-on-solid: var(--emphasis-on-solid);
45
+ --color-info-surface: var(--info-surface);
46
+ --color-info-foreground: var(--info-foreground);
47
+ --color-info-link: var(--info-link);
48
+ --color-info-link-hover: var(--info-link-hover);
49
+ --color-success-surface: var(--success-surface);
50
+ --color-success-foreground: var(--success-foreground);
51
+ --color-danger-surface: var(--danger-surface);
52
+ --color-danger-foreground: var(--danger-foreground);
53
+ --color-danger-solid: var(--danger-solid);
54
+ --color-danger-solid-hover: var(--danger-solid-hover);
55
+ --radius-sm: calc(var(--radius) - 4px);
56
+ --radius-md: calc(var(--radius) - 2px);
57
+ --radius-lg: var(--radius);
58
+ --radius-xl: calc(var(--radius) + 4px);
59
+ --color-askewly-violet: var(--askewly-violet);
60
+ --color-askewly-orchid: var(--askewly-orchid);
61
+ --color-askewly-lavender: var(--askewly-lavender);
62
+ --color-askewly-sky: var(--askewly-sky);
63
+ --color-askewly-mint: var(--askewly-mint);
64
64
  }