@design-ai/cli 4.55.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 (529) hide show
  1. package/.claude-plugin/plugin.json +164 -0
  2. package/AGENTS.ko.md +126 -0
  3. package/AGENTS.md +182 -0
  4. package/CHANGELOG.md +6883 -0
  5. package/CLAUDE.md +39 -0
  6. package/LICENSE +21 -0
  7. package/README.ko.md +245 -0
  8. package/README.md +277 -0
  9. package/agents/README.md +14 -0
  10. package/agents/a11y-reviewer.md +121 -0
  11. package/agents/component-architect.md +57 -0
  12. package/agents/design-critic.md +46 -0
  13. package/agents/token-extractor.md +63 -0
  14. package/cli/bin/design-ai-mcp.mjs +6 -0
  15. package/cli/bin/design-ai.mjs +40 -0
  16. package/cli/commands/audit.mjs +111 -0
  17. package/cli/commands/check.mjs +226 -0
  18. package/cli/commands/doctor.mjs +141 -0
  19. package/cli/commands/examples.mjs +58 -0
  20. package/cli/commands/help.mjs +271 -0
  21. package/cli/commands/install.mjs +161 -0
  22. package/cli/commands/learn.mjs +1871 -0
  23. package/cli/commands/list.mjs +143 -0
  24. package/cli/commands/mcp.mjs +27 -0
  25. package/cli/commands/pack.mjs +211 -0
  26. package/cli/commands/prompt.mjs +199 -0
  27. package/cli/commands/route.mjs +247 -0
  28. package/cli/commands/search.mjs +60 -0
  29. package/cli/commands/show.mjs +52 -0
  30. package/cli/commands/site.mjs +558 -0
  31. package/cli/commands/status.mjs +161 -0
  32. package/cli/commands/uninstall.mjs +119 -0
  33. package/cli/commands/update.mjs +184 -0
  34. package/cli/commands/version.mjs +94 -0
  35. package/cli/commands/workspace.mjs +176 -0
  36. package/cli/lib/brief.mjs +52 -0
  37. package/cli/lib/check.mjs +642 -0
  38. package/cli/lib/dispatch.mjs +109 -0
  39. package/cli/lib/doctor.mjs +505 -0
  40. package/cli/lib/examples.mjs +258 -0
  41. package/cli/lib/exec.mjs +63 -0
  42. package/cli/lib/help-flags.mjs +5 -0
  43. package/cli/lib/learn.mjs +3694 -0
  44. package/cli/lib/log.mjs +47 -0
  45. package/cli/lib/mcp-server.mjs +426 -0
  46. package/cli/lib/output.mjs +101 -0
  47. package/cli/lib/pack.mjs +599 -0
  48. package/cli/lib/paths.mjs +63 -0
  49. package/cli/lib/prompt.mjs +603 -0
  50. package/cli/lib/route.mjs +740 -0
  51. package/cli/lib/search.mjs +158 -0
  52. package/cli/lib/show.mjs +161 -0
  53. package/cli/lib/signals.mjs +2337 -0
  54. package/cli/lib/site.mjs +6617 -0
  55. package/cli/lib/skill-proposals.mjs +2046 -0
  56. package/cli/lib/suggest.mjs +66 -0
  57. package/cli/lib/workspace.mjs +1056 -0
  58. package/commands/README.md +25 -0
  59. package/commands/component-spec.md +34 -0
  60. package/commands/conversational.md +44 -0
  61. package/commands/design-from-brief.md +141 -0
  62. package/commands/design-review.md +62 -0
  63. package/commands/document-from-brief.md +47 -0
  64. package/commands/extract-tokens.md +38 -0
  65. package/commands/game-ui.md +40 -0
  66. package/commands/illustration.md +37 -0
  67. package/commands/iterate.md +167 -0
  68. package/commands/motion-design.md +54 -0
  69. package/commands/palette-from-brand.md +50 -0
  70. package/commands/print.md +49 -0
  71. package/commands/slide-deck.md +46 -0
  72. package/commands/spatial.md +47 -0
  73. package/commands/stability-review.md +74 -0
  74. package/commands/video.md +42 -0
  75. package/commands/website-improvement.md +77 -0
  76. package/docs/AGENT-DEVELOPMENT.md +658 -0
  77. package/docs/AI-LEARNING.md +429 -0
  78. package/docs/AIDER-INTEGRATION.md +224 -0
  79. package/docs/ARCHITECTURE.ko.md +183 -0
  80. package/docs/ARCHITECTURE.md +105 -0
  81. package/docs/CODEX-INTEGRATION.md +311 -0
  82. package/docs/COMPANY-WEBSITE-DOGFOOD.ko.md +144 -0
  83. package/docs/COMPANY-WEBSITE-DOGFOOD.md +150 -0
  84. package/docs/COMPANY-WEBSITE-INTAKE-TEMPLATE.ko.md +153 -0
  85. package/docs/COMPANY-WEBSITE-INTAKE-TEMPLATE.md +154 -0
  86. package/docs/CONTRIBUTING.ko.md +203 -0
  87. package/docs/CONTRIBUTING.md +242 -0
  88. package/docs/CURSOR-INTEGRATION.md +220 -0
  89. package/docs/DISTRIBUTION.ko.md +248 -0
  90. package/docs/DISTRIBUTION.md +253 -0
  91. package/docs/DOGFOOD-FINDINGS.md +180 -0
  92. package/docs/DOGFOOD-V4-FINDINGS.md +139 -0
  93. package/docs/DOGFOOD-V4-MKDOCS-FINDINGS.md +233 -0
  94. package/docs/DOGFOOD-V4-NPM-FINDINGS.md +157 -0
  95. package/docs/DOGFOOD-V4-VSCODE-FINDINGS.md +135 -0
  96. package/docs/FIGMA-INTEGRATION.md +222 -0
  97. package/docs/MCP-INTEGRATION.md +243 -0
  98. package/docs/MIGRATION-v4.md +121 -0
  99. package/docs/PLUGIN-PACKAGING.md +240 -0
  100. package/docs/PRODUCT-READINESS.md +66 -0
  101. package/docs/QUICKSTART.ko.md +178 -0
  102. package/docs/QUICKSTART.md +179 -0
  103. package/docs/RELEASE-CHECKLIST.md +292 -0
  104. package/docs/ROADMAP.md +19495 -0
  105. package/docs/SESSION-LOG.md +940 -0
  106. package/docs/TOKEN-SYNC.md +237 -0
  107. package/docs/USING.ko.md +206 -0
  108. package/docs/USING.md +218 -0
  109. package/docs/WEBSITE-IMPROVEMENT.ko.md +75 -0
  110. package/docs/WEBSITE-IMPROVEMENT.md +89 -0
  111. package/docs/announcements/README.md +56 -0
  112. package/docs/announcements/dev-to-korea.md +206 -0
  113. package/docs/announcements/hashnode-post.ko.md +232 -0
  114. package/docs/announcements/okky-post.ko.md +158 -0
  115. package/docs/announcements/press-kit.md +101 -0
  116. package/docs/announcements/reddit-r-korea.md +196 -0
  117. package/docs/announcements/show-hn.md +114 -0
  118. package/docs/announcements/twitter-thread.md +255 -0
  119. package/docs/external-status.md +34 -0
  120. package/docs/integrations/aider-walkthrough.ko.md +275 -0
  121. package/docs/integrations/aider-walkthrough.md +274 -0
  122. package/docs/integrations/codex-walkthrough.ko.md +297 -0
  123. package/docs/integrations/codex-walkthrough.md +297 -0
  124. package/docs/integrations/cursor-walkthrough.ko.md +281 -0
  125. package/docs/integrations/cursor-walkthrough.md +284 -0
  126. package/docs/integrations/design-ai-mcp-server.md +169 -0
  127. package/docs/integrations/figma-mcp.md +149 -0
  128. package/docs/integrations/github-mcp.md +178 -0
  129. package/docs/integrations/linear-mcp.md +215 -0
  130. package/docs/integrations/notion-mcp.md +174 -0
  131. package/docs/integrations/sdk-walkthrough.ko.md +375 -0
  132. package/docs/integrations/sdk-walkthrough.md +375 -0
  133. package/docs/integrations/slack-mcp.md +208 -0
  134. package/docs/integrations/vscode-walkthrough.ko.md +202 -0
  135. package/docs/integrations/vscode-walkthrough.md +205 -0
  136. package/docs/requirements.txt +16 -0
  137. package/docs/site-overrides/extra.css +83 -0
  138. package/docs/site-overrides/favicon.svg +4 -0
  139. package/docs/site-overrides/logo.svg +10 -0
  140. package/docs/site-overrides/main.html +18 -0
  141. package/docs/website-console/app.js +2540 -0
  142. package/docs/website-console/index.html +24 -0
  143. package/docs/website-console/styles.css +975 -0
  144. package/examples/README.md +252 -0
  145. package/examples/cases/dogfood-v4-korean-hr-onboarding.md +356 -0
  146. package/examples/component-accordion-actions.md +153 -0
  147. package/examples/component-accordion-details.md +147 -0
  148. package/examples/component-accordion-summary.md +180 -0
  149. package/examples/component-accordion.md +229 -0
  150. package/examples/component-account-card.md +284 -0
  151. package/examples/component-address-input.md +260 -0
  152. package/examples/component-affix.md +190 -0
  153. package/examples/component-alert-dialog.md +210 -0
  154. package/examples/component-alert-title.md +77 -0
  155. package/examples/component-alert.md +192 -0
  156. package/examples/component-amount-input.md +278 -0
  157. package/examples/component-anchor.md +198 -0
  158. package/examples/component-app-bar.md +249 -0
  159. package/examples/component-aspect-ratio.md +156 -0
  160. package/examples/component-auto-complete.md +199 -0
  161. package/examples/component-avatar-group.md +170 -0
  162. package/examples/component-avatar.md +191 -0
  163. package/examples/component-back-top.md +123 -0
  164. package/examples/component-backdrop.md +148 -0
  165. package/examples/component-badge.md +181 -0
  166. package/examples/component-banner.md +237 -0
  167. package/examples/component-biometric-gate.md +281 -0
  168. package/examples/component-blockquote.md +153 -0
  169. package/examples/component-border-beam.md +207 -0
  170. package/examples/component-bottom-navigation.md +226 -0
  171. package/examples/component-box.md +112 -0
  172. package/examples/component-breadcrumb.md +222 -0
  173. package/examples/component-button-base.md +190 -0
  174. package/examples/component-button-group.md +117 -0
  175. package/examples/component-button.md +213 -0
  176. package/examples/component-calendar.md +280 -0
  177. package/examples/component-callout.md +131 -0
  178. package/examples/component-card-actions.md +101 -0
  179. package/examples/component-card-content.md +90 -0
  180. package/examples/component-card-header.md +122 -0
  181. package/examples/component-card-media.md +79 -0
  182. package/examples/component-card.md +233 -0
  183. package/examples/component-carousel.md +266 -0
  184. package/examples/component-cascader.md +135 -0
  185. package/examples/component-category-picker.md +271 -0
  186. package/examples/component-chart.md +237 -0
  187. package/examples/component-chat-interface.md +399 -0
  188. package/examples/component-checkbox.md +149 -0
  189. package/examples/component-click-away-listener.md +87 -0
  190. package/examples/component-code.md +213 -0
  191. package/examples/component-collapsible.md +219 -0
  192. package/examples/component-color-picker.md +110 -0
  193. package/examples/component-combobox.md +267 -0
  194. package/examples/component-command.md +299 -0
  195. package/examples/component-config-provider.md +190 -0
  196. package/examples/component-context-menu.md +179 -0
  197. package/examples/component-css-baseline.md +148 -0
  198. package/examples/component-date-picker.md +249 -0
  199. package/examples/component-descriptions.md +242 -0
  200. package/examples/component-dialog-actions.md +111 -0
  201. package/examples/component-dialog-content-text.md +76 -0
  202. package/examples/component-dialog-content.md +105 -0
  203. package/examples/component-dialog-title.md +104 -0
  204. package/examples/component-dialog.md +176 -0
  205. package/examples/component-divider.md +182 -0
  206. package/examples/component-doc-page.md +217 -0
  207. package/examples/component-drawer.md +257 -0
  208. package/examples/component-dropdown.md +220 -0
  209. package/examples/component-email-layout.md +253 -0
  210. package/examples/component-empty-state.md +269 -0
  211. package/examples/component-empty.md +172 -0
  212. package/examples/component-fade.md +87 -0
  213. package/examples/component-feature-grid.md +201 -0
  214. package/examples/component-field.md +266 -0
  215. package/examples/component-filled-input.md +114 -0
  216. package/examples/component-flex.md +117 -0
  217. package/examples/component-float-button.md +214 -0
  218. package/examples/component-form-control-label.md +134 -0
  219. package/examples/component-form-control.md +113 -0
  220. package/examples/component-form-controls.md +251 -0
  221. package/examples/component-form-group.md +86 -0
  222. package/examples/component-form-helper-text.md +95 -0
  223. package/examples/component-form-label.md +98 -0
  224. package/examples/component-form.md +291 -0
  225. package/examples/component-game-hud.md +362 -0
  226. package/examples/component-game-menu.md +327 -0
  227. package/examples/component-grid.md +140 -0
  228. package/examples/component-grow.md +79 -0
  229. package/examples/component-hero-block.md +252 -0
  230. package/examples/component-hover-card.md +211 -0
  231. package/examples/component-icon-button.md +142 -0
  232. package/examples/component-icon.md +102 -0
  233. package/examples/component-illustration.md +280 -0
  234. package/examples/component-image-list.md +107 -0
  235. package/examples/component-image.md +282 -0
  236. package/examples/component-input-adornment.md +101 -0
  237. package/examples/component-input-base.md +134 -0
  238. package/examples/component-input-number.md +141 -0
  239. package/examples/component-input-otp.md +271 -0
  240. package/examples/component-input.md +213 -0
  241. package/examples/component-item.md +243 -0
  242. package/examples/component-kbd.md +197 -0
  243. package/examples/component-krw-amount.md +219 -0
  244. package/examples/component-label.md +118 -0
  245. package/examples/component-layout.md +217 -0
  246. package/examples/component-link.md +223 -0
  247. package/examples/component-list-item-avatar.md +72 -0
  248. package/examples/component-list-item-button.md +139 -0
  249. package/examples/component-list-item-icon.md +82 -0
  250. package/examples/component-list-item-text.md +98 -0
  251. package/examples/component-list-item.md +116 -0
  252. package/examples/component-list-subheader.md +70 -0
  253. package/examples/component-list.md +198 -0
  254. package/examples/component-loading-button.md +125 -0
  255. package/examples/component-loading-sequence.md +254 -0
  256. package/examples/component-lottie-player.md +279 -0
  257. package/examples/component-masonry.md +191 -0
  258. package/examples/component-mentions.md +189 -0
  259. package/examples/component-menu-item.md +102 -0
  260. package/examples/component-menu-list.md +98 -0
  261. package/examples/component-menu.md +139 -0
  262. package/examples/component-menubar.md +259 -0
  263. package/examples/component-message.md +162 -0
  264. package/examples/component-mobile-stepper.md +155 -0
  265. package/examples/component-modal.md +220 -0
  266. package/examples/component-navigation-menu.md +295 -0
  267. package/examples/component-notification.md +166 -0
  268. package/examples/component-otp-countdown.md +245 -0
  269. package/examples/component-outlined-input.md +145 -0
  270. package/examples/component-page-transition.md +281 -0
  271. package/examples/component-pagination.md +226 -0
  272. package/examples/component-paper.md +199 -0
  273. package/examples/component-pass-auth.md +265 -0
  274. package/examples/component-payment-brand-button.md +253 -0
  275. package/examples/component-payment-method-selector.md +272 -0
  276. package/examples/component-payment-receipt.md +277 -0
  277. package/examples/component-popconfirm.md +144 -0
  278. package/examples/component-popover.md +239 -0
  279. package/examples/component-popper.md +129 -0
  280. package/examples/component-pricing-cards.md +247 -0
  281. package/examples/component-progress.md +195 -0
  282. package/examples/component-qr-code.md +201 -0
  283. package/examples/component-radio.md +167 -0
  284. package/examples/component-rate.md +202 -0
  285. package/examples/component-resizable.md +163 -0
  286. package/examples/component-result.md +270 -0
  287. package/examples/component-scroll-area.md +199 -0
  288. package/examples/component-scroll-reveal.md +320 -0
  289. package/examples/component-segmented.md +178 -0
  290. package/examples/component-select.md +258 -0
  291. package/examples/component-separator.md +177 -0
  292. package/examples/component-sheet.md +277 -0
  293. package/examples/component-sidebar.md +257 -0
  294. package/examples/component-skeleton.md +178 -0
  295. package/examples/component-slide.md +89 -0
  296. package/examples/component-slider.md +208 -0
  297. package/examples/component-snackbar-content.md +92 -0
  298. package/examples/component-snackbar.md +121 -0
  299. package/examples/component-sonner.md +165 -0
  300. package/examples/component-space.md +125 -0
  301. package/examples/component-spatial-locomotion.md +373 -0
  302. package/examples/component-spatial-panel.md +330 -0
  303. package/examples/component-speed-dial-action.md +78 -0
  304. package/examples/component-speed-dial.md +177 -0
  305. package/examples/component-spin.md +173 -0
  306. package/examples/component-spinner.md +204 -0
  307. package/examples/component-splitter.md +210 -0
  308. package/examples/component-stack.md +130 -0
  309. package/examples/component-statistic.md +282 -0
  310. package/examples/component-step-button.md +157 -0
  311. package/examples/component-step-connector.md +157 -0
  312. package/examples/component-step-content.md +121 -0
  313. package/examples/component-step-icon.md +115 -0
  314. package/examples/component-step-label.md +101 -0
  315. package/examples/component-step.md +84 -0
  316. package/examples/component-steps.md +264 -0
  317. package/examples/component-stock-chart.md +251 -0
  318. package/examples/component-swipeable-drawer.md +149 -0
  319. package/examples/component-switch.md +99 -0
  320. package/examples/component-tab-scroll-button.md +180 -0
  321. package/examples/component-tab.md +120 -0
  322. package/examples/component-table-body.md +82 -0
  323. package/examples/component-table-cell.md +118 -0
  324. package/examples/component-table-container.md +75 -0
  325. package/examples/component-table-footer.md +72 -0
  326. package/examples/component-table-head.md +78 -0
  327. package/examples/component-table-pagination.md +137 -0
  328. package/examples/component-table-row.md +113 -0
  329. package/examples/component-table-sort-label.md +109 -0
  330. package/examples/component-table.md +202 -0
  331. package/examples/component-tabs.md +184 -0
  332. package/examples/component-tag-badge.md +309 -0
  333. package/examples/component-tag.md +102 -0
  334. package/examples/component-testimonial-carousel.md +218 -0
  335. package/examples/component-textarea-autosize.md +114 -0
  336. package/examples/component-textarea.md +173 -0
  337. package/examples/component-time-picker.md +205 -0
  338. package/examples/component-timeline.md +170 -0
  339. package/examples/component-toast.md +224 -0
  340. package/examples/component-toggle-button.md +129 -0
  341. package/examples/component-toggle.md +220 -0
  342. package/examples/component-toolbar.md +104 -0
  343. package/examples/component-tooltip.md +178 -0
  344. package/examples/component-tour.md +176 -0
  345. package/examples/component-transaction-list-item.md +243 -0
  346. package/examples/component-transfer.md +156 -0
  347. package/examples/component-tree-select.md +202 -0
  348. package/examples/component-tree.md +297 -0
  349. package/examples/component-typography.md +215 -0
  350. package/examples/component-upload.md +295 -0
  351. package/examples/component-video-hero.md +409 -0
  352. package/examples/component-video-player.md +340 -0
  353. package/examples/component-voice-input.md +408 -0
  354. package/examples/component-watermark.md +217 -0
  355. package/examples/component-zoom.md +92 -0
  356. package/examples/doc-explanation-example.md +196 -0
  357. package/examples/doc-how-to-example.md +205 -0
  358. package/examples/doc-tutorial-example.md +162 -0
  359. package/examples/dogfood-korean-fintech-system.md +433 -0
  360. package/examples/email-transactional-example.md +259 -0
  361. package/examples/palette-saas-violet.md +235 -0
  362. package/examples/print-business-card-spec.md +205 -0
  363. package/examples/print-packaging-spec.md +285 -0
  364. package/examples/report-example.md +228 -0
  365. package/examples/slide-deck-example.md +237 -0
  366. package/examples/website-improvement-report.md +128 -0
  367. package/examples/website-improvement-workspace.json +126 -0
  368. package/install.sh +189 -0
  369. package/knowledge/COVERAGE.md +740 -0
  370. package/knowledge/PRINCIPLES.md +108 -0
  371. package/knowledge/a11y/contrast.md +70 -0
  372. package/knowledge/a11y/keyboard-and-focus.md +108 -0
  373. package/knowledge/colors/color-theory.md +90 -0
  374. package/knowledge/colors/mui-palette-structure.md +105 -0
  375. package/knowledge/colors/palettes-by-product-type.md +876 -0
  376. package/knowledge/components/INDEX.md +231 -0
  377. package/knowledge/components/index.json +1470 -0
  378. package/knowledge/components/shadcn-registry.md +159 -0
  379. package/knowledge/conversational/ai-chat-interfaces.md +323 -0
  380. package/knowledge/conversational/chatbot-design.md +312 -0
  381. package/knowledge/conversational/conversational-ui-fundamentals.md +299 -0
  382. package/knowledge/conversational/korean-voice-conventions.md +281 -0
  383. package/knowledge/conversational/voice-ui-patterns.md +297 -0
  384. package/knowledge/design-tokens/ant-design.md +124 -0
  385. package/knowledge/design-tokens/material-3.md +235 -0
  386. package/knowledge/design-tokens/polaris-and-carbon.md +231 -0
  387. package/knowledge/design-tokens/tailwind-v4.md +284 -0
  388. package/knowledge/game-ui/game-accessibility.md +317 -0
  389. package/knowledge/game-ui/game-ui-fundamentals.md +281 -0
  390. package/knowledge/game-ui/hud-design.md +324 -0
  391. package/knowledge/game-ui/korean-gaming-conventions.md +312 -0
  392. package/knowledge/game-ui/menu-systems.md +388 -0
  393. package/knowledge/i18n/korean-app-store-visual.md +223 -0
  394. package/knowledge/i18n/korean-document-style.md +301 -0
  395. package/knowledge/i18n/korean-payments.md +211 -0
  396. package/knowledge/i18n/korean-product-conventions.md +96 -0
  397. package/knowledge/i18n/korean-publishing.md +139 -0
  398. package/knowledge/i18n/korean-typography.md +123 -0
  399. package/knowledge/icons/curated-sets.md +225 -0
  400. package/knowledge/illustration/hero-illustrations.md +234 -0
  401. package/knowledge/illustration/illustration-systems.md +221 -0
  402. package/knowledge/illustration/mascot-design.md +208 -0
  403. package/knowledge/illustration/spot-illustrations.md +246 -0
  404. package/knowledge/illustration/svg-optimization.md +308 -0
  405. package/knowledge/layout/spacing-and-grid.md +119 -0
  406. package/knowledge/motion/app-loading-sequences.md +277 -0
  407. package/knowledge/motion/choreography-depth.md +297 -0
  408. package/knowledge/motion/marketing-motion.md +223 -0
  409. package/knowledge/motion/micro-interactions.md +266 -0
  410. package/knowledge/motion/motion-tools.md +281 -0
  411. package/knowledge/motion/principles.md +126 -0
  412. package/knowledge/patterns/auth-flow-design.md +316 -0
  413. package/knowledge/patterns/b2b-onboarding-flows.md +182 -0
  414. package/knowledge/patterns/brand-identity.md +238 -0
  415. package/knowledge/patterns/brand-references.md +97 -0
  416. package/knowledge/patterns/chart-color-encoding.md +269 -0
  417. package/knowledge/patterns/chart-types.md +344 -0
  418. package/knowledge/patterns/dashboard-composition.md +299 -0
  419. package/knowledge/patterns/design-system-qa.md +356 -0
  420. package/knowledge/patterns/document-typography.md +248 -0
  421. package/knowledge/patterns/email-design.md +338 -0
  422. package/knowledge/patterns/empty-states.md +263 -0
  423. package/knowledge/patterns/error-states.md +318 -0
  424. package/knowledge/patterns/form-design.md +237 -0
  425. package/knowledge/patterns/information-architecture.md +341 -0
  426. package/knowledge/patterns/landing-hero-design.md +283 -0
  427. package/knowledge/patterns/landing-page-patterns.md +681 -0
  428. package/knowledge/patterns/list-and-feed.md +371 -0
  429. package/knowledge/patterns/mobile-navigation.md +278 -0
  430. package/knowledge/patterns/money-and-amount.md +301 -0
  431. package/knowledge/patterns/onboarding.md +300 -0
  432. package/knowledge/patterns/pricing-page-design.md +261 -0
  433. package/knowledge/patterns/realtime-data.md +280 -0
  434. package/knowledge/patterns/report-design.md +330 -0
  435. package/knowledge/patterns/search-ux.md +373 -0
  436. package/knowledge/patterns/settings-page.md +325 -0
  437. package/knowledge/patterns/slide-deck-design.md +316 -0
  438. package/knowledge/patterns/styles-catalog.md +2599 -0
  439. package/knowledge/patterns/technical-writing.md +306 -0
  440. package/knowledge/patterns/ui-reasoning.md +1853 -0
  441. package/knowledge/patterns/ux-guidelines.md +1454 -0
  442. package/knowledge/platforms/react-native.md +395 -0
  443. package/knowledge/print/brochures-and-flyers.md +276 -0
  444. package/knowledge/print/korean-print-conventions.md +284 -0
  445. package/knowledge/print/packaging.md +321 -0
  446. package/knowledge/print/print-fundamentals.md +238 -0
  447. package/knowledge/print/signage-and-posters.md +235 -0
  448. package/knowledge/print/stationery.md +262 -0
  449. package/knowledge/spatial/ar-patterns.md +253 -0
  450. package/knowledge/spatial/comfort-and-accessibility.md +245 -0
  451. package/knowledge/spatial/spatial-design-fundamentals.md +346 -0
  452. package/knowledge/spatial/spatial-ui-elements.md +343 -0
  453. package/knowledge/spatial/vr-patterns.md +302 -0
  454. package/knowledge/typography/font-pairings.md +332 -0
  455. package/knowledge/typography/mui-type-scale.md +57 -0
  456. package/knowledge/typography/type-scale-fundamentals.md +105 -0
  457. package/knowledge/video/in-product-video.md +277 -0
  458. package/knowledge/video/korean-video-conventions.md +247 -0
  459. package/knowledge/video/marketing-video.md +258 -0
  460. package/knowledge/video/social-and-short-form.md +257 -0
  461. package/knowledge/video/video-fundamentals.md +296 -0
  462. package/package.json +106 -0
  463. package/skills/README.md +39 -0
  464. package/skills/color-palette/PLAYBOOK.md +175 -0
  465. package/skills/color-palette/SKILL.md +6 -0
  466. package/skills/color-palette/TEMPLATE.md +103 -0
  467. package/skills/component-spec-writer/PLAYBOOK.md +169 -0
  468. package/skills/component-spec-writer/SKILL.md +6 -0
  469. package/skills/component-spec-writer/TEMPLATE.md +115 -0
  470. package/skills/conversational-ui-designer/PLAYBOOK.md +231 -0
  471. package/skills/conversational-ui-designer/SKILL.md +6 -0
  472. package/skills/design-broadcast/PLAYBOOK.md +146 -0
  473. package/skills/design-broadcast/SKILL.md +6 -0
  474. package/skills/design-critique/PLAYBOOK.md +137 -0
  475. package/skills/design-critique/SKILL.md +6 -0
  476. package/skills/design-pr-review/PLAYBOOK.md +171 -0
  477. package/skills/design-pr-review/SKILL.md +6 -0
  478. package/skills/design-system-builder/PLAYBOOK.md +218 -0
  479. package/skills/design-system-builder/SKILL.md +6 -0
  480. package/skills/design-system-qa/PLAYBOOK.md +163 -0
  481. package/skills/design-system-qa/SKILL.md +6 -0
  482. package/skills/document-author/PLAYBOOK.md +167 -0
  483. package/skills/document-author/SKILL.md +6 -0
  484. package/skills/figma-token-sync/PLAYBOOK.md +149 -0
  485. package/skills/figma-token-sync/SKILL.md +6 -0
  486. package/skills/game-ui-designer/PLAYBOOK.md +209 -0
  487. package/skills/game-ui-designer/SKILL.md +6 -0
  488. package/skills/handoff-spec/PLAYBOOK.md +170 -0
  489. package/skills/handoff-spec/SKILL.md +6 -0
  490. package/skills/illustration-designer/PLAYBOOK.md +166 -0
  491. package/skills/illustration-designer/SKILL.md +6 -0
  492. package/skills/motion-designer/PLAYBOOK.md +223 -0
  493. package/skills/motion-designer/SKILL.md +6 -0
  494. package/skills/print-designer/PLAYBOOK.md +209 -0
  495. package/skills/print-designer/SKILL.md +6 -0
  496. package/skills/slide-deck-author/PLAYBOOK.md +198 -0
  497. package/skills/slide-deck-author/SKILL.md +6 -0
  498. package/skills/spatial-designer/PLAYBOOK.md +238 -0
  499. package/skills/spatial-designer/SKILL.md +6 -0
  500. package/skills/ux-audit/PLAYBOOK.md +142 -0
  501. package/skills/ux-audit/SKILL.md +6 -0
  502. package/skills/video-designer/PLAYBOOK.md +240 -0
  503. package/skills/video-designer/SKILL.md +6 -0
  504. package/skills/website-improvement/PLAYBOOK.md +118 -0
  505. package/skills/website-improvement/SKILL.md +6 -0
  506. package/skills/website-improvement/TEMPLATE.md +103 -0
  507. package/tools/audit/changelog-generate.py +176 -0
  508. package/tools/audit/check-coverage.py +483 -0
  509. package/tools/audit/doctor_assertions.py +256 -0
  510. package/tools/audit/example-qa.py +108 -0
  511. package/tools/audit/frontmatter-check.py +199 -0
  512. package/tools/audit/integration-check.py +95 -0
  513. package/tools/audit/korean-copy-check.py +161 -0
  514. package/tools/audit/link-check.py +146 -0
  515. package/tools/audit/local-ci.py +558 -0
  516. package/tools/audit/package-contents.py +723 -0
  517. package/tools/audit/package-smoke.py +22443 -0
  518. package/tools/audit/raw-hex-check.py +252 -0
  519. package/tools/audit/registry-smoke.py +8188 -0
  520. package/tools/audit/release-metadata.py +9832 -0
  521. package/tools/audit/run-all.py +351 -0
  522. package/tools/audit/smoke_assertions.py +12742 -0
  523. package/tools/audit/stability-review.py +332 -0
  524. package/tools/audit/stale-check.py +156 -0
  525. package/tools/migrations/add-version-frontmatter.py +132 -0
  526. package/tools/migrations/bump-last-updated.py +131 -0
  527. package/tools/migrations/promote-stability.py +172 -0
  528. package/tools/preview/README.md +58 -0
  529. package/tools/preview/render-tokens.py +454 -0
