# Task: Implement Components in IDE Environment

## Objective
Transform design requirements into production-ready frontend components directly in the IDE environment, optimizing for immediate implementation and integration.

## Prerequisites
- Project structure and tech stack information
- Design requirements or component specifications
- Access to an IDE with AI capabilities (Cursor, Cline, Claude Code, Roocode)

## Process Steps

### 1. Project Context Analysis
- Analyze the existing project structure
- Identify the frontend framework and libraries in use
- Determine styling approach (CSS, Tailwind, styled-components, etc.)
- Identify existing component patterns and conventions

### 2. Component Architecture Planning
- Define the component hierarchy
- Determine required props and state
- Plan file structure for components
- Identify reusable sub-components

### 3. Implementation Strategy
- Determine implementation approach based on project context
- Plan file creation sequence
- Identify potential dependencies to add
- Consider testing strategy

### 4. Component Implementation
- Create component files with proper structure
- Implement component logic and rendering
- Add styling according to project conventions
- Implement responsive behavior
- Add accessibility features
- Implement state management

### 5. Testing & Validation
- Create unit tests for components
- Verify responsive behavior
- Validate accessibility compliance
- Test edge cases and error states

### 6. Integration
- Update imports/exports as needed
- Add components to relevant pages or parent components
- Update navigation or routing if needed
- Document usage examples

### 7. Documentation
- Add JSDoc comments to components
- Create README documentation if appropriate
- Add Storybook stories if applicable

## IDE-Specific Considerations

### Cursor AI
- Leverage multi-file creation capabilities
- Use Cursor's codebase understanding for consistent implementation
- Utilize command palette for efficient workflow

### Cline (Claude Dev)
- Use terminal integration for dependency management
- Leverage project-wide understanding for consistent implementation
- Utilize Cline's ability to understand complex component relationships

### Claude Code
- Focus on code quality and best practices
- Emphasize accessibility implementation
- Prioritize comprehensive documentation

### Roocode
- Emphasize visual feedback loop
- Focus on rapid prototyping and iteration
- Leverage component library integration

## Deliverables
- Implemented component files
- Associated test files
- Documentation and usage examples
- Integration instructions

## Success Criteria
- Components render correctly
- Components are responsive
- Components are accessible
- Components follow project conventions
- Components are properly tested
- Components are well-documented
- Components integrate with existing codebase