80 lines
2.4 KiB
Markdown
80 lines
2.4 KiB
Markdown
# Task: Create Design System Components
|
|
|
|
## Objective
|
|
Design and implement a cohesive set of reusable UI components that form a comprehensive design system, ensuring consistency, accessibility, and scalability across the application.
|
|
|
|
## Prerequisites
|
|
- Brand guidelines or visual design direction
|
|
- Technical stack information
|
|
- Existing components or patterns (if available)
|
|
- Accessibility requirements
|
|
|
|
## Process Steps
|
|
|
|
### 1. Design System Foundation
|
|
- Define design tokens (colors, typography, spacing, etc.)
|
|
- Establish naming conventions
|
|
- Define component categories (atoms, molecules, organisms)
|
|
- Create design principles and guidelines
|
|
|
|
### 2. Core Components Identification
|
|
- Identify primitive components (buttons, inputs, etc.)
|
|
- Identify composite components (cards, modals, etc.)
|
|
- Identify layout components (grids, containers, etc.)
|
|
- Identify specialized components (data tables, charts, etc.)
|
|
|
|
### 3. Component Specification
|
|
- Define component props and variants
|
|
- Document component states and behaviors
|
|
- Define accessibility requirements
|
|
- Document responsive behavior
|
|
|
|
### 4. Implementation Strategy
|
|
- Determine component architecture
|
|
- Define styling approach
|
|
- Plan component documentation
|
|
- Establish testing strategy
|
|
|
|
### 5. Component Implementation
|
|
- Create base components
|
|
- Implement variants and states
|
|
- Add accessibility features
|
|
- Ensure responsive behavior
|
|
- Add proper documentation
|
|
|
|
### 6. Design System Documentation
|
|
- Create usage guidelines
|
|
- Document component API
|
|
- Provide examples and patterns
|
|
- Create visual documentation
|
|
|
|
### 7. Testing & Validation
|
|
- Test components across devices and browsers
|
|
- Validate accessibility compliance
|
|
- Perform visual regression testing
|
|
- Validate component API usability
|
|
|
|
## IDE-Specific Considerations
|
|
|
|
### Implementation in IDE Environments
|
|
- Structure components for easy discovery and usage
|
|
- Create appropriate folder structure
|
|
- Implement consistent patterns across components
|
|
- Ensure proper typing and documentation
|
|
|
|
## Deliverables
|
|
- Design system foundation (tokens, principles)
|
|
- Core component library
|
|
- Component documentation
|
|
- Usage examples
|
|
- Testing suite
|
|
|
|
## Success Criteria
|
|
- Components follow consistent patterns
|
|
- Components are accessible
|
|
- Components are responsive
|
|
- Components are well-documented
|
|
- Components are properly tested
|
|
- Components are easy to use and extend
|
|
- Design system is cohesive and scalable
|