پکیج پرامپت توسعهٔ فرانت‌اند

# پکیج پرامپت زنجیره‌ای توسعهٔ فرانت‌اند (از طراحی کامپوننت تا تست و دسترس‌پذیری)

توسعهٔ فرانت‌اند حرفه‌ای در پروژه‌های مدرن فقط به نوشتن چند خط کد HTML و CSS یا یک کامپوننت ساده محدود نمی‌شود. یک قطعه کد استاندارد در سطح تولید (Production-Ready) باید دارای معماری تفکیک‌شده، تایپ‌اسکریپت دقیق، مدیریت حالت پیش‌بینی‌پذیر، اتصال ایمن به API، تست‌های واحد و یکپارچگی، رعایت کامل استانداردهای دسترس‌پذیری (Accessibility/WCAG) و بالاترین سطح بهینه‌سازی کارایی باشد.

این پکیج شامل ۶ پرامپت مهندسی‌شده و زنجیره‌ای است که مدل‌های هوش مصنوعی (مانند ChatGPT، Claude یا Gemini) را در نقش یک **معمار ارشد فرانت‌اند (Senior Frontend Architect)** قرار می‌دهد. روند کار به گونه‌ای طراحی شده است که خروجی هر مرحله، ورودی مستقیم و دقیق مرحلهٔ بعدی خواهد بود.

---

## نقشهٔ راه پکیج (Workflow Roadmap)

برای دست‌یابی به بهترین نتیجه، پرامپت‌ها را به ترتیب زیر اجرا کنید. از میان‌بر زدن پرهیز کنید، زیرا داده‌های معماری پرامپت‌های اولیه برای فازهای بعدی ضروری هستند:

1. **پرامپت ۱: معماری و تفکیک کامپوننت (Component Architecture)**
   * **هدف:** تحلیل نیازمندی‌های محصول، شکستن رابط کاربری به کامپوننت‌های اتمیک، تعیین پروپ‌ها (Props) و Stateهای متناظر.
   * **ورودی:** فیگما/توضیحات متنی طرح و فریم‌ورک هدف.
2. **پرامپت ۲: پیاده‌سازی تمیز کد و مدیریت حالت (Clean Code & State Management)**
   * **هدف:** تولید کد کامپوننت اصلی با رعایت اصول SOLID، تایپ‌اسکریپت سخت‌گیرانه و الگوی state مناسب.
   * **ورودی:** ساختار تصویب‌شده در پرامپت ۱.
3. **پرامپت ۳: یکپارچه‌سازی API و مدیریت حالت‌های ناهمگام (Async Data & Error Handling)**
   * **هدف:** افزودن لایه ارتباطی شبکه، مدیریت حالت‌های Loading، Error، Empty و Success همراه با مدیریت خطا.
   * **ورودی:** کد پرامپت ۲ و الگوی ساختاری API response.
4. **پرامپت ۴: تست‌نویسی جامع (Unit & Integration Testing)**
   * **هدف:** نوشتن تست‌های جامع با React Testing Library / Vitest / Jest بر اساس سناریوهای کاربر کاربردی.
   * **ورودی:** کد کامپوننت نهایی از پرامپت ۳.
5. **پرامپت ۵: ممیزی و پیاده‌سازی دسترس‌پذیری و راست‌چینی (WCAG 2.1 AA & RTL)**
   * **هدف:** اضافه کردن نقش‌های ARIA، مدیریت فوکوس کیبورد و پشتیبانی کامل از RTL/فارسی.
   * **ورودی:** کد و تست‌های مراحل قبل.
6. **پرامپت ۶: بهینه‌سازی کارایی و رندرینگ (Performance Tuning)**
   * **هدف:** شناسایی Re-renderهای غیرضروری، مموایزیشن، کد اسپلیتیگ و کاهش حجم باندل.
   * **ورودی:** کد بهبودیافته تا پرامپت ۵.

[ادامهٔ پرامپت‌ها، راهنمای عیب‌یابی و چک‌لیست کیفیت در نسخهٔ کامل آمده است.]