Chrome GIF Recorder

Overview

Record browser workflows as annotated GIFs with visual indicators for clicks, drags, and actions. Produces professional documentation-ready GIFs with automatic frame capture, action annotations, and quality optimization.

When to Use This Skill

Use when asked to:

•Create visual documentation of browser workflows ("record this as a GIF tutorial")
•Generate step-by-step tutorials for web applications
•Capture user flows for support tickets or bug reports
•Document repetitive processes for training materials
•Create annotated screen recordings with click indicators

Do NOT use when:

•User needs static screenshots (use screenshot tool instead)
•Recording requires audio narration (this is visual-only)
•User needs long-form video (GIFs are best under 60 seconds)

Workflow

1. Get Tab Context

Always start by getting tab context to identify available tabs:

code

tabs_context_mcp with createIfEmpty: true

This ensures you have a valid tabId for all subsequent operations.

2. Present Plan to User

Use update_plan to show the user what domains you'll visit and what actions you'll take:

code

update_plan with:
  domains: ["example.com", "app.example.com"]
  approach: [
    "Navigate to login page",
    "Fill in credentials",
    "Click submit button",
    "Navigate to dashboard"
  ]

Wait for user approval before proceeding.

3. Start Recording

Begin GIF recording immediately before workflow execution:

code

gif_creator with:
  action: "start_recording"
  tabId: <tab-id>

4. Capture First Frame (CRITICAL)

Immediately after starting recording, take a screenshot to capture the initial state:

code

computer with:
  action: "screenshot"
  tabId: <tab-id>

This ensures the GIF has a proper first frame showing the starting state.

5. Execute Workflow Steps

Perform the documented workflow using browser automation tools:

•navigate - Navigate to URLs
•computer with left_click - Click elements
•form_input - Fill form fields
•computer with type - Type text
•computer with scroll - Scroll pages
•computer with wait - Pause between actions

Timing guidance:

•Add 1-2 second waits between major actions for clarity
•Keep total workflow under 60 seconds for optimal GIF size
•Use natural pacing (not too fast, not too slow)

6. Capture Last Frame (CRITICAL)

Immediately before stopping recording, take a screenshot to capture the final state:

code

computer with:
  action: "screenshot"
  tabId: <tab-id>

This ensures the GIF has a proper last frame showing the end result.

7. Stop Recording

Stop the recording after capturing the last frame:

code

gif_creator with:
  action: "stop_recording"
  tabId: <tab-id>

8. Export with Annotations

Export the GIF with visual enhancements enabled:

code

gif_creator with:
  action: "export"
  tabId: <tab-id>
  download: true
  filename: "workflow-tutorial-<timestamp>.gif"
  options: {
    showClickIndicators: true,
    showDragPaths: true,
    showActionLabels: true,
    showProgressBar: true,
    showWatermark: true,
    quality: 10
  }

Quality settings:

•quality: 5 - Fastest encoding, larger file (good for quick previews)
•quality: 10 - Balanced (recommended default)
•quality: 20 - Higher quality, slower encoding
•quality: 30 - Best quality, slowest encoding

9. Confirm Download

The GIF will be downloaded to the user's default downloads folder. Confirm the filename and location with the user.

Best Practices

Frame Capture Anti-Pattern

CRITICAL: Always capture screenshots immediately after start_recording and immediately before stop_recording.

Why: The gif_creator tool requires explicit screenshots to create GIF frames. Without these critical screenshots:

•First frame may be missing or incorrect
•Last frame may not show final state
•GIF may appear incomplete or broken

Correct pattern:

code

1. gif_creator start_recording
2. computer screenshot  ← CRITICAL: First frame
3. [workflow actions]
4. computer screenshot  ← CRITICAL: Last frame
5. gif_creator stop_recording
6. gif_creator export

Incorrect pattern (DO NOT USE):

code

1. gif_creator start_recording
2. [workflow actions]  ← Missing first frame!
3. gif_creator stop_recording  ← Missing last frame!
4. gif_creator export

Recording Duration

•Recommended: 30-60 seconds for most tutorials
•Maximum: 90 seconds (longer GIFs become unwieldy)
•Minimum: 10 seconds (shorter workflows may need fewer screenshots)

Filename Conventions

Use descriptive, timestamped filenames:

•login-workflow-2025-12-20.gif
•checkout-process-tutorial.gif
•admin-dashboard-navigation.gif

Annotation Options

Enable by default:

•showClickIndicators: true - Orange circles at click locations
•showActionLabels: true - Black text labels describing actions
•showProgressBar: true - Orange progress bar at bottom

Optional:

•showDragPaths: true - Red arrows for drag operations (disable if no dragging)
•showWatermark: true - Claude logo (disable for client deliverables)

Quality vs. Speed Trade-offs

Use Case	Quality Setting	Encoding Speed	File Size
Quick preview	5	Fast	Large
Documentation	10	Moderate	Medium
Polished tutorial	20	Slow	Small
Final deliverable	30	Very slow	Smallest

Common Workflows

Simple Page Navigation

code

1. tabs_context_mcp (get tabId)
2. update_plan (domains + approach)
3. gif_creator start_recording
4. computer screenshot (first frame)
5. navigate to page
6. computer wait (2 seconds)
7. computer screenshot (last frame)
8. gif_creator stop_recording
9. gif_creator export (download: true, quality: 10)

Form Submission Workflow

code

1. tabs_context_mcp
2. update_plan
3. gif_creator start_recording
4. computer screenshot (first frame)
5. navigate to form
6. form_input (fill fields)
7. computer left_click (submit button)
8. computer wait (page load)
9. computer screenshot (last frame)
10. gif_creator stop_recording
11. gif_creator export

Multi-Page Tutorial

code

1. tabs_context_mcp
2. update_plan (multiple domains)
3. gif_creator start_recording
4. computer screenshot (first frame)
5. navigate to page 1
6. computer left_click (action 1)
7. computer wait (1 second)
8. navigate to page 2
9. computer left_click (action 2)
10. computer wait (1 second)
11. computer screenshot (last frame)
12. gif_creator stop_recording
13. gif_creator export

Troubleshooting

GIF appears empty or has no frames

Cause: Missing screenshot calls after start_recording or before stop_recording

Solution: Always call computer screenshot immediately after starting and before stopping recording

GIF encoding takes too long

Cause: Quality setting too high or recording too long

Solution:

•Reduce quality to 5-10 for faster encoding
•Keep workflows under 60 seconds
•Remove unnecessary wait times

Annotations not visible

Cause: Annotation options set to false

Solution: Enable options in export call:

code

options: {
  showClickIndicators: true,
  showActionLabels: true,
  showProgressBar: true
}

File size too large

Cause: Low quality setting or long recording duration

Solution:

•Increase quality setting to 20-30 for better compression
•Reduce recording duration
•Remove unnecessary frames/actions

Resources

This skill uses only MCP tools and requires no bundled resources. The example directories created during initialization can be deleted:

•scripts/ - Not needed (no automation scripts required)
•references/ - Not needed (workflow documented in SKILL.md)
•assets/ - Not needed (GIFs are generated, not templated)