@design-ai/cli 4.55.0

package/knowledge/components/shadcn-registry.md

@@ -0,0 +1,159 @@
+---
+title: shadcn-ui registry catalog
+source: refs/shadcn-ui/apps/v4/registry/new-york-v4/
+upstream: https://github.com/shadcn-ui/ui/tree/main/apps/v4/registry/new-york-v4
+extracted_at: 2026-05-19
+applies_to: [react, tailwindcss, radix-ui]
+version: 1.0.0
+last_updated: 2026-05
+stability: stable
+---
+
+# shadcn-ui registry catalog (new-york-v4)
+
+shadcn-ui is **not** an installable package — it's a registry of source files you copy into your project. The "new-york-v4" style is the modern default. Each entry below is a component you can `npx shadcn add <name>`.
+
+## UI primitives (57)
+
+|   |   |   |   |
+| --- | --- | --- | --- |
+| `_registry` | `accordion` | `alert-dialog` | `alert` |
+| `aspect-ratio` | `avatar` | `badge` | `breadcrumb` |
+| `button-group` | `button` | `calendar` | `card` |
+| `carousel` | `chart` | `checkbox` | `collapsible` |
+| `combobox` | `command` | `context-menu` | `dialog` |
+| `direction` | `drawer` | `dropdown-menu` | `empty` |
+| `field` | `form` | `hover-card` | `input-group` |
+| `input-otp` | `input` | `item` | `kbd` |
+| `label` | `menubar` | `native-select` | `navigation-menu` |
+| `pagination` | `popover` | `progress` | `radio-group` |
+| `resizable` | `scroll-area` | `select` | `separator` |
+| `sheet` | `sidebar` | `skeleton` | `slider` |
+| `sonner` | `spinner` | `switch` | `table` |
+| `tabs` | `textarea` | `toggle-group` | `toggle` |
+| `tooltip` |  |  |  |
+
+## Blocks (28)
+
+|   |   |   |   |
+| --- | --- | --- | --- |
+| `_registry` | `dashboard-01` | `login-01` | `login-02` |
+| `login-03` | `login-04` | `login-05` | `sidebar-01` |
+| `sidebar-02` | `sidebar-03` | `sidebar-04` | `sidebar-05` |
+| `sidebar-06` | `sidebar-07` | `sidebar-08` | `sidebar-09` |
+| `sidebar-10` | `sidebar-11` | `sidebar-12` | `sidebar-13` |
+| `sidebar-14` | `sidebar-15` | `sidebar-16` | `signup-01` |
+| `signup-02` | `signup-03` | `signup-04` | `signup-05` |
+
+## Charts (70)
+
+|   |   |   |   |
+| --- | --- | --- | --- |
+| `chart-area-axes` | `chart-area-default` | `chart-area-gradient` | `chart-area-icons` |
+| `chart-area-interactive` | `chart-area-legend` | `chart-area-linear` | `chart-area-stacked-expand` |
+| `chart-area-stacked` | `chart-area-step` | `chart-bar-active` | `chart-bar-default` |
+| `chart-bar-horizontal` | `chart-bar-interactive` | `chart-bar-label-custom` | `chart-bar-label` |
+| `chart-bar-mixed` | `chart-bar-multiple` | `chart-bar-negative` | `chart-bar-stacked` |
+| `chart-line-default` | `chart-line-dots-colors` | `chart-line-dots-custom` | `chart-line-dots` |
+| `chart-line-interactive` | `chart-line-label-custom` | `chart-line-label` | `chart-line-linear` |
+| `chart-line-multiple` | `chart-line-step` | `chart-pie-donut-active` | `chart-pie-donut-text` |
+| `chart-pie-donut` | `chart-pie-interactive` | `chart-pie-label-custom` | `chart-pie-label-list` |
+| `chart-pie-label` | `chart-pie-legend` | `chart-pie-separator-none` | `chart-pie-simple` |
+| `chart-pie-stacked` | `chart-radar-default` | `chart-radar-dots` | `chart-radar-grid-circle-fill` |
+| `chart-radar-grid-circle-no-lines` | `chart-radar-grid-circle` | `chart-radar-grid-custom` | `chart-radar-grid-fill` |
+| `chart-radar-grid-none` | `chart-radar-icons` | `chart-radar-label-custom` | `chart-radar-legend` |
+| `chart-radar-lines-only` | `chart-radar-multiple` | `chart-radar-radius` | `chart-radial-grid` |
+| `chart-radial-label` | `chart-radial-shape` | `chart-radial-simple` | `chart-radial-stacked` |
+| `chart-radial-text` | `chart-tooltip-advanced` | `chart-tooltip-default` | `chart-tooltip-formatter` |
+| `chart-tooltip-icons` | `chart-tooltip-indicator-line` | `chart-tooltip-indicator-none` | `chart-tooltip-label-custom` |
+| `chart-tooltip-label-formatter` | `chart-tooltip-label-none` |  |  |
+
+## Hooks (2)
+
+|   |   |   |   |
+| --- | --- | --- | --- |
+| `_registry` | `use-mobile` |  |  |
+
+## Examples (230)
+
+|   |   |   |   |
+| --- | --- | --- | --- |
+| `accordion-demo` | `alert-demo` | `alert-destructive` | `alert-dialog-demo` |
+| `aspect-ratio-demo` | `avatar-demo` | `badge-demo` | `badge-destructive` |
+| `badge-outline` | `badge-secondary` | `breadcrumb-demo` | `breadcrumb-dropdown` |
+| `breadcrumb-ellipsis` | `breadcrumb-link` | `breadcrumb-responsive` | `breadcrumb-separator` |
+| `button-as-child` | `button-default` | `button-demo` | `button-destructive` |
+| `button-ghost` | `button-group-demo` | `button-group-dropdown` | `button-group-input-group` |
+| `button-group-input` | `button-group-nested` | `button-group-orientation` | `button-group-popover` |
+| `button-group-select` | `button-group-separator` | `button-group-size` | `button-group-split` |
+| `button-icon` | `button-link` | `button-loading` | `button-outline` |
+| `button-rounded` | `button-secondary` | `button-size` | `button-with-icon` |
+| `calendar-demo` | `calendar-hijri` | `card-demo` | `card-with-form` |
+| `carousel-api` | `carousel-demo` | `carousel-orientation` | `carousel-plugin` |
+| `carousel-size` | `carousel-spacing` | `chart-bar-demo-axis` | `chart-bar-demo-grid` |
+| `chart-bar-demo-legend` | `chart-bar-demo-tooltip` | `chart-bar-demo` | `chart-tooltip-demo` |
+| `checkbox-demo` | `checkbox-disabled` | `checkbox-with-text` | `collapsible-demo` |
+| `combobox-demo` | `combobox-dropdown-menu` | `combobox-popover` | `combobox-responsive` |
+| `command-demo` | `command-dialog` | `context-menu-demo` | `data-table-demo` |
+| `date-picker-demo` | `date-picker-with-presets` | `date-picker-with-range` | `dialog-close-button` |
+| `dialog-demo` | `drawer-demo` | `drawer-dialog` | `dropdown-menu-checkboxes` |
+| `dropdown-menu-demo` | `dropdown-menu-dialog` | `dropdown-menu-radio-group` | `empty-avatar-group` |
+| `empty-avatar` | `empty-background` | `empty-demo` | `empty-icon` |
+| `empty-input-group` | `empty-outline` | `field-checkbox` | `field-choice-card` |
+| `field-demo` | `field-fieldset` | `field-group` | `field-input` |
+| `field-radio` | `field-responsive` | `field-select` | `field-slider` |
+| `field-switch` | `field-textarea` | `form-next-complex` | `form-next-demo` |
+| `form-rhf-array` | `form-rhf-checkbox` | `form-rhf-complex` | `form-rhf-demo` |
+| `form-rhf-input` | `form-rhf-password` | `form-rhf-radiogroup` | `form-rhf-select` |
+| `form-rhf-switch` | `form-rhf-textarea` | `form-tanstack-array` | `form-tanstack-checkbox` |
+| `form-tanstack-complex` | `form-tanstack-demo` | `form-tanstack-input` | `form-tanstack-radiogroup` |
+| `form-tanstack-select` | `form-tanstack-switch` | `form-tanstack-textarea` | `hover-card-demo` |
+| `input-demo` | `input-disabled` | `input-file` | `input-group-button-group` |
+| `input-group-button` | `input-group-custom` | `input-group-demo` | `input-group-dropdown` |
+| `input-group-icon` | `input-group-label` | `input-group-spinner` | `input-group-text` |
+| `input-group-textarea` | `input-group-tooltip` | `input-otp-controlled` | `input-otp-demo` |
+| `input-otp-pattern` | `input-otp-separator` | `input-with-button` | `input-with-label` |
+| `input-with-text` | `item-avatar` | `item-demo` | `item-dropdown` |
+| `item-group` | `item-header` | `item-icon` | `item-image` |
+| `item-link` | `item-size` | `item-variant` | `kbd-button` |
+| `kbd-demo` | `kbd-group` | `kbd-input-group` | `kbd-tooltip` |
+| `label-demo` | `menubar-demo` | `mode-toggle` | `native-select-demo` |
+| `native-select-disabled` | `native-select-groups` | `native-select-invalid` | `navigation-menu-demo` |
+| `pagination-demo` | `popover-demo` | `progress-demo` | `radio-group-demo` |
+| `resizable-demo-with-handle` | `resizable-demo` | `resizable-handle` | `resizable-vertical` |
+| `scroll-area-demo` | `scroll-area-horizontal-demo` | `select-demo` | `select-scrollable` |
+| `separator-demo` | `sheet-demo` | `sheet-side` | `skeleton-card` |
+| `skeleton-demo` | `slider-demo` | `sonner-demo` | `sonner-types` |
+| `spinner-badge` | `spinner-basic` | `spinner-button` | `spinner-color` |
+| `spinner-custom` | `spinner-demo` | `spinner-empty` | `spinner-input-group` |
+| `spinner-item` | `spinner-size` | `switch-demo` | `table-demo` |
+| `tabs-demo` | `textarea-demo` | `textarea-disabled` | `textarea-with-button` |
+| `textarea-with-label` | `textarea-with-text` | `toggle-demo` | `toggle-disabled` |
+| `toggle-group-demo` | `toggle-group-disabled` | `toggle-group-lg` | `toggle-group-outline` |
+| `toggle-group-single` | `toggle-group-sm` | `toggle-group-spacing` | `toggle-lg` |
+| `toggle-outline` | `toggle-sm` | `toggle-with-text` | `tooltip-demo` |
+| `typography-blockquote` | `typography-demo` | `typography-h1` | `typography-h2` |
+| `typography-h3` | `typography-h4` | `typography-inline-code` | `typography-large` |
+| `typography-lead` | `typography-list` | `typography-muted` | `typography-p` |
+| `typography-small` | `typography-table` |  |  |
+
+## How to use
+
+```bash
+npx shadcn@latest add button card dialog
+```
+
+Components land in `components/ui/`. Edit them — they are yours, not a dependency.
+
+## When to pick shadcn over MUI/Ant
+
+- You want Tailwind, not CSS-in-JS.
+- You want to **own** the component code.
+- You're using Radix primitives or Headless UI elsewhere.
+- You want minimal bundle (no theme runtime).
+
+## When NOT to pick shadcn
+
+- You need RTL out of the box (less polished than MUI/Ant).
+- You need form/data-table primitives that are deeply pre-wired (use Ant Design Form/Table).
+- You ship to non-React frameworks.

