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
|
||||
- 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
|
||||
Claude: [Writes code, but no tests]
|
||||
@@ -182,7 +188,7 @@ Claude: [Fixes bugs]
|
||||
You: [Deployment issues]
|
||||
```
|
||||
|
||||
**AFTER (With auto-triggering agents):**
|
||||
**WITH Auto-Triggering Agents:**
|
||||
```
|
||||
You: Help me add OAuth to my app
|
||||
Claude: [Writes code]
|
||||
@@ -201,6 +207,131 @@ Claude (as whimsy-injector): Adding delightful touches to OAuth UI...
|
||||
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)
|
||||
@@ -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)
|
||||
- Professional design patterns (no emoji icons, proper hover states)
|
||||
|
||||
### Real-Life Examples: Before vs After
|
||||
|
||||
**Example: UI Component Creation**
|
||||
|
||||
**BEFORE:**
|
||||
```
|
||||
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]
|
||||
```
|
||||
**Key Features:**
|
||||
- Automatic UI/UX review during design work
|
||||
- Professional design patterns applied proactively
|
||||
- Accessibility-first approach (WCAG 2.1 AA/AAA)
|
||||
- Comprehensive styling guidelines
|
||||
|
||||
---
|
||||
|
||||
@@ -308,58 +395,11 @@ npx @z_ai/mcp-server --help
|
||||
7. **analyze_data_viz** - Extract insights from dashboards/charts
|
||||
8. **understand_diagram** - Understand technical diagrams (UML, flowcharts)
|
||||
|
||||
### Real-Life Examples: Before vs After
|
||||
|
||||
**Example 1: Error Diagnosis**
|
||||
|
||||
**BEFORE:**
|
||||
```
|
||||
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
|
||||
```
|
||||
**Key Features:**
|
||||
- Screenshot-to-code conversion
|
||||
- Error diagnosis from images
|
||||
- Video and diagram understanding
|
||||
- UI comparison and analysis
|
||||
|
||||
---
|
||||
|
||||
@@ -379,49 +419,10 @@ npx @z_ai/coding-helper --help
|
||||
2. **web-reader** - Convert any web page to clean markdown
|
||||
3. **zread** - Read and analyze entire GitHub repositories
|
||||
|
||||
### Real-Life Examples: Before vs After
|
||||
|
||||
**Example 1: Web Research**
|
||||
|
||||
**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]
|
||||
```
|
||||
**Key Features:**
|
||||
- Real-time web search for current information
|
||||
- Repository analysis without manual file pasting
|
||||
- Web page to clean markdown conversion
|
||||
|
||||
---
|
||||
|
||||
@@ -453,89 +454,11 @@ tldr warm .
|
||||
- `dfg` - Data flow graph
|
||||
- And 12 more...
|
||||
|
||||
### Real-Life Examples: Before vs After
|
||||
|
||||
**Example 1: Understanding Large Codebase**
|
||||
|
||||
**BEFORE:**
|
||||
```
|
||||
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]
|
||||
```
|
||||
**Key Features:**
|
||||
- 95% token reduction for large codebases
|
||||
- Semantic search by behavior (not just text)
|
||||
- Program slicing for precise debugging
|
||||
- Impact analysis for safe refactoring
|
||||
|
||||
---
|
||||
|
||||
|
||||
Reference in New Issue
Block a user