Effective prompts and best practices for AI-assisted component development at each phase of the workflow.

AI Collaboration Guide

Overview

AI tools can significantly accelerate component development while maintaining quality standards. This guide provides structured prompts and best practices for leveraging AI assistance at each phase of the component development workflow.

AI as a Development Partner

AI works best as a collaborative partner that helps generate boilerplate, suggest patterns, and catch potential issues. However, human expertise remains essential for architectural decisions, code review, and ensuring alignment with project standards.

Core Principles

(Do ✅) Effective AI Collaboration

Provide Context: Include relevant project details, tech stack, and constraints
Be Specific: Use clear, detailed requirements rather than vague requests
Reference Standards: Mention your design system, architecture rules, and patterns
Iterate and Refine: Use follow-up questions to improve AI suggestions
Validate Output: Always review and test AI-generated code
Learn Patterns: Use AI to learn new patterns and best practices

Example of Good Context:

We're building a React Native app using TypeScript, following a three-layer UI architecture.
Components must use our design token system from @/core/shared/styles/theme.
All components need comprehensive accessibility support and 80%+ test coverage.

Phase 1: Requirements & Planning

AI Prompt: Requirements Definition

# Component Requirements Definition
 
## Component Context
- **Component Name**: [Name]
- **Purpose**: [What it does and why]
- **Category**: [foundation/patterns/business]
- **Usage**: [Where and how it will be used]
 
## Technical Requirements
- React Native with TypeScript
- Must use design tokens from @/core/shared/styles/theme
- Accessibility compliant (WCAG 2.1 AA)
- Cross-platform (iOS & Android)
 
## Please Define:
1. Complete props interface with types
2. All component states (default, loading, error, etc.)
3. Accessibility requirements
4. Performance considerations
5. Integration points

AI Prompt: Component Categorization

# Component Categorization Decision
 
## Component Information
- **Name**: [ComponentName]
- **Purpose**: [What the component does]
- **Dependencies**: [What it depends on]
- **Complexity**: [Simple/Medium/Complex]
 
## Questions to Answer
1. Does it contain business logic or domain rules? [Yes/No]
   - If yes, describe: [Details]
 
2. Does it combine multiple simpler components? [Yes/No]
   - If yes, list components: [Component list]
 
3. Is it a single, reusable UI element? [Yes/No]
   - If yes, describe core function: [Details]
 
## Please recommend:
- Appropriate category (foundation/patterns/business)
- Justification for the recommendation
- Similar existing components in that category
- Potential architectural concerns

Phase 2: Implementation

AI Prompt: Component Structure

# Generate Component File Structure
 
## Component Details
- **Name**: [ComponentName]
- **Category**: [foundation/patterns/business]
- **Purpose**: [Brief description]
 
## Generate Files:
1. `[ComponentName].tsx` - Main component
2. `types.ts` - TypeScript interfaces
3. `index.ts` - Exports
4. `[ComponentName].test.tsx` - Tests
5. `styles.ts` - Styled components (if needed)
6. `hooks.ts` - Custom hooks (if needed)
 
## Requirements:
- TypeScript with strict mode
- React Native components
- Design tokens from @/core/shared/styles/theme
- Accessibility attributes
- JSDoc documentation
- Export patterns matching our standards

Integration with CI/CD

Consider using AI tools in your CI/CD pipeline:

# Example: AI-assisted code review
on:
  pull_request:
    types: [opened, synchronize]
 
jobs:
  ai-review:
    steps:
      - name: AI Code Review
        run: |
          # Check for design token usage
          # Verify accessibility attributes
          # Validate TypeScript types
          # Suggest improvements

Next Steps

Practice with Simple Components: Start with foundation components
Build Prompt Library: Save effective prompts for reuse
Share Team Learnings: Document what works well
Iterate and Improve: Refine prompts based on results
Maintain Standards: Always validate against project guidelines

Component Development Workflow - Complete development process
Component Patterns - Implementation patterns
Testing Strategies - Testing approaches
code-review - Review standards

AI Collaboration Guide

On this page