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.
- Installs
- 177
- Last 24h
- —
- Trending rank
- —
- Security
- Not audited
Install
Works with every agent the skills CLI supports.
npx skills add https://github.com/travisjneuman/.claude --skill ui-research- 01
Install
Run the command in your project. The CLI asks which agents to install for.
- 02
Describe the task
Ask your agent for something this skill covers. It loads ui-research automatically when relevant.
- 03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.
SKILL.md
The instructions your agent reads when the skill is triggered.
UI Research
Research real products before designing new UI, so the result is grounded in how shipped products solve the problem.
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
Use before:
- Creating new UI components
- Designing landing pages
- Building dashboards or admin UIs
- Developing mobile app screens
- Any visual/frontend work
Research Workflow
Phase 1: Define
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
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
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
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
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
- Cream/off-white page background by default
- Italic accent words inside headlines
- Numbered "01 / 02 / 03" section labels
- Monospace eyebrow labels
- Pill-shaped buttons everywhere
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
FAQ
What does the ui-research skill do?
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.
How do I install ui-research?
Run npx skills add https://github.com/travisjneuman/.claude --skill ui-research in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/ui-research/ (personal) or .claude/skills/ui-research/ (project).
Which AI agents can use ui-research?
Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.
Is ui-research safe to install?
No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.
Who maintains ui-research?
It is published by travisjneuman in travisjneuman/.claude. It has 177 recorded installs.
More from travisjneuman/.claude
document-skills
travisjneuman/.claude
Professional document creation, editing, and analysis for Office formats (docx, pdf, pptx, xlsx). Use when working with Word documents, PDFs, PowerPoint presentations, or Excel spreadsheets.
brand-identity
travisjneuman/.claude
Brand strategy and identity design for businesses and products. Use when creating brand guidelines, developing visual identity systems, or defining brand positioning.
travel-planner
travisjneuman/.claude
Travel destination research and daily itinerary creation with logistics planning, budget tracking, and experience optimization. Use when planning trips, creating travel itineraries, comparing destinations, or organizing travel logistics.
business-strategy
travisjneuman/.claude
Business strategy expertise for strategic planning, competitive analysis, market entry, M&A strategy, portfolio management, and strategic decision-making. Use when analyzing competitive positioning, planning growth strategies, or making strategic decisions.
graphic-design
travisjneuman/.claude
Professional graphic design principles for digital and print media. Use when creating visual designs, choosing color palettes, typography, layouts, or providing design feedback.
real-estate-analyzer
travisjneuman/.claude
Open the skill to read its SKILL.md instructions.
Popular frontend & design skills
setup-matt-pocock-skills
mattpocock/skills
Configure this repo for the engineering skills: set up its issue tracker, triage label vocabulary, and domain doc layout. Run once before first use of the other engineering skills.
frontend-design
anthropics/skills
Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.
hyperframes-animation
heygen-com/hyperframes
All animation knowledge for HyperFrames — atomic motion rules, multi-phase scene blueprints, scene transitions, broader motion-design techniques, AND the seven runtime adapters (GSAP default, plus Lottie, Three.js, Anime.js, CSS keyframes, Web Animations API, TypeGPU). Use for any motion or animation task: pick 2-4 rules and compose, or load a blueprint, or look up runtime-specific API (e.g. GSAP eases / Lottie player / Three.js mixer). Also covers auditing an existing composition's choreography (animation map) and 24 named text-animation effects. HyperFrames-native: single paused timeline, seek-safe, deterministic.
prototype
mattpocock/skills
Build a throwaway prototype to answer a design question. Use when the user wants to sanity-check whether a state model or logic feels right, or explore what a UI should look like.
hyperframes-core
heygen-com/hyperframes
The HyperFrames composition contract — build one renderable project. Use for composition structure, the data- timing attributes, class="clip", tracks, sub-compositions, variables, framework-owned media playback, deterministic-render rules, and validation. Read before writing composition HTML.
vercel-react-best-practices
vercel-labs/agent-skills
React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.