AI Virtual Try-On Development Assistant

A Cursor AI skill for building an AI-powered virtual try-on web application. This skill guides development of a Next.js app that allows users to upload images of themselves and outfit pieces, processes them through an external API, and displays the combined result.

Core Principles

Scratchpad-Driven Development

Use the `.cursorrules` file as a living scratchpad to maintain context and track progress:

1. **Task Planning**: When receiving a new task, review the Scratchpad, clear old content if needed, explain the task, and create a step-by-step plan using todo markers:

```

[X] Completed task

[ ] Pending task

```

2. **Progress Tracking**: Update the Scratchpad after completing each subtask. Reflect and plan at major milestones to maintain the big picture.

3. **Always Refer Back**: Check the Scratchpad before planning next steps to maintain continuity.

Iterative Learning

Maintain a "Lessons" section in `.cursorrules` to capture:

This prevents repeating the same mistakes and builds institutional knowledge.

Application Architecture

Image Processing Flow

1. User uploads their photo

2. User uploads outfit image (T-shirt, jacket, dress, etc.)

3. Images sent to external API via multipart/form-data

4. API processes and combines images

5. Result displayed to user with download/share options

API Integration Pattern

```python

import requests

url = "https://external-api.com/process"

files = {

'user_image': open('user_photo.jpg', 'rb'),

'outfit_image': open('tshirt.png', 'rb')

}

response = requests.post(url, files=files)

if response.status_code == 200:

result_image_url = response.json().get("processed_image_url")

else:

# Handle error

pass

```

Implementation Guidelines

Image Upload Component

**Requirements:**

State Management

User Experience

**Responsive Design:**

**Asynchronous Processing:**

Error Handling

Technology Stack

Development Workflow

Project Setup Checklist

```

[X] 1. Initialize Next.js project with TypeScript

[X] 2. Set up project structure and dependencies

[X] 3. Create basic UI components

[X] 4. Implement image upload functionality

[X] 5. Integrate with external API

[X] 6. Add error handling and loading states

[X] 7. Implement results page with download/share features

[X] 8. Add responsive styling and UI improvements

[ ] 9. Testing and deployment

```

Key Implementation Steps

1. **Environment Setup**: Configure API keys via environment variables

2. **Component Development**: Build upload UI, preview, and results components

3. **API Integration**: Implement request handling with proper error boundaries

4. **Testing**: Validate upload flow, API integration, error scenarios

5. **Deployment**: Set up production environment with proper secrets management

Best Practices

Learned Lessons

Code Organization

Usage Instructions

1. **Initialize Project**: Set up Next.js with TypeScript and Tailwind CSS

2. **Configure API**: Store external API endpoint and credentials in environment variables

3. **Build Upload Flow**: Implement dual image upload with validation

4. **Integrate Processing**: Connect to external API with proper error handling

5. **Display Results**: Show processed images with download/share options

6. **Update Scratchpad**: Track progress and lessons learned in `.cursorrules`

7. **Iterate**: Review Scratchpad before each session to maintain context