菜单
Material Design 3 patterns for chat widget components. Use for status indicators, input fields, empty states, message bubbles, or typing indicators in chat UIs.
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
Sprint planning patterns including effort estimation, cross-project validation, ticket refinement workflows, two-validator parallel intent-only refinement, Foundation→Gates ticket pairs, workstream split thresholds, and hub/per-project reconciliation. Use for sprint capacity planning, ticket validation, dependency discovery, tier-gated dispatch, strategic pivots, or coordinating multi-agent ticket processing.
Multimodal AI patterns for extracting structured information from video using Gemini, GPT-4o, and Claude vision. Frame sampling strategies, structured output with Pydantic, temporal reasoning, and cost optimization. Use for video analysis, report generation from video, and visual inspection.
Apple Foundation Models framework for on-device AI. LanguageModelSession, @Generable macro, structured output, token management, and availability checking.
Tactical DDD patterns for clean Python architecture including Domain Model, Repository, Service Layer, Unit of Work, and Aggregates. Use for backend architecture decisions, implementing data access layers, separating business logic from infrastructure, or reviewing code separation.
Architecture Decision Records (ADRs) for documenting significant technical decisions. Use for capturing decision context, rationale, consequences, and maintaining decision history.
Architecture visualization patterns using Mermaid and ASCII diagrams. Use for service flows, sequence diagrams, C4 models, decision matrices, or expressing architectural ideas visually.
| name | frontend-material-chat |
| description | Material Design 3 patterns for chat widget components. Use for status indicators, input fields, empty states, message bubbles, or typing indicators in chat UIs. |
Material Design 3 patterns specifically for chat interfaces and conversational UIs.
| Component | M3 Pattern | Key Token |
|---|---|---|
| Status Indicator | Semantic color dot (7px) | --md-sys-color-tertiary |
| Input Area | Filled text field container | --md-sys-shape-corner-medium |
| Empty State | Centered logo + brand | Glass morphism container |
| Message Bubble | Surface-variant container | --md-sys-shape-corner-large |
| Typing Indicator | Animated dots | Tertiary color pulse |
| State | Color | Hex |
|---|---|---|
| Connected | Green | #22c55e |
| Connecting | Yellow | #eab308 |
| Disconnected | Red | #ef4444 |
┌──────────────────────────────────────┐
│ [Input text field] [Send] │
└──────────────────────────────────────┘
Border: 1px solid rgba(0,0,0,0.15)
Border-radius: 12px
Focus: Primary color glow at 20% opacity
aria-label describing connection state@media (prefers-reduced-motion: reduce) supportfrontend-material-design-3 instead)See reference.md for detailed patterns and examples.md for Svelte implementations.