Improve MASTER-PROMPT.md examples section clarity
- Create dedicated 'How Auto-Triggering Works: Practical Examples' section - Add clear NOTE explaining these are illustrative examples - Consolidate 5 examples showing WITHOUT vs WITH scenarios - Add visual separation with headers and dividers - Include summary table comparing without vs with auto-triggering - Remove duplicate examples scattered throughout document - Make it immediately clear these are workflow examples Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
This commit is contained in:
uroma
383
MASTER-PROMPT.md
383
MASTER-PROMPT.md
@@ -171,9 +171,15 @@ cp -r /tmp/contains-studio-agents/agents/* ~/.claude/agents/
|
|||||||
- Comprehensive styling guidelines
|
- Comprehensive styling guidelines
|
||||||
- Example: "Create a pricing page" → ui-ux-pro-max applies professional design patterns
|
- Example: "Create a pricing page" → ui-ux-pro-max applies professional design patterns
|
||||||
|
|
||||||
### Real-Life Example: Before vs After
|
---
|
||||||
|
|
||||||
**BEFORE (Without agents):**
|
## 📖 How Auto-Triggering Works: Practical Examples
|
||||||
|
|
||||||
|
> **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.
|
||||||
|
|
||||||
|
### Example 1: Adding OAuth Authentication
|
||||||
|
|
||||||
|
**WITHOUT Auto-Triggering Agents:**
|
||||||
```
|
```
|
||||||
You: Help me add OAuth to my app
|
You: Help me add OAuth to my app
|
||||||
Claude: [Writes code, but no tests]
|
Claude: [Writes code, but no tests]
|
||||||
@@ -182,7 +188,7 @@ Claude: [Fixes bugs]
|
|||||||
You: [Deployment issues]
|
You: [Deployment issues]
|
||||||
```
|
```
|
||||||
|
|
||||||
**AFTER (With auto-triggering agents):**
|
**WITH Auto-Triggering Agents:**
|
||||||
```
|
```
|
||||||
You: Help me add OAuth to my app
|
You: Help me add OAuth to my app
|
||||||
Claude: [Writes code]
|
Claude: [Writes code]
|
||||||
@@ -201,6 +207,131 @@ Claude (as whimsy-injector): Adding delightful touches to OAuth UI...
|
|||||||
Ready to deploy!
|
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.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## Step 1.5: Install UI/UX Pro Max Agent (PROACTIVELY Auto-Triggers)
|
## Step 1.5: Install UI/UX Pro Max Agent (PROACTIVELY Auto-Triggers)
|
||||||
@@ -235,55 +366,11 @@ cp /tmp/ui-ux-pro-max-skill/.claude/skills/ui-ux-pro-max/SKILL.md ~/.claude/skil
|
|||||||
- Accessibility standards (contrast ratios, keyboard nav, ARIA labels)
|
- Accessibility standards (contrast ratios, keyboard nav, ARIA labels)
|
||||||
- Professional design patterns (no emoji icons, proper hover states)
|
- Professional design patterns (no emoji icons, proper hover states)
|
||||||
|
|
||||||
### Real-Life Examples: Before vs After
|
**Key Features:**
|
||||||
|
- Automatic UI/UX review during design work
|
||||||
**Example: UI Component Creation**
|
- Professional design patterns applied proactively
|
||||||
|
- Accessibility-first approach (WCAG 2.1 AA/AAA)
|
||||||
**BEFORE:**
|
- Comprehensive styling guidelines
|
||||||
```
|
|
||||||
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]
|
|
||||||
```
|
|
||||||
|
|
||||||
**AFTER:**
|
|
||||||
```
|
|
||||||
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: UI Review**
|
|
||||||
|
|
||||||
**BEFORE:**
|
|
||||||
```
|
|
||||||
You: The dashboard looks messy
|
|
||||||
Claude: Let me add some spacing...
|
|
||||||
[Generic fixes, doesn't address root issues]
|
|
||||||
```
|
|
||||||
|
|
||||||
**AFTER:**
|
|
||||||
```
|
|
||||||
You: The dashboard looks messy
|
|
||||||
[ui-ux-pro-max PROACTIVELY triggers]
|
|
||||||
Claude (as ui-ux-pro-max): Analyzing dashboard for professional issues...
|
|
||||||
Issues found:
|
|
||||||
✗ Inconsistent spacing (mixing 4px and 8px grids)
|
|
||||||
✗ Low contrast text (slate-400 unreadable in light mode)
|
|
||||||
✗ Missing cursor pointers on cards
|
|
||||||
✗ No hover feedback on interactive elements
|
|
||||||
✗ z-index conflicts between components
|
|
||||||
|
|
||||||
[Provides specific fixes for each issue]
|
|
||||||
```
|
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
@@ -308,58 +395,11 @@ npx @z_ai/mcp-server --help
|
|||||||
7. **analyze_data_viz** - Extract insights from dashboards/charts
|
7. **analyze_data_viz** - Extract insights from dashboards/charts
|
||||||
8. **understand_diagram** - Understand technical diagrams (UML, flowcharts)
|
8. **understand_diagram** - Understand technical diagrams (UML, flowcharts)
|
||||||
|
|
||||||
### Real-Life Examples: Before vs After
|
**Key Features:**
|
||||||
|
- Screenshot-to-code conversion
|
||||||
**Example 1: Error Diagnosis**
|
- Error diagnosis from images
|
||||||
|
- Video and diagram understanding
|
||||||
**BEFORE:**
|
- UI comparison and analysis
|
||||||
```
|
|
||||||
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]
|
|
||||||
```
|
|
||||||
|
|
||||||
**AFTER:**
|
|
||||||
```
|
|
||||||
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 2: UI to Code**
|
|
||||||
|
|
||||||
**BEFORE:**
|
|
||||||
```
|
|
||||||
You: [Describes UI for 10 minutes]
|
|
||||||
Claude: [Creates approximation]
|
|
||||||
You: [Several iterations to match design]
|
|
||||||
```
|
|
||||||
|
|
||||||
**AFTER:**
|
|
||||||
```
|
|
||||||
You: [Upload design-mockup.png]
|
|
||||||
You: Implement this UI
|
|
||||||
Claude: [Using ui_to_artifact tool]
|
|
||||||
Analyzing design...
|
|
||||||
- Header: Navigation bar with logo and links
|
|
||||||
- Hero: Large headline with gradient background
|
|
||||||
- Cards: 3-column grid with icons
|
|
||||||
- CTA: Gradient button with hover effect
|
|
||||||
|
|
||||||
[Creates exact match with Tailwind CSS]
|
|
||||||
✓ All spacing matches
|
|
||||||
✓ Colors extracted from design
|
|
||||||
✓ Icons identified and included
|
|
||||||
```
|
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
@@ -379,49 +419,10 @@ npx @z_ai/coding-helper --help
|
|||||||
2. **web-reader** - Convert any web page to clean markdown
|
2. **web-reader** - Convert any web page to clean markdown
|
||||||
3. **zread** - Read and analyze entire GitHub repositories
|
3. **zread** - Read and analyze entire GitHub repositories
|
||||||
|
|
||||||
### Real-Life Examples: Before vs After
|
**Key Features:**
|
||||||
|
- Real-time web search for current information
|
||||||
**Example 1: Web Research**
|
- Repository analysis without manual file pasting
|
||||||
|
- Web page to clean markdown conversion
|
||||||
**BEFORE:**
|
|
||||||
```
|
|
||||||
You: What's the latest React version?
|
|
||||||
Claude: [Training cutoff knowledge] React 18 was released in 2022.
|
|
||||||
You: [Outdated information]
|
|
||||||
```
|
|
||||||
|
|
||||||
**AFTER:**
|
|
||||||
```
|
|
||||||
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]
|
|
||||||
```
|
|
||||||
|
|
||||||
**Example 2: Repository Analysis**
|
|
||||||
|
|
||||||
**BEFORE:**
|
|
||||||
```
|
|
||||||
You: Help me understand the Next.js codebase
|
|
||||||
Claude: [Cannot access external repositories]
|
|
||||||
You: [Manually paste files one by one]
|
|
||||||
```
|
|
||||||
|
|
||||||
**AFTER:**
|
|
||||||
```
|
|
||||||
You: Analyze the Next.js repository structure
|
|
||||||
Claude: [Using zread tool]
|
|
||||||
Reading vercel/next.js...
|
|
||||||
Repository has:
|
|
||||||
- 4500+ files
|
|
||||||
- Main packages: next, react, react-dom
|
|
||||||
- Key directories: packages/next, examples, test
|
|
||||||
[Provides comprehensive overview without manual file pasting]
|
|
||||||
```
|
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
@@ -453,89 +454,11 @@ tldr warm .
|
|||||||
- `dfg` - Data flow graph
|
- `dfg` - Data flow graph
|
||||||
- And 12 more...
|
- And 12 more...
|
||||||
|
|
||||||
### Real-Life Examples: Before vs After
|
**Key Features:**
|
||||||
|
- 95% token reduction for large codebases
|
||||||
**Example 1: Understanding Large Codebase**
|
- Semantic search by behavior (not just text)
|
||||||
|
- Program slicing for precise debugging
|
||||||
**BEFORE:**
|
- Impact analysis for safe refactoring
|
||||||
```
|
|
||||||
You: Explain how authentication works in this 100K-line codebase
|
|
||||||
Claude: [Reading files... token limit exceeded...]
|
|
||||||
Cannot fit entire codebase in context.
|
|
||||||
```
|
|
||||||
|
|
||||||
**AFTER:**
|
|
||||||
```
|
|
||||||
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 2: Semantic Search**
|
|
||||||
|
|
||||||
**BEFORE:**
|
|
||||||
```
|
|
||||||
You: Where's the JWT validation code?
|
|
||||||
Claude: [Searches for "JWT" or "validation"]
|
|
||||||
Found nothing (it's called "verify_access_token")
|
|
||||||
```
|
|
||||||
|
|
||||||
**AFTER:**
|
|
||||||
```
|
|
||||||
You: Find the JWT validation code
|
|
||||||
Claude: [Using tldr semantic search]
|
|
||||||
Searching by behavior "validate JWT tokens"...
|
|
||||||
|
|
||||||
Found: verify_access_token() in app/auth/middleware.py
|
|
||||||
This function:
|
|
||||||
- Validates JWT signature
|
|
||||||
- Checks expiration
|
|
||||||
- Extracts user claims
|
|
||||||
[Finds by behavior, not exact name match]
|
|
||||||
```
|
|
||||||
|
|
||||||
**Example 3: Debugging with Program Slicing**
|
|
||||||
|
|
||||||
**BEFORE:**
|
|
||||||
```
|
|
||||||
You: Why is user_id null on line 142?
|
|
||||||
Claude: [Reads entire 150-line function]
|
|
||||||
Let me analyze... it's hard to see the data flow...
|
|
||||||
[Ambiguous answer]
|
|
||||||
```
|
|
||||||
|
|
||||||
**AFTER:**
|
|
||||||
```
|
|
||||||
You: Why is user_id null on line 142?
|
|
||||||
Claude: [Using tldr slice]
|
|
||||||
Showing only lines affecting line 142...
|
|
||||||
|
|
||||||
3: user = db.get_user(username)
|
|
||||||
7: if user is None:
|
|
||||||
12: return None # ← BUG: Early return
|
|
||||||
28: token = create_token(user) # ← Skipped due to line 12
|
|
||||||
42: session.user_id = user.id # ← user is None here!
|
|
||||||
|
|
||||||
The issue: When user not found (line 7), function returns
|
|
||||||
None at line 12, skipping token creation. Line 42 assumes
|
|
||||||
user exists.
|
|
||||||
|
|
||||||
[Precise answer with only 6 relevant lines shown]
|
|
||||||
```
|
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user