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:
| Domain | Products to Study | |--------|-------------------| | Workspaces/Collaboration | Notion, Linear, Slack, Figma, Attio | | Data Tables | Airtable, Retool, Rows, Grist | | AI Chat | ChatGPT, Claude, Gemini, Perplexity | | Onboarding/Flows | Stripe, Plaid, Mercury, Ramp | | Settings/Admin | Vercel, Railway, PlanetScale | | Invitations/Team | Slack, Notion, Linear, Figma | | Billing/Subscriptions | Stripe, Paddle, Chargebee |
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:
| Aspect | Pattern | |--------|---------| | Layout | How is content organized? | | Navigation | How do users move between states? | | Actions | How are primary/secondary actions presented? | | Feedback | How is success/error communicated? | | Copy | What language/tone is used? |
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 researchdesign-context- Compare external patterns with internal