Elegant
Copilot Instructions Available Download this instruction file to enhance AI agent assistance for UI Domain - Learning Path patterns in your codebase.
Download
ui-instructions

UI Domain Terminology Guide

Atomic Design Hierarchy

Component Fundamentals

Styling & Presentation

Development & Documentation

Learning Path

🎯 Foundation (Start Here)

Goal: Understand the building blocks of UI development

  1. Component (20 min)
    • What makes a component and why they matter
    • Presentational vs container patterns
    • Component lifecycle fundamentals
    • Codelab: Build Your First Component
  2. Element (15 min)
    • DOM elements vs React elements
    • Virtual DOM concepts
    • Element creation and manipulation
  3. Props (20 min)
    • Component interfaces and contracts
    • Prop types and validation
    • Default props and spreading
    • Codelab: Mastering Props

Checkpoint: You should be able to create basic components that accept props and render UI elements.

🧱 Atomic Design System (Intermediate)

Goal: Master the atomic design hierarchy for scalable component architecture

  1. Atomic Design (25 min)
    • Overview of the complete methodology
    • When to use each atomic level
    • Benefits for large-scale applications
  2. Atom (25 min) ⭐ Enhanced
    • Single-responsibility components
    • Building reusable building blocks
    • Variant patterns and flexibility
    • Codelab: Atom Components - Practical Mastery ⭐
    • Quiz: Test your understanding (5 questions)
  3. Molecule (25 min)
    • Composing atoms into functional groups
    • When to create molecules vs organisms
    • State management in molecules
    • Codelab: Building Molecules
  4. Organism (30 min)
    • Complex, self-contained UI sections
    • Integrating with state management
    • Performance optimization strategies
  5. Template (20 min)
    • Page-level structure and layout
    • Content placeholders
    • Responsive grid systems

Checkpoint: You can architect an entire UI using the atomic design hierarchy and understand when to use each level.

🎨 Styling & User Experience (Intermediate)

Goal: Create beautiful, responsive, and accessible interfaces

  1. Theme (30 min)
    • Design system implementation
    • CSS-in-JS vs CSS Modules
    • Dark mode and theme switching
    • Codelab: Build a Theme System
  2. RWD (30 min)
  3. Skeleton (20 min)
    • Loading state patterns
    • Perceived performance
    • Progressive enhancement
  4. Accessibility (35 min)
    • WCAG guidelines
    • ARIA attributes
    • Keyboard navigation
    • Screen reader testing
    • Codelab: Accessible Components

Checkpoint: Your components are responsive, themed, and accessible to all users.

🔧 Advanced Patterns (Advanced)

Goal: Master advanced component patterns and tooling

  1. Events (25 min)
    • Event handling patterns
    • Synthetic events
    • Event delegation
    • Custom events
  2. Attributes (20 min)
    • HTML attributes vs DOM properties
    • Data attributes
    • Attribute spreading patterns
  3. DOM (25 min)
    • Direct DOM manipulation
    • Refs and imperative code
    • When to use vs declarative patterns
  4. Story (30 min)

Checkpoint: You understand advanced patterns and can document components effectively.

Domain Mastery Project

🚀 Build a Complete Design System

Objective: Create a production-ready component library demonstrating all UI concepts.

Requirements:

  1. Atomic Components (40+ components)
    • 10+ atoms (Button, Input, Icon, Badge, etc.)
    • 8+ molecules (SearchBar, Card, FormField, etc.)
    • 5+ organisms (Header, Sidebar, DataTable, etc.)
    • 3+ templates (DashboardLayout, ArticleLayout, etc.)
  2. Theme System
    • Light and dark modes
    • Multiple color schemes
    • Responsive typography scale
    • Spacing and sizing tokens
  3. Accessibility
    • WCAG 2.1 Level AA compliance
    • Keyboard navigation for all interactions
    • Screen reader tested
    • Focus management
  4. Documentation
    • Storybook with all components
    • Usage examples for each component
    • Props documentation
    • Accessibility notes
  5. Testing
    • Unit tests for all atoms
    • Integration tests for molecules
    • Visual regression tests
    • Accessibility audits

Deliverables:

Timeline: 4-6 weeks

Success Criteria:

Terminology Quick Reference

By Type

Structural Concepts:

Interface & Interaction:

Styling & Presentation:

Development:

By Difficulty

Beginner:

Intermediate:

Advanced:

Universal Frontend Architecture Integration

Each UI terminology aligns with the Universal Frontend Architecture principles:

Separation of Concerns

Component Hierarchy

Templates (Pages)
    ↓
Organisms (Sections)
    ↓
Molecules (Groups)
    ↓
Atoms (Primitives)

Framework Agnostic

Scalability

Learning Resources

Official Documentation

Practice Projects

  1. Beginner: Todo app with atomic components
  2. Intermediate: E-commerce product catalog
  3. Advanced: Complete design system

Community

Progress Tracking

Use this checklist to track your learning journey:

Foundation

Atomic Design

Styling & UX

Advanced

Mastery

Tips for Success

  1. Build While Learning: Don’t just read—implement each concept immediately
  2. Complete Codelabs: Hands-on practice cements understanding
  3. Take Quizzes: Test comprehension before moving forward
  4. Study Examples: Explore the demos/ directory for real implementations
  5. Ask Questions: Use the terminology pages’ references for deeper learning
  6. Document Progress: Keep notes on key insights from each topic

Next Steps

👉 Start here: Component Basics
📚 Or jump to: Atom - Practical Mastery (enhanced with quiz + codelab)
🎯 Set goal: Complete Foundation path this week