# مشخصات درس‌نامه: فهرست تسک و ترتیب ساخت (Task Breakdown & Sequencing)
- **شناسه در سیلابس:** `L4.9` (`L4.10` در شیت)
- **فصل:** فصل ۴: از ایده تا محصول (Ch 4)
- **نوع محتوا:** 📘 درس‌نامه متنی
- **زمان تقریبی مطالعه:** ۱۵ دقیقه
- **پیش‌نیازهای مستقیم:** `L4.8` (نوشتن PRD با AI)

---

## ۱. اهداف یادگیری (Learning Objectives - Bloom's Taxonomy)
دانشجو پس از مطالعهٔ این درس‌نامه باید بتواند:
- [ ] **درک کند (Understand):** چرا حتی با داشتن یک سند PRD عالی، فرستادن کل سند به یک‌باره به ایجنت باعث خفگی مدل و تولید کدهای آشفته می‌شود و چرا نیازمند فایل نقشه اقدام (`tasks.md`) هستیم.
- [ ] **تحلیل/ارزیابی کند (Evaluate):** تفاوت روش سنتی لایه‌بندی افقی (Horizontal Layering: ساخت تمام دیتابیس، سپس تمام بک‌اند، سپس فرانت‌اند) با روش مدرن وایب کدینگ یعنی برش عمودی (Vertical Slicing: ساخت تک‌تک بخش‌های کارآمد از ظاهر تا داده) را درک کند.
- [ ] **به‌کار ببندد (Apply):** فازبندی منطقی و ترتیب صحیح ساخت پروژه محوری (پورتفولیوی پویا) را در ۷ فاز استاندارد پیاده‌سازی کند.
- [ ] **به‌کار ببندد (Apply):** ساختار استاندارد یک تسک اتمیک (شامل شناسه، هدف، فایل‌های درگیر، و شرط راستی‌آزمایی) را در فایل `tasks.md` تدوین نماید.
- [ ] **به‌کار ببندد (Apply):** از هوش مصنوعی برای تبدیل سند `PRD.md` به فهرست تسک‌های مهندسی‌شده با معیارهای راستی‌آزمایی صریح بهره‌برداری کند.

---

## ۲. محدوده و مرزهای محتوا (Scope & Boundaries)

### آنچه باید پوشش داده شود (In-Scope):
1. **پل میان نقشه محصول (PRD) و اجرای ایجنت (Execution):**
   * سند PRD می‌گوید «چه چیزی می‌خواهیم»، اما فایل تسک‌ها (`tasks.md`) مشخص می‌کند «به چه ترتیبی و با چه گام‌های کوچکی ساخته شود».
   * جلوگیری از انفجار مگاپرامپت با اجرای دانه‌به‌دانه تسک‌ها.
2. **استراتژی برش عمودی (Vertical Slicing):**
   * چرا نباید ابتدا ۲ هفته دیتابیس بسازیم بدون اینکه چیزی روی صفحه دیده شود؟
   * در وایب کدینگ، هر گام باید یک خروجی زنده در مرورگر داشته باشد که انگیزه و امکان تست فوری را فراهم کند.
3. **توالی هفت‌گانه فازهای ساخت پروژه پورتفولیوی پویا:**
   * **فاز ۱: فونداسیون و اسکلت (Scaffold):** راه‌اندازی پروژه، سیستم رنگ و لی‌اوت پایه.
   * **فاز ۲: ویترین عمومی با داده تستی (Public Showcase):** هدر، کارت‌های پروژه و پنجره جزئیات با Mock Data.
   * **فاز ۳: پایگاه داده و زیرساخت (Database):** راه‌اندازی جداول پروژه‌ها و تنظیمات در Supabase.
   * **فاز ۴: احراز هویت ادمین (Auth & Protection):** صفحه ورود، کوکی امن و محافظت از روت `/admin`.
   * **فاز ۵: پنل مدیریت پروژه‌ها (Admin CRUD):** فرم‌های افزودن، ادیت، آپلود تصویر و حذف با تاییدیه.
   * **فاز ۶: پنل تنظیمات سئو (SEO Controls):** فرم مدیریت متاتگ‌ها، اتصال به متادیتای پویا و تست تگ‌های OG.
   * **فاز ۷: پولیش، بهینه‌سازی و انتشار (Ship):** چک‌لیست ریسپانسیو، تست لایت‌هاوس و استقرار نهایی.
