ReddRadar
Agent skill
ui-ux-research
Use when analyzing UI patterns across codebases, comparing design system implementations, auditing UI consistency, or understanding existing patterns before implementation
Install this agent skill to your Project
npx add-skill https://github.com/majiayu000/claude-skill-registry/tree/main/skills/data/ui-ux-research
SKILL.md
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-design |
| Need accessibility fixes | accessibility-audit |
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?