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.
View on GitHubFebruary 3, 2026
Select agents to install to:
npx add-skill https://github.com/propane-ai/kits/blob/main/plugins/design/skills/competitive-design/SKILL.md -a claude-code --skill competitive-designInstallation paths:
.claude/skills/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