feat: add chapter 04-idea-to-product specs

chapters/04-idea-to-product/08-lesson-task-breakdown/spec.md

@@ -0,0 +1,102 @@
+# مشخصات درس‌نامه: فهرست تسک و ترتیب ساخت (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` همراه با شرط راستی‌آزمایی در متن لحاظ شود.