Competitor Scan

Competitor Scan Skill

Research how best-in-class products solve similar problems using Browser MCP for screenshots and WebSearch for teardowns.

When to Use

• At the start of DIVERGE Loop (L1)
• When exploring new UI patterns
• When benchmarking against industry standards

Instructions

Phase 1: Identify Competitors

Use the domain competitor table:

Phase 2: Screenshot Key Flows (Browser MCP)

For each relevant competitor:

1. browser_navigate to the product URL or relevant page
2. browser_snapshot to understand the page structure
3. browser_take_screenshot to capture the UI
4. browser_click / browser_type to navigate through flows

Capture:

• Entry points (how users start the flow)
• Key screens (main interactions)
• Edge cases (empty states, errors)
• Micro-interactions (hover states, transitions)

Phase 3: Research Teardowns (WebSearch)

Search for existing analysis:

WebSearch "[Product] UI teardown [feature]"
WebSearch "[Product] UX case study [feature]"
WebSearch "[Feature] best practices design patterns"

Phase 4: Extract Patterns

For each competitor, note:

Output Format

After running this skill, output:

## Competitor Scan

### Products Analyzed
1. [Product A] - [URL or feature]
2. [Product B] - [URL or feature]
3. [Product C] - [URL or feature]

### Key Patterns Observed

| Pattern | Product | Description |
|---------|---------|-------------|
| [Pattern] | [Product] | [How they do it] |

### Insights for Our Design
- [Insight 1]: [How to apply]
- [Insight 2]: [How to apply]

### Screenshots Captured
- [Description of screenshot 1]
- [Description of screenshot 2]

Invocation

Invoke manually with "use competitor-scan skill" or follow Ask mode DIVERGE loop which references this skill's phases.

Related Skills

• problem-framing - Define what problem to research
• design-context - Compare external patterns with internal