2.8 KiB

Raw Blame History

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