UI/UX Research Skill
Research UI patterns, design systems, and user experience across codebases.
When to Use
- •Analyzing UI patterns across large codebases
- •Comparing design system implementations
- •Auditing UI consistency
- •Understanding existing patterns before implementation
Research Patterns
Find All UI Components
code
Analyze the components directory. List all UI components with their props interfaces.
Audit Design System Consistency
code
Check design token usage consistency: - Colors - Spacing - Typography Identify inconsistencies and suggest consolidation.
Compare UI Implementations
code
Compare layout patterns across pages. Identify inconsistencies and recommend standardization.
Accessibility Audit
code
Audit components for WCAG compliance: - Color contrast - ARIA labels - Keyboard navigation Prioritize issues by severity.
Responsive Design Review
code
Find all responsive breakpoints and media queries. Assess mobile-first compliance. Identify missing responsive considerations.
Pattern Search Template
code
Has [PATTERN] been implemented? Show: 1. Files containing the pattern 2. Implementation approach 3. Consistency across usages 4. Potential improvements
Common patterns to search:
- •Dark mode toggle
- •Form validation
- •Loading states
- •Error boundaries
- •Toast notifications
- •Modal dialogs
- •Data tables
Integration with Beads
For task-constrained research:
- •Check bead spec constraints
- •Research within those constraints
- •Save findings to bead artifacts
Storage
Save research findings to .opencode/memory/design/research/
Output Format
markdown
## Research: [Topic] ### Findings [Key discoveries] ### Current Implementation [What exists] ### Recommendations [What to improve] ### Next Steps [Actionable items]
Related Skills
| After Research | Use Skill |
|---|---|
| Need implementation | mockup-to-code |
| Need aesthetic improvements | frontend-design |
| Need accessibility fixes | accessibility-audit |