chrome-auth-recorder

What this skill does

# Chrome Auth Recorder

## Quick Start

Record an authenticated workflow as an annotated GIF:

User: "Record my workflow for creating a new project in GitHub"
1. Get tab context from authenticated GitHub session
2. Present plan with domains for approval
3. Start GIF recording + capture first frame
4. Guide user OR execute approved actions
5. Monitor console/network for errors
6. Capture final frame + stop recording
7. Export annotated GIF with click indicators

**Key advantage:** Uses existing authenticated browser session - no credential handling required.

## When to Use This Skill

**Explicit Triggers:**
- "Record my workflow" / "Document authenticated process"
- "Create tutorial from session" / "Make a GIF of [workflow]"
- "Show me how to do this" / "Capture this workflow"

**Implicit Triggers:**
- Document multi-step authenticated workflow
- Create tutorial for team using SaaS tool
- Visual proof of process completion

**Debugging Triggers:**
- "Why did this fail?" / "Record the error I'm seeing"
- Need visual evidence for bug reports

## What This Skill Does

End-to-end workflow recording in authenticated sessions:
1. **Session Access** - Uses existing authenticated tab (no credentials)
2. **Plan Approval** - Presents domains/approach for explicit permission
3. **GIF Recording** - Captures visual workflow with frames
4. **Monitoring** - Tracks console errors and network requests
5. **Export** - Generates annotated GIF (click indicators, labels, progress bar)

## Instructions

### Step 1: Get Tab Context

Access user's existing authenticated session:

```
tabs_context_mcp(createIfEmpty=true)
→ Returns: {tabId: 123, url: "https://github.com/dashboard"}

Verify:
- Domain matches workflow requirement
- User appears authenticated (check for login indicators)
- Ask user to navigate if on wrong page
```

### Step 2: Present Plan and Get Approval

Never start recording without explicit permission:

```
update_plan(
  domains=["github.com"],
  approach=[
    "Record repository creation workflow",
    "Capture form interactions",
    "Monitor API calls for errors",
    "Export annotated GIF"
  ]
)

Wait for: "Yes, proceed" or "Go ahead"
If declined: Ask for modifications
```

### Step 3: Start Recording

Initialize GIF recording and capture first frame:

```
gif_creator(action="start_recording", tabId=123)
computer(action="screenshot", tabId=123)  ← REQUIRED first frame
```

### Step 4: Execute Workflow

**Two modes:**

**User-Guided (complex/manual workflows):**
```
Assistant: "Click the '+' icon, then 'New repository'"
[User performs action - captured automatically]
Assistant: "Fill in repository name"
[User types - captured]
```

**Automated (pre-approved repetitive steps):**
```
computer(action="left_click", coordinate=[850, 120], tabId=123)
wait(duration=2)
form_input(ref="ref_1", value="my-project", tabId=123)
computer(action="left_click", ref="ref_2", tabId=123)
```

**Hybrid:** Start user-guided, switch to automated for repetitive parts.

### Step 5: Monitor Session

Track errors and verify API calls during recording:

```
read_console_messages(
  tabId=123,
  pattern="error|exception|failed",
  onlyErrors=true
)

read_network_requests(
  tabId=123,
  urlPattern="/api/"
)

If errors found:
- Inform user immediately
- Ask whether to continue or restart
- Include error context in final GIF
```

### Step 6: Stop and Export

Finalize recording and export annotated GIF:

```
computer(action="screenshot", tabId=123)  ← REQUIRED final frame
gif_creator(action="stop_recording", tabId=123)
gif_creator(
  action="export",
  tabId=123,
  download=true,
  filename="github-create-repo-tutorial.gif",
  options={
    showClickIndicators: true,
    showActionLabels: true,
    showProgressBar: true,
    showWatermark: true,
    quality: 10
  }
)

Verify download successful and inform user.
```

## Supporting Files