4. **کالبدشکافی آناتومی یک تسک اتمیک در `tasks.md`:**
   * **شناسه و باکس تیک:** `[ ] Task 2.1: ساخت کامپوننت کارت پروژه`
   * **هدف و دامنه:** نمایش عکس، عنوان، تگ‌های مهارت و دکمه مشاهده.
   * **فایل‌های درگیر:** `src/components/ProjectCard.tsx`
   * **گام راستی‌آزمایی (Verification):** اجرای `npm run dev` و دیدن رندر شدن صحیح کارت با داده نمونه.
5. **چرخه پیشروی مهندسی (The Check-and-Commit Loop):**
   * تسک را به ایجنت بسپارید $\rightarrow$ خروجی را بررسی و تایید کنید $\rightarrow$ تیک تسک را در `tasks.md` بزنید $\rightarrow$ یک کامیت در گیت ثبت کنید $\rightarrow$ سپس سراغ تسک بعد بروید!
6. **کال‌اوت‌های Quera:**
   * `<details class="violet">`: مزیت جادویی برش عمودی (Vertical Slicing) در حفظ انگیزه و دیدن مداوم پیشرفت زنده.
   * `<details class="green">`: قانون طلایی تیک و کامیت؛ هرگز تسک جدید را شروع نکنید تا زمانی که تسک قبلی تست و ذخیره نشده باشد.

### آنچه نباید وارد آن شویم (Out-of-Scope):
- نرم‌افزارهای اسکرام و جیرا در تیم‌های بزرگ سازمانی.
- شروع اجرای کدنویسی این تسک‌ها (این تسک‌ها در فصول ۵ تا ۱۴ به ترتیب اجرا خواهند شد).

---

## ۳. مفاهیم کلیدی و کلمات تخصصی (Key Concepts & Terms)

| اصطلاح انگلیسی | معادل فارسی مصوب | توضیح یک‌خطی ساده |
| :--- | :--- | :--- |
| Task Breakdown | شکستن تسک‌ها / ساختار شکست کار | تجزیه سند بزرگ نیازمندی‌ها به اقدامات کوچک، مشخص، مستقل و قابل‌اجرا |
| Vertical Slicing | برش عمودی | توسعه یک ویژگی کامل از رابط کاربری تا پایگاه داده به صورت هم‌زمان به جای لایه‌بندی افقی |
| Atomic Task | تسک اتمیک / دانه‌بندی‌شده | وظیفه‌ای تک‌هدفه که معمولاً در کمتر از چند دقیقه توسط ایجنت پیاده و تست می‌شود |
| Verification Step | گام راستی‌آزمایی | عملی مشخص و آزمودنی برای اطمینان از صحت انجام تسک پیش از رفتن به مرحله بعد |
| tasks.md | فایل فهرست تسک‌ها | چک‌لیست مارک‌داون در ریشه پروژه که پیشرفت مرحله‌به‌مرحله را رصد می‌کند |

---

## ۴. جایگاه‌های تصاویر و نمودارها (Visual & Diagram Placeholders)
> **راهنمای ایجنت نویسنده:** تمام تصاویر باید در پوشهٔ `images/` قرار گرفته و در قالب جدول تک‌خانه‌ای وسط‌چین با کپشن تفصیلی درج شوند:

1. **تصویر کاور درس:** `images/cover.png`
   * **موضوع:** کاور مدرن با تم تیره و یک چک‌لیست دیجیتال سه‌بعدی با تیک‌های نئونی سبز که پله‌های ساخت یک آسمان‌خراش نرم‌افزاری را نشان می‌دهد.
