4.1 KiB

Raw Blame History

Web UI Context

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

Last Updated: 2026-01-07

Core Files

File	Description	Priority
animation-basics.md	Animation fundamentals, timing, easing	high
animation-components.md	Button, card, modal, dropdown animations	high
animation-chat.md	Chat UI and message animations	medium
animation-loading.md	Skeleton, spinner, progress animations	medium
animation-forms.md	Form input and validation animations	medium
animation-advanced.md	Recipes, best practices, accessibility	medium
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
images-guide.md	Placeholder and responsive images	medium
icons-guide.md	Icon systems (Lucide, Heroicons, FA)	medium
fonts-guide.md	Font loading and optimization	medium
cdn-resources.md	CDN libraries and resources	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-basics.md (fundamentals, timing, easing)
Load animation-components.md (UI component animations)
Reference animation-chat.md for chat UI patterns
Reference animation-advanced.md for recipes and accessibility

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-basics.md, animation-components.md, animation-chat.md, animation-loading.md, animation-forms.md, animation-advanced.md

CSS animations, micro-interactions, and UI transitions split into focused modules.

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

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

images-guide.md, icons-guide.md, fonts-guide.md, cdn-resources.md

Managing design assets in web applications - split into focused guides.

Key topics: Placeholder images, icon libraries (Lucide, Heroicons), web fonts, CDN resources

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: 8
Subcategories: 1 (design/)
Total context files: 8 + design subcategory

4.1 KiB Raw Blame History