Fix MASTER-PROMPT.md examples section - use proper markdown
- Replace HTML div tags with proper markdown formatting - Use box-drawing characters for visual separation - Add clear section headers with emoji indicators - Use code blocks with language tags (diff for ❌ examples) - Add proper spacing and horizontal rules - Ensure GitHub renders all formatting correctly - Make examples section clearly distinct from main content Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
This commit is contained in:
uroma
397
MASTER-PROMPT.md
397
MASTER-PROMPT.md
@@ -173,219 +173,6 @@ cp -r /tmp/contains-studio-agents/agents/* ~/.claude/agents/
|
|||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
<div style="background: linear-gradient(135deg, #f5f7fa 0%, #e4e8ec 100%); border-left: 5px solid #667eea; padding: 30px; margin: 30px 0; border-radius: 8px">
|
|
||||||
|
|
||||||
## 📖 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
|
|
||||||
|
|
||||||
<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]
|
|
||||||
Claude: [Fixes bugs]
|
|
||||||
You: [Deployment issues]
|
|
||||||
```
|
|
||||||
|
|
||||||
</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]
|
|
||||||
[test-writer-fixer auto-triggers]
|
|
||||||
Claude (as test-writer-fixer): Writing comprehensive tests for OAuth...
|
|
||||||
✓ Unit tests for login flow
|
|
||||||
✓ Integration tests for token refresh
|
|
||||||
✓ Error handling tests
|
|
||||||
✓ Edge case coverage
|
|
||||||
All tests passing!
|
|
||||||
[whimsy-injector auto-triggers]
|
|
||||||
Claude (as whimsy-injector): Adding delightful touches to OAuth UI...
|
|
||||||
✓ Smooth page transitions
|
|
||||||
✓ Encouraging error messages
|
|
||||||
✓ Celebration animation on successful login
|
|
||||||
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)
|
|
||||||
|
|
||||||
<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]
|
|
||||||
[Missing: ARIA labels, focus trapping, keyboard support]
|
|
||||||
[Result: Modal doesn't work with screen readers]
|
|
||||||
```
|
|
||||||
|
|
||||||
</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]
|
|
||||||
Claude (as ui-ux-pro-max): I'll create a professional, accessible modal...
|
|
||||||
✓ Proper ARIA labels and roles
|
|
||||||
✓ Focus trap implementation
|
|
||||||
✓ Escape key and backdrop click handling
|
|
||||||
✓ Smooth animations (150-300ms)
|
|
||||||
✓ Mobile-responsive sizing
|
|
||||||
✓ WCAG 2.1 AA compliant colors
|
|
||||||
[Result: Modal works perfectly for all users]
|
|
||||||
```
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
### Example 3: Error Diagnosis from Screenshots
|
|
||||||
|
|
||||||
<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.
|
|
||||||
You: [Types error manually]
|
|
||||||
Claude: Let me help...
|
|
||||||
[Misses visual context like line numbers, file paths shown in screenshot]
|
|
||||||
```
|
|
||||||
|
|
||||||
</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
|
|
||||||
Claude: [Using diagnose_error tool]
|
|
||||||
I can see this is a TypeError in user.service.ts at line 42.
|
|
||||||
The error "Cannot read property 'id' of undefined" occurs because
|
|
||||||
the user object is null when the API call fails.
|
|
||||||
The stack trace shows it originated in the login function.
|
|
||||||
Fix: Add null check after API call.
|
|
||||||
[Provides precise fix with visual context]
|
|
||||||
```
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
### Example 4: Understanding Large Codebases
|
|
||||||
|
|
||||||
<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.
|
|
||||||
```
|
|
||||||
|
|
||||||
</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]
|
|
||||||
Analysis complete in 2 seconds, 12K tokens (vs 104K raw)
|
|
||||||
|
|
||||||
Authentication Flow:
|
|
||||||
1. login() (app/auth.py:45) - Entry point
|
|
||||||
→ validate_credentials() (app/auth.py:78)
|
|
||||||
→ hash_password() (app/crypto.py:23)
|
|
||||||
→ create_session() (app/session.py:12)
|
|
||||||
→ redirect_to_dashboard() (app/routes.py:156)
|
|
||||||
|
|
||||||
Key dependencies:
|
|
||||||
- Uses bcrypt for hashing
|
|
||||||
- Session stored in Redis
|
|
||||||
- 30-minute timeout
|
|
||||||
[Complete understanding with 89% fewer tokens]
|
|
||||||
```
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
### Example 5: Web Research for Current Information
|
|
||||||
|
|
||||||
<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]
|
|
||||||
```
|
|
||||||
|
|
||||||
</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]
|
|
||||||
Searching current web...
|
|
||||||
React 19 was released in December 2024 with new features:
|
|
||||||
- Server Actions
|
|
||||||
- Enhanced useTransition
|
|
||||||
- New Suspense features
|
|
||||||
[Fully up-to-date information]
|
|
||||||
```
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
### Summary: The Auto-Triggering Advantage
|
|
||||||
|
|
||||||
| Aspect | Without Auto-Triggering | With Auto-Triggering |
|
|
||||||
|--------|------------------------|---------------------|
|
|
||||||
| **Testing** | Manual, forget to do it | Automatic after code changes |
|
|
||||||
| **UX Polish** | Basic, inconsistent | Professional, accessible |
|
|
||||||
| **Error Analysis** | Type text manually | Upload screenshot, instant diagnosis |
|
|
||||||
| **Large Codebases** | Token limits, incomplete | 95% reduction, complete understanding |
|
|
||||||
| **Research** | Outdated knowledge | Real-time web search |
|
|
||||||
| **Your Role** | Remember everything | Focus on core logic, agents handle rest |
|
|
||||||
|
|
||||||
**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>
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Step 1.5: Install UI/UX Pro Max Agent (PROACTIVELY Auto-Triggers)
|
## Step 1.5: Install UI/UX Pro Max Agent (PROACTIVELY Auto-Triggers)
|
||||||
|
|
||||||
Source: https://github.com/nextlevelbuilder/ui-ux-pro-max-skill
|
Source: https://github.com/nextlevelbuilder/ui-ux-pro-max-skill
|
||||||
@@ -629,6 +416,186 @@ Please execute this complete integration step by step and confirm when each comp
|
|||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
# ═══════════════════════════════════════════════════════════════════════════════
|
||||||
|
# 📖 REAL-LIFE EXAMPLES: HOW AUTO-TRIGGERING WORKS
|
||||||
|
# ═══════════════════════════════════════════════════════════════════════════════
|
||||||
|
|
||||||
|
> ⚠️ **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.
|
||||||
|
|
||||||
|
## Example 1: Adding OAuth Authentication
|
||||||
|
|
||||||
|
### ❌ WITHOUT Auto-Triggering Agents
|
||||||
|
|
||||||
|
```diff
|
||||||
|
You: Help me add OAuth to my app
|
||||||
|
Claude: [Writes code, but no tests]
|
||||||
|
You: [Manually write tests later]
|
||||||
|
Claude: [Fixes bugs]
|
||||||
|
You: [Deployment issues]
|
||||||
|
```
|
||||||
|
|
||||||
|
### ✅ WITH Auto-Triggering Agents
|
||||||
|
|
||||||
|
```
|
||||||
|
You: Help me add OAuth to my app
|
||||||
|
Claude: [Writes code]
|
||||||
|
[test-writer-fixer auto-triggers]
|
||||||
|
Claude (as test-writer-fixer): Writing comprehensive tests for OAuth...
|
||||||
|
✓ Unit tests for login flow
|
||||||
|
✓ Integration tests for token refresh
|
||||||
|
✓ Error handling tests
|
||||||
|
✓ Edge case coverage
|
||||||
|
All tests passing!
|
||||||
|
[whimsy-injector auto-triggers]
|
||||||
|
Claude (as whimsy-injector): Adding delightful touches to OAuth UI...
|
||||||
|
✓ Smooth page transitions
|
||||||
|
✓ Encouraging error messages
|
||||||
|
✓ Celebration animation on successful login
|
||||||
|
Ready to deploy!
|
||||||
|
```
|
||||||
|
|
||||||
|
**Key Difference:** Auto-triggering agents proactively handle tasks (testing, UX refinement) that you'd otherwise need to remember and do manually.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Example 2: UI Component Creation (ui-ux-pro-max)
|
||||||
|
|
||||||
|
### ❌ WITHOUT Auto-Triggering
|
||||||
|
|
||||||
|
```
|
||||||
|
You: Create a modal for user settings
|
||||||
|
Claude: [Creates basic modal without accessibility]
|
||||||
|
[Missing: ARIA labels, focus trapping, keyboard support]
|
||||||
|
[Result: Modal doesn't work with screen readers]
|
||||||
|
```
|
||||||
|
|
||||||
|
### ✅ WITH Auto-Triggering (ui-ux-pro-max)
|
||||||
|
|
||||||
|
```
|
||||||
|
You: Create a modal for user settings
|
||||||
|
[ui-ux-pro-max PROACTIVELY triggers]
|
||||||
|
Claude (as ui-ux-pro-max): I'll create a professional, accessible modal...
|
||||||
|
✓ Proper ARIA labels and roles
|
||||||
|
✓ Focus trap implementation
|
||||||
|
✓ Escape key and backdrop click handling
|
||||||
|
✓ Smooth animations (150-300ms)
|
||||||
|
✓ Mobile-responsive sizing
|
||||||
|
✓ WCAG 2.1 AA compliant colors
|
||||||
|
[Result: Modal works perfectly for all users]
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Example 3: Error Diagnosis from Screenshots
|
||||||
|
|
||||||
|
### ❌ WITHOUT Vision Tools
|
||||||
|
|
||||||
|
```
|
||||||
|
You: [Paste error screenshot]
|
||||||
|
Claude: I can't see images. Please paste the text.
|
||||||
|
You: [Types error manually]
|
||||||
|
Claude: Let me help...
|
||||||
|
[Misses visual context like line numbers, file paths shown in screenshot]
|
||||||
|
```
|
||||||
|
|
||||||
|
### ✅ WITH Vision Tools (diagnose_error)
|
||||||
|
|
||||||
|
```
|
||||||
|
You: [Upload error-screenshot.png]
|
||||||
|
You: Analyze this error
|
||||||
|
Claude: [Using diagnose_error tool]
|
||||||
|
I can see this is a TypeError in user.service.ts at line 42.
|
||||||
|
The error "Cannot read property 'id' of undefined" occurs because
|
||||||
|
the user object is null when the API call fails.
|
||||||
|
The stack trace shows it originated in the login function.
|
||||||
|
Fix: Add null check after API call.
|
||||||
|
[Provides precise fix with visual context]
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Example 4: Understanding Large Codebases
|
||||||
|
|
||||||
|
### ❌ 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)
|
||||||
|
|
||||||
|
```
|
||||||
|
You: Explain how authentication works
|
||||||
|
Claude: [Using tldr context]
|
||||||
|
Analysis complete in 2 seconds, 12K tokens (vs 104K raw)
|
||||||
|
|
||||||
|
Authentication Flow:
|
||||||
|
1. login() (app/auth.py:45) - Entry point
|
||||||
|
→ validate_credentials() (app/auth.py:78)
|
||||||
|
→ hash_password() (app/crypto.py:23)
|
||||||
|
→ create_session() (app/session.py:12)
|
||||||
|
→ redirect_to_dashboard() (app/routes.py:156)
|
||||||
|
|
||||||
|
Key dependencies:
|
||||||
|
- Uses bcrypt for hashing
|
||||||
|
- Session stored in Redis
|
||||||
|
- 30-minute timeout
|
||||||
|
[Complete understanding with 89% fewer tokens]
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Example 5: Web Research for Current Information
|
||||||
|
|
||||||
|
### ❌ 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)
|
||||||
|
|
||||||
|
```
|
||||||
|
You: What's the latest React version and features?
|
||||||
|
Claude: [Using web-search-prime]
|
||||||
|
Searching current web...
|
||||||
|
React 19 was released in December 2024 with new features:
|
||||||
|
- Server Actions
|
||||||
|
- Enhanced useTransition
|
||||||
|
- New Suspense features
|
||||||
|
[Fully up-to-date information]
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Summary: The Auto-Triggering Advantage
|
||||||
|
|
||||||
|
| Aspect | Without Auto-Triggering | With Auto-Triggering |
|
||||||
|
|:-------|:------------------------|:---------------------|
|
||||||
|
| **Testing** | Manual, forget to do it | Automatic after code changes |
|
||||||
|
| **UX Polish** | Basic, inconsistent | Professional, accessible |
|
||||||
|
| **Error Analysis** | Type text manually | Upload screenshot, instant diagnosis |
|
||||||
|
| **Large Codebases** | Token limits, incomplete | 95% reduction, complete understanding |
|
||||||
|
| **Research** | Outdated knowledge | Real-time web search |
|
||||||
|
| **Your Role** | Remember everything | Focus on core logic, agents handle rest |
|
||||||
|
|
||||||
|
**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.
|
||||||
|
|
||||||
|
# ═══════════════════════════════════════════════════════════════════════════════
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
## 📚 Complete Source List with Explanations
|
## 📚 Complete Source List with Explanations
|
||||||
|
|
||||||
### 1. contains-studio/agents
|
### 1. contains-studio/agents
|
||||||
@@ -698,7 +665,7 @@ Please execute this complete integration step by step and confirm when each comp
|
|||||||
## 🎯 Real-Life Comparison Matrix
|
## 🎯 Real-Life Comparison Matrix
|
||||||
|
|
||||||
| Task | Without Suite | With Suite | Improvement |
|
| Task | Without Suite | With Suite | Improvement |
|
||||||
|------|--------------|-----------|-------------|
|
|:-----|:--------------|:-----------|:------------|
|
||||||
| **Code Review** | Manual reading, miss context | TLDR 5-layer analysis, 95% token savings | 20x faster |
|
| **Code Review** | Manual reading, miss context | TLDR 5-layer analysis, 95% token savings | 20x faster |
|
||||||
| **UI Implementation** | Describe in words | Upload screenshot → UI to code | 10x faster |
|
| **UI Implementation** | Describe in words | Upload screenshot → UI to code | 10x faster |
|
||||||
| **Error Debugging** | Paste text manually | Upload screenshot → Auto-diagnosis | 5x faster |
|
| **Error Debugging** | Paste text manually | Upload screenshot → Auto-diagnosis | 5x faster |
|
||||||
@@ -713,7 +680,7 @@ Please execute this complete integration step by step and confirm when each comp
|
|||||||
## 🆚 Master Prompt vs Other Installation Methods
|
## 🆚 Master Prompt vs Other Installation Methods
|
||||||
|
|
||||||
| Method | Time Required | Transparency | Customization | Best For |
|
| Method | Time Required | Transparency | Customization | Best For |
|
||||||
|--------|--------------|--------------|---------------|----------|
|
|:-------|:--------------|:-------------|:--------------|:---------|
|
||||||
| **Master Prompt** | 30 min | See all steps | Easy to modify | First-time users, understanding |
|
| **Master Prompt** | 30 min | See all steps | Easy to modify | First-time users, understanding |
|
||||||
| **Automation Script** | 10 min | Automated | Edit scripts | Experienced users, speed |
|
| **Automation Script** | 10 min | Automated | Edit scripts | Experienced users, speed |
|
||||||
| **Manual** | 60+ min | Full control | Complete control | Learning, custom needs |
|
| **Manual** | 60+ min | Full control | Complete control | Learning, custom needs |
|
||||||
|
|||||||
Reference in New Issue
Block a user