Chrome Auth Recorder

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",
 
)

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

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 demo of new feature
• Use with create-adr-spike - Capture research workflow
• Use with observability-analyze-logs - Record error reproduction