# Web UI Context

**Purpose**: Web-based UI patterns, animations, styling standards, and React component design

**Last Updated**: 2026-01-07

---

## Quick Navigation

### Core Files

| File | Description | Priority |
|------|-------------|----------|
| [animation-patterns.md](animation-patterns.md) | CSS animations, transitions, micro-interactions | high |
| [ui-styling-standards.md](ui-styling-standards.md) | CSS frameworks, Tailwind patterns, styling best practices | high |
| [react-patterns.md](react-patterns.md) | Modern React patterns, hooks, component design | high |
| [design-systems.md](design-systems.md) | Design system principles and component libraries | medium |
| [design-assets.md](design-assets.md) | Icons, fonts, images, and asset management | medium |

### Subcategories

| Subcategory | Description | Path |
|-------------|-------------|------|
| **design/** | Advanced design patterns (scrollytelling, effects) | [design/navigation.md](design/navigation.md) |

---

## Loading Strategy

### For general web UI work:
1. Load `ui-styling-standards.md` (CSS frameworks, Tailwind)
2. Load `react-patterns.md` (component patterns)
3. Reference `animation-patterns.md` (if animations needed)

### For animation work:
1. Load `animation-patterns.md` (CSS animations, transitions)
2. Reference `design/` subcategory for advanced patterns

### For scroll animations:
1. Navigate to `design/` subcategory
2. Load scroll-linked animation guides

---

## Scope

This subcategory covers:
- ✅ CSS animations and transitions
- ✅ Tailwind CSS and utility-first styling
- ✅ React component patterns and hooks
- ✅ Design systems and component libraries
- ✅ Icon libraries and web fonts
- ✅ Scroll-linked animations (scrollytelling)
- ✅ Canvas-based rendering
- ✅ Framer Motion patterns

---

## File Summaries

### animation-patterns.md
CSS animations, micro-interactions, and UI transitions. Covers timing standards, easing functions, button/card interactions, modals, loading states, and accessibility.

**Key topics**: Animation micro-syntax, 60fps performance, reduced motion, chat UI animations

### ui-styling-standards.md
CSS framework usage, Tailwind CSS patterns, responsive design, and styling best practices.

**Key topics**: Utility-first CSS, component styling, responsive breakpoints, dark mode

### react-patterns.md
Modern React patterns including functional components, hooks, state management, and performance optimization.

**Key topics**: Custom hooks, context API, code splitting, memoization

### design-systems.md
Design system principles, component libraries, and maintaining consistency across applications.

**Key topics**: Design tokens, component APIs, documentation, versioning

### design-assets.md
Managing icons, fonts, images, and other design assets in web applications.

**Key topics**: Icon libraries (Lucide, Font Awesome), web fonts, image optimization

---

## Related Categories

- `ui/terminal/` - Terminal UI patterns
- `development/` - General development patterns
- `product/` - Product design and UX strategy

---

## Used By

**Agents**: frontend-specialist, design-specialist, ui-developer, react-developer, animation-expert

---

## Statistics
- Core files: 5
- Subcategories: 1 (design/)
- **Total context files**: 5 + design subcategory