ui-and-ux-expert

Audit Next.js and React UI/UX against repository constraints and user-facing states.

Updated May 3, 2026

Search Tags:#ui #accessibility #react #next.js #storybook #ux #design-system

Ready to run

npx skills add https://github.com/david-nossebro/agent-commons --skill ui-and-ux-expert

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: ui-and-ux-expert
Source: https://github.com/david-nossebro/agent-commons/tree/main/shared/skills/ui-and-ux-expert
Command: npx skills add https://github.com/david-nossebro/agent-commons --skill ui-and-ux-expert

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

It helps you turn vague UI improvement requests into product-ready UX and implementation guidance that fits your Next.js/React app, including the states users actually experience.

Core Features & Use Cases

End-to-end UX direction for flows, screens, component behavior, and interaction details.
Implementation-capable recommendations aligned to repository constraints, design-system patterns, and Next.js/React rendering boundaries.
State completeness and accessibility-first judgment across loading, empty, error, success, disabled, and permission-driven variants.
Storybook-ready review workflow to validate component states and variants in isolation when available.

Quick Start

Use ui-and-ux-expert to redesign this Next.js/React UI so the flow, hierarchy, interactive states, and accessibility are correct and implementation-ready.

Frequently Asked Questions about ui-and-ux-expert

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

FAQPage Schema

How do I plan accessible UX states for a React component flow?▼

Accessible UX states for a React component flow are planned by mapping hierarchy, interaction behavior, and state modeling across loading, empty, error, success, disabled, and permission-driven variants. This ensures complete user-facing states align with repository constraints and design-system patterns.

What is the best way to audit a Next.js UI for design-system consistency?▼

Auditing Next.js UI for design-system consistency involves inspecting /Brand and /Design directories first, reconciling documentation with actual code, and validating component variants in isolation using Storybook when available.

Can I use Storybook to review interactive states and responsiveness for Next.js apps?▼

Storybook can review interactive states and responsiveness for Next.js apps by validating component states and variants in isolation. This workflow ensures interaction details and accessibility judgments are implementation-ready before integration.

How do I turn vague UI improvement requests into implementation-ready React code guidance?▼

Vague UI improvement requests are transformed into implementation-ready React guidance by producing structured design decisions that map to real repository constraints, covering hierarchy, interaction behavior, state modeling, and accessibility.

Does redesigning React UX require reconciling existing design documentation with code?▼

Redesigning React UX requires reconciling existing design documentation with code by inspecting /Brand and /Design directories first. This ensures actionable UX direction aligns with actual repository constraints and Next.js rendering boundaries.