diff --git a/MASTER-PROMPT.md b/MASTER-PROMPT.md index 4cc3cc9..4fab612 100644 --- a/MASTER-PROMPT.md +++ b/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 ---