vibe-coding-college-specs/chapters/04-idea-to-product/08-lesson-task-breakdown/spec.md

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