Cursor rules for building an AI-powered virtual try-on application with external API integration, image processing, and iterative learning from mistakes.
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.
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.
Maintain a "Lessons" section in `.cursorrules` to capture:
This prevents repeating the same mistakes and builds institutional knowledge.
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
```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
```
**Requirements:**
**Responsive Design:**
**Asynchronous Processing:**
```
[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
```
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
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
Leave a review
No reviews yet. Be the first to review this skill!
# Download SKILL.md from killerskills.ai/api/skills/ai-virtual-try-on-development-assistant/raw