package/tools/preview/render-tokens.py ADDED
@@ -0,0 +1,454 @@
1
+ #!/usr/bin/env python3
2
+ """
3
+ Render a token-rich palette markdown file into a self-contained HTML preview.
4
+
5
+ Usage:
6
+ python3 tools/preview/render-tokens.py <input.md> [output.html]
7
+ python3 tools/preview/render-tokens.py examples/palette-saas-violet.md
8
+
9
+ Accepts:
10
+ - examples/palette-*.md (palette specs with hex tokens)
11
+ - examples/dogfood-*.md (full system bootstraps)
12
+ - any markdown file with hex values in css blocks
13
+
14
+ Produces:
15
+ - A single-file HTML page with:
16
+ - Token swatches (extracted hex/oklch values)
17
+ - Light + dark mode toggle
18
+ - Computed contrast ratios for text-on-bg pairs
19
+ - Component micro-previews (Button, Card, Input shapes) using the tokens
20
+
21
+ The output is for visual review by humans — it doesn't need to be
22
+ production-ready, just enough to verify token sets look right before
23
+ shipping.
24
+ """
25
+ from __future__ import annotations
26
+
27
+ import re
28
+ import sys
29
+ from pathlib import Path
30
+ from datetime import date
31
+
32
+ ROOT = Path(__file__).resolve().parents[2]
33
+
34
+
35
+ # --- token extraction --------------------------------------------------------
36
+
37
+ HEX_RE = re.compile(r"#[0-9A-Fa-f]{3,8}\b")
38
+ TOKEN_LINE_RE = re.compile(r"--([a-z][a-z0-9-]*)\s*:\s*([^;]+);")
39
+
40
+
41
+ def extract_tokens(text: str) -> dict[str, dict[str, str]]:
42
+ """Pull `--token-name: value;` from CSS code blocks. Group by light/dark
43
+ based on selector context (`:root` vs `.dark`).
44
+
45
+ Returns:
46
+ { "light": { token_name: value, ... }, "dark": { ... } }
47
+ """
48
+ tokens = {"light": {}, "dark": {}}
49
+ in_block = False
50
+ selector = "light" # default
51
+
52
+ for line in text.splitlines():
53
+ stripped = line.strip()
54
+
55
+ # Detect code block fences
56
+ if stripped.startswith("```"):
57
+ in_block = not in_block
58
+ continue
59
+
60
+ if not in_block:
61
+ continue
62
+
63
+ # Detect selector context
64
+ if ":root" in stripped:
65
+ selector = "light"
66
+ elif ".dark" in stripped:
67
+ selector = "dark"
68
+
69
+ # Match token lines
70
+ m = TOKEN_LINE_RE.search(stripped)
71
+ if m:
72
+ name, value = m.group(1), m.group(2).strip()
73
+ tokens[selector][name] = value
74
+
75
+ return tokens
76
+
77
+
78
+ def normalize_hex(value: str) -> str | None:
79
+ """Pull the first hex from a value string."""
80
+ m = HEX_RE.search(value)
81
+ return m.group(0) if m else None
82
+
83
+
84
+ # --- contrast ----------------------------------------------------------------
85
+
86
+ def hex_to_rgb(hex_str: str) -> tuple[float, float, float]:
87
+ h = hex_str.lstrip("#")
88
+ if len(h) == 3:
89
+ h = "".join(c * 2 for c in h)
90
+ if len(h) != 6:
91
+ return (0, 0, 0)
92
+ return tuple(int(h[i:i+2], 16) / 255 for i in (0, 2, 4))
93
+
94
+
95
+ def relative_luminance(rgb: tuple[float, float, float]) -> float:
96
+ def adjust(c: float) -> float:
97
+ return c / 12.92 if c <= 0.03928 else ((c + 0.055) / 1.055) ** 2.4
98
+ r, g, b = (adjust(c) for c in rgb)
99
+ return 0.2126 * r + 0.7152 * g + 0.0722 * b
100
+
101
+
102
+ def contrast_ratio(hex1: str, hex2: str) -> float:
103
+ l1 = relative_luminance(hex_to_rgb(hex1))
104
+ l2 = relative_luminance(hex_to_rgb(hex2))
105
+ lighter, darker = max(l1, l2), min(l1, l2)
106
+ return round((lighter + 0.05) / (darker + 0.05), 2)
107
+
108
+
109
+ # --- HTML rendering ----------------------------------------------------------
110
+
111
+ HTML_TEMPLATE = r"""<!DOCTYPE html>
112
+ <html lang="ko">
113
+ <head>
114
+ <meta charset="utf-8">
115
+ <meta name="viewport" content="width=device-width, initial-scale=1">
116
+ <title>__TITLE__</title>
117
+ <style>
118
+ * { box-sizing: border-box; }
119
+ body {
120
+ margin: 0;
121
+ font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
122
+ background: __BG_DEFAULT__;
123
+ color: __TEXT_PRIMARY__;
124
+ transition: background-color 200ms, color 200ms;
125
+ }
126
+ .container { max-width: 1100px; margin: 0 auto; padding: 32px 24px; }
127
+ header { display: flex; justify-content: space-between; align-items: center; padding-bottom: 24px; border-bottom: 1px solid __BORDER_DEFAULT__; }
128
+ header h1 { margin: 0; font-size: 24px; }
129
+ header .meta { color: __TEXT_SECONDARY__; font-size: 13px; }
130
+ .toggle {
131
+ background: __BG_ELEVATED__;
132
+ border: 1px solid __BORDER_DEFAULT__;
133
+ color: __TEXT_PRIMARY__;
134
+ padding: 6px 12px;
135
+ border-radius: 6px;
136
+ cursor: pointer;
137
+ font: inherit;
138
+ font-size: 13px;
139
+ }
140
+ .toggle:hover { background: __BG_SUBTLE__; }
141
+ section { padding: 32px 0; border-bottom: 1px solid __BORDER_DEFAULT__; }
142
+ section:last-child { border-bottom: 0; }
143
+ h2 { font-size: 18px; margin: 0 0 16px; }
144
+ .swatch-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
145
+ .swatch {
146
+ border-radius: 8px;
147
+ border: 1px solid __BORDER_DEFAULT__;
148
+ overflow: hidden;
149
+ background: __BG_ELEVATED__;
150
+ }
151
+ .swatch .chip { height: 64px; }
152
+ .swatch .meta { padding: 8px 12px; }
153
+ .swatch .name { font-family: ui-monospace, Menlo, monospace; font-size: 12px; color: __TEXT_PRIMARY__; }
154
+ .swatch .value { font-family: ui-monospace, Menlo, monospace; font-size: 11px; color: __TEXT_SECONDARY__; margin-top: 2px; }
155
+ table { border-collapse: collapse; width: 100%; font-size: 13px; }
156
+ th, td { padding: 6px 10px; text-align: left; border-bottom: 1px solid __BORDER_DEFAULT__; }
157
+ th { font-weight: 600; color: __TEXT_SECONDARY__; }
158
+ .pass { color: __SUCCESS__; font-weight: 600; }
159
+ .fail { color: __ERROR__; font-weight: 600; }
160
+ .components { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
161
+ .demo-card {
162
+ border-radius: 12px;
163
+ background: __BG_ELEVATED__;
164
+ border: 1px solid __BORDER_DEFAULT__;
165
+ padding: 20px;
166
+ }
167
+ .demo-card h3 { margin: 0 0 8px; font-size: 16px; }
168
+ .demo-card p { margin: 0 0 16px; color: __TEXT_SECONDARY__; font-size: 14px; }
169
+ .demo-btn {
170
+ display: inline-flex;
171
+ align-items: center;
172
+ height: 40px;
173
+ padding: 0 16px;
174
+ border-radius: 8px;
175
+ border: 0;
176
+ font: inherit;
177
+ font-weight: 500;
178
+ cursor: pointer;
179
+ margin-right: 8px;
180
+ }
181
+ .demo-btn--primary { background: __PRIMARY_DEFAULT__; color: __ON_PRIMARY__; }
182
+ .demo-btn--primary:hover { background: __PRIMARY_HOVER__; }
183
+ .demo-btn--outline { background: transparent; color: __TEXT_PRIMARY__; border: 1px solid __BORDER_STRONG__; }
184
+ .demo-btn--outline:hover { background: __BG_SUBTLE__; }
185
+ .demo-input {
186
+ width: 100%;
187
+ height: 40px;
188
+ border-radius: 8px;
189
+ border: 1px solid __BORDER_DEFAULT__;
190
+ background: __BG_DEFAULT__;
191
+ color: __TEXT_PRIMARY__;
192
+ padding: 0 12px;
193
+ font: inherit;
194
+ }
195
+ .demo-input:focus { outline: 2px solid __FOCUS_RING__; outline-offset: 2px; border-color: __PRIMARY_DEFAULT__; }
196
+ .alert {
197
+ border-radius: 8px;
198
+ padding: 12px 16px;
199
+ margin-bottom: 12px;
200
+ font-size: 14px;
201
+ }
202
+ .alert--info { background: __BG_SUBTLE__; border-left: 3px solid __INFO__; }
203
+ .alert--success { background: __SUCCESS_SUBTLE__; border-left: 3px solid __SUCCESS__; }
204
+ .alert--warning { background: __WARNING_SUBTLE__; border-left: 3px solid __WARNING__; }
205
+ .alert--error { background: __ERROR_SUBTLE__; border-left: 3px solid __ERROR__; }
206
+ .empty { color: __TEXT_TERTIARY__; font-style: italic; }
207
+ @media (max-width: 720px) {
208
+ .components { grid-template-columns: 1fr; }
209
+ }
210
+ </style>
211
+ </head>
212
+ <body data-theme="light">
213
+ <div class="container">
214
+ <header>
215
+ <div>
216
+ <h1>__TITLE__</h1>
217
+ <div class="meta">Token preview · generated __DATE__</div>
218
+ </div>
219
+ <button class="toggle" id="theme-toggle">Switch to dark</button>
220
+ </header>
221
+
222
+ <section>
223
+ <h2>Color tokens (light)</h2>
224
+ <div class="swatch-grid">__LIGHT_SWATCHES__</div>
225
+ </section>
226
+
227
+ <section>
228
+ <h2>Color tokens (dark)</h2>
229
+ <div class="swatch-grid">__DARK_SWATCHES__</div>
230
+ </section>
231
+
232
+ <section>
233
+ <h2>Contrast matrix (light)</h2>
234
+ <table>
235
+ <thead><tr><th>Pair</th><th>Ratio</th><th>AA body</th><th>AA UI</th></tr></thead>
236
+ <tbody>__LIGHT_CONTRAST_ROWS__</tbody>
237
+ </table>
238
+ </section>
239
+
240
+ <section>
241
+ <h2>Component preview (live tokens)</h2>
242
+ <div class="components">
243
+ <div class="demo-card">
244
+ <h3>Buttons</h3>
245
+ <p>Primary and outline variants in current theme.</p>
246
+ <button class="demo-btn demo-btn--primary">Save changes</button>
247
+ <button class="demo-btn demo-btn--outline">Cancel</button>
248
+ </div>
249
+ <div class="demo-card">
250
+ <h3>Input</h3>
251
+ <p>Focus to see the focus-ring contrast.</p>
252
+ <input class="demo-input" placeholder="Type something..." />
253
+ </div>
254
+ <div class="demo-card">
255
+ <h3>Alerts</h3>
256
+ <div class="alert alert--info">ℹ Info — small announcement.</div>
257
+ <div class="alert alert--success">✓ Success — saved.</div>
258
+ <div class="alert alert--warning">⚠ Warning — check this.</div>
259
+ <div class="alert alert--error">✕ Error — couldn't save.</div>
260
+ </div>
261
+ <div class="demo-card">
262
+ <h3>Sample card</h3>
263
+ <p>Surface elevation in current theme. Border + bg combination.</p>
264
+ <button class="demo-btn demo-btn--primary">Continue</button>
265
+ </div>
266
+ </div>
267
+ </section>
268
+ </div>
269
+
270
+ <script>
271
+ const root = document.body;
272
+ const btn = document.getElementById('theme-toggle');
273
+ const styles = {
274
+ light: __LIGHT_VARS__,
275
+ dark: __DARK_VARS__,
276
+ };
277
+ function apply(theme) {
278
+ const vars = styles[theme] || styles.light;
279
+ root.dataset.theme = theme;
280
+ Object.entries(vars).forEach(([k, v]) => {
281
+ document.documentElement.style.setProperty('--' + k, v);
282
+ });
283
+ // Update inline-uses
284
+ document.body.style.background = vars['bg-default'] || '#fff';
285
+ document.body.style.color = vars['text-primary'] || '#000';
286
+ document.querySelectorAll('.demo-card').forEach(el => {
287
+ el.style.background = vars['bg-elevated'] || '#fff';
288
+ el.style.borderColor = vars['border-default'] || '#ddd';
289
+ });
290
+ btn.textContent = theme === 'light' ? 'Switch to dark' : 'Switch to light';
291
+ }
292
+ btn.addEventListener('click', () => {
293
+ apply(root.dataset.theme === 'light' ? 'dark' : 'light');
294
+ });
295
+ </script>
296
+ </body>
297
+ </html>
298
+ """
299
+
300
+
301
+ def render_swatches(tokens: dict[str, str]) -> str:
302
+ out = []
303
+ for name, value in tokens.items():
304
+ if not name.startswith("color"):
305
+ continue
306
+ hex_val = normalize_hex(value)
307
+ if not hex_val:
308
+ continue
309
+ out.append(f"""<div class="swatch">
310
+ <div class="chip" style="background:{hex_val};"></div>
311
+ <div class="meta">
312
+ <div class="name">--{name}</div>
313
+ <div class="value">{value}</div>
314
+ </div>
315
+ </div>""")
316
+ if not out:
317
+ return '<div class="empty">(no color tokens detected — file may not contain a token block)</div>'
318
+ return "\n".join(out)
319
+
320
+
321
+ def render_contrast(tokens: dict[str, str]) -> str:
322
+ pairs = [
323
+ ("color-text-primary", "color-bg-default", "body"),
324
+ ("color-text-secondary", "color-bg-default", "body"),
325
+ ("color-text-tertiary", "color-bg-default", "body"),
326
+ ("color-primary-default", "color-bg-default", "ui"),
327
+ ("color-error", "color-bg-default", "body"),
328
+ ("color-success", "color-bg-default", "body"),
329
+ ("color-warning", "color-bg-default", "body"),
330
+ ]
331
+ rows = []
332
+ for fg_name, bg_name, kind in pairs:
333
+ fg_value = tokens.get(fg_name)
334
+ bg_value = tokens.get(bg_name)
335
+ if not fg_value or not bg_value:
336
+ continue
337
+ fg_hex = normalize_hex(fg_value)
338
+ bg_hex = normalize_hex(bg_value)
339
+ if not fg_hex or not bg_hex:
340
+ continue
341
+ ratio = contrast_ratio(fg_hex, bg_hex)
342
+ body_pass = ratio >= 4.5
343
+ ui_pass = ratio >= 3.0
344
+ rows.append(f"""<tr>
345
+ <td>{fg_name} on {bg_name}</td>
346
+ <td>{ratio}:1</td>
347
+ <td class="{'pass' if body_pass else 'fail'}">{'✓' if body_pass else '✗'}</td>
348
+ <td class="{'pass' if ui_pass else 'fail'}">{'✓' if ui_pass else '✗'}</td>
349
+ </tr>""")
350
+ if not rows:
351
+ return '<tr><td colspan="4" class="empty">No measurable text-on-bg pairs in this file.</td></tr>'
352
+ return "\n".join(rows)
353
+
354
+
355
+ def to_js_vars(tokens: dict[str, str]) -> str:
356
+ """JSON-serialize tokens with hex extracted from values."""
357
+ parts = []
358
+ for name, value in tokens.items():
359
+ hex_val = normalize_hex(value)
360
+ if hex_val:
361
+ parts.append(f'"{name}": "{hex_val}"')
362
+ else:
363
+ # Use raw value (e.g., for shadows, motion) — escape quotes
364
+ parts.append(f'"{name}": "{value.replace(chr(34), chr(92) + chr(34))}"')
365
+ return "{" + ", ".join(parts) + "}"
366
+
367
+
368
+ def render_html(input_path: Path, tokens: dict[str, dict[str, str]]) -> str:
369
+ title = input_path.stem.replace("-", " ").replace("_", " ").title()
370
+
371
+ light = tokens["light"]
372
+ dark = tokens["dark"]
373
+
374
+ # Pull "default" colors for chrome from light tokens with sensible fallbacks
375
+ def get(t: dict[str, str], key: str, fallback: str) -> str:
376
+ return normalize_hex(t.get(key, "")) or fallback
377
+
378
+ chrome = {
379
+ "TITLE": title,
380
+ "DATE": date.today().isoformat(),
381
+ "BG_DEFAULT": get(light, "color-bg-default", "#FFFFFF"),
382
+ "BG_ELEVATED": get(light, "color-bg-elevated", "#FAFAFA"),
383
+ "BG_SUBTLE": get(light, "color-bg-subtle", "#F1F5F9"),
384
+ "TEXT_PRIMARY": get(light, "color-text-primary", "#0F172A"),
385
+ "TEXT_SECONDARY": get(light, "color-text-secondary", "#475569"),
386
+ "TEXT_TERTIARY": get(light, "color-text-tertiary", "#64748B"),
387
+ "BORDER_DEFAULT": get(light, "color-border-default", "#E2E8F0"),
388
+ "BORDER_STRONG": get(light, "color-border-strong", "#CBD5E1"),
389
+ "PRIMARY_DEFAULT": get(light, "color-primary-default", "#7C3AED"),
390
+ "PRIMARY_HOVER": get(light, "color-primary-hover", "#6D28D9"),
391
+ "ON_PRIMARY": get(light, "color-on-primary", "#FFFFFF"),
392
+ "FOCUS_RING": get(light, "color-focus-ring", "#A78BFA"),
393
+ "INFO": get(light, "color-info", "#7C3AED"),
394
+ "SUCCESS": get(light, "color-success", "#16A34A"),
395
+ "WARNING": get(light, "color-warning", "#D97706"),
396
+ "ERROR": get(light, "color-error", "#DC2626"),
397
+ "SUCCESS_SUBTLE": get(light, "color-success-subtle-bg", "#F0FDF4"),
398
+ "WARNING_SUBTLE": get(light, "color-warning-subtle-bg", "#FFFBEB"),
399
+ "ERROR_SUBTLE": get(light, "color-error-subtle-bg", "#FEF2F2"),
400
+ "LIGHT_SWATCHES": render_swatches(light),
401
+ "DARK_SWATCHES": render_swatches(dark) if dark else '<div class="empty">(no dark mode tokens in this file)</div>',
402
+ "LIGHT_CONTRAST_ROWS": render_contrast(light),
403
+ "LIGHT_VARS": to_js_vars(light),
404
+ "DARK_VARS": to_js_vars(dark) if dark else "{}",
405
+ }
406
+
407
+ out = HTML_TEMPLATE
408
+ for key, value in chrome.items():
409
+ out = out.replace(f"__{key}__", str(value))
410
+ return out
411
+
412
+
413
+ # --- main -------------------------------------------------------------------
414
+
415
+ def main() -> None:
416
+ if len(sys.argv) < 2:
417
+ print("Usage: render-tokens.py <input.md> [output.html]")
418
+ sys.exit(1)
419
+
420
+ input_path = Path(sys.argv[1])
421
+ if not input_path.is_absolute():
422
+ input_path = ROOT / input_path
423
+ if not input_path.exists():
424
+ print(f"Not found: {input_path}")
425
+ sys.exit(2)
426
+
427
+ if len(sys.argv) >= 3:
428
+ output_path = Path(sys.argv[2])
429
+ if not output_path.is_absolute():
430
+ output_path = ROOT / output_path
431
+ else:
432
+ output_path = input_path.with_suffix(".preview.html")
433
+
434
+ text = input_path.read_text(encoding="utf-8")
435
+ tokens = extract_tokens(text)
436
+
437
+ light_count = len(tokens["light"])
438
+ dark_count = len(tokens["dark"])
439
+ if light_count == 0 and dark_count == 0:
440
+ print(f"No tokens found in {input_path}")
441
+ print("(extractor looks for `--token-name: value;` inside ``` code blocks)")
442
+ sys.exit(3)
443
+
444
+ html = render_html(input_path, tokens)
445
+ output_path.write_text(html, encoding="utf-8")
446
+
447
+ print(f"Read {input_path.relative_to(ROOT)}")
448
+ print(f"Tokens {light_count} light, {dark_count} dark")
449
+ print(f"Wrote {output_path.relative_to(ROOT)}")
450
+ print(f"Open: open {output_path}")
451
+
452
+
453
+ if __name__ == "__main__":
454
+ main()