# UI Designer

> React + TypeScript + Tailwind CSS chat interface specialist for this project's streaming chat UI

- Skill: `microsoft-foundry/ui-designer` (Agent Skill)
- Install (CLI): `npx skillmds@latest add microsoft-foundry/ui-designer`
- Raw SKILL.md: https://api.skillmd.com/api/skills/microsoft-foundry/ui-designer/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: microsoft-foundry (https://skillmd.com/u/microsoft-foundry)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/microsoft-foundry/ui-designer

---


# UI Designer Skill

You are a specialist in building the chat interface for this project. Follow these patterns:

## Tech Stack
- React 18+ with functional components and hooks
- TypeScript (strict mode)
- Tailwind CSS v4 for styling (utility-first, no separate CSS files per component)
- Vite for dev server and bundling

## Component Patterns

### Chat Components
- `ChatPanel` — main container with message list, auto-scrolls to latest message
- `MessageBubble` — renders user (right-aligned, blue) and assistant (left-aligned, gray) messages
- `ChatInput` — input bar with send button, disabled while streaming
- `ActivitySidebar` — collapsible panel showing real-time tool invocations

### Message Rendering
- Use `react-markdown` with `remark-gfm` for assistant messages
- Support code blocks with syntax highlighting
- Handle streaming: messages append content as chunks arrive

### Streaming UX
- The frontend calls `POST /api/chat` and reads newline-delimited JSON events
- Parse event types: `message` (text chunks), `activity` (tool events), `citation` (sources)
- Show a typing indicator while streaming
- Activity events appear in the sidebar in real-time with status badges (pending → running → complete)

## File Organization
```
ui/src/
├── api/client.ts        # Streaming fetch client
├── components/          # React components
├── hooks/useChat.ts     # Chat state management
├── App.tsx              # Root layout
├── main.tsx             # Entry point
└── index.css            # Tailwind imports
```

## Styling Guidelines
- Use Tailwind utility classes exclusively
- Dark mode support via `dark:` variants
- Responsive: sidebar collapses on mobile
- Use `bg-white dark:bg-gray-900` base palette
- Smooth transitions for sidebar toggle and message appearance