Add visually distinct examples section to MASTER-PROMPT.md

- Create prominent boxed section with gradient background
- Add clear warning box explaining these are illustrative examples only
- Use color-coded boxes: yellow (❌ WITHOUT) vs green (✅ WITH)
- Add proper visual separation from main installation content
- Include border styling and padding for clear visual hierarchy
- Make it immediately clear this is a separate reference section

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

MASTER-PROMPT.md

@@ -173,14 +173,26 @@ cp -r /tmp/contains-studio-agents/agents/* ~/.claude/agents/
 
 ---
 
-## 📖 How Auto-Triggering Works: Practical Examples
+<div style="background: linear-gradient(135deg, #f5f7fa 0%, #e4e8ec 100%); border-left: 5px solid #667eea; padding: 30px; margin: 30px 0; border-radius: 8px">
 
-> **NOTE:** The examples below illustrate the difference between working without auto-triggering agents vs with auto-triggering agents. These are simplified scenarios showing how the PROACTIVELY system improves your workflow.
+## 📖 Real-Life Examples: How Auto-Triggering Works
+
+<div style="background: #fff; padding: 20px; border-radius: 6px; margin-bottom: 20px; border: 1px solid #e1e4e8">
+
+> **⚠️ IMPORTANT: These are ILLUSTRATIVE EXAMPLES ONLY**
+>
+> The examples below demonstrate the conceptual difference between working without auto-triggering agents versus with auto-triggering agents. These are simplified scenarios to help you understand how the PROACTIVELY system improves your workflow.
+>
+> **These are not actual output promises** - actual results will vary based on your specific use case, context, and model capabilities.
+
+</div>
 
 ### Example 1: Adding OAuth Authentication
 
-**WITHOUT Auto-Triggering Agents:**
+<div style="background: #fff3cd; padding: 15px; border-left: 4px solid #ffc107; border-radius: 4px; margin-bottom: 15px">
-```
+
+**❌ WITHOUT Auto-Triggering Agents:**
+```diff
 You: Help me add OAuth to my app
 Claude: [Writes code, but no tests]
 You: [Manually write tests later]
@@ -188,7 +200,11 @@ Claude: [Fixes bugs]
 You: [Deployment issues]
 ```
 
-**WITH Auto-Triggering Agents:**
+</div>
+
+<div style="background: #d1e7dd; padding: 15px; border-left: 4px solid #198754; border-radius: 4px; margin-bottom: 15px">
+
+**✅ WITH Auto-Triggering Agents:**
 ```
 You: Help me add OAuth to my app
 Claude: [Writes code]
@@ -209,11 +225,15 @@ Ready to deploy!
 
 **Key Difference:** Auto-triggering agents proactively handle tasks (testing, UX refinement) that you'd otherwise need to remember and do manually.
 
+</div>
+
 ---
 
 ### Example 2: UI Component Creation (ui-ux-pro-max)
 
-**WITHOUT Auto-Triggering:**
+<div style="background: #fff3cd; padding: 15px; border-left: 4px solid #ffc107; border-radius: 4px; margin-bottom: 15px">
+
+**❌ WITHOUT Auto-Triggering:**
 ```
 You: Create a modal for user settings
 Claude: [Creates basic modal without accessibility]
@@ -221,7 +241,11 @@ Claude: [Creates basic modal without accessibility]
 [Result: Modal doesn't work with screen readers]
 ```
 
-**WITH Auto-Triggering (ui-ux-pro-max):**
+</div>
+
+<div style="background: #d1e7dd; padding: 15px; border-left: 4px solid #198754; border-radius: 4px; margin-bottom: 15px">
+
+**✅ WITH Auto-Triggering (ui-ux-pro-max):**
 ```
 You: Create a modal for user settings
 [ui-ux-pro-max PROACTIVELY triggers]
@@ -235,11 +259,15 @@ Claude (as ui-ux-pro-max): I'll create a professional, accessible modal...
 [Result: Modal works perfectly for all users]
 ```
 
+</div>
+
 ---
 
 ### Example 3: Error Diagnosis from Screenshots
 
-**WITHOUT Vision Tools:**
+<div style="background: #fff3cd; padding: 15px; border-left: 4px solid #ffc107; border-radius: 4px; margin-bottom: 15px">
+
+**❌ WITHOUT Vision Tools:**
 ```
 You: [Paste error screenshot]
 Claude: I can't see images. Please paste the text.
@@ -248,7 +276,11 @@ Claude: Let me help...
 [Misses visual context like line numbers, file paths shown in screenshot]
 ```
 
-**WITH Vision Tools (diagnose_error):**
+</div>
+
+<div style="background: #d1e7dd; padding: 15px; border-left: 4px solid #198754; border-radius: 4px; margin-bottom: 15px">
+
+**✅ WITH Vision Tools (diagnose_error):**
 ```
 You: [Upload error-screenshot.png]
 You: Analyze this error
@@ -261,18 +293,26 @@ Fix: Add null check after API call.
 [Provides precise fix with visual context]
 ```
 
+</div>
+
 ---
 
 ### Example 4: Understanding Large Codebases
 
-**WITHOUT Token-Efficient Analysis:**
+<div style="background: #fff3cd; padding: 15px; border-left: 4px solid #ffc107; border-radius: 4px; margin-bottom: 15px">
+
+**❌ WITHOUT Token-Efficient Analysis:**
 ```
 You: Explain how authentication works in this 100K-line codebase
 Claude: [Reading files... token limit exceeded...]
 Cannot fit entire codebase in context.
 ```
 
-**WITH TLDR (95% Token Reduction):**
+</div>
+
+<div style="background: #d1e7dd; padding: 15px; border-left: 4px solid #198754; border-radius: 4px; margin-bottom: 15px">
+
+**✅ WITH TLDR (95% Token Reduction):**
 ```
 You: Explain how authentication works
 Claude: [Using tldr context]
@@ -292,18 +332,26 @@ Key dependencies:
 [Complete understanding with 89% fewer tokens]
 ```
 
+</div>
+
 ---
 
 ### Example 5: Web Research for Current Information
 
-**WITHOUT Web Search:**
+<div style="background: #fff3cd; padding: 15px; border-left: 4px solid #ffc107; border-radius: 4px; margin-bottom: 15px">
+
+**❌ WITHOUT Web Search:**
 ```
 You: What's the latest React version?
 Claude: [Training cutoff knowledge] React 18 was released in 2022.
 You: [Outdated information]
 ```
 
-**WITH Web Search (web-search-prime):**
+</div>
+
+<div style="background: #d1e7dd; padding: 15px; border-left: 4px solid #198754; border-radius: 4px; margin-bottom: 15px">
+
+**✅ WITH Web Search (web-search-prime):**
 ```
 You: What's the latest React version and features?
 Claude: [Using web-search-prime]
@@ -315,6 +363,8 @@ React 19 was released in December 2024 with new features:
 [Fully up-to-date information]
 ```
 
+</div>
+
 ---
 
 ### Summary: The Auto-Triggering Advantage
@@ -330,6 +380,8 @@ React 19 was released in December 2024 with new features:
 
 **Bottom Line:** Auto-triggering agents handle the "should-do" tasks (testing, UX polish, documentation) that you know you should do but often forget or skip due to time constraints.
 
+</div>
+
 ---
 
 ---