yolo

Yolo Mode Automation Skill

This skill automates Lovable deployment workflows using Claude's browser automation capabilities.

When to Activate

This skill should be active when:

1. Yolo mode is enabled in CLAUDE.md (yolo_mode: on)
2. User runs deployment commands:
3. /deploy-edge - Edge function deployment
4. /apply-migration - Database migration application
5. After git push to main (if auto_deploy: on):
6. Automatically detect backend file changes
7. Trigger deployment without manual command
8. User mentions yolo automation:
9. "use yolo mode"
10. "automate the Lovable prompt"
11. "submit this to Lovable automatically"
12. "browser automation"

Performance Optimization

Model Selection (Hybrid Approach)

For optimal speed + reliability, use different models for different tasks:

Use Haiku for:

• Clicking elements using refs (simple, deterministic)
• Form input operations (form_input tool calls)
• Key presses and simple navigation
• Waiting/polling operations
• Simple element finding with find tool

Use Sonnet for:

• Initial page understanding after navigation
• Error detection and recovery decisions
• Parsing Lovable's responses for success/failure
• Deciding next steps when something unexpected happens
• Complex page state analysis

Why this matters:

• Haiku is 3-5x faster for simple operations
• Sonnet provides better reliability for complex reasoning
• Hybrid approach gives best of both: speed + accuracy

Tool Preferences

Always prefer these tools:

• find and read_page over screenshots for element location
• form_input over click + type for input values
• ref parameters over coordinates for clicking
• DOM polling over screenshot-based monitoring

See references/automation-workflows.md for detailed implementation.

Core Functionality

1. Auto-Detection

When yolo mode is enabled, automatically detect when Lovable prompts are needed:

Edge Function Deployment:

• Files in supabase/functions/ modified
• Changes committed and pushed to main
• Deployment prompt generated

Migration Application:

• New files in supabase/migrations/
• Changes committed and pushed to main
• Migration prompt generated

See references/detection-logic.md for complete detection criteria.

1.5. Auto-Deploy After Git Push (NEW)

When auto_deploy: on is enabled, Claude automatically detects and deploys backend changes after a successful git push:

Trigger: Successful git push origin main

Detection:

1. Analyze files changed in the push
2. Check for supabase/functions/ or supabase/migrations/ changes
3. If backend files found AND auto_deploy enabled → trigger automation

Flow:

git push origin main [succeeds]
    ↓
Claude detects backend file changes
    ↓
Check: yolo_mode: on AND auto_deploy: on
    ↓
🤖 "Auto-deploy: Backend changes detected, starting deployment..."
    ↓
Execute browser automation
    ↓
Run verification tests
    ↓
Show deployment summary

Graceful Fallback: If auto-deploy fails for any reason:

• Show clear error message
• Provide manual prompt as fallback
• Never block the user

See references/post-push-automation.md for complete implementation.

2. Browser Automation Workflow

When a deployment is needed:

1. Navigate to Lovable
2. Read lovable_url from CLAUDE.md
3. Open browser and navigate to project
4. Handle login if needed

1. Submit Prompt
2. Locate chat input element
3. Type the generated Lovable prompt
4. Submit and confirm message sent

1. Monitor Response
2. Wait for Lovable's response
3. Check for success indicators
4. Detect errors or warnings
5. Timeout after 3 minutes

See references/automation-workflows.md for detailed browser automation steps.

3. Testing & Verification

After successful deployment, run tests based on yolo_testing setting:

If yolo_testing: on (default):

• Level 1: Basic verification (check logs via Lovable)
• Level 2: Console error checking (monitor production URL)
• Level 3: Functional testing (test endpoints/queries)

If yolo_testing: off:

• Skip all testing
• Only confirm deployment success from Lovable response

See references/testing-procedures.md for complete testing workflows.

4. Debug Mode

When yolo_debug: on, provide verbose output:

🐛 DEBUG: Browser Automation

Step 1: Navigating to Lovable
  URL: https://lovable.dev/projects/abc123
  Wait for: Page load complete
  ✅ Success (1.2s)

Step 2: Locating chat interface
  Selector: textarea[data-testid="chat-input"]
  Wait for: Element interactable
  ✅ Found (0.3s)

Step 3: Typing prompt
  Text: "Deploy the send-email edge function"
  ✅ Typed (0.5s)

Step 4: Submitting
  Action: Press Enter
  ✅ Submitted (0.1s)

Step 5: Monitoring response
  Watching for: New message from assistant
  Timeout: 180s
  ✅ Response received (4.2s)

Response content:
"I'll deploy the send-email edge function now..."
[full response text]

Success keywords detected: ['deploy', 'function']
No error keywords found

Configuration in CLAUDE.md

The skill reads these fields from CLAUDE.md:

## Yolo Mode Configuration (Beta)

- **Status**: on
- **Auto-Deploy**: on
- **Deployment Testing**: on
- **Auto-run Tests**: off
- **Debug Mode**: off
- **Last Updated**: 2025-01-03 10:30:00

Configuration options:

• Status: Enable/disable yolo mode entirely
• Auto-Deploy: Auto-deploy after git push (no manual command needed)
• Deployment Testing: Run verification tests after deployments
• Auto-run Tests: Run project test suite after git push
• Debug Mode: Show verbose automation logs

And from Project Overview:

- **Lovable Project URL**: https://lovable.dev/projects/abc123
- **Production URL**: https://my-app.lovable.app

User Notifications

Progress Updates

Show real-time progress during automation:

Standard Mode (debug off):

🤖 Yolo mode: Deploying send-email edge function

⏳ Step 1/8: Navigating to Lovable project...
⏳ Step 2/8: Waiting for GitHub sync...
✅ Step 3/8: Sync verified - Lovable has latest code
✅ Step 4/8: Located chat interface
✅ Step 5/8: Submitted prompt
⏳ Step 6/8: Waiting for Lovable response...
✅ Step 7/8: Deployment confirmed
⏳ Step 8/8: Running verification tests...
✅ Step 8/8: All tests passed

Debug Mode (debug on): Include detailed logs with timing, selectors, and full responses.

Deployment Summary

After automation completes:

## Deployment Summary

**Operation:** Edge Function Deployment
**Function:** send-email
**Status:** ✅ Success
**Duration:** 45 seconds

**Automation Steps:**
1. ✅ Navigated to Lovable
2. ✅ Submitted deployment prompt
3. ✅ Received deployment confirmation

**Verification Tests:** (if testing enabled)
1. ✅ Basic verification: Deployment logs show no errors
2. ✅ Console check: No errors at production URL
3. ✅ Functional test: Function endpoint responds (200 OK)

**Production Status:**
- Function is live and responding
- No errors detected
- Ready for use

💡 Yolo mode is enabled. I'll continue automating deployments.
   Run `/yolo off` to disable.

Error Handling

All automation failures fall back gracefully to manual prompts:

Common Errors

Browser automation not available:

❌ Browser automation unavailable

Yolo mode requires the Claude in Chrome extension.

Install: https://chrome.google.com/webstore/detail/claude/...
Docs: https://docs.claude.com/claude/code-intelligence/browser-automation

Fallback - run this prompt manually in Lovable:
📋 "Deploy the send-email edge function"

Login required:

🔐 Please log in to Lovable

The browser opened to your Lovable project, but you're not logged in.
Please log in and I'll retry automatically.

Or run this prompt manually:
📋 "Deploy the send-email edge function"

UI element not found:

❌ Could not locate Lovable chat interface

The Lovable UI may ha