competitor-scan
Automates browser tasks to capture UI flows and gather design teardowns for internal product benchmarking.
Install
mkdir -p .claude/skills/competitor-scan && curl -L -o skill.zip "https://agentskills.codes/api/skills/download/5105" && unzip -o skill.zip -d .claude/skills/competitor-scan && rm skill.zipInstalls to .claude/skills/competitor-scan
Activation
This is the description your AI agent reads to decide when to run this skill — the better it matches your request, the more reliably it fires.
Research best-in-class products using Browser MCP and WebSearchKey capabilities
- →Capture UI screenshots
- →Navigate product flows
- →Search for design teardowns
- →Extract UI patterns
- →Benchmark against industry standards
How it works
The skill uses browser automation to capture visual flows and web search to aggregate existing design teardowns for benchmarking.
Inputs & outputs
When to use competitor-scan
- →Benchmark competitor onboarding flows
- →Capture UI screenshots for design teardowns
- →Search for existing UX case studies
About this skill
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
When not to use it
- →When researching internal product features
Limitations
- →Dependent on availability of public design teardowns
How it compares
It automates the collection of visual and analytical data instead of manually browsing and documenting competitor sites.
Compared to similar skills
competitor-scan side by side with the closest alternatives in the catalog.
| Skill | Installs | Updated | Safety | Difficulty |
|---|---|---|---|---|
| competitor-scan (this skill) | 1 | 7mo | No flags | Beginner |
| ui-ux-pro-max | 1,909 | 5mo | Review | Intermediate |
| penpot-uiux-design | 27 | 6mo | Review | Advanced |
| ui-ux-designer | 41 | 4mo | No flags | Intermediate |
Try saying
Example prompts that trigger this skill in your AI assistant.
More by WellApp-ai
View all by WellApp-ai →You might also like
ui-ux-pro-max
nextlevelbuilder
UI/UX design intelligence. 50 styles, 21 palettes, 50 font pairings, 20 charts, 8 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind). Actions: plan, build, create, design, implement, review, fix, improve, optimize, enhance, refactor, check UI/UX code. Projects: website, landing page, dashboard, admin panel, e-commerce, SaaS, portfolio, blog, mobile app, .html, .tsx, .vue, .svelte. Elements: button, modal, navbar, sidebar, card, table, form, chart. Styles: glassmorphism, claymorphism, minimalism, brutalism, neumorphism, bento grid, dark mode, responsive, skeuomorphism, flat design. Topics: color palette, accessibility, animation, layout, typography, font pairing, spacing, hover, shadow, gradient.
penpot-uiux-design
github
Comprehensive guide for creating professional UI/UX designs in Penpot using MCP tools. Use this skill when: (1) Creating new UI/UX designs for web, mobile, or desktop applications, (2) Building design systems with components and tokens, (3) Designing dashboards, forms, navigation, or landing pages, (4) Applying accessibility standards and best practices, (5) Following platform guidelines (iOS, Android, Material Design), (6) Reviewing or improving existing Penpot designs for usability. Triggers: "design a UI", "create interface", "build layout", "design dashboard", "create form", "design landing page", "make it accessible", "design system", "component library".
ui-ux-designer
sickn33
Create interface designs, wireframes, and design systems. Masters user research, accessibility standards, and modern design tools. Specializes in design tokens, component libraries, and inclusive design. Use PROACTIVELY for design systems, user flows, or interface optimization.
interactive-portfolio
davila7
Expert in building portfolios that actually land jobs and clients - not just showing work, but creating memorable experiences. Covers developer portfolios, designer portfolios, creative portfolios, and portfolios that convert visitors into opportunities. Use when: portfolio, personal website, showcase work, developer portfolio, designer portfolio.
paywall-upgrade-cro
davila7
When the user wants to create or optimize in-app paywalls, upgrade screens, upsell modals, or feature gates. Also use when the user mentions "paywall," "upgrade screen," "upgrade modal," "upsell," "feature gate," "convert free to paid," "freemium conversion," "trial expiration screen," "limit reached screen," "plan upgrade prompt," or "in-app pricing." Distinct from public pricing pages (see page-cro) — this skill focuses on in-product upgrade moments where the user has already experienced value.
aesthetic
mrgoonie
Create aesthetically beautiful interfaces following proven design principles. Use when building UI/UX, analyzing designs from inspiration sites, generating design images with ai-multimodal, implementing visual hierarchy and color theory, adding micro-interactions, or creating design documentation. Includes workflows for capturing and analyzing inspiration screenshots with chrome-devtools and ai-multimodal, iterative design image generation until aesthetic standards are met, and comprehensive design system guidance covering BEAUTIFUL (aesthetic principles), RIGHT (functionality/accessibility), SATISFYING (micro-interactions), and PEAK (storytelling) stages. Integrates with chrome-devtools, ai-multimodal, media-processing, ui-styling, and web-frameworks skills.