ui-ux-research

Analyze UI patterns and design system consistency across codebases.

Updated Jan 9, 2026
One-click install
npx skills add https://github.com/maplin-co/ai-course --skill ui-ux-research-maplin-co
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: ui-ux-research
Source: https://github.com/maplin-co/ai-course/tree/main/.opencode/skill/ui-ux-research
Command: npx skills add https://github.com/maplin-co/ai-course --skill ui-ux-research-maplin-co

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill helps in systematically analyzing and understanding UI patterns, design system implementations, and overall UI consistency across codebases, which is crucial before starting new development or refactoring.

Core Features & Use Cases

  • Component Analysis: Identifies and lists UI components along with their prop interfaces.
  • Design System Auditing: Checks for consistency in the usage of design tokens like colors, spacing, and typography.
  • Implementation Comparison: Compares layout patterns across different pages to identify and recommend standardization.
  • Accessibility Auditing: Reviews components for WCAG compliance, focusing on color contrast, ARIA labels, and keyboard navigation.
  • Responsive Design Review: Assesses adherence to mobile-first principles and identifies missing responsive considerations.

Quick Start

Use the ui-ux-research skill to audit design system consistency for colors, spacing, and typography.

Frequently Asked Questions about ui-ux-research

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I audit my codebase for UI consistency and design system usage?

Auditing UI consistency involves analyzing your codebase to identify UI components and their prop interfaces, then verifying the standardized usage of design tokens like colors, spacing, and typography. This systematic review ensures adherence to design system standards.

What is the best way to compare design system implementations across different pages?

Comparing design system implementations requires analyzing layout patterns across different pages to identify discrepancies. By evaluating these patterns side-by-side, you can pinpoint deviations and recommend standardization strategies for a unified user interface.

How do I check my UI components for WCAG compliance and accessibility?

Checking UI components for WCAG compliance involves reviewing them for adequate color contrast, valid ARIA labels, and functional keyboard navigation. This accessibility auditing ensures your interface is usable by people with disabilities and meets web standards.

Can I review my codebase for responsive design and mobile-first adherence?

Yes, you can review your codebase for responsive design by assessing whether components adhere to mobile-first principles. This review identifies missing responsive considerations and ensures layouts adapt correctly across different screen sizes.

When do I need to perform a UI component analysis before starting new development?

You need to perform a UI component analysis before new development or refactoring to systematically understand existing UI patterns and component prop interfaces. This research establishes a baseline, preventing duplicate work and ensuring new code matches current standards.

What are the limitations of automated UI consistency auditing?

Automated UI consistency auditing focuses on structural code analysis, identifying prop interfaces and design token usage, but it cannot evaluate subjective visual aesthetics or complex interactive user flows. It serves as a baseline check rather than a complete design replacement.