92 lines
2.8 KiB
Markdown
92 lines
2.8 KiB
Markdown
# 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
|