@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/examples/component-config-provider.md ADDED
@@ -0,0 +1,190 @@
1
+ # `ConfigProvider` — spec
2
+
3
+ > Synthesized from Ant Design `ConfigProvider`, with theme-provider analogs cross-checked against MUI `ThemeProvider` / `CssBaseline` and shadcn-ui's `next-themes` + CSS-variable setup. `ConfigProvider` is the app-level configuration boundary for tokens, locale, direction, portals, and component defaults.
4
+
5
+ ## When to use
6
+
7
+ - At the root of a product app, admin console, design-system preview, or package demo that needs consistent theme, locale, direction, and component defaults.
8
+ - Around an isolated subtree that must intentionally override density, disabled state, popup container, or theme tokens.
9
+ - For Korean products where locale, typography, form validation messages, and portal behavior must be consistent across modals, pickers, notifications, and tables.
10
+
11
+ When NOT to use:
12
+ - To style one component instance. Use that component's props or tokens.
13
+ - Around every page or card. Provider nesting creates unclear precedence and harder debugging.
14
+ - As a substitute for `<html lang>` / `<html dir>`. Provider context and document metadata must agree.
15
+ - For static notification/modal calls without a holder strategy; they may render outside the provider context.
16
+
17
+ ## Anatomy
18
+
19
+ ```
20
+ ConfigProvider
21
+ ├── Theme tokens
22
+ ├── Locale package
23
+ ├── Direction
24
+ ├── Component defaults
25
+ ├── Portal / popup containers
26
+ ├── CSP / style injection config
27
+ └── App subtree
28
+ ```
29
+
30
+ | Part | Purpose | Required | Default if omitted |
31
+ | --- | --- | --- | --- |
32
+ | Theme | Semantic tokens, algorithms, component token overrides. | no | library defaults |
33
+ | Locale | Component language, date-related labels, validation copy hooks. | no | default library locale |
34
+ | Direction | `ltr` or `rtl` layout context. | no | `ltr` |
35
+ | Component defaults | Shared defaults such as size, disabled state, variant, and per-component config. | no | component defaults |
36
+ | Portal config | Controls where popups, dropdowns, affix/anchor targets render. | no | document body/window |
37
+ | CSP config | Supplies nonce for dynamic style behavior when CSP is enabled. | no | no nonce |
38
+ | Children | App subtree receiving context. | yes | nothing rendered |
39
+
40
+ ## API
41
+
42
+ ```tsx
43
+ <ConfigProvider
44
+ locale={koKR}
45
+ direction="ltr"
46
+ componentSize="middle"
47
+ theme={appTheme}
48
+ getPopupContainer={(trigger) => trigger?.parentElement ?? document.body}
49
+ >
50
+ <App />
51
+ </ConfigProvider>
52
+ ```
53
+
54
+ | Prop | Type | Default | Description |
55
+ | --- | --- | --- | --- |
56
+ | `children` | `ReactNode` | — | Subtree that consumes the provider context. |
57
+ | `theme` | `ThemeConfig` | — | Global and component-level design tokens. |
58
+ | `locale` | locale object | — | Language package for component copy and date/picker UI. |
59
+ | `direction` | `"ltr" \| "rtl"` | `"ltr"` | Layout direction. Mirror document `dir` when using RTL. |
60
+ | `componentSize` | `"small" \| "middle" \| "large"` | — | Default component density/size. |
61
+ | `componentDisabled` | `boolean` | — | Disables supported child components by default. Use for temporary locked subtrees only. |
62
+ | `variant` | `"outlined" \| "filled" \| "borderless"` | — | Default data-entry visual variant in Ant Design. |
63
+ | `virtual` | `boolean` | `true` | Enables virtual scrolling for supported long lists. |
64
+ | `prefixCls` | `string` | `"ant"` | Class prefix for microfrontend or white-label isolation. |
65
+ | `iconPrefixCls` | `string` | `"anticon"` | Icon class prefix. |
66
+ | `getPopupContainer` | `(trigger?) => HTMLElement \| ShadowRoot` | `document.body` | Popup parent for dropdown-like overlays. |
67
+ | `getTargetContainer` | `() => HTMLElement \| Window \| ShadowRoot` | `window` | Scroll target for Affix / Anchor style components. |
68
+ | `popupMatchSelectWidth` | `boolean \| number` | library default | Select dropdown width behavior; `false` can also disable virtual scroll. |
69
+ | `popupOverflow` | `"viewport" \| "scroll"` | `"viewport"` | Popup overflow strategy for select-like components. |
70
+ | `renderEmpty` | `(componentName) => ReactNode` | — | Shared empty state renderer. |
71
+ | `csp` | `{ nonce: string }` | — | Nonce for dynamic style injection under strict CSP. |
72
+ | `button`, `form`, `input`, `select`, `table`, ... | component config objects | — | Per-component default props, classNames, styles, icons, and behavior hooks. |
73
+ | `warning` | `{ strict: boolean }` | — | Warning aggregation behavior for deprecated usage. |
74
+
75
+ Static helpers:
76
+
77
+ | API | Purpose |
78
+ | --- | --- |
79
+ | `ConfigProvider.config(...)` | Sets global static config such as prefix, icon prefix, theme, and holder rendering for static APIs. |
80
+ | `ConfigProvider.useConfig()` | Reads current component disabled and size context for custom wrappers. |
81
+
82
+ ## API choices made
83
+
84
+ - Use one root provider as the default. Nested providers are allowed only for scoped overrides such as embedded previews, RTL examples, or disabled demo blocks.
85
+ - Keep token ownership in `theme`; avoid raw CSS overrides in every component config unless the upstream component exposes a semantic slot that needs a default.
86
+ - Use `componentSize` to express product density, not ad hoc per-component padding. Korean consumer/mobile UIs can be denser, but touch targets still need 44x44 on mobile.
87
+ - Treat `getPopupContainer` as infrastructure. It should solve clipping, Shadow DOM, or modal stacking problems without breaking focus management.
88
+ - Prefer hook/holder-based static APIs so messages, notifications, and confirms inherit provider context.
89
+
90
+ ## Configuration modes
91
+
92
+ | Mode | Use | Required checks |
93
+ | --- | --- | --- |
94
+ | Default app shell | Product-wide tokens, locale, density, popup behavior. | Contrast, focus rings, portal stack, SSR hydration. |
95
+ | Korean locale | `locale={koKR}` plus Korean typography and validation copy. | `<html lang="ko">`, date formats, form errors, IME behavior. |
96
+ | RTL preview | Arabic/Hebrew preview or component QA. | `<html dir="rtl">`, icon mirroring, placement names, keyboard order. |
97
+ | Locked subtree | Temporarily disabled controls during maintenance or pending workflow. | Explain disabled reason and keep readable text contrast. |
98
+ | Microfrontend | Prefix class names and portal targets. | CSS isolation, z-index, duplicate baseline, static API context. |
99
+
100
+ ## Tokens consumed
101
+
102
+ ```css
103
+ --color-primary-default
104
+ --color-primary-hover
105
+ --color-bg-default
106
+ --color-bg-elevated
107
+ --color-text-primary
108
+ --color-text-muted
109
+ --color-border-default
110
+ --color-focus-ring
111
+ --font-family-body
112
+ --font-size-body
113
+ --line-height-body
114
+ --radius-md
115
+ --motion-fast
116
+ --z-popover
117
+ --z-modal
118
+ --density-scale
119
+ ```
120
+
121
+ ## Accessibility
122
+
123
+ - **Contrast**: provider theme must guarantee 4.5:1 body text contrast and 3:1 focus/outline/UI contrast across every supported color scheme.
124
+ - **Focus**: portal components rendered through `getPopupContainer` must keep focus trap, Escape handling, and restore-focus behavior.
125
+ - **Locale**: provider locale does not replace document metadata. Set `<html lang="ko">` for Korean products and align date/number formatting with the locale.
126
+ - **Direction**: provider `direction="rtl"` should be paired with document `dir="rtl"` in full-app RTL mode. Direction-only demos may scope it locally but must test placement and icon mirroring.
127
+ - **Disabled subtree**: a globally disabled area still needs readable text and explanation. Do not hide disabled controls from assistive tech if they communicate state.
128
+ - **CSP**: when strict CSP is enabled, configure `csp.nonce` so dynamic style effects do not silently fail.
129
+ - **Motion**: theme motion tokens must respect `prefers-reduced-motion`; provider-level theme changes should not animate every component unless explicitly allowed.
130
+
131
+ ## Code example — Korean product shell
132
+
133
+ ```tsx
134
+ import { ConfigProvider, App as AntApp } from "antd";
135
+ import koKR from "antd/locale/ko_KR";
136
+
137
+ const appTheme = {
138
+ token: semanticTokens,
139
+ components: {
140
+ Button: {
141
+ borderRadius: semanticRadii.control,
142
+ },
143
+ Form: {
144
+ itemMarginBottom: semanticSpacing.formRow,
145
+ },
146
+ },
147
+ };
148
+
149
+ export function ProductRoot() {
150
+ return (
151
+ <ConfigProvider
152
+ locale={koKR}
153
+ direction="ltr"
154
+ componentSize="middle"
155
+ theme={appTheme}
156
+ getPopupContainer={(trigger) => trigger?.parentElement ?? document.body}
157
+ renderEmpty={() => <EmptyState tone="quiet" title="표시할 데이터가 없습니다" />}
158
+ >
159
+ <AntApp>
160
+ <AppRoutes />
161
+ </AntApp>
162
+ </ConfigProvider>
163
+ );
164
+ }
165
+ ```
166
+
167
+ ## Edge cases
168
+
169
+ - **Static messages and confirms**: imperative APIs can render outside the React subtree. Use holder/hook patterns or configure `holderRender` so theme, prefix, and locale are inherited.
170
+ - **Portal clipping**: setting popup containers to a scroll parent can fix clipping but may break modal stacking. Verify Select, DatePicker, Tooltip, Popover, and Modal together.
171
+ - **SSR hydration**: theme algorithms, color mode, and generated class prefixes must match server and client output.
172
+ - **Nested providers**: inner overrides win locally, which is useful for demos but dangerous in production flows. Document every intentional nested provider.
173
+ - **Virtual scroll**: disabling virtual scroll may improve screen-reader predictability for small lists, but large datasets need virtualization for performance.
174
+ - **Prefix changes**: changing `prefixCls` after components are mounted can break snapshots, styles, and static APIs. Treat it as boot-time config.
175
+
176
+ ## Don't
177
+
178
+ - Don't use `ConfigProvider` to patch one misaligned button.
179
+ - Don't put raw color values into component configs when semantic tokens exist.
180
+ - Don't assume provider locale changes native browser date/number formatting automatically.
181
+ - Don't point every popup to `trigger.parentElement` without a `document.body` fallback.
182
+ - Don't rely on provider `componentDisabled` for authorization. Security checks belong on the server and in route/action logic.
183
+
184
+ ## References
185
+
186
+ - Ant Design: [`config-provider/index.en-US.md`](../refs/ant-design/components/config-provider/index.en-US.md), [`config-provider/index.tsx`](../refs/ant-design/components/config-provider/index.tsx), [`config-provider/context.ts`](../refs/ant-design/components/config-provider/context.ts), [`app/index.en-US.md`](../refs/ant-design/components/app/index.en-US.md)
187
+ - MUI: [`ThemeProvider.tsx`](../refs/mui/packages/mui-material/src/styles/ThemeProvider.tsx), [`CssBaseline.js`](../refs/mui/packages/mui-material/src/CssBaseline/CssBaseline.js)
188
+ - shadcn-ui: [`theme-provider.tsx`](../refs/shadcn-ui/apps/v4/components/theme-provider.tsx), [`globals.css`](../refs/shadcn-ui/apps/v4/app/globals.css)
189
+ - Knowledge: [`design-tokens/ant-design.md`](../knowledge/design-tokens/ant-design.md), [`a11y/contrast.md`](../knowledge/a11y/contrast.md), [`i18n/korean-product-conventions.md`](../knowledge/i18n/korean-product-conventions.md)
190
+ - Cross-reference: [`component-css-baseline.md`](component-css-baseline.md), [`component-empty-state.md`](component-empty-state.md), [`component-form.md`](component-form.md)
package/examples/component-context-menu.md ADDED
@@ -0,0 +1,179 @@
1
+ # `ContextMenu` — spec
2
+
3
+ > Synthesized from shadcn-ui `context-menu` (Radix). Right-click / long-press triggered menu. Same WAI-ARIA Menu pattern as DropdownMenu but invoked by gesture rather than button.
4
+
5
+ ## When to use
6
+
7
+ - Item-level actions in lists (rename, duplicate, delete a file).
8
+ - Editor right-click (copy / paste / format).
9
+ - Power-user shortcuts that don't deserve a visible button.
10
+
11
+ When NOT to use:
12
+ - Mobile-primary apps where right-click doesn't exist (long-press is non-obvious; many users miss).
13
+ - Critical actions — visible buttons must remain available; ContextMenu is supplemental.
14
+ - Surfaces where right-click should fall through to browser default (text input, links).
15
+
16
+ ## Anatomy
17
+
18
+ ```
19
+ [user right-clicks an item]
20
+ ↓
21
+ ┌────────────────────┐
22
+ │ Open │
23
+ │ Open in new tab │
24
+ │ ───── │
25
+ │ Rename │
26
+ │ Duplicate │
27
+ │ ───── │
28
+ │ Delete (red) │
29
+ └────────────────────┘
30
+ ```
31
+
32
+ ## API
33
+
34
+ ```tsx
35
+ <ContextMenu>
36
+ <ContextMenu.Trigger asChild>
37
+ <FileRow file={file} />
38
+ </ContextMenu.Trigger>
39
+ <ContextMenu.Content>
40
+ <ContextMenu.Item onSelect={() => open(file)}>Open</ContextMenu.Item>
41
+ <ContextMenu.Item onSelect={() => openInNewTab(file)}>Open in new tab</ContextMenu.Item>
42
+ <ContextMenu.Separator />
43
+ <ContextMenu.Item onSelect={() => rename(file)}>
44
+ Rename
45
+ <ContextMenu.Shortcut>F2</ContextMenu.Shortcut>
46
+ </ContextMenu.Item>
47
+ <ContextMenu.Item onSelect={() => duplicate(file)}>
48
+ Duplicate
49
+ <ContextMenu.Shortcut>⌘D</ContextMenu.Shortcut>
50
+ </ContextMenu.Item>
51
+ <ContextMenu.Separator />
52
+ <ContextMenu.Item destructive onSelect={() => del(file)}>
53
+ Delete
54
+ <ContextMenu.Shortcut>Del</ContextMenu.Shortcut>
55
+ </ContextMenu.Item>
56
+ </ContextMenu.Content>
57
+ </ContextMenu>
58
+ ```
59
+
60
+ ## Composition
61
+
62
+ Same parts as `DropdownMenu`:
63
+
64
+ | Part | Purpose |
65
+ | --- | --- |
66
+ | `Trigger` | Element where right-click / long-press opens the menu |
67
+ | `Content` | Menu surface; positioned at cursor |
68
+ | `Item`, `CheckboxItem`, `RadioGroup`, `RadioItem` | Same as DropdownMenu |
69
+ | `Sub`, `SubTrigger`, `SubContent` | Nested submenu |
70
+ | `Label`, `Separator`, `Group`, `Shortcut` | Same |
71
+
72
+ The semantic difference is only **how the menu opens** — content + behavior identical.
73
+
74
+ ## Trigger gestures
75
+
76
+ | Platform | Gesture |
77
+ | --- | --- |
78
+ | Desktop | Right-click (mouse), Ctrl+Click (Mac), 2-finger tap (trackpad) |
79
+ | Mobile | Long-press (~500ms) |
80
+ | Keyboard | Shift+F10 OR Menu/Application key |
81
+
82
+ The Trigger element should NOT visually change on hover (no obvious affordance — that's part of the contract). Power users discover via convention.
83
+
84
+ ## Long-press on mobile
85
+
86
+ For mobile, ContextMenu must be invoked by long-press:
87
+ - Default 500ms hold.
88
+ - Visual feedback during hold (subtle bg highlight at 250ms).
89
+ - Haptic feedback on activation.
90
+ - Cancel if finger moves > 10px during press.
91
+
92
+ ```tsx
93
+ <ContextMenu.Trigger asChild longPressDelay={500} hapticFeedback>
94
+ <FileRow />
95
+ </ContextMenu.Trigger>
96
+ ```
97
+
98
+ ## Positioning
99
+
100
+ - **Default**: cursor position (click point).
101
+ - **Auto-flip**: if cursor is near viewport edge, flip menu to fit.
102
+ - **Touch invocation**: position at touch point (or above if too low).
103
+
104
+ For long lists where every row has a context menu: ensure menu doesn't open under another row's content visually.
105
+
106
+ ## States
107
+
108
+ Same as DropdownMenu:
109
+ - Closed → opening (200ms fade+scale) → open → closing (150ms).
110
+ - Item hover, focus, disabled, destructive states.
111
+
112
+ ## Keyboard contract
113
+
114
+ Same as DropdownMenu:
115
+ - `Shift+F10` or `Menu` key opens (alternative to right-click).
116
+ - Arrow keys navigate.
117
+ - `Enter` activates.
118
+ - `Esc` closes.
119
+
120
+ ## Tokens consumed
121
+
122
+ ```
123
+ --color-bg-overlay
124
+ --color-fg-on-overlay
125
+ --color-bg-overlay-hover
126
+ --color-error-default (destructive item)
127
+ --color-border-overlay
128
+ --radius-md
129
+ --shadow-overlay
130
+ --space-xs, --space-sm
131
+ --font-size-sm
132
+ --motion-fast
133
+ --z-overlay
134
+ ```
135
+
136
+ ## Accessibility
137
+
138
+ - Trigger: native right-click works; for keyboard users, `Shift+F10` and `Menu` key open.
139
+ - For visible discovery: pair with a visible "More" `<DropdownMenu>` trigger. ContextMenu = supplemental shortcut.
140
+ - Content: `role="menu"`, items `role="menuitem"` (same as DropdownMenu).
141
+ - Don't suppress browser default context menu unless your replacement is functionally complete.
142
+ - Touch targets ≥ 44pt on mobile (long-press menu items).
143
+
144
+ ## Korean conventions
145
+
146
+ Same as DropdownMenu — Korean text legible, Pretendard / NanumSquare body. 합쇼체 ("삭제하시겠습니까?") for destructive confirmations OR 해요체 ("삭제할까요?") for casual brands.
147
+
148
+ ## Edge cases
149
+
150
+ - **Right-click on text selection**: ContextMenu may compete with browser's "Copy / Paste" menu. Decision:
151
+ - Inside an input: let browser default win.
152
+ - Inside a custom-rendered text element: replace with custom menu including copy / paste.
153
+ - **Long-press near edge of element**: ensure cursor / touch point stays within Trigger's bounding box.
154
+ - **Multiple items selected**: ContextMenu acts on the right-clicked item OR all selected — make explicit ("Delete 5 items").
155
+ - **Click outside while open**: close menu (any click outside Content closes).
156
+ - **Menu key / Shift+F10 with no element focused**: do nothing (or open a default menu if app has one).
157
+ - **Touch + mouse hybrid (iPad with trackpad)**: respect both gestures.
158
+ - **Browser context menu coexistence**: Some platforms (Linux, dev tools): `event.preventDefault()` on Trigger's `oncontextmenu` blocks browser menu.
159
+
160
+ ## Don't
161
+
162
+ - Don't make ContextMenu the only path to an action. Always provide an obvious button OR keyboard shortcut.
163
+ - Don't open ContextMenu on regular click — it must be triggered by right-click / long-press.
164
+ - Don't change Trigger's appearance on hover to suggest a click target.
165
+ - Don't replace browser default context menu in plain text inputs (users expect spell-check, paste).
166
+ - Don't use ContextMenu for primary navigation.
167
+ - Don't ship without keyboard alternative (Shift+F10 / Menu key).
168
+
169
+ ## References
170
+
171
+ - shadcn-ui: [`context-menu`](../refs/shadcn-ui/apps/v4/registry/new-york-v4/ui/context-menu.tsx) (Radix)
172
+ - WAI-ARIA: same Menu pattern as DropdownMenu
173
+ - Native: HTML5 `oncontextmenu` event
174
+
175
+ ## Cross-reference
176
+
177
+ - [`examples/component-dropdown.md`](component-dropdown.md) — visible-trigger variant
178
+ - [`examples/component-popover.md`](component-popover.md) — for non-menu floating content
179
+ - [`knowledge/a11y/keyboard-and-focus.md`](../knowledge/a11y/keyboard-and-focus.md)
package/examples/component-css-baseline.md ADDED
@@ -0,0 +1,148 @@
1
+ # `CssBaseline` — spec
2
+
3
+ > Synthesized from MUI `CssBaseline`, with theme-provider patterns cross-checked against Ant Design `ConfigProvider` and shadcn-ui global CSS variables. `CssBaseline` is an app-shell reset and baseline layer, not a visible component.
4
+
5
+ ## When to use
6
+
7
+ - At the root of an app, documentation site, design-system preview, or embedded product shell that needs one predictable global baseline.
8
+ - When typography, background, body margin, `box-sizing`, and color-scheme behavior must align with the active theme.
9
+ - Before authoring component specs or examples that assume semantic tokens are present.
10
+
11
+ When NOT to use:
12
+ - Inside repeated components, cards, modals, or individual pages.
13
+ - As a replacement for component-level tokens.
14
+ - In a microfrontend without agreeing on reset ownership with the host app.
15
+ - To erase browser focus outlines or form-control semantics.
16
+
17
+ ## Anatomy
18
+
19
+ ```
20
+ CssBaseline
21
+ ├── html baseline
22
+ ├── universal box-sizing inheritance
23
+ ├── body typography / color / background
24
+ ├── optional color-scheme integration
25
+ ├── theme style overrides
26
+ └── children passthrough
27
+ ```
28
+
29
+ | Part | Purpose | Required | Default if omitted |
30
+ | --- | --- | --- | --- |
31
+ | `html` rules | Font smoothing, `box-sizing`, text-size adjustment, optional `color-scheme`. | yes | installed by baseline |
32
+ | Universal box sizing | Makes descendants inherit `border-box`. | yes | installed by baseline |
33
+ | `body` rules | Removes margin and applies theme text/background + body typography. | yes | installed by baseline |
34
+ | Print rule | Uses a print-safe background. | yes | installed by baseline |
35
+ | Children | Lets the baseline wrap an app subtree. | no | renders global styles only |
36
+
37
+ ## API
38
+
39
+ ```tsx
40
+ <ThemeProvider theme={theme}>
41
+ <CssBaseline enableColorScheme />
42
+ <AppShell />
43
+ </ThemeProvider>
44
+ ```
45
+
46
+ | Prop | Type | Default | Description |
47
+ | --- | --- | --- | --- |
48
+ | `children` | `ReactNode` | — | Optional subtree rendered after global styles. Prefer placing app content as a sibling for clarity. |
49
+ | `enableColorScheme` | `boolean` | `false` | Applies CSS `color-scheme` from the active theme mode or color scheme. |
50
+
51
+ ## API choices made
52
+
53
+ - Keep the API intentionally tiny. Global reset behavior should be configured through theme tokens and theme overrides, not per-instance props.
54
+ - Prefer one root-level baseline per rendering island. Multiple baselines can duplicate global style tags and make debug order harder.
55
+ - Enable `color-scheme` only when light/dark tokens have been recomputed and tested. It affects native controls, scrollbars, and form affordances.
56
+ - Treat baseline as infrastructure. Product teams should not customize it to solve one-page layout problems.
57
+
58
+ ## Baseline contract
59
+
60
+ | Area | Rule |
61
+ | --- | --- |
62
+ | Box model | `html` uses `border-box`; all elements and pseudo-elements inherit it. |
63
+ | Body margin | Body margin is zero so app shells own spacing explicitly. |
64
+ | Typography | Body text inherits the theme's body typography token. Korean-heavy apps should use the Korean line-height rule from the typography knowledge base. |
65
+ | Color | Body foreground/background come from semantic tokens, not raw color values. |
66
+ | Bold text | `strong` and `b` use the theme bold weight. |
67
+ | Print | Body background becomes print-safe so large tinted app backgrounds do not waste ink. |
68
+ | Backdrop | Fullscreen backdrop inherits the app background for browser fullscreen cases. |
69
+
70
+ ## Tokens consumed
71
+
72
+ ```css
73
+ --color-bg-default
74
+ --color-text-primary
75
+ --color-bg-print
76
+ --font-family-body
77
+ --font-size-body
78
+ --line-height-body
79
+ --font-weight-bold
80
+ --color-scheme
81
+ ```
82
+
83
+ ## Accessibility
84
+
85
+ - **Contrast**: `--color-text-primary` on `--color-bg-default` must meet at least 4.5:1 for body text; UI outlines and separators must meet at least 3:1.
86
+ - **Focus**: never remove outlines or focus-visible styles in baseline. Component focus rings must remain visible above the baseline background.
87
+ - **Zoom**: do not disable browser zoom. Text-size adjustment should not prevent users from increasing text.
88
+ - **Native controls**: when `enableColorScheme` is on, verify checkboxes, selects, scrollbars, date inputs, and autofill in both light and dark themes.
89
+ - **Reduced motion**: baseline may define default motion tokens, but it must not introduce page-level animation. Motion belongs to components and must respect `prefers-reduced-motion`.
90
+ - **Language**: baseline does not set document language. Korean apps still need `<html lang="ko">`.
91
+
92
+ ## Code example — root baseline
93
+
94
+ ```tsx
95
+ import CssBaseline from "@mui/material/CssBaseline";
96
+ import { ThemeProvider } from "@mui/material/styles";
97
+
98
+ export function RootApp() {
99
+ return (
100
+ <ThemeProvider theme={appTheme}>
101
+ <CssBaseline enableColorScheme />
102
+ <AppShell />
103
+ </ThemeProvider>
104
+ );
105
+ }
106
+ ```
107
+
108
+ ```css
109
+ html {
110
+ box-sizing: border-box;
111
+ }
112
+
113
+ *, *::before, *::after {
114
+ box-sizing: inherit;
115
+ }
116
+
117
+ body {
118
+ margin: 0;
119
+ color: var(--color-text-primary);
120
+ background: var(--color-bg-default);
121
+ font-family: var(--font-family-body);
122
+ font-size: var(--font-size-body);
123
+ line-height: var(--line-height-body);
124
+ }
125
+ ```
126
+
127
+ ## Edge cases
128
+
129
+ - **Microfrontends**: one shell should own baseline. Child apps can consume tokens but should not inject a competing reset unless isolated by Shadow DOM.
130
+ - **SSR ordering**: global baseline styles must load before component styles that depend on them; otherwise first paint may show mismatched background or margin.
131
+ - **Dark mode**: do not invert colors mechanically. Recompute semantic tokens and then enable `color-scheme`.
132
+ - **Third-party widgets**: global `box-sizing` can affect embedded widgets. Put third-party surfaces inside an isolation wrapper if needed.
133
+ - **Print**: verify invoices, receipts, and reports. Product apps often need print-specific layout beyond baseline background.
134
+ - **Korean typography**: set body line-height around 1.6 for Hangul-heavy reading surfaces, while dense product controls can use tighter component-specific rhythm.
135
+
136
+ ## Don't
137
+
138
+ - Don't mount `CssBaseline` inside every route or layout segment.
139
+ - Don't use baseline overrides to style one component family.
140
+ - Don't remove focus outlines, resize behavior, or native control affordances globally.
141
+ - Don't define raw colors in baseline; use semantic tokens and check contrast.
142
+
143
+ ## References
144
+
145
+ - MUI: [`CssBaseline.d.ts`](../refs/mui/packages/mui-material/src/CssBaseline/CssBaseline.d.ts), [`CssBaseline.js`](../refs/mui/packages/mui-material/src/CssBaseline/CssBaseline.js), [`ThemeProvider.tsx`](../refs/mui/packages/mui-material/src/styles/ThemeProvider.tsx)
146
+ - Ant Design: [`config-provider/index.en-US.md`](../refs/ant-design/components/config-provider/index.en-US.md), [`theme/index.tsx`](../refs/ant-design/components/theme/index.tsx)
147
+ - shadcn-ui: [`theme-provider.tsx`](../refs/shadcn-ui/apps/v4/components/theme-provider.tsx), [`globals.css`](../refs/shadcn-ui/apps/v4/app/globals.css)
148
+ - Knowledge: [`a11y/contrast.md`](../knowledge/a11y/contrast.md), [`i18n/korean-typography.md`](../knowledge/i18n/korean-typography.md), [`design-tokens/tailwind-v4.md`](../knowledge/design-tokens/tailwind-v4.md)