ui-ux-research

Analyze UI components, tokens, and accessibility across codebases to audit design system consistency.

Updated Feb 5, 2026

Search Tags:#ui #accessibility #ux #design-system #responsive-design #pattern-analysis #component-audit

Ready to run

npx skills add https://github.com/Khoiwall/be_vidify --skill ui-ux-research-khoiwall

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: ui-ux-research
Source: https://github.com/Khoiwall/be_vidify/tree/main/.opencode/skill/ui-ux-research
Command: npx skills add https://github.com/Khoiwall/be_vidify --skill ui-ux-research-khoiwall

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

UI pattern analysis across codebases to audit and harmonize design system usage, reducing fragmentation and improving consistency.

Core Features & Use Cases

Find All UI Components: Analyze the components directory and surface all UI components and their props interfaces.
Audit Design System Consistency: Check design token usage (colors, spacing, typography) and verify consistency across pages and components.
Compare UI Implementations: Compare layout and interaction patterns across pages to standardize approaches.
Accessibility Audit: Audit components for WCAG considerations, including color contrast and keyboard navigation.
Responsive Design Review: Identify breakpoints and responsive behaviors to ensure mobile-first and scalable design.

Quick Start

Analyze the repository for UI components, tokens, and usage patterns to generate a design-consistency report.

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 patterns to unify a fragmented design system?▼

To audit UI patterns and unify design systems, analyze your codebase to identify components, evaluate design token usage, and compare layout patterns to propose standardization. This reduces UI fragmentation and ensures consistency across large-scale web apps.

How do I check design token consistency across my web app components?▼

Checking design token consistency involves analyzing your components directory to evaluate colors, spacing, and typography usage. By scanning token application across pages and components, you can identify discrepancies and generate a report to harmonize the design system.

Can I audit component accessibility and WCAG color contrast in a large codebase?▼

Yes, you can audit component accessibility across a large codebase by evaluating WCAG considerations like color contrast and keyboard navigation. The analysis targets component interfaces to identify accessibility gaps and propose standardization for compliance.

How do I identify responsive design breakpoints and mobile-first behaviors in existing components?▼

Identifying responsive design breakpoints requires analyzing existing components to evaluate their responsive behaviors. The analysis scans your repository to verify mobile-first scalability and ensure consistent responsive rules across the UI implementation.

Does this design system audit work for large-scale web apps and component repositories?▼

Yes, this design system audit is built for large-scale web apps and component repositories. It supports pattern discovery by analyzing directories, evaluating props interfaces, and generating artifacts for memory storage to handle extensive codebases effectively.

What is the best way to compare UI implementations across different pages?▼

The best way to compare UI implementations across pages is to analyze layout and interaction patterns directly within the codebase. By evaluating these patterns, you can standardize approaches, reduce fragmentation, and generate templates for consistent UI development.