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>
This commit is contained in:
uroma
@@ -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>
|
||||
|
||||
---
|
||||
|
||||
---
|
||||
|
||||
Reference in New Issue
Block a user