**references/**
- `mcp-tools-reference.md` - Detailed MCP tool parameters and patterns
- `troubleshooting.md` - Common issues and solutions (365 lines)

**examples/**
- `examples.md` - 8 comprehensive workflow examples:
  - GitHub repo creation (user-guided)
  - Notion database setup (complex)
  - Jira epic creation (automated)
  - Google Workspace user (privacy-aware)
  - Stripe refund (API verification)
  - Slack channel (hybrid mode)
  - AWS EC2 launch (long-form)
  - Error reproduction (debugging)

## Expected Outcomes

**Successful Recording:**
```
✅ Workflow Recorded Successfully

Session: GitHub - Create New Repository
Duration: 45 seconds, Frames: 23, Size: <2MB
GIF: github-create-repo-tutorial.gif (Downloads/)
Annotations: Click indicators, labels, progress bar, watermark
Console: 0 errors
Network: 3 API calls successful (POST /repos → 201)

Tutorial ready for sharing!
```

**Recording with Warnings:**
```
⚠️ Workflow Recorded with Warnings

Warnings:
1. Console: "Deprecated API call"
2. Network: GET /preferences (429 Rate Limited)

GIF exported with warning annotations.
Recommendation: Review before sharing.
```

## Expected Benefits

| Metric | Before | After | Improvement |
|--------|--------|-------|-------------|
| Tutorial creation time | 30-60 min | 5-10 min | 80% faster |
| Credential exposure risk | High | None | 100% safer |
| Annotation consistency | Manual | Automated | 100% reliable |
| Error detection | Manual | Real-time | Immediate visibility |

## Success Metrics

A successful recording meets all criteria:

✅ User approved plan before recording started
✅ GIF captured all workflow steps
✅ Annotations clearly show clicks and actions
✅ No credentials visible in frames
✅ Console/network monitoring completed
✅ GIF downloaded successfully
✅ File size reasonable (<5MB for 30-60 sec)
✅ Visual quality sufficient for tutorial use

## Requirements

**Browser:** Chrome with MCP integration, authenticated session active
**User:** Explicit approval, clear workflow steps, awareness of recording scope
**Technical:** MCP tools (tabs_context_mcp, gif_creator, computer), network access, disk space

## Red Flags to Avoid

1. **Starting recording without approval** - Always use update_plan first
2. **Recording sensitive data entry** - Pause before passwords/keys
3. **Missing first/last frames** - Always screenshot after start and before stop
4. **Ignoring console errors** - Always read console_messages during workflow
5. **Not monitoring network** - Always check network_requests for failures
6. **Exporting without annotations** - Enable all indicators/labels
7. **Vague filenames** - Use "github-create-repo.gif", not "recording.gif"
8. **Skipping verification** - Confirm GIF downloaded successfully
9. **Recording without context** - Get tabs_context_mcp first
10. **Continuing after critical errors** - Ask user whether to continue

## Notes

**Privacy Protection:**
- NEVER record sensitive data entry (passwords, credit cards, API keys)
- Ask user to navigate away from sensitive pages before recording
- Warn if sensitive data visible in current state
- Consider pausing recording during credential entry

**Performance:**
- Long recordings (>2 min) create large GIFs (>10MB)
- Split workflows into multiple shorter GIFs if needed
- Use quality=10 for size/clarity balance
- Slow down actions for clearer captures

**Browser Session:**
- Recording captures visual state only (not DOM/cookies)
- User remains authenticated after completion
- No session state modified (read-only, safe for production)

**Best Practices:**
- Test workflow manually before recording
- Slow down actions for better frame separation
- Add pauses between steps (1-2 seconds)
- Narrate actions in chat during recording for context
- Review console/network logs before exporting
- Use descriptive filenames for easy identification

**Workflow Patterns:**
- **User-Guided:** Best for complex/manual workflows
- **Automated:** Best for repetitive/approved workflows
- **Hybrid:** Start user-guided, switch to automated for repetition

**Integration:**
- Use with `quality-code-review` - Record d