skills.rest
david-nossebro
david-nossebroCOMMUNITY
Explore all skills by this author →
GitHub

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
One-click install
npx skills add https://github.com/david-nossebro/agent-commons --skill ui-and-ux-expert
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Design & Creative Skills→
mahou-labsmahou-labs
1

teach-impeccable

Gather project design context and write a .impeccable.md document.

Official
Intermediate
oakossoakoss
1

storybook

Create Storybook stories and interaction tests for React components.

Official
Intermediate
btabaskabtabaska
1

Generate Story

Generate CSF3 Storybook stories for React components with variant coverage.

Community
Intermediate
HermeticOrmusHermeticOrmus
1

uiux-guidelines

Provide UI/UX guidelines for SVG icons and emojis in React/Next.js applications.

Community
Basic