菜单
Use when building AI chat interfaces. Triggers on "chat", "message", "AI", "streaming", "typing indicator", "message bubble", "chat input", "Spartan UI", "hlmBtn", "hlmAvatar", or chat component questions.
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
| name | ai-components |
| description | Use when building AI chat interfaces. Triggers on "chat", "message", "AI", "streaming", "typing indicator", "message bubble", "chat input", "Spartan UI", "hlmBtn", "hlmAvatar", or chat component questions. |
| allowed-tools | ["Read","Edit","Write","Glob","Grep"] |
This library is focused on AI chat interfaces. All components should be designed with AI use cases in mind.
IMPORTANT: When building UI for this project, prefer using Spartan UI components from @angular-ai-kit/spartan-ui/*.
Spartan UI provides accessible, well-designed primitives that integrate seamlessly with our Tailwind-based styling system.
| Package | Purpose |
|---|---|
@angular-ai-kit/spartan-ui/avatar | User/assistant avatars |
@angular-ai-kit/spartan-ui/badge | Status badges, labels |
@angular-ai-kit/spartan-ui/button | Buttons with variants |
@angular-ai-kit/spartan-ui/button-group | Grouped button actions |
@angular-ai-kit/spartan-ui/checkbox | Checkbox inputs |
@angular-ai-kit/spartan-ui/command | Command palette / search |
@angular-ai-kit/spartan-ui/dropdown-menu | Context menus, action menus |
@angular-ai-kit/spartan-ui/empty | Empty state displays |
@angular-ai-kit/spartan-ui/field | Form field wrapper with label/error |
@angular-ai-kit/spartan-ui/icon | Icon wrapper for ng-icons |
@angular-ai-kit/spartan-ui/input | Text inputs |
@angular-ai-kit/spartan-ui/input-group | Input with addons (buttons, icons) |
@angular-ai-kit/spartan-ui/item | List items with actions |
@angular-ai-kit/spartan-ui/popover | Popover overlays |
@angular-ai-kit/spartan-ui/radio-group | Radio button groups |
@angular-ai-kit/spartan-ui/select | Select dropdowns |
@angular-ai-kit/spartan-ui/separator | Visual dividers |
@angular-ai-kit/spartan-ui/spinner | Loading spinners |
@angular-ai-kit/spartan-ui/switch | Toggle switches |
@angular-ai-kit/spartan-ui/textarea | Multiline text inputs |
import { HlmButton } from '@angular-ai-kit/spartan-ui/button';
import { HlmButtonGroupImports } from '@angular-ai-kit/spartan-ui/button-group';
import { HlmIcon } from '@angular-ai-kit/spartan-ui/icon';
import { HlmInputGroupImports } from '@angular-ai-kit/spartan-ui/input-group';
@Component({
selector: 'ai-chat-input',
imports: [HlmButtonGroupImports, HlmInputGroupImports, HlmButton, HlmIcon],
template: `
<div hlmInputGroup>
<textarea
hlmInputGroupTextarea
placeholder="Send a message..."
></textarea>
<div hlmInputGroupAddon align="inline-end">
<button hlmInputGroupButton size="icon-sm">
<ng-icon hlm name="lucideArrowUp" size="sm" />
</button>
</div>
</div>
`,
})
export class ChatInputComponent {}
hlmInput, hlmInputGroup, hlmField)hlmBtn, hlmButtonGroup)hlmDropdownMenu, hlmPopover)hlmAvatar)hlmBadge)hlmSpinner)hlmEmpty)hlmItem)User Messages:
AI/Assistant Responses:
Enter to submitShift+Enter for new lineEscape to clear/cancel// Always provide loading feedback
@if (isLoading()) {
<ai-typing-indicator />
} @else {
<ai-message-content [content]="message().content" />
}
// Graceful error states with retry
@if (error()) {
<ai-error-message
[error]="error()"
(retry)="handleRetry()"
/>
}
// Welcoming empty state with suggestions
@if (messages().length === 0) {
<ai-empty-state
[suggestions]="promptSuggestions"
(selectPrompt)="handlePromptSelect($event)"
/>
}
// Support for streaming responses
message = input.required<ChatMessage>();
isStreaming = input(false);
// Show cursor while streaming
@if (isStreaming()) {
<span class="typing-cursor">cursor</span>
}
aria-liverequestAnimationFrame for smooth animationsUse when implementing accessible components, adding ARIA attributes, keyboard navigation, or screen reader support. Triggers on "a11y", "accessibility", "ARIA", "keyboard navigation", "focus", "screen reader", "WCAG", or "AXE".
Use when implementing complex UI patterns. Triggers on "CDK", "dialog", "modal", "overlay", "dropdown", "tooltip", "virtual scroll", "drag drop", "focus trap", "portal", or CDK questions.
Use when writing Angular v21 code. Triggers on "Angular", "component", "service", "signal", "inject", "standalone", "OnPush", "zoneless", "@if", "@for", "input()", "output()", "computed()", "effect()", or Angular v21 questions.
Use when organizing code or making architectural decisions. Triggers on "barrel export", "index.ts", "file structure", "naming convention", "module boundary", "dependency injection", "InjectionToken", "scalability", or organization questions.
Use when creating, modifying, or refactoring Angular components. Triggers on "create component", "add input", "add output", "signal", "computed", "host binding", "content projection", "Spartan UI", or component structure questions.
Use when working with CSS variables, theming, or colors. Triggers on "CSS variable", "theme", "dark mode", "light mode", "color token", "semantic color", "--background", "--foreground", "theme()", or color questions.