feat: update general skills/rules to adapt example course styles

.agents/rules/quera-styleguide.md

@@ -19,14 +19,22 @@
 هر درس‌نامه متنی باید ساختار زیر را رعایت کند:
 
 1. **مقدمه و قلاب (Hook):** یک موقعیت واقعی، مسئله یا چالش روزمره که ضرورت این موضوع را نشان می‌دهد.
-2. **شرح مفهوم به زبان ساده (Core Concept):** توضیح اصل موضوع بدون پرداختن به جزییات زائد. استفاده از استعاره‌ها و نمودارهای بصری (Mermaid).
-3. **جعبه‌های راهنما و هشدار (Admonitions):**
-   - `> [!NOTE]` برای نکات تکمیلی و پس‌زمینه
-   - `> [!TIP]` برای ترفندها و پرامپت‌های طلایی
-   - `> [!IMPORTANT]` برای ملزومات کلیدی
-   - `> [!WARNING]` برای اشتباهات رایج و توهم‌های هوش مصنوعی (AI Hallucinations)
-4. **جعبه پرامپت نمونه (Ready-to-Use Prompt):** پرامپت‌های کپی-پیست آماده برای ادیتورهایی مثل Cursor/Claude Code.
-5. **جمع‌بندی و گام بعدی (Summary & Action Item):** خلاصه در ۳-۴ بالت پوینت کوتاه به همراه پیش‌نمایش درس بعدی.
+2. **شرح مفهوم به زبان ساده (Core Concept):** توضیح اصل موضوع بدون پرداختن به جزییات زائد، همراه با نمودارها و دیاگرام‌های باکیفیت برداری (SVG / پکیج diagrams).
+3. **نمایش تصاویر و دیاگرام‌ها (Centered Image Tables):**
+   * قرارگیری تصویر در جدول تک‌خانه‌ای وسط‌چین مارک‌داون:
+     ```markdown
+     | ![عنوان تصویر](./images/diagram.png) |
+     | :-: |
+     | توضیح تفصیلی و آموزنده زیر تصویر. |
+     ```
+4. **جعبه‌های راهنما و هشدار (Quera Collapsible Details):**
+   * `<details class="red">` با `<summary>**هشدار: ...**</summary>` برای تله‌ها و خطاهای رایج هوش مصنوعی
+   * `<details class="green">` با `<summary>**نکته: ...**</summary>` برای نکات کلیدی و Best Practiceها
+   * `<details class="violet">` با `<summary>**بیشتر بدانید: ...**</summary>` برای مباحث عمیق‌تر
+5. **بلوک‌های کد و هایلایت خطوط (`<mark>`):**
+   * استفاده از `<mark class="green|blue|violet|yellow|red" title="...">` روی خطوط کلیدی
+   * درج بلافاصلهٔ پاراگراف نقل‌قول (`> ...`) زیر هر بلوک کد برای تشریح خط‌به‌خط
+6. **جمع‌بندی و گام بعدی (Summary & Bridge):** خلاصه در ۳-۴ بالت پوینت کوتاه به همراه پیش‌نمایش و پل ارتباطی به درس بعدی.
 
 ---