Instructions
@lolinux2002/dressmeup-ai-cursorrules-txt
•
The app will rely on an external API to process and combine user-uploaded images (e.g., the user's image and an outfit piece like a T-shirt). The following tools are available:
prpm install @lolinux2002/dressmeup-ai-cursorrules-txt%2C%20especially%20about%20a%20fix%20to%20a%20mistake%20you%20made%20or%20a%20correction%20you%20received%2C%20you%20should%20take%20note%20in%20the%20%60Lessons%60%20section%20in%20the%20%60.cursorrules%60%20file%20so%20you%20will%20not%20make%20the%20same%20mistake%20again.%0A%0AYou%20should%20also%20use%20the%20%60.cursorrules%60%20file%20as%20a%20Scratchpad%20to%20organize%20your%20thoughts.%20Especially%20when%20you%20receive%20a%20new%20task%2C%20you%20should%20first%20review%20the%20content%20of%20the%20Scratchpad%2C%20clear%20old%20different%20tasks%20if%20necessary%2C%20first%20explain%20the%20task%2C%20and%20plan%20the%20steps%20you%20need%20to%20take%20to%20complete%20the%20task.%20You%20can%20use%20todo%20markers%20to%20indicate%20the%20progress%2C%20e.g.%0A%5BX%5D%20Task%201%0A%5B%20%5D%20Task%202%0A%0AAlso%2C%20update%20the%20progress%20of%20the%20task%20in%20the%20Scratchpad%20when%20you%20finish%20a%20subtask.%20Especially%20when%20you%20finish%20a%20milestone%2C%20it%20will%20help%20improve%20your%20depth%20of%20task%20accomplishment%20to%20use%20the%20Scratchpad%20to%20reflect%20and%20plan.%20The%20goal%20is%20to%20help%20you%20maintain%20a%20big%20picture%20as%20well%20as%20track%20the%20progress%20of%20the%20task.%20Always%20refer%20to%20the%20Scratchpad%20when%20you%20plan%20the%20next%20step.%0A%0A%23%20Tools%0A%0A%23%23%20Image%20Processing%20and%20API%20Communication%0A%0AThe%20app%20will%20rely%20on%20an%20external%20API%20to%20process%20and%20combine%20user-uploaded%20images%20(e.g.%2C%20the%20user's%20image%20and%20an%20outfit%20piece%20like%20a%20T-shirt).%20The%20following%20tools%20are%20available%3A%0A%0A%23%23%23%20Image%20Upload%20and%20Processing%0A-%20Users%20upload%20an%20image%20of%20themselves.%0A-%20Users%20upload%20an%20image%20of%20an%20outfit%20piece%20(e.g.%2C%20T-shirt%2C%20jacket%2C%20dress).%0A-%20Both%20images%20are%20sent%20to%20an%20external%20API%20for%20processing.%0A-%20The%20API%20combines%20the%20images%20and%20returns%20the%20result.%0A-%20The%20processed%20image%20is%20displayed%20in%20the%20app.%0A%0A%23%23%23%20API%20Request%20Structure%0A-%20The%20API%20expects%20multipart%2Fform-data%20format%20with%20two%20image%20inputs.%0A-%20The%20API%20returns%20the%20processed%20image%20as%20a%20URL%20or%20binary%20data.%0A%0A%23%23%23%20Example%20API%20Call%20(Python)%0A%60%60%60python%0Aimport%20requests%0A%0Aurl%20%3D%20%22https%3A%2F%2Fexternal-api.com%2Fprocess%22%0Afiles%20%3D%20%7B%0A%20%20%20%20'user_image'%3A%20open('user_photo.jpg'%2C%20'rb')%2C%0A%20%20%20%20'outfit_image'%3A%20open('tshirt.png'%2C%20'rb')%0A%7D%0Aresponse%20%3D%20requests.post(url%2C%20files%3Dfiles)%0A%0Aif%20response.status_code%20%3D%3D%20200%3A%0A%20%20%20%20result_image_url%20%3D%20response.json().get(%22processed_image_url%22)%0A%20%20%20%20print(%22Processed%20Image%20URL%3A%22%2C%20result_image_url)%0Aelse%3A%0A%20%20%20%20print(%22Error%20processing%20image%3A%22%2C%20response.text)%0A%60%60%60%0A%0A%23%20Standardized%20Components%0A%0A%23%23%20Image%20Upload%20UI%0A1.%20Allow%20users%20to%20upload%20their%20image.%0A2.%20Allow%20users%20to%20upload%20an%20outfit%20image.%0A3.%20Display%20the%20uploaded%20images%20side%20by%20side.%0A4.%20Provide%20a%20%22Try%20On%22%20button%20to%20send%20images%20to%20the%20API.%0A5.%20Display%20the%20processed%20image%20after%20API%20response.%0A%0A%23%23%20Visual%20Design%0A1.%20Responsive%20UI%20layout%20for%20both%20mobile%20and%20desktop.%0A2.%20Loading%20indicator%20while%20the%20API%20processes%20images.%0A3.%20Error%20handling%20messages%20for%20failed%20uploads%20or%20processing%20errors.%0A%0A%23%23%20Functionality%0A1.%20Validate%20image%20types%20(JPEG%2C%20PNG)%20and%20sizes%20before%20upload.%0A2.%20Ensure%20API%20response%20is%20properly%20handled.%0A3.%20Support%20retry%20functionality%20in%20case%20of%20processing%20failures.%0A%0A%23%20Lessons%0A%0A%23%23%20User-Specified%20Lessons%0A-%20Store%20user-uploaded%20images%20temporarily%20in%20memory%20before%20sending%20them%20to%20the%20API.%0A-%20Ensure%20API%20error%20handling%20and%20proper%20UI%20feedback%20for%20failed%20processing%20requests.%0A-%20Use%20asynchronous%20requests%20to%20prevent%20UI%20blocking.%0A-%20Validate%20images%20before%20upload%20to%20avoid%20unnecessary%20API%20calls.%0A%0A%23%23%20Cursor%20Learned%0A-%20Maintain%20a%20separate%20state%20for%20original%20and%20processed%20images%20to%20prevent%20accidental%20overwrites.%0A-%20Provide%20users%20with%20an%20option%20to%20re-upload%20images%20in%20case%20of%20an%20incorrect%20selection.%0A-%20Implement%20proper%20caching%20to%20prevent%20re-uploading%20the%20same%20images%20multiple%20times.%0A%0A%23%20Scratchpad%0A%0A%23%23%20Current%20Task%3A%20Create%20Outfit%20Try-On%20Web%20App%0A%0A%23%23%23%20Project%20Setup%20Steps%3A%0A%5BX%5D%201.%20Initialize%20Next.js%20project%20with%20TypeScript%0A%5BX%5D%202.%20Set%20up%20project%20structure%20and%20dependencies%0A%5BX%5D%203.%20Create%20basic%20UI%20components%0A%5BX%5D%204.%20Implement%20image%20upload%20functionality%0A%5BX%5D%205.%20Integrate%20with%20external%20API%0A%5BX%5D%206.%20Add%20error%20handling%20and%20loading%20states%0A%5BX%5D%207.%20Implement%20results%20page%20with%20download%2Fshare%20features%0A%5BX%5D%208.%20Add%20responsive%20styling%20and%20UI%20improvements%0A%5B%20%5D%209.%20Testing%20and%20deployment%0A%0A%23%23%23%20Current%20Focus%3A%0ASetting%20up%20the%20development%20environment%20and%20testing%20the%20application.%0A%0A%23%23%23%20Progress%3A%0A%5BX%5D%20Project%20initialization%0A%5BX%5D%20Dependencies%20installation%0A%5BX%5D%20Basic%20project%20structure%0A%5BX%5D%20Component%20development%0A%5BX%5D%20API%20integration%0A%5B%20%5D%20Testing%0A%5B%20%5D%20Deployment%0A%0A%23%23%23%20Notes%3A%0A-%20Using%20Next.js%20for%20better%20performance%20and%20SEO%0A-%20TypeScript%20for%20type%20safety%0A-%20Tailwind%20CSS%20for%20styling%0A-%20External%20API%20for%20image%20processing%0A-%20Environment%20variables%20for%20API%20keys%0A%0A%23%23%23%20Next%20Steps%3A%0A1.%20Test%20the%20application%20locally%0A2.%20Set%20up%20proper%20error%20handling%0A3.%20Add%20loading%20states%20and%20user%20feedback%0A4.%20Deploy%20the%20application){kind=link}
%2C%20especially%20about%20a%20fix%20to%20a%20mistake%20you%20made%20or%20a%20correction%20you%20received%2C%20you%20should%20take%20note%20in%20the%20%60Lessons%60%20section%20in%20the%20%60.cursorrules%60%20file%20so%20you%20will%20not%20make%20the%20same%20mistake%20again.%0A%0AYou%20should%20also%20use%20the%20%60.cursorrules%60%20file%20as%20a%20Scratchpad%20to%20organize%20your%20thoughts.%20Especially%20when%20you%20receive%20a%20new%20task%2C%20you%20should%20first%20review%20the%20content%20of%20the%20Scratchpad%2C%20clear%20old%20different%20tasks%20if%20necessary%2C%20first%20explain%20the%20task%2C%20and%20plan%20the%20steps%20you%20need%20to%20take%20to%20complete%20the%20task.%20You%20can%20use%20todo%20markers%20to%20indicate%20the%20progress%2C%20e.g.%0A%5BX%5D%20Task%201%0A%5B%20%5D%20Task%202%0A%0AAlso%2C%20update%20the%20progress%20of%20the%20task%20in%20the%20Scratchpad%20when%20you%20finish%20a%20subtask.%20Especially%20when%20you%20finish%20a%20milestone%2C%20it%20will%20help%20improve%20your%20depth%20of%20task%20accomplishment%20to%20use%20the%20Scratchpad%20to%20reflect%20and%20plan.%20The%20goal%20is%20to%20help%20you%20maintain%20a%20big%20picture%20as%20well%20as%20track%20the%20progress%20of%20the%20task.%20Always%20refer%20to%20the%20Scratchpad%20when%20you%20plan%20the%20next%20step.%0A%0A%23%20Tools%0A%0A%23%23%20Image%20Processing%20and%20API%20Communication%0A%0AThe%20app%20will%20rely%20on%20an%20external%20API%20to%20process%20and%20combine%20user-uploaded%20images%20(e.g.%2C%20the%20user's%20image%20and%20an%20outfit%20piece%20like%20a%20T-shirt).%20The%20following%20tools%20are%20available%3A%0A%0A%23%23%23%20Image%20Upload%20and%20Processing%0A-%20Users%20upload%20an%20image%20of%20themselves.%0A-%20Users%20upload%20an%20image%20of%20an%20outfit%20piece%20(e.g.%2C%20T-shirt%2C%20jacket%2C%20dress).%0A-%20Both%20images%20are%20sent%20to%20an%20external%20API%20for%20processing.%0A-%20The%20API%20combines%20the%20images%20and%20returns%20the%20result.%0A-%20The%20processed%20image%20is%20displayed%20in%20the%20app.%0A%0A%23%23%23%20API%20Request%20Structure%0A-%20The%20API%20expects%20multipart%2Fform-data%20format%20with%20two%20image%20inputs.%0A-%20The%20API%20returns%20the%20processed%20image%20as%20a%20URL%20or%20binary%20data.%0A%0A%23%23%23%20Example%20API%20Call%20(Python)%0A%60%60%60python%0Aimport%20requests%0A%0Aurl%20%3D%20%22https%3A%2F%2Fexternal-api.com%2Fprocess%22%0Afiles%20%3D%20%7B%0A%20%20%20%20'user_image'%3A%20open('user_photo.jpg'%2C%20'rb')%2C%0A%20%20%20%20'outfit_image'%3A%20open('tshirt.png'%2C%20'rb')%0A%7D%0Aresponse%20%3D%20requests.post(url%2C%20files%3Dfiles)%0A%0Aif%20response.status_code%20%3D%3D%20200%3A%0A%20%20%20%20result_image_url%20%3D%20response.json().get(%22processed_image_url%22)%0A%20%20%20%20print(%22Processed%20Image%20URL%3A%22%2C%20result_image_url)%0Aelse%3A%0A%20%20%20%20print(%22Error%20processing%20image%3A%22%2C%20response.text)%0A%60%60%60%0A%0A%23%20Standardized%20Components%0A%0A%23%23%20Image%20Upload%20UI%0A1.%20Allow%20users%20to%20upload%20their%20image.%0A2.%20Allow%20users%20to%20upload%20an%20outfit%20image.%0A3.%20Display%20the%20uploaded%20images%20side%20by%20side.%0A4.%20Provide%20a%20%22Try%20On%22%20button%20to%20send%20images%20to%20the%20API.%0A5.%20Display%20the%20processed%20image%20after%20API%20response.%0A%0A%23%23%20Visual%20Design%0A1.%20Responsive%20UI%20layout%20for%20both%20mobile%20and%20desktop.%0A2.%20Loading%20indicator%20while%20the%20API%20processes%20images.%0A3.%20Error%20handling%20messages%20for%20failed%20uploads%20or%20processing%20errors.%0A%0A%23%23%20Functionality%0A1.%20Validate%20image%20types%20(JPEG%2C%20PNG)%20and%20sizes%20before%20upload.%0A2.%20Ensure%20API%20response%20is%20properly%20handled.%0A3.%20Support%20retry%20functionality%20in%20case%20of%20processing%20failures.%0A%0A%23%20Lessons%0A%0A%23%23%20User-Specified%20Lessons%0A-%20Store%20user-uploaded%20images%20temporarily%20in%20memory%20before%20sending%20them%20to%20the%20API.%0A-%20Ensure%20API%20error%20handling%20and%20proper%20UI%20feedback%20for%20failed%20processing%20requests.%0A-%20Use%20asynchronous%20requests%20to%20prevent%20UI%20blocking.%0A-%20Validate%20images%20before%20upload%20to%20avoid%20unnecessary%20API%20calls.%0A%0A%23%23%20Cursor%20Learned%0A-%20Maintain%20a%20separate%20state%20for%20original%20and%20processed%20images%20to%20prevent%20accidental%20overwrites.%0A-%20Provide%20users%20with%20an%20option%20to%20re-upload%20images%20in%20case%20of%20an%20incorrect%20selection.%0A-%20Implement%20proper%20caching%20to%20prevent%20re-uploading%20the%20same%20images%20multiple%20times.%0A%0A%23%20Scratchpad%0A%0A%23%23%20Current%20Task%3A%20Create%20Outfit%20Try-On%20Web%20App%0A%0A%23%23%23%20Project%20Setup%20Steps%3A%0A%5BX%5D%201.%20Initialize%20Next.js%20project%20with%20TypeScript%0A%5BX%5D%202.%20Set%20up%20project%20structure%20and%20dependencies%0A%5BX%5D%203.%20Create%20basic%20UI%20components%0A%5BX%5D%204.%20Implement%20image%20upload%20functionality%0A%5BX%5D%205.%20Integrate%20with%20external%20API%0A%5BX%5D%206.%20Add%20error%20handling%20and%20loading%20states%0A%5BX%5D%207.%20Implement%20results%20page%20with%20download%2Fshare%20features%0A%5BX%5D%208.%20Add%20responsive%20styling%20and%20UI%20improvements%0A%5B%20%5D%209.%20Testing%20and%20deployment%0A%0A%23%23%23%20Current%20Focus%3A%0ASetting%20up%20the%20development%20environment%20and%20testing%20the%20application.%0A%0A%23%23%23%20Progress%3A%0A%5BX%5D%20Project%20initialization%0A%5BX%5D%20Dependencies%20installation%0A%5BX%5D%20Basic%20project%20structure%0A%5BX%5D%20Component%20development%0A%5BX%5D%20API%20integration%0A%5B%20%5D%20Testing%0A%5B%20%5D%20Deployment%0A%0A%23%23%23%20Notes%3A%0A-%20Using%20Next.js%20for%20better%20performance%20and%20SEO%0A-%20TypeScript%20for%20type%20safety%0A-%20Tailwind%20CSS%20for%20styling%0A-%20External%20API%20for%20image%20processing%0A-%20Environment%20variables%20for%20API%20keys%0A%0A%23%23%23%20Next%20Steps%3A%0A1.%20Test%20the%20application%20locally%0A2.%20Set%20up%20proper%20error%20handling%0A3.%20Add%20loading%20states%20and%20user%20feedback%0A4.%20Deploy%20the%20application){kind=link}
0 total downloads
💡 Suggested Test Inputs
Loading suggested inputs...
🎯 Community Test Results
Loading results...
📦 Package Info
- Format
- cursor
- Type
- rule
- Category
- testing