# Ai Chat

> AI chat interface patterns for Angular 21.x and Flutter 3.41.x. Use when building streaming chat UI, conversational AI assistants, copilots, token context indicators, feedback loops, multi-modal inputs, tool visualization, or AI-specific error handling. Covers streaming markdown, auto-scroll heuristics, memoized rendering, token limit UI, regeneration controls, thumbs up/down feedback, and AI err…

- **Type:** Skill
- **Install:** `agentstack add skill-kumaran-is-claude-code-onboarding-ai-chat`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [kumaran-is](https://agentstack.voostack.com/s/kumaran-is)
- **Installs:** 0
- **Category:** [Content & Media](https://agentstack.voostack.com/c/content-and-media)
- **Latest version:** 0.1.0
- **License:** MIT
- **Upstream author:** [kumaran-is](https://github.com/kumaran-is)
- **Source:** https://github.com/kumaran-is/claude-code-onboarding/tree/develop/.claude/skills/ai-chat

## Install

```sh
agentstack add skill-kumaran-is-claude-code-onboarding-ai-chat
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

**Iron Law:** Load this skill before building any chat interface; never hardcode streaming or message formats without verifying against the skill's patterns.

# AI Chat Interface Skill

> **Tech Stack**: Angular 21.x (signals, daisyUI, TailwindCSS) | Flutter 3.41.x (Riverpod, Dart 3.10.9)

## When to Activate

Load this skill when the task involves any of:
- Streaming LLM response rendering (SSE / chunked HTTP)
- Chat message list with assistant/user bubbles
- Token context window indicators
- Regenerate / stop generation controls
- Thumbs up/down feedback collection
- Multi-modal input (file/image attachment in a chat box)
- AI-specific error states (refusal, rate limit, context exceeded)
- Tool call visualization in the message thread

## Pre-Code Checklist

Before writing any component:

1. **Angular**: Read `angular-spa` skill — verify signal/OnPush/daisyUI baseline
2. **Flutter**: Read `flutter-mobile` skill — verify Riverpod/AppSpacing/colorScheme baseline
3. **Docs**: Use `Context7` MCP for any library not confirmed in this session (e.g., `marked`, `flutter_markdown`)

## Core Component Overview

| Component | Angular | Flutter |
|-----------|---------|---------|
| Message bubble list | `ChatMessageListComponent` | `ChatMessageList` widget |
| Streaming message display | `StreamingMessageComponent` | `StreamedMessageWidget` |
| Token context indicator | `TokenIndicatorComponent` | `TokenIndicatorWidget` |
| Chat input (multi-modal) | `ChatInputComponent` | `ChatInputWidget` |
| Feedback bar | `FeedbackComponent` | `FeedbackBar` widget |
| AI error display | `AiErrorComponent` | `AiErrorWidget` |
| Tool call visualization | `ToolCallCardComponent` | `ToolCallCard` widget |

## Quick Start

See `reference/quick-start.md` for entry-point wiring (Angular `ChatComponent` + Flutter `ChatScreen`).

## Key Patterns (brief — details in reference files)

### Streaming (Angular)
- Use `AbortController` to cancel in-flight SSE streams
- Auto-scroll: scroll only when user is within 100px of bottom
- `computed()` signal to derive rendered markdown — prevents re-parsing on every chunk
- `aria-live="polite"` wraps the message list

### Streaming (Flutter)
- `AsyncNotifier` with `Stream.listen` updates `state` incrementally
- `ScrollController` + `addPostFrameCallback` for auto-scroll after frame
- Check `MediaQuery.of(context).disableAnimations` before scroll animations

### Token Context
- Angular: `TokenIndicatorComponent` uses daisyUI `progress` + `text-warning`/`text-error` classes at 80%/100% thresholds
- Flutter: `LinearProgressIndicator` with `colorScheme.error` / `colorScheme.tertiary`
- Always display "~N messages remaining" not raw token numbers

### AI Errors
- Every AI error type has a distinct UI state — see `reference/ai-error-handling.md`
- NEVER swallow AI errors silently — always show user-visible feedback with an action

### Feedback
- Angular: `signal` tracks selected thumb; regenerate re-emits prompt
- Flutter: `HapticFeedback.lightImpact()` on thumb press; `colorScheme.primary` for active state

### Multi-Modal Input
- Angular: Angular CDK drag-drop for file zone; `Enter` sends, `Shift+Enter` newlines
- Flutter: `image_picker` for attachments; `maxLines: null` for auto-expanding TextField

## Reference Files

| File | Contents |
|------|----------|
| `reference/quick-start.md` | Entry-point wiring for Angular ChatComponent and Flutter ChatScreen |
| `reference/streaming-patterns.md` | Streaming UX, auto-scroll, memoization, stop controls |
| `reference/context-management.md` | Token indicator, threshold logic, summarization trigger |
| `reference/ai-error-handling.md` | Refusal, rate limit, context exceeded, timeout, hallucination flag |
| `reference/feedback-loops.md` | Thumbs up/down, copy, regenerate — Angular & Flutter |
| `reference/multimodal-input.md` | File attach, preview chips, auto-expand textarea/field |

## Anti-Patterns — Hard Prohibitions

- **NEVER** re-parse markdown on every streaming chunk — memoize with `computed()` / derived state
- **NEVER** auto-scroll unconditionally — it steals user scroll position mid-read
- **NEVER** display raw token counts to end users — use human-readable approximations
- **NEVER** silently ignore AI error responses — every error must log + show user feedback
- **NEVER** hardcode colors for error/warning states — use daisyUI tokens or `colorScheme`
- **NEVER** use constructor DI in Angular — use `inject()`
- **NEVER** use `@Input()`/`@Output()` decorators — use `input()`, `output()`, `model()` signals
- **NEVER** use raw `EdgeInsets` numeric literals in Flutter — use `AppSpacing` tokens
- **NEVER** use `Color(0x...)` literals in Flutter — use `Theme.of(context).colorScheme`

## Post-Code Review

After implementation, dispatch these reviewer agents:

| Concern | Agent |
|---------|-------|
| Angular code quality | `code-reviewer` |
| Accessibility (ARIA, keyboard nav) | `accessibility-auditor` |
| Flutter/Riverpod patterns | `riverpod-reviewer` |
| Security (file uploads, content rendering) | `security-reviewer` |
| UI/UX consistency | `ui-standards-expert` |

## Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

- **Author:** [kumaran-is](https://github.com/kumaran-is)
- **Source:** [kumaran-is/claude-code-onboarding](https://github.com/kumaran-is/claude-code-onboarding)
- **License:** MIT

Install and usage instructions live in the source repository linked above.

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** no
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** no
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/skill-kumaran-is-claude-code-onboarding-ai-chat
- Seller: https://agentstack.voostack.com/s/kumaran-is
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.