Lovable Site Builder — SKILL.md

---
name: "Lovable Site Builder"
description: "Build frontend sites and MVPs on lovable.dev using browser automation. Create projects, iterate on designs, and deploy — all via Chrome MCP tools."
version: "1.0.0"
author: "skynet"
category: "dev"
agents: ["claude-code"]
tags: ["lovable", "frontend", "design", "browser-automation", "mvp"]
tools_required: ["chrome-mcp"]
---

# Lovable Site Builder

# Lovable Site Builder

Build frontend sites and MVPs on lovable.dev using Chrome browser automation tools. Lovable is an AI-powered app builder — you describe what you want and it generates a full React/Vite app.

## Prerequisites

- Chrome MCP browser tools available (mcp__claude-in-chrome__*)
- Logged in to lovable.dev (James's account is pre-authenticated)

## Step 1: Navigate to Lovable

```
1. Create a new tab: mcp__claude-in-chrome__tabs_create_mcp
2. Navigate to: https://lovable.dev/dashboard
3. Read the page to confirm you're on the dashboard
```

## Step 2: Start a New Project

From the dashboard, type your project description into the chat input.

```
1. Read page with filter: interactive to find the chat input
2. Look for the element labeled "Chat input" — this is where you describe your project
3. Use form_input to type your project description
4. Click the submit button to start building
```

**Writing good prompts for Lovable:**
- Be specific about the type of site (landing page, dashboard, SaaS app)
- Mention the tech if it matters ("React with Tailwind")
- Describe the layout and sections you want
- Include color scheme, branding, or style preferences
- Example: "Build a modern landing page for a pet grooming SaaS called PawPerfect. Hero section with CTA, features grid, pricing table, testimonials, and footer. Use a warm color palette with orange accents."



## Browser Automation Tips

### Submit Button
The submit button on Lovable does NOT respond to standard MCP click actions. You must use JavaScript:
```
mcp__claude-in-chrome__javascript_tool:
  document.querySelector('button[type="submit"]').click()
```

### Cookie Banner
Lovable shows a cookie banner on first visit. Dismiss it first:
```
1. Use find to locate "Reject all" or "Accept all" button
2. Click it before interacting with the chat input
```

### Chat Input
The chat input is a contentEditable div, not a standard input. Use click + type (not form_input):
```
1. Click on the chat input element
2. Use computer action "type" to enter text
3. Submit via JavaScript (see above)
```

### Window Size
Lovable's UI is responsive. Resize the browser to at least 1400x900 for reliable element targeting:
```
mcp__claude-in-chrome__resize_window: width=1400, height=900
```

## Step 3: Wait for Generation

Lovable will generate the app. This takes 30-90 seconds.

```
1. Wait 5-10 seconds, then read the page
2. Look for a preview iframe or "View code" / "Open in new tab" buttons
3. If still generating, wait another 10 seconds and re-read
4. The project URL will appear in the address bar as lovable.dev/projects/<id>
```

## Step 4: Iterate on the Design

After initial generation, use the chat to refine:

```
1. Find the chat input again
2. Type your revision request, e.g.:
   - "Make the hero section taller with a gradient background"
   - "Add a pricing toggle for monthly/annual"
   - "Change the color scheme to dark mode"
   - "Add a contact form in the footer"
3. Submit and wait for the update
```

**Tips for effective iteration:**
- Make one change at a time for predictable results
- Reference specific sections ("the pricing table", "the navbar")
- If something breaks, say "undo the last change" or "revert to the previous version"

## Step 5: Access the Deployed Site

Lovable auto-deploys every version:

```
1. The preview URL is shown in the editor
2. Look for a "Share" or "Deploy" button for the public URL
3. The URL format is typically: <project-name>.lovable.app
```

## Step 6: Connect Custom Domain (Optional)

If you need a custom domain:
```
1. Click the settings/gear icon in the project
2. Navigate to the "Domains" section
3. Add your custom domain
4. Configure DNS: CNAME record pointing to lovable.app
```

## Step 7: Export the Code

To get the source code:
```
1. Click "GitHub" or "Export" button in the project
2. Lovable can push to a GitHub repo directly
3. Alternatively, use the "Download" option to get a zip
```

## Working with Existing Projects

```
1. Navigate to: https://lovable.dev/dashboard
2. Read page to find the project list
3. Click on the project you want to edit (under "My projects" tab)
4. Use the chat to make changes to the existing project
```

## Common Use Cases

- **Agent landing pages**: Create a public-facing site for a bot/agent
- **MVP prototypes**: Quick functional prototypes with forms, auth, database
- **Marketing sites**: Landing pages, pricing pages, feature showcases
- **Admin dashboards**: Internal tools with tables, charts, and forms

## Collecting the Project URL

After creating a project, always save the project URL:
```
1. The URL in the browser will be: lovable.dev/projects/<project-id>
2. The deployed URL will be: <name>.lovable.app
3. Save both URLs for reference
```

## Step 8: Connect to GitHub Repository

Lovable can sync your project 2-way with GitHub, creating a repo automatically.

```
1. In the project editor, find the GitHub icon (octocat) in the top toolbar (next to Share and Publish)
   - Or use find to locate "Sync with GitHub" button
2. Click it — a dropdown appears with "Connect GitHub"
3. Click "Connect GitHub" — navigates to Settings > Connectors > GitHub
4. You will see a list of GitHub accounts/orgs with "Connect" buttons
5. Click "Connect" next to the desired account (e.g., "worklocalinc")
6. Lovable auto-creates a new repo named after your project and syncs all code
7. The repo URL will be shown: github.com/<account>/<project-slug>.git
```

**What gets synced:**
- Full React/Vite source code
- All dependencies (package.json, lockfile)
- Tailwind config, TypeScript config
- 2-way sync: changes on Lovable push to GitHub, and vice versa

**After connecting:**
- The GitHub icon shows "Connected" status
- Every Lovable edit auto-commits to the repo
- You can clone the repo locally: `git clone https://github.com/<account>/<project>.git`
- You can also edit code in the repo and Lovable picks up the changes

**Collecting the repo URL:**
```
1. After connecting, the settings page shows the clone URL
2. Save it: https://github.com/<account>/<project-slug>.git
3. The project branch defaults to "main"
```

## Running on Mac Minis

These instructions can also be executed on the Mac Minis (bots, vault, jarvis) using the mac-control MCP server instead of chrome-in-chrome.

### Via mac-control MCP Server (Port 8200)

The mac-control server on each Mac exposes the same GUI automation primitives:

```bash
# Take a screenshot to see the screen
curl -s http://bots.local:8200/tools/screenshot

# Open a URL in Chrome
curl -s http://bots.local:8200/tools/open_url -d '{"url": "https://lovable.dev/dashboard"}'

# Click at screen coordinates
curl -s http://bots.local:8200/tools/click -d '{"x": 500, "y": 300}'

# Type text
curl -s http://bots.local:8200/tools/type_text -d '{"text": "Build a landing page..."}'

# Press keyboard shortcut
curl -s http://bots.local:8200/tools/key_press -d '{"keys": "return"}'

# Run AppleScript
curl -s http://bots.local:8200/tools/applescript -d '{"script": "tell app \\"Google Chrome\\" to activate"}'

# Find text on screen (OCR)
curl -s http://bots.local:8200/tools/find_on_screen -d '{"text": "Submit"}'
```

### Via Chrome DevTools Protocol (Port 9222)

For direct browser control without GUI coordinates:

```bash
# List open tabs
curl -s http://bots.local:9222/json

# Navigate a tab to a URL
curl -s http://bots.local:9222/json/new?https://lovable.dev/dashboard

# Execute JavaScript in a tab (via WebSocket — use a CDP client)
```

### Via SSH + cliclick (Simple Fallback)

```bash
# Open URL
ssh bots 'open https://lovable.dev/dashboard'

# Wait for page load
sleep 3

# Screenshot + analyze
ssh bots 'screencapture /tmp/screen.png'
scp bots:/tmp/screen.png ./screen.png

# Click at coordinates
ssh bots '/opt/homebrew/bin/cliclick c:500,300'

# Type text
ssh bots '/opt/homebrew/bin/cliclick t:"Build a landing page"'

# Submit
ssh bots '/opt/homebrew/bin/cliclick kp:return'
```

### Recommended Machine

Use **bots** (192.168.86.50) for browser automation — it has full GUI support, screencapture works, and Chrome with remote debugging is running.