skills.rest
Kuass
KuassCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

ui-ux-research

Analyzes UI patterns, design systems, and accessibility compliance across codebases.

1|Updated Mar 4, 2026
Search Tags:#ui#consistency#accessibility#design system#ux#component audit
One-click install
npx skills add https://github.com/Kuass/kiro-gateway-plus --skill ui-ux-research-kuass
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-ux-research
Source: https://github.com/Kuass/kiro-gateway-plus/tree/main/.opencode/skill/ui-ux-research
Command: npx skills add https://github.com/Kuass/kiro-gateway-plus --skill ui-ux-research-kuass

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes 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 different parts of a codebase or multiple projects.

Core Features & Use Cases

  • Component Discovery: Identifies and lists all UI components along with their associated props.
  • Design System Auditing: Checks for consistent usage of design tokens (colors, spacing, typography).
  • Implementation Comparison: Compares layout patterns and responsive design strategies across different views.
  • Accessibility Review: Audits components for WCAG compliance.

Quick Start

Research UI patterns across codebases by finding all UI components with their props interfaces.

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 UI consistency and design token usage across my codebase?▼

You audit UI consistency by analyzing your codebase to identify components, check design token usage for colors and spacing, and save structured findings to a specified artifact location for review.

What is the best way to discover all UI components and their props interfaces?▼

The best way to discover UI components is scanning the codebase to identify and list all components alongside their associated props, providing a comprehensive inventory for design system research.

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

To check WCAG compliance, audit identified UI components for accessibility issues, ensuring layout patterns and design system implementations meet necessary responsive design and compliance standards.

Can I compare layout patterns and responsive design strategies across different views?▼

Yes, compare layout patterns by analyzing UI implementations across different views in your codebase, allowing you to systematically review and contrast responsive design strategies.

Does this UI pattern analysis work without specific design system dependencies?▼

Yes, UI pattern analysis operates without dependencies, systematically researching and comparing design system implementations and component layouts directly within your defined codebase constraints.

Related Skills

Explore More Design & Creative Skills→
SL-A-SHSL-A-SH

extract

Extract reusable UI components, design tokens, and interaction patterns from codebases.

Community
Intermediate
cris-achiardicris-achiardi
62

ai-component-metadata

Generate AI-ready metadata TSX exports from React/TypeScript components.

Community
Intermediate
alo-expalo-exp
6

design-handoff

Generate developer handoff specs with layout, tokens, component props, states, breakpoints, and accessibility notes from Figma URLs or descriptions.

Official
Advanced
pvillegapvillega
23

wcag-audit

Detect WCAG violations via ESLint plugins and axe-core runtime scans.

Community
Advanced