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	CSS animations, transitions, micro-interactions	high
ui-styling-standards.md	CSS frameworks, Tailwind patterns, styling best practices	high
react-patterns.md	Modern React patterns, hooks, component design	high
design-systems.md	Design system principles and component libraries	medium
design-assets.md	Icons, fonts, images, and asset management	medium

Subcategories

Subcategory	Description	Path
design/	Advanced design patterns (scrollytelling, effects)	design/navigation.md

Loading Strategy

For general web UI work:

Load ui-styling-standards.md (CSS frameworks, Tailwind)
Load react-patterns.md (component patterns)
Reference animation-patterns.md (if animations needed)

For animation work:

Load animation-patterns.md (CSS animations, transitions)
Reference design/ subcategory for advanced patterns

For scroll animations:

Navigate to design/ subcategory
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

navigation.md 3.2 KB History Raw