package/knowledge/conversational/ai-chat-interfaces.md

@@ -0,0 +1,323 @@
+<!-- hand-written -->
+---
+title: AI chat interfaces (ChatGPT, Claude, LLM-based UX)
+applies_to: [ai-chat, llm, chatgpt, conversational]
+version: 1.0.0
+last_updated: 2026-05
+stability: stable
+---
+
+# AI chat interfaces
+
+LLM-based chat (ChatGPT, Claude, Gemini, Perplexity, character.ai) has its own emerging UX conventions. Different from rule-based chatbots: more capable, more open-ended, but with novel UX challenges around hallucinations, latency, context length, and trust.
+
+Read [`conversational-ui-fundamentals.md`](conversational-ui-fundamentals.md) and [`chatbot-design.md`](chatbot-design.md) first.
+
+## What's different about AI chat
+
+vs traditional chatbot:
+- **Free-form input** — users type anything, model interprets.
+- **Long-form output** — paragraphs, code, lists, not just one-line replies.
+- **Streamed responses** — token-by-token, not waiting for completion.
+- **Multi-turn context** — system holds prior messages within session.
+- **Multimodal** — image upload, file analysis, voice (varies by model).
+- **Hallucinations** — model can be confidently wrong.
+- **Cost per token** — long conversations expensive.
+
+These shape the UI.
+
+## Anatomy of an AI chat UI
+
+```
+┌──────────────────────────────────────────┐
+│ [Brand] Chat                       [⚙ ⏷] │   ← header (model selector)
+├──────────────────────────────────────────┤
+│ [Sidebar]  │  Today                       │
+│            │  ─────                       │
+│ + New chat │                              │
+│            │  User: How do I fix...?      │
+│ Today      │                              │
+│ • Chat 1   │  Assistant: To fix this...   │
+│ • Chat 2   │  [code block]                │
+│            │  [continue][regenerate][copy]│
+│ Yesterday  │                              │
+│ • Chat 3   │  ───── input ─────           │
+│            │ [Type a message...]    [▶]   │
+│            │ [Attach] [Voice] [Search]    │
+└──────────────────────────────────────────┘
+```
+
+## Input affordances
+
+### Multi-line input
+
+Most AI chat allows multi-line input (Shift+Enter for newline; Enter to send):
+
+```
+[Long multi-line text area, expanding as user types]
+[Send button]
+```
+
+For complex queries, code paste, full-document review.
+
+### Attachments
+
+- **Image upload** (Claude, GPT-4o): drag-drop or button.
+- **File upload** (PDFs, docs, code): paid tiers; drag-drop.
+- **Multiple files** in one message.
+- **Visible attachments** above input field as chips before send.
+
+### Slash commands / mentions
+
+Some AI tools have:
+- **Slash commands** — `/help`, `/reset`, `/model gpt-4`.
+- **Mentions** — `@persona` or `@tool` to invoke specific AI / tool.
+- **Sample prompts** — pre-written suggestion chips.
+
+For developer tools (Cursor, Claude Code): slash commands are core.
+
+### Voice input
+
+Increasingly common (ChatGPT voice mode, Claude voice on mobile):
+- Tap-to-talk.
+- Real-time transcription preview.
+- Voice + text hybrid.
+
+## Output rendering
+
+AI responses are richer than chatbot replies:
+
+| Element | Render |
+| --- | --- |
+| **Markdown** | Bold, italic, lists, headings rendered |
+| **Code blocks** | Syntax-highlighted; with copy button |
+| **Inline code** | Monospace |
+| **Math (LaTeX)** | Rendered with KaTeX / MathJax |
+| **Tables** | Proper HTML tables |
+| **Links** | Clickable, sometimes with preview |
+| **Mermaid diagrams** | Rendered if requested |
+| **Images** | Inline if generated / referenced |
+
+Don't show raw markdown — render it.
+
+For Korean: same markdown rendering; Korean text in code blocks works (Pretendard / Monaspace Argon supports Korean monospace if needed).
+
+## Streaming responses
+
+The single most important UX difference:
+
+```
+[blank screen — bad]
+   ↓
+[• word           ]  ← starts at 200ms
+[• word word      ]
+[• word word word ]  ← user reads while it streams
+[...]
+```
+
+Implementation:
+- **Server-Sent Events (SSE)** stream tokens.
+- **Render incrementally** — append to message bubble.
+- **Cursor / blinking** indicator at end of streaming text.
+- **Stop button** — let user halt mid-stream.
+
+Streaming makes 30-second responses feel acceptable. Without streaming, 30s feels broken.
+
+## Stop / regenerate / continue
+
+Standard controls below an AI response:
+
+| Action | Use |
+| --- | --- |
+| **Stop generating** | While streaming; halt response |
+| **Regenerate** | New response to same prompt |
+| **Continue** | Long response truncated; ask for more |
+| **Copy** | Copy entire response or code block |
+| **Edit** (user message) | Edit user's prior message; regenerates everything after |
+| **Branch** | Save current path; explore alternative |
+| **Share** | Share conversation link |
+
+Place inline below each AI response, not in a hidden menu.
+
+## Context length and truncation
+
+Models have context limits (8k, 32k, 128k, 200k+ tokens). Long conversations exceed:
+
+- **Sliding window** — drop oldest messages when over limit.
+- **Summarization** — auto-summarize old messages, keep recent.
+- **Visible indicator** — "context near limit" warning.
+- **Manual reset** — "New chat" button always visible.
+
+For long conversations: file uploads or "memory" features offload context.
+
+## Hallucination handling
+
+LLMs confidently produce wrong answers. UX mitigations:
+
+- **Source citations** — show which docs / web results informed the answer.
+- **Confidence indicators** — vague when unsure.
+- **Disclaimers** — "AI can make mistakes. Verify important info."
+- **Verifiable claims** — direct quotes / page references.
+- **User feedback** — thumbs up/down to improve.
+
+For factual products (search, research): always provide citations.
+For creative products (writing, ideation): less critical.
+
+## Trust and disclosure
+
+Be transparent:
+- **AI-generated label** — small but visible.
+- **Model version** — "Powered by GPT-4o" / "Claude 3.5 Sonnet".
+- **Data usage policy** — does prompt training happen? Disclose.
+- **Conversation storage** — retained / deletable.
+
+## Chat history sidebar
+
+Sidebar shows past conversations:
+
+```
+[+ New chat]
+
+Today
+• Working on the design system
+• Help with React component
+• ...
+
+Yesterday
+• Korean language practice
+• ...
+
+Last week
+• ...
+```
+
+Features:
+- **Search** through history.
+- **Rename** conversations.
+- **Delete** individual or all.
+- **Export** conversation.
+- **Pinned / favorites** at top.
+
+## Multi-modal output
+
+Some AI models output more than text:
+
+| Output | Render |
+| --- | --- |
+| **Generated image** (DALL-E, Imagen) | Inline image with download |
+| **Generated audio** (TTS, music) | Audio player |
+| **Generated code execution** (Code Interpreter, Artifacts) | Sandboxed runtime, output rendering |
+| **Generated documents** (Claude Artifacts) | Side-pane preview |
+
+For Claude / GPT artifacts (live HTML / React preview): split-pane interface, code on left, preview on right.
+
+## Suggestions / next steps
+
+After a response, suggest follow-ups:
+
+```
+[AI response about React performance]
+
+Ask follow-up:
+[Show me an example with hooks] [What about Vue?] [Profile this code]
+```
+
+Reduces typing for common follow-ups.
+
+## Voice mode UX
+
+ChatGPT / Claude voice modes:
+
+| Element | Behavior |
+| --- | --- |
+| Activation | Mic icon or wake word (varies) |
+| Visual | Animated orb / wave during listening / speaking |
+| Interruption | User can interrupt AI mid-speech |
+| Transcript | Optional visible text |
+| Modes | "push to talk" or "open conversation" |
+
+Voice mode latency target: < 1 second to first audio for natural feel. Hard to achieve with full LLM round-trip + TTS.
+
+## Mobile vs desktop
+
+| Surface | Differences |
+| --- | --- |
+| Mobile | Vertical stack; full-screen chat; voice prominent |
+| Desktop | Sidebar + main; multi-column; keyboard shortcuts |
+| Tablet | Either; usually closer to desktop |
+
+For developer tools (Cursor, Claude Code): heavy keyboard shortcuts, side-by-side code + chat, multi-window.
+
+## Memory / personalization
+
+Modern AI tools have "memory":
+- **Persistent memory** — model remembers facts across sessions.
+- **Custom instructions** — user-defined preferences applied to all chats.
+- **Project / Workspace** — scoped memory + files for related work.
+
+UX:
+- **Memory indicator** — visible when memory used / created.
+- **Edit / delete memory** — user can manage.
+- **Per-project scope** — separate from general memory.
+
+## Keyboard shortcuts (desktop)
+
+| Shortcut | Action |
+| --- | --- |
+| Cmd/Ctrl + Enter | Send |
+| Shift + Enter | Newline |
+| Cmd/Ctrl + K | New chat |
+| Cmd/Ctrl + L | Focus input |
+| Cmd/Ctrl + Shift + O | New chat |
+| Cmd/Ctrl + / | Show shortcuts |
+| Esc | Close current modal / cancel generation |
+| Up arrow | Edit last message |
+
+For developer tools: more shortcuts (Vim-style, multi-cursor).
+
+## Korean AI chat
+
+Korean LLM products (2024+):
+- **HyperCLOVA X** (Naver) — Korean-strong LLM.
+- **Bixby Text Call** (Samsung) — AI text generation in messaging.
+- **A.X / Kakao i** (Kakao) — Korean assistant.
+- **GPT / Claude / Gemini** Korean support — adequate to strong.
+
+For Korean AI chat UI:
+- Korean primary; English code / technical content OK.
+- 해요체 default tone (friendly).
+- Pretendard / NanumSquare / Apple SD Gothic Neo for body.
+- Korean code-block content rendered correctly (Pretendard JetBrains Mono / Monaspace Argon).
+
+## Common AI chat mistakes
+
+- **No streaming** — feels broken at 5+ second responses.
+- **Hidden controls** — regenerate / stop in submenu.
+- **Truncated responses without "continue"** — frustrating.
+- **No copy button** — users can't copy code / responses.
+- **Markdown not rendered** — raw asterisks / brackets visible.
+- **No history search** — users can't find past chat.
+- **No disclaimer** — users trust AI as authoritative.
+- **No way to start fresh** — context grows indefinitely.
+- **No model identification** — users don't know what they're using.
+
+## Don't
+
+- Don't ship without streaming.
+- Don't hide stop / regenerate / copy.
+- Don't render raw markdown.
+- Don't pretend the AI is infallible. Disclose.
+- Don't truncate without "continue" affordance.
+- Don't lose chat history without warning.
+- Don't make context-management opaque. Show when limits hit.
+- Don't ship without keyboard shortcuts on desktop.
+
+## Cross-reference
+
+- [`knowledge/conversational/conversational-ui-fundamentals.md`](conversational-ui-fundamentals.md) — fundamentals
+- [`knowledge/conversational/voice-ui-patterns.md`](voice-ui-patterns.md) — voice
+- [`knowledge/conversational/chatbot-design.md`](chatbot-design.md) — traditional bots
+- [`knowledge/conversational/korean-voice-conventions.md`](korean-voice-conventions.md) — KR
+- [`examples/component-chat-interface.md`](../../examples/component-chat-interface.md) — chat UI spec
+- [`examples/component-voice-input.md`](../../examples/component-voice-input.md) — voice input
+- [`knowledge/patterns/technical-writing.md`](../patterns/technical-writing.md) — markdown rendering