ui-ux-research
Use when analyzing UI patterns across codebases, comparing design system implementations, auditing UI consistency, or understanding existing patterns before implementation
When & Why to Use This Skill
The UI/UX Research skill is a specialized tool designed to analyze UI patterns, audit design system consistency, and evaluate user experience directly within codebases. It bridges the gap between design and development by automating the discovery of design debt, ensuring WCAG accessibility compliance, and maintaining visual standards across complex frontend architectures. By providing structured insights into component usage and layout patterns, it helps teams maintain a high-quality, cohesive user interface.
Use Cases
- Design System Consistency Audit: Scan large codebases to identify inconsistencies in design token usage, such as colors, spacing, and typography, to ensure brand alignment.
- Automated Accessibility (A11y) Review: Audit UI components for WCAG compliance, specifically checking for ARIA labels, keyboard navigation, and color contrast ratios.
- UI Pattern Discovery & Documentation: Analyze existing component directories to list all UI elements and their props, helping developers understand established patterns before implementation.
- Responsive Design Validation: Evaluate mobile-first compliance and identify missing breakpoints or media query inconsistencies across different application modules.
- Cross-Page Layout Comparison: Compare layout implementations across various pages to identify structural discrepancies and recommend standardization for a better user experience.
| name | ui-ux-research |
|---|---|
| description | Use when analyzing UI patterns across codebases, comparing design system implementations, auditing UI consistency, or understanding existing patterns before implementation |
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
Analyze the components directory.
List all UI components with their props interfaces.
Audit Design System Consistency
Check design token usage consistency:
- Colors
- Spacing
- Typography
Identify inconsistencies and suggest consolidation.
Compare UI Implementations
Compare layout patterns across pages.
Identify inconsistencies and recommend standardization.
Accessibility Audit
Audit components for WCAG compliance:
- Color contrast
- ARIA labels
- Keyboard navigation
Prioritize issues by severity.
Responsive Design Review
Find all responsive breakpoints and media queries.
Assess mobile-first compliance.
Identify missing responsive considerations.
Pattern Search Template
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
## 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-aesthetics |
| Need accessibility fixes | accessibility-audit |