2. **برش افقی در برابر برش عمودی:** `images/horizontal-vs-vertical-slicing.png`
   * **موضوع:** مقایسه دو رویکرد: لایه‌بندی افقی سنتی (هفته‌ها کار بدون دیدن خروجی) در برابر برش عمودی وایب کدینگ (دیدن یک فیچر زنده و کامل در هر گام).
3. **توالی هفت‌گانه ساخت پورتفولیوی پویا:** `images/portfolio-build-phases.png`
   * **موضوع:** اینفوگرافیک گام‌به‌گام فازهای ۷ گانه: ۱. فونداسیون $\rightarrow$ ۲. ویترین $\rightarrow$ ۳. دیتابیس $\rightarrow$ ۴. احراز هویت $\rightarrow$ ۵. پنل ادمین $\rightarrow$ ۶. پنل سئو $\rightarrow$ ۷. انتشار.
4. **آناتومی یک تسک استاندارد در `tasks.md`:** `images/atomic-task-structure.png`
   * **موضوع:** تصویر کادر تسک شامل باکس تیک، عنوان تسک، نام فایل و کادر شرط راستی‌آزمایی سبز.
5. **چرخه تیک زدن و کامیت در گیت:** `images/check-and-commit-loop.png`
   * **موضوع:** فلوچارت دایره‌ای: پرامپت تسک $\rightarrow$ اجرای ایجنت $\rightarrow$ تست مرورگر $\rightarrow$ زدن تیک $\rightarrow$ گیت کامیت.

---

## ۵. بخش‌بندی و ساختار محتوایی پیشنهادی درس‌نامه (`README.md`)

1. **تیتر اصلی:** `# فهرست تسک و ترتیب ساخت: تبدیل نقشه به گام‌های عملیاتی`
2. **مقدمه:** چرا بدون شکستن کارها به تسک‌های اتمیک، بزرگ‌ترین PRDها هم در دست ایجنت متلاشی می‌شوند؟
3. **جدول کاور درس**
4. **چرا نیازمند فایل `tasks.md` هستیم؟:** تفکیک نقشه کلان از برنامه اقدام اجرایی.
5. **روش مهندسی برش عمودی (Vertical Slicing):** چرا وایب کدینگ با برش عمودی جان می‌گیرد؟
6. **باکس نکته Quera (`<details class="violet">`):** نجات از باتلاق توسعه با دیدن مداوم نتایج زنده.
7. **نقشه راه ۷ فاز ساخت پورتفولیوی پویا:** تشریح گام‌به‌گام از اسکلت اولیه تا پنل سئو و دیپلوی.
8. **کالبدشکافی یک تسک استاندارد:** فرمول نگارش تسک با فایل‌های درگیر و شرط تایید.
9. **همکاری با هوش مصنوعی در تولید `tasks.md`:** پرامپت تبدیل PRD به چک‌لیست اجرایی.
10. **باکس قانون طلایی Quera (`<details class="green">`):** چرخه تیک زدن و ثبت کامیت در گیت.
11. **جمع‌بندی فصل چهارم:** اعلام تکمیل فاز طراحی و آماده‌سازی برای ورود به فصل ۵ (طراحی تجربه کاربری و هویت بصری).

---

## ۶. معیارهای پذیرش (Acceptance Criteria for Reviewer)
- [ ] ضرورت شکستن PRD به تسک‌های اتمیک با دلایل محکم تشریح شده باشد.
- [ ] مفهوم برش عمودی (Vertical Slicing) به صورت بصری و مستند آموزش داده شود.
- [ ] توالی ۷ فاز ساخت پروژه پورتفولیوی پویا به روشنی دسته‌بندی و معرفی گردد.
- [ ] فرمت استاندارد تسک در `tasks.md` همراه با شرط راستی‌آزمایی در متن لحاظ شود.