ReddRadar
Agent skill
ui-research
Research-first UI/UX design workflow. Use BEFORE any frontend visual work to research modern patterns, gather inspiration from real products, and avoid generic AI-generated looks. Mandatory prerequisite for quality UI work.
Install this agent skill to your Project
npx add-skill https://github.com/majiayu000/claude-skill-registry/tree/main/skills/data/ui-research
SKILL.md
UI Research
Research before you design. Every time.
This skill ensures UI work is informed by real-world inspiration, modern patterns, and human-centered design - not generic AI output.
Essential Reference: See UI Inspiration Sources
When to Use This Skill
ALWAYS use before:
- Creating new UI components
- Designing landing pages
- Building dashboards or admin UIs
- Developing mobile app screens
- Any visual/frontend work
This skill is MANDATORY for quality UI work.
Research Workflow
Phase 1: Define (5 min)
Before searching, answer:
1. What am I building? (component, page, flow)
2. What platform? (web, iOS, Android, desktop)
3. What industry? (SaaS, e-commerce, fintech, etc.)
4. What feeling? (professional, playful, minimal, bold)
5. What constraints? (existing brand, tech stack, timeline)
Phase 2: Research (15-30 min)
Search Strategy:
# For each UI task, search at least 3 sources:
# 1. Real products (MOST IMPORTANT)
Search: Mobbin, UI Sources, Refero
Why: See how real companies solved this problem
# 2. Curated galleries
Search: Land-book, Awwwards, Godly
Why: High-quality, vetted designs
# 3. Component patterns
Search: shadcn/ui, Collect UI, Dribbble
Why: Specific UI element inspiration
Search Queries by Task:
| Building | Search Terms |
|---|---|
| Dashboard | "analytics dashboard", "admin panel", "SaaS dashboard" |
| Landing page | "[industry] landing page", "hero section", "pricing page" |
| Mobile app | "[app type] iOS", "mobile [feature]", "[competitor] app" |
| E-commerce | "product page", "checkout flow", "cart design" |
| Auth flows | "login screen", "onboarding", "signup form" |
| Settings | "settings page", "profile settings", "preferences" |
Phase 3: Collect (10 min)
Save 5-10 examples that resonate. For each, note:
URL/Source: [where you found it]
What works: [specific elements you like]
Patterns: [repeating solutions across examples]
Unique: [what makes this stand out]
Adapt: [how to apply to our project]
Phase 4: Analyze (10 min)
Pattern Recognition:
Common patterns across examples:
- Layout: [grid, spacing, hierarchy]
- Colors: [palette trends, contrast]
- Typography: [fonts, scale, weights]
- Components: [buttons, cards, forms]
- Interactions: [hover, transitions, feedback]
Quality Checklist:
- Found 3+ real shipped products (not concepts)
- Identified repeating patterns
- Noted unique differentiators
- Considered accessibility
- Checked mobile responsiveness
Phase 5: Design Brief (5 min)
Before implementing, document:
## UI Research Brief
### Inspiration Sources
- [Link 1]: [What to adopt]
- [Link 2]: [What to adopt]
- [Link 3]: [What to adopt]
### Key Patterns to Follow
- Layout: [specific approach]
- Color: [palette direction]
- Typography: [font choices]
- Components: [style decisions]
### Differentiation
- [What makes ours unique]
- [Brand personality elements]
### Technical Approach
- Component library: [shadcn/ui, etc.]
- Animation approach: [Framer Motion, CSS]
- Responsive strategy: [mobile-first, etc.]
Source Selection Guide
By Project Type
| Project | Primary Sources | Secondary |
|---|---|---|
| SaaS App | Mobbin, UI Sources | Land-book, shadcn/ui |
| Landing Page | Land-book, Godly | Awwwards, One Page Love |
| Mobile App | Mobbin, Screenlane | Pttrns, Apple HIG |
| E-commerce | Baymard, Awwwards | Mobbin, UI Sources |
| Dashboard | Dribbble, UI Sources | Ant Design, Tremor |
| Portfolio | Awwwards, One Page Love | Godly, personal sites |
By Platform
| Platform | Required Research |
|---|---|
| iOS | Apple HIG, Mobbin (iOS filter) |
| Android | Material 3, Mobbin (Android filter) |
| Web | Awwwards, Land-book, shadcn/ui |
| Desktop | Fluent 2, platform-specific apps |
| Cross-platform | All of the above, find common ground |
Avoiding the "AI Look"
Red Flags to Avoid
GENERIC AI PATTERNS (Don't do these):
- Blue/purple gradient backgrounds
- Perfectly symmetrical everything
- Generic blob/wave decorations
- Undraw-style illustrations
- "Hero with laptop mockup" layouts
- Default color schemes unchanged
- Cookie-cutter card grids
- Overused glassmorphism
Human Touch Elements
WHAT MAKES DESIGN FEEL HUMAN:
- Custom color palette with personality
- Intentional asymmetry
- Unique typography combinations
- Real photography or custom illustration
- Micro-interactions with character
- Subtle organic shapes
- Brand-specific details
- Thoughtful empty states
- Personality in copywriting
Quality Signals
| Aspect | Generic AI | Human-Polished |
|---|---|---|
| Color | Default blue | Custom brand palette |
| Layout | Perfect grid | Intentional variation |
| Images | Stock photos | Custom/curated imagery |
| Copy | Lorem ipsum | Real, personality-rich text |
| Animation | Standard fades | Purposeful, branded motion |
| Details | None | Hover states, micro-interactions |
Research Tools
Browser Extensions
- Muzli - Design inspiration feed
- Panda - News and inspiration dashboard
- Stylify Me - Extract site colors/fonts
Screenshot Tools
- Full Page Screen Capture - Capture entire pages
- Awesome Screenshot - Annotate and save
Organization
- Figma - Create mood boards
- Notion - Document research
- Eagle - Visual bookmark manager
- Pinterest - Quick collection
Research Output Template
# UI Research: [Component/Page Name]
## Context
- **Building:** [what]
- **Platform:** [where]
- **Constraints:** [limitations]
## Inspiration (5-10 sources)
### 1. [Company/Site Name]
- **URL:** [link]
- **Screenshot:** [attached]
- **What works:** [specific elements]
- **Adopt:** [what to use]
### 2. [Company/Site Name]
...
## Pattern Analysis
### Layout
- [Common layout patterns observed]
### Color
- [Palette trends]
### Typography
- [Font and scale patterns]
### Components
- [UI element patterns]
## Design Direction
### Must Have
- [Non-negotiable elements]
### Nice to Have
- [Enhancement opportunities]
### Avoid
- [Anti-patterns to skip]
## Technical Stack
- **Components:** [library choice]
- **Styling:** [approach]
- **Animation:** [library/method]
Integration with Other Skills
After research, proceed to:
| Next Step | Skill to Use |
|---|---|
| Visual implementation | frontend-enhancer |
| Design system setup | generic-design-system |
| UX flow design | generic-ux-designer |
| Animation work | ui-animation |
| Brand alignment | brand-identity |
Quick Start Checklist
Before ANY UI work:
- Defined what I'm building
- Searched 3+ inspiration sources
- Collected 5+ relevant examples
- Identified repeating patterns
- Noted unique differentiators
- Created brief design direction
- Checked for "AI look" red flags
- Planned human touch elements
See Also
- UI Inspiration Sources - Full source list with URLs
- Design Patterns - Visual design tokens
frontend-enhancer- For implementation after researchgeneric-design-system- For design system workgraphic-design- For visual design principles
Research is not optional. It's the difference between generic and exceptional.
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
majiayu000/claude-skill-registry
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
majiayu000/claude-skill-registry
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
majiayu000/claude-skill-registry
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
majiayu000/claude-skill-registry
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
majiayu000/claude-skill-registry
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
majiayu000/claude-skill-registry
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
Didn't find tool you were looking for?