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

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