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)
|
||||
|
||||
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
|
||||
|
||||
### 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
|
||||
|
||||
| Task | Without Suite | With Suite | Improvement |
|
||||
|------|--------------|-----------|-------------|
|
||||
|:-----|:--------------|:-----------|:------------|
|
||||
| **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 |
|
||||
| **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
|
||||
|
||||
| Method | Time Required | Transparency | Customization | Best For |
|
||||
|--------|--------------|--------------|---------------|----------|
|
||||
|:-------|:--------------|:-------------|:--------------|:---------|
|
||||
| **Master Prompt** | 30 min | See all steps | Easy to modify | First-time users, understanding |
|
||||
| **Automation Script** | 10 min | Automated | Edit scripts | Experienced users, speed |
|
||||
| **Manual** | 60+ min | Full control | Complete control | Learning, custom needs |
|
||||
|
||||
Reference in New Issue
Block a user