@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-spatial-panel.md ADDED
@@ -0,0 +1,330 @@
1
+ <!-- hand-written -->
2
+ # `SpatialPanel` (custom — floating UI panel for VR / AR / spatial computing) — spec
3
+
4
+ > Floating 2D-in-3D panel for spatial UIs (Vision Pro, Quest, HoloLens, mobile AR). Handles anchoring (world / wrist / hand / head), distance / scale / billboarding, comfort positioning, hand + gaze input, depth occlusion. Pairs with [`knowledge/spatial/spatial-ui-elements.md`](../knowledge/spatial/spatial-ui-elements.md).
5
+
6
+ ## Purpose
7
+
8
+ Spatial apps are full of floating panels — settings, content, dialogs, productivity windows. Without a primitive, every team reinvents:
9
+ 1. Anchoring (where in space?).
10
+ 2. Distance / size (visual angle vs absolute meters?).
11
+ 3. Billboarding (face user always or fixed?).
12
+ 4. Input handling (hand pinch, controller raycast, gaze).
13
+ 5. Comfort positioning (eye level, slight tilt, etc.).
14
+ 6. Occlusion (in front of / behind real objects).
15
+
16
+ `SpatialPanel` provides these as a primitive. Subclass for specific surface types.
17
+
18
+ ## Anatomy
19
+
20
+ ```
21
+ [shadow / occlusion]
22
+ ┌──────────────────┐
23
+ │ [grab handle] ⊗ │ ← title bar with close
24
+ ├──────────────────┤
25
+ │ │
26
+ │ [content] │
27
+ │ │
28
+ │ │
29
+ └──────────────────┘
30
+ [tail / pointer]
31
+ ```
32
+
33
+ ## API (conceptual; per-platform implementation differs)
34
+
35
+ ### visionOS (SwiftUI / RealityKit)
36
+
37
+ ```swift
38
+ SpatialPanel(
39
+ anchor: .world(position: .init(x: 0, y: 1.4, z: -1.5)),
40
+ size: .visualAngle(width: 30, height: 20), // degrees
41
+ billboard: .yAxisOnly,
42
+ closable: true,
43
+ resizable: true,
44
+ draggable: true
45
+ ) {
46
+ YourContent()
47
+ }
48
+ ```
49
+
50
+ ### Unity (Quest, Vision Pro via Polyspatial)
51
+
52
+ ```csharp
53
+ public class SpatialPanel : MonoBehaviour
54
+ {
55
+ public AnchorMode anchor; // World, Wrist, Hand, Head
56
+ public Vector3 worldPosition;
57
+ public float widthMeters = 1.0f;
58
+ public float heightMeters = 0.6f;
59
+ public BillboardMode billboard; // None, YAxis, Full
60
+ public float distanceMeters = 1.5f;
61
+ public bool grabbable = true;
62
+ public bool closable = true;
63
+ }
64
+ ```
65
+
66
+ ### React Three Fiber (WebXR)
67
+
68
+ ```tsx
69
+ <SpatialPanel
70
+ anchor="world"
71
+ position={[0, 1.4, -1.5]}
72
+ width={1.0}
73
+ height={0.6}
74
+ billboard="y-axis"
75
+ closable
76
+ draggable
77
+ >
78
+ <Html transform>
79
+ <YourContent />
80
+ </Html>
81
+ </SpatialPanel>
82
+ ```
83
+
84
+ | Prop / config | Type | Default | Description |
85
+ | --- | --- | --- | --- |
86
+ | `anchor` | `"world" \| "wrist" \| "hand" \| "head"` | `"world"` | Where panel exists |
87
+ | `position` | `Vector3` | depends on anchor | World position (m) |
88
+ | `width` | `number` (m or °) | per platform | Width in meters or visual angle |
89
+ | `height` | `number` | per platform | Height |
90
+ | `billboard` | `"none" \| "y-axis" \| "full"` | `"y-axis"` | Rotation behavior |
91
+ | `distance` | `number` | `1.5` | Default distance from user when first placed |
92
+ | `grabbable` | `boolean` | `true` | Can user grab + reposition? |
93
+ | `closable` | `boolean` | `true` | Show close button |
94
+ | `resizable` | `boolean` | `false` | Allow resize |
95
+ | `tilt` | `number` (degrees) | `5` | Slight tilt toward user |
96
+ | `occluded` | `boolean` | `true` | Real / virtual objects can occlude panel |
97
+ | `shadow` | `boolean` | `true` | Cast shadow on real surfaces (AR) |
98
+ | `glow` | `"none" \| "subtle" \| "active"` | `"subtle"` | Edge glow / highlight |
99
+
100
+ ## Anchoring modes
101
+
102
+ ### `world`
103
+
104
+ Panel fixed in world space. User moves around it. Default for content / productivity panels.
105
+
106
+ ```
107
+ [user position changes; panel stays fixed]
108
+ [1m away looking left, panel appears as expected]
109
+ ```
110
+
111
+ ### `wrist`
112
+
113
+ Panel anchored to user's wrist. Moves with arm.
114
+
115
+ ```
116
+ [user looks at wrist] → [panel becomes visible]
117
+ [user lowers arm] → [panel hides or persists faintly]
118
+ ```
119
+
120
+ Used for quick-access menus (Vision Pro Home, Quest watch).
121
+
122
+ ### `hand`
123
+
124
+ Panel held in user's hand. Moves with hand fully.
125
+
126
+ ```
127
+ [hand moves] → [panel moves]
128
+ ```
129
+
130
+ Used for tools, palettes (drawing apps, color picker).
131
+
132
+ ### `head`
133
+
134
+ Panel locked to user's head — always in front. **Use sparingly** — nauseating for long content.
135
+
136
+ ```
137
+ [user looks anywhere] → [panel always at fixed position relative to view]
138
+ ```
139
+
140
+ Used for: brief tooltips, reticles, system-level alerts.
141
+
142
+ ## Sizing
143
+
144
+ ### Visual angle vs absolute size
145
+
146
+ | Approach | Pro | Con |
147
+ | --- | --- | --- |
148
+ | **Absolute (meters)** | Predictable physical size | Visual angle changes with distance |
149
+ | **Visual angle (degrees)** | Consistent screen presence | Physical size changes with distance |
150
+
151
+ Default: visual angle for UI clarity (panels look the same size regardless of placement); absolute for content that should "be" a specific size (a virtual TV is a real-world TV size).
152
+
153
+ ### Reference sizes
154
+
155
+ | Use | Visual angle (recommended at 1.5m distance) | Meters |
156
+ | --- | --- | --- |
157
+ | Tooltip / quick info | 5-10° | 13-26cm wide |
158
+ | Settings / dialog | 20-30° | 53-80cm |
159
+ | Productivity window | 40-50° | 1.0-1.4m |
160
+ | Movie screen | 60-90° | 1.7-3.0m |
161
+
162
+ ## States
163
+
164
+ | State | Visual |
165
+ | --- | --- |
166
+ | Default | Panel rendered with subtle edge glow |
167
+ | Hover (gaze / pointer near) | Slightly brighter glow |
168
+ | Grabbing | Stronger glow + lift animation; user dragging |
169
+ | Pressed (button inside) | Inner content reacts; panel itself static |
170
+ | Closing | Fade out + scale down 200ms |
171
+ | Out-of-comfort (extreme angle) | Faint warning glow at edge |
172
+
173
+ ## Comfort positioning
174
+
175
+ ### Default placement
176
+
177
+ When panel first appears, place:
178
+ - **At gaze direction** for primary content.
179
+ - **At eye level OR slightly below** (-10° from horizontal).
180
+ - **1.2-1.5m distance** from user.
181
+ - **Slight tilt** (5-10°) toward user.
182
+
183
+ ### Avoid
184
+
185
+ - **Too close** (< 50cm): vergence-accommodation strain.
186
+ - **Too far** (> 5m): hard to read text.
187
+ - **Above eye level for long content**: neck strain.
188
+ - **Behind user**: lost.
189
+ - **Inside real objects** (AR): collision.
190
+
191
+ ### Reposition gracefully
192
+
193
+ If panel ends up uncomfortable (user moved):
194
+ - **Auto-reposition button**: "Bring panel to me".
195
+ - **Recall** gesture (look + pinch on a corner).
196
+ - **Gradual drift correction** (subtle move toward comfort zone).
197
+
198
+ ## Input handling
199
+
200
+ ### Gaze + pinch (Vision Pro)
201
+
202
+ - User looks at panel; panel highlights.
203
+ - User looks at button inside panel; button highlights.
204
+ - User pinches; button activates.
205
+
206
+ ### Hand poke (Quest, Vision Pro hand tracking)
207
+
208
+ - User extends finger toward button.
209
+ - Visual feedback as finger approaches surface.
210
+ - Push through surface = press.
211
+
212
+ ### Ray-cast (controller, far targeting)
213
+
214
+ - Controller emits ray.
215
+ - Ray intersects panel; cursor appears on panel.
216
+ - Trigger pulled = press at cursor.
217
+
218
+ ### Direct touch (close range)
219
+
220
+ - Hand is within touch distance of panel.
221
+ - Finger taps surface like a touchscreen.
222
+
223
+ `SpatialPanel` should detect input mode and provide appropriate feedback. All four work transparently.
224
+
225
+ ## Tokens consumed
226
+
227
+ Spatial-specific tokens:
228
+
229
+ ```
230
+ --spatial-panel-bg (panel background, semi-opaque)
231
+ --spatial-panel-bg-blur (background blur amount, AR)
232
+ --spatial-panel-border (edge color)
233
+ --spatial-panel-glow (subtle edge glow)
234
+ --spatial-panel-shadow (shadow on real surfaces)
235
+ --spatial-panel-text (default text color)
236
+ --spatial-panel-text-emphasis
237
+ --spatial-panel-button-idle
238
+ --spatial-panel-button-hover
239
+ --spatial-panel-button-pressed
240
+ --spatial-panel-distance-default (1.5m)
241
+ --spatial-panel-tilt-default (5°)
242
+ --spatial-panel-anim-fade (200ms)
243
+ --spatial-panel-anim-easing (ease-out)
244
+ ```
245
+
246
+ For AR / passthrough: panels need higher contrast against variable real backgrounds. Apply `--spatial-panel-bg-blur` for legibility.
247
+
248
+ ## Accessibility
249
+
250
+ - **Keyboard nav** (where input mode supports): Tab through panel children.
251
+ - **Screen reader / VoiceOver**: panel announced as a region; children announced as user navigates.
252
+ - **High contrast mode**: swap tokens.
253
+ - **Larger text option**: scale internal content text.
254
+ - **Reduced motion**: skip fade-in / animation.
255
+ - **Voice control**: "Open settings", "Close panel".
256
+ - **Hand alternative**: if hand tracking fails / disabled, controller / voice still works.
257
+
258
+ ## Implementation hints (Unity-style pseudocode)
259
+
260
+ ```csharp
261
+ public class SpatialPanel : MonoBehaviour
262
+ {
263
+ void Update()
264
+ {
265
+ switch (anchor)
266
+ {
267
+ case AnchorMode.World:
268
+ // Stay where placed; do nothing each frame
269
+ break;
270
+ case AnchorMode.Head:
271
+ transform.position = camera.position + camera.forward * distanceMeters;
272
+ transform.rotation = camera.rotation;
273
+ break;
274
+ case AnchorMode.Wrist:
275
+ transform.position = wristTransform.position;
276
+ transform.rotation = wristTransform.rotation;
277
+ break;
278
+ case AnchorMode.Hand:
279
+ transform.position = handTransform.position;
280
+ transform.rotation = handTransform.rotation;
281
+ break;
282
+ }
283
+
284
+ if (billboard == BillboardMode.YAxis)
285
+ {
286
+ Vector3 toCamera = camera.position - transform.position;
287
+ toCamera.y = 0;
288
+ transform.rotation = Quaternion.LookRotation(-toCamera);
289
+ }
290
+ else if (billboard == BillboardMode.Full)
291
+ {
292
+ transform.LookAt(2 * transform.position - camera.position);
293
+ }
294
+ }
295
+ }
296
+ ```
297
+
298
+ For visionOS: SwiftUI auto-handles much of this; manual for advanced cases.
299
+
300
+ For React Three Fiber / WebXR: wrap with `<group>` and update transform per frame in `useFrame`.
301
+
302
+ ## Edge cases
303
+
304
+ - **User walks behind the panel**: panel is double-sided OR rotates to face user.
305
+ - **AR — panel inside a real object**: collision detection; nudge panel forward.
306
+ - **AR — panel obscured by real object**: render with depth occlusion (real wall blocks panel).
307
+ - **VR — user moves play area**: panel stays in world, but might be unreachable; reposition button.
308
+ - **Input mode switches mid-interaction** (controller dropped, hand-tracking takes over): preserve current state.
309
+ - **Panel content overflows**: scroll inside panel.
310
+ - **Multi-panel layout**: snap to grid; persist arrangement.
311
+ - **Wrist panel with arm down**: hide; show only when wrist visible.
312
+
313
+ ## Don't
314
+
315
+ - Don't head-lock long content.
316
+ - Don't make panels too small for comfortable reading (< 20° for dense content).
317
+ - Don't ignore comfort tilt — head-on panels feel stiff.
318
+ - Don't skip occlusion in AR — flat overlays look unreal.
319
+ - Don't forget input alternatives. Voice / controller / hand all work.
320
+ - Don't render text below 1° visual angle.
321
+ - Don't ignore Korean text size needs (~1.5× Latin equivalent for clarity at low PPD).
322
+
323
+ ## Cross-reference
324
+
325
+ - [`knowledge/spatial/spatial-ui-elements.md`](../knowledge/spatial/spatial-ui-elements.md) — UI elements
326
+ - [`knowledge/spatial/spatial-design-fundamentals.md`](../knowledge/spatial/spatial-design-fundamentals.md) — fundamentals
327
+ - [`knowledge/spatial/vr-patterns.md`](../knowledge/spatial/vr-patterns.md) — VR
328
+ - [`knowledge/spatial/ar-patterns.md`](../knowledge/spatial/ar-patterns.md) — AR
329
+ - [`knowledge/spatial/comfort-and-accessibility.md`](../knowledge/spatial/comfort-and-accessibility.md) — comfort + a11y
330
+ - [`examples/component-spatial-locomotion.md`](component-spatial-locomotion.md) — VR locomotion
package/examples/component-speed-dial-action.md ADDED
@@ -0,0 +1,78 @@
1
+ # `SpeedDialAction` — spec
2
+
3
+ > Synthesized from MUI `SpeedDialAction`. Single action item inside a [`SpeedDial`](component-speed-dial.md) — child component, surfaces an icon + tooltip when the parent is open.
4
+
5
+ ## API
6
+
7
+ ```tsx
8
+ <SpeedDial ariaLabel="새로 만들기" icon={<PlusIcon />}>
9
+ <SpeedDialAction
10
+ icon={<EditIcon />}
11
+ tooltipTitle="새 글"
12
+ onClick={() => navigate("/compose")}
13
+ />
14
+ <SpeedDialAction
15
+ icon={<CameraIcon />}
16
+ tooltipTitle="사진"
17
+ onClick={openCamera}
18
+ />
19
+ </SpeedDial>
20
+ ```
21
+
22
+ | Prop | Type | Default | Description |
23
+ | --- | --- | --- | --- |
24
+ | `icon` | `ReactNode` | required | Action icon |
25
+ | `tooltipTitle` | `string` | required | Tooltip / aria label |
26
+ | `tooltipPlacement` | `"top" \| "bottom" \| "left" \| "right"` | per parent | Tooltip side |
27
+ | `tooltipOpen` | `boolean` | `false` | Always-visible label (instead of hover) |
28
+ | `onClick` | `() => void` | — | Action callback |
29
+ | `disabled` | `boolean` | `false` | Disabled |
30
+
31
+ ## States
32
+
33
+ | State | Visual |
34
+ | --- | --- |
35
+ | Hidden (parent closed) | Not rendered |
36
+ | Visible (parent open) | Animated entrance with stagger |
37
+ | Hover | Bg shift + tooltip visible |
38
+ | Pressed | Active state |
39
+ | Disabled | Reduced opacity, no events |
40
+
41
+ ## Animation
42
+
43
+ Entrance: scaled from 0 → 1 + fades in. Stagger 50ms between siblings (handled by parent SpeedDial).
44
+
45
+ ## Tokens consumed
46
+
47
+ ```
48
+ --speed-dial-action-bg
49
+ --speed-dial-action-fg
50
+ --speed-dial-action-size (typically 40-44px)
51
+ --speed-dial-action-shadow
52
+ --motion-fast
53
+ --ease-out
54
+ ```
55
+
56
+ Inherits from parent SpeedDial's tokens.
57
+
58
+ ## Accessibility
59
+
60
+ - `<button aria-label={tooltipTitle}>`.
61
+ - Tooltip optional (parent shows them by default).
62
+ - Touch target ≥ 44pt.
63
+ - For tooltipOpen=true: tooltip becomes a persistent label, not a hover hint.
64
+
65
+ ## Don't
66
+
67
+ - Don't ship SpeedDialAction outside a SpeedDial parent — orphan.
68
+ - Don't omit tooltipTitle. It's the accessible label.
69
+ - Don't make actions different sizes within one SpeedDial.
70
+
71
+ ## References
72
+
73
+ - MUI: [`SpeedDialAction`](../refs/mui/packages/mui-material/src/SpeedDialAction)
74
+
75
+ ## Cross-reference
76
+
77
+ - [`examples/component-speed-dial.md`](component-speed-dial.md) — parent
78
+ - [`examples/component-icon-button.md`](component-icon-button.md) — sibling pattern
package/examples/component-speed-dial.md ADDED
@@ -0,0 +1,177 @@
1
+ # `SpeedDial` — spec
2
+
3
+ > Synthesized from MUI `SpeedDial`. A floating action button (FAB) that expands into a radial / vertical menu of secondary actions on hover or tap. Common in mobile apps for "create" / "compose" multi-action triggers.
4
+
5
+ ## When to use
6
+
7
+ - Mobile app primary action with 2-5 sub-actions ("New post", "Camera", "Voice memo").
8
+ - Editor canvas tool palette.
9
+ - Quick-action menu in dashboards.
10
+
11
+ When NOT to use:
12
+ - One-off action (use plain FAB / `FloatButton`).
13
+ - 6+ sub-actions (becomes overwhelming; use full menu).
14
+ - Desktop primary nav (use Sidebar / NavigationMenu).
15
+
16
+ ## Anatomy
17
+
18
+ ```
19
+ [✏️] Compose
20
+ [📷] Camera
21
+ [🎤] Voice
22
+ [➕] ← FAB (collapsed)
23
+
24
+ Closed: just the FAB.
25
+ Open: actions fan up (or out radially) above the FAB.
26
+ ```
27
+
28
+ ## API
29
+
30
+ ```tsx
31
+ <SpeedDial
32
+ ariaLabel="Create"
33
+ icon={<PlusIcon />}
34
+ openIcon={<XIcon />}
35
+ >
36
+ <SpeedDial.Action
37
+ icon={<EditIcon />}
38
+ tooltipTitle="Compose"
39
+ onClick={compose}
40
+ />
41
+ <SpeedDial.Action
42
+ icon={<CameraIcon />}
43
+ tooltipTitle="Camera"
44
+ onClick={openCamera}
45
+ />
46
+ <SpeedDial.Action
47
+ icon={<MicIcon />}
48
+ tooltipTitle="Voice"
49
+ onClick={recordVoice}
50
+ />
51
+ </SpeedDial>
52
+ ```
53
+
54
+ | Prop | Type | Default | Description |
55
+ | --- | --- | --- | --- |
56
+ | `ariaLabel` | `string` | required | FAB accessible label |
57
+ | `icon` | `ReactNode` | — | Closed-state icon |
58
+ | `openIcon` | `ReactNode` | rotated `icon` | Open-state icon (often X) |
59
+ | `direction` | `"up" \| "down" \| "left" \| "right"` | `"up"` | Action expansion direction |
60
+ | `placement` | `"bottom-right" \| "bottom-left" \| "top-right" \| "top-left"` | `"bottom-right"` | FAB position on screen |
61
+ | `hidden` | `boolean` | `false` | Hide entire SpeedDial |
62
+ | `open` | `boolean` | controlled | Open state |
63
+ | `onOpen` / `onClose` | function | — | State callbacks |
64
+
65
+ ## States
66
+
67
+ | State | Visual |
68
+ | --- | --- |
69
+ | Closed | FAB only |
70
+ | Hover (desktop) | Auto-opens (configurable) |
71
+ | Tap (mobile) | Opens with stagger animation |
72
+ | Open | Actions visible with tooltip labels |
73
+ | Action hover | Action highlights |
74
+ | Action click | Closes SpeedDial; fires action |
75
+
76
+ ## Animation
77
+
78
+ ```
79
+ Open: actions fan out one-by-one with 50ms stagger
80
+ Each scales from 0 to 1 + fades in
81
+ Total: ~250ms
82
+
83
+ Close: reverse, faster (~150ms)
84
+
85
+ Backdrop: optional dim of background while open
86
+ ```
87
+
88
+ Reduced motion: skip stagger; instant appear / disappear.
89
+
90
+ ## Tokens consumed
91
+
92
+ ```
93
+ --fab-bg (FAB color)
94
+ --fab-fg
95
+ --fab-shadow
96
+ --fab-size (typically 56px)
97
+ --speed-dial-action-bg (smaller secondary FABs)
98
+ --speed-dial-action-fg
99
+ --speed-dial-action-size (40-44px)
100
+ --speed-dial-tooltip-bg
101
+ --speed-dial-tooltip-fg
102
+ --space-md
103
+ --motion-medium
104
+ --ease-out
105
+ --z-fab
106
+ ```
107
+
108
+ ## Accessibility
109
+
110
+ - FAB: `<button aria-label="..." aria-haspopup="true" aria-expanded>`.
111
+ - Action: `<button aria-label="...">`.
112
+ - Each Action has visible (or aria-described) tooltip.
113
+ - Keyboard: focus FAB → Enter opens → arrow keys navigate actions → Enter activates.
114
+ - Esc closes.
115
+ - Focus trap optional (depending on whether actions are independent or sequential).
116
+
117
+ ## Korean conventions
118
+
119
+ - 작성하기 / 새 글 / 새 글 쓰기 — common labels for "compose"
120
+ - 카메라 / 사진 / 동영상 — for media actions
121
+ - 음성 메모 — voice memo
122
+ - 안전영역 (safe area) on iOS — bottom inset 고려
123
+
124
+ ## Code example
125
+
126
+ ```tsx
127
+ function MobileApp() {
128
+ return (
129
+ <>
130
+ <main>{/* main content */}</main>
131
+
132
+ <SpeedDial
133
+ ariaLabel="새로 만들기"
134
+ icon={<PlusIcon />}
135
+ placement="bottom-right"
136
+ direction="up"
137
+ sx={{ position: "fixed", bottom: 80, right: 16 }}
138
+ >
139
+ <SpeedDial.Action
140
+ icon={<EditIcon />}
141
+ tooltipTitle="새 글"
142
+ onClick={() => navigate("/compose")}
143
+ />
144
+ <SpeedDial.Action
145
+ icon={<CameraIcon />}
146
+ tooltipTitle="사진"
147
+ onClick={openCamera}
148
+ />
149
+ <SpeedDial.Action
150
+ icon={<MicIcon />}
151
+ tooltipTitle="음성"
152
+ onClick={recordVoice}
153
+ />
154
+ </SpeedDial>
155
+ </>
156
+ );
157
+ }
158
+ ```
159
+
160
+ ## Don't
161
+
162
+ - Don't put 6+ actions. Becomes overwhelming.
163
+ - Don't open on hover for mobile-primary apps (no hover; users miss it). Tap-only on mobile.
164
+ - Don't omit safe-area inset on iOS — FAB covered by home indicator.
165
+ - Don't use SpeedDial when a single-purpose FAB suffices.
166
+ - Don't anchor at top — expectations are bottom corner.
167
+
168
+ ## References
169
+
170
+ - MUI: [`SpeedDial`](../refs/mui/packages/mui-material/src/SpeedDial)
171
+ - Material Design: SpeedDial pattern
172
+ - Patterns: Twitter / Instagram compose FAB
173
+
174
+ ## Cross-reference
175
+
176
+ - [`examples/component-float-button.md`](component-float-button.md) — single-action FAB
177
+ - [`examples/component-bottom-navigation.md`](component-bottom-navigation.md) — common companion