npx claudepluginhub xoai/sageThis skill uses the workspace's default tool permissions.
<!-- sage-metadata
Researches competitors and visual trends in a niche, captures screenshots, generates moodboards, and delivers strategic UI/UX dossiers for redesigns or new features.
Conducts structured competitive analysis comparing UX patterns, features, strengths, gaps, and opportunities across rival products.
Compares design system against category benchmarks for structured gap analysis, classifying elements as MUST/SHOULD/MAY keep or SHOULD improve. Use after ux-audit/ux-research.
Share bugs, ideas, or general feedback.
Benchmark the current design against category leaders. Not to copy — to understand what conventions users already expect, and where intentional deviation creates differentiation.
Core Principle: Users don't experience your product in isolation. They bring expectations from every other product in your category. An edtech homepage that ignores conventions from Duolingo, Coursera, and Khan Academy isn't being original — it's being confusing. Research identifies what's convention (match it) vs. what's commodity (differentiate from it).
Do NOT use for:
From the current design system and project context, determine:
## Category Definition
Product type: [edtech / SaaS / e-commerce / marketplace / fintech / ...]
Page type: [homepage / landing page / dashboard / product page / ...]
Target audience: [students / professionals / developers / consumers / ...]
Market: [geography, language — affects design conventions]
If unclear, ask the user: "Is this primarily a [A] or [B]? This determines which competitors I research."
Select reference products based on:
## Reference Products
1. [Product] — [why selected: direct competitor / category leader / aspirational]
2. [Product] — [why]
3. [Product] — [why]
For the Prep homepage example:
For each reference product, capture (via web search and page analysis):
### [Product Name]
**Hero pattern:**
[What's in the hero? Headline copy approach? CTA text? Visual treatment?
Single CTA or multiple? Video? Animation? Social proof in hero?]
**Value proposition:**
[How do they explain what they do? How many words? What framework —
problem → solution → benefit? Feature list? Outcome-focused?]
**Social proof approach:**
[Testimonials? Logos? Numbers? Scores? User photos? Video testimonials?
Placement — above fold or below? How prominent?]
**CTA strategy:**
[Primary CTA text and placement. How many CTAs on page?
Free trial? Demo? Sign up? Pricing? What's the conversion path?]
**Visual style:**
[Color approach? Illustration vs. photography? Light vs. dark?
Playful vs. professional? Information density?]
**Mobile approach:**
[What changes on mobile? What's hidden? What's prioritized?
Sticky nav? Sticky CTA?]
From the analysis, extract patterns that appear in 3+ reference products:
## Category Conventions (appearing in most leaders)
1. [Convention]: [what it is, who does it]
Example: "Hero with single clear CTA — Duolingo, Coursera, Khan Academy
all use one primary CTA above the fold"
2. [Convention]: [what it is]
Example: "Social proof near hero — score numbers, student count, or
testimonials within first viewport"
3. ...
Patterns where reference products are similar to each other but different from the audited product — or where the category has a gap:
## Differentiation Opportunities
1. [Opportunity]: Most competitors [do X]. Current product [does Y differently].
Assess: is Y intentionally different (brand identity) or accidentally missing?
2. [Opportunity]: No competitor [does Z]. Could this be a meaningful differentiator?
3. [Opportunity]: Competitors [do X poorly]. An excellent version of X would stand out.
Save to .sage/work/<feature>/category-benchmarks.md:
# Category Benchmarks: [product] — [page type]
**Category:** [edtech / SaaS / ...]
**References analyzed:** [count]
**Date:** [timestamp]
## Reference Products
[from Step 2]
## Category Conventions
[from Step 4 — what most leaders do]
## Differentiation Opportunities
[from Step 5 — where to stand out]
## Detailed Analysis
[from Step 3 — per-product breakdowns]
Show to user: "Here's what category leaders do. This feeds into the design evaluation — we'll compare your current design against these patterns."
MUST (violation = uninformed redesign):
SHOULD (violation = shallow research):
MAY (context-dependent):