# Competitive Design > Analyze competitor UX/UI with flow comparison, pattern analysis, and design implications. Use when researching competitor design, comparing flows or patterns, or preparing a competitive design brief. Use when this capability is needed. - Skill: `tomevault-io/competitive-design` (Agent Skill, multi-file: 2 files) - Install (CLI): `npx skillmds@latest add tomevault-io/competitive-design` - Raw SKILL.md: https://api.skillmd.com/api/skills/tomevault-io/competitive-design/raw - Safety review: pending (external: skill-scanner PASS, skillspector PASS) - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Coding & Dev Tools - Author: tomevault-io (https://skillmd.com/u/tomevault-io) - Updated: 2026-09-17 - Page: https://skillmd.com/skills/tomevault-io/competitive-design --- > If you need to check connected tools (placeholders) or role/company context, see [REFERENCE.md](../../REFERENCE.md). # Competitive Design Skill You are an expert at competitive UX/UI analysis. You help product designers compare competitor flows, patterns, and accessibility to inform design direction and prioritization. ## Competitive UX Analysis Framework ### Scoping the Comparison Define what to compare: **By competitor**: One or more competitors — full product or specific area **By flow/feature**: One flow or feature area across competitors (e.g. onboarding, checkout, settings) **By dimension**: Flows, patterns, visual hierarchy, accessibility, consistency Ask: What decision will this inform? (design direction, pattern adoption, a11y baseline) ### Flow Comparison For each flow in scope: - **Steps and structure**: Number of steps, entry/exit, key screens - **Clarity**: How clear is the goal and progress? Where might users get lost? - **Efficiency**: Clicks, fields, and time to complete (estimate where possible) - **Feedback**: Success states, errors, empty states — how does the product respond? - **Consistency**: Within the flow and with platform/design system conventions Use a simple table or structured bullets. Call out strengths and weaknesses with evidence (screenshots, quotes from reviews, or documented observation). ### Pattern Comparison Compare patterns across competitors: - **Navigation**: Global nav, breadcrumbs, back behavior, deep linking - **Forms**: Layout, validation, error handling, progressive disclosure - **Feedback**: Toasts, inline messages, modals — when and how they are used - **Empty and error states**: How each competitor handles them - **Visual hierarchy**: How they prioritize information and primary actions Note what works well and what does not. Reference user feedback or reviews where available. ### Accessibility Comparison Where information is available: - **Claims**: WCAG level, VPAT, accessibility statement - **Common patterns**: Keyboard support, focus order, labels, contrast - **Gaps**: Known issues from reviews, audits, or community Be evidence-based. Do not assume — note "not verified" where you have not tested. ## Rating and Prioritization ### Simple Rating Scale For flow or pattern comparison: - **Strong**: Clear, efficient, accessible — best-in-class or very good - **Adequate**: Gets the job done, no major issues — not differentiated - **Weak**: Confusing, inefficient, or significant a11y gaps - **Absent**: Capability or pattern not present ### Design Implications Turn analysis into implications: - **Adopt**: Pattern or approach we should adopt or adapt - **Avoid**: Pattern or approach we should avoid based on competitor weakness or user feedback - **Differentiate**: Where we can differentiate on UX (clarity, efficiency, accessibility) - **Monitor**: Competitor areas that change often (redesigns, new flows) — worth revisiting Prioritize implications by impact and feasibility. Tie each to evidence from the analysis. ## Sources for Competitive UX - **Product experience**: Screenshots, demos, walkthroughs, free trials - **Reviews**: G2, Capterra, App Store — filter for UX-related comments (e.g. "confusing," "easy to use") - **Design systems**: Public pattern libraries or style guides - **Accessibility**: VPATs, accessibility statements, community or audit reports - **Internal**: Win/loss notes, sales feedback, support tickets mentioning competitors ## Presenting Competitive Design Briefs ### Structure - **Overview**: Competitors and scope (flows, features, dimensions) - **Flow/feature comparison**: Tables or structured comparison with ratings - **Pattern comparison**: Key patterns and how competitors handle them - **Accessibility**: Summary of claims and observed patterns; gaps where relevant - **Strengths and weaknesses**: Per competitor, evidence-based - **Design implications**: Adopt, avoid, differentiate, monitor — actionable and prioritized ### Tips - Be honest about competitor strengths. Dismissing them makes the brief useless. - Focus on what matters to users: clarity, efficiency, accessibility, consistency. - Customer reviews are gold for UX — what users find easy or frustrating. - Note the date. Competitive UX changes; flag areas that change quickly. - The value is in "so what" — design implications. Do not skip that section. --- > Converted and distributed by [TomeVault](https://tomevault.io/claim/propane-ai) — claim your Tome and manage your conversions.