ux-rx

Evaluate Next.js and shadcn/ui projects across 11 UX dimensions with scored scorecards.

Updated Mar 15, 2026
One-click install
npx skills add https://github.com/acardozzo/rx-suite --skill ux-rx
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: ux-rx
Source: https://github.com/acardozzo/rx-suite/tree/main/skills/ux-rx
Command: npx skills add https://github.com/acardozzo/rx-suite --skill ux-rx

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill diagnoses and prescribes improvements for user experience and interface design in Next.js applications using shadcn/ui, ensuring a polished, accessible, and performant user journey.

Core Features & Use Cases

  • Comprehensive UX Audit: Evaluates against 11 dimensions including Accessibility (WCAG), Performance (Core Web Vitals), Component Usage (shadcn), Responsiveness, and more.
  • Actionable Recommendations: Provides a scored scorecard, opportunity maps, and per-dimension improvement plans.
  • shadcn Integration: Recommends specific shadcn registry components to implement improvements, including installation commands.
  • Visual Transformation: Generates Before/After Mermaid diagrams illustrating user flow improvements.
  • Use Case: Audit an existing dashboard page to identify UX bottlenecks, ensure WCAG AA compliance, and receive concrete steps to improve user satisfaction and task completion rates, leveraging shadcn components for faster implementation.

Quick Start

Run the ux-rx skill on the 'app' directory to evaluate the user experience.

Frequently Asked Questions about ux-rx

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

FAQPage Schema
How do I run a UX audit on a Next.js application?

Run a UX audit by evaluating your Next.js application directory against 11 dimensions including accessibility, performance, and component usage. This process generates a scored scorecard, opportunity maps, and actionable improvement plans to enhance user experience.

How do I check my Next.js project for WCAG compliance?

Check WCAG compliance by auditing your Next.js application for accessibility issues. The evaluation measures against specific accessibility sub-metrics to identify opportunities for improvement and ensure a polished, accessible user journey.

What is the best way to improve Core Web Vitals in Next.js using shadcn/ui?

Improve Core Web Vitals by auditing your Next.js application to identify performance bottlenecks. The evaluation measures performance dimensions and provides actionable improvement plans with specific shadcn registry component recommendations to optimize rendering.

Can I use this to find missing shadcn components in my Next.js UI?

Yes, you can find missing shadcn components by auditing your Next.js application. The evaluation measures component adoption and recommends specific shadcn registry components to implement improvements, including installation commands.

Does the UX evaluation provide actionable steps for fixing interaction design?

Yes, the UX evaluation provides actionable steps for fixing interaction design. It identifies opportunities for improvement across navigation, forms, and error states, generating per-dimension improvement plans and Before/After Mermaid diagrams.

What steps do I need to take before running a shadcn/ui design audit?

Before running a shadcn/ui design audit, ensure your Next.js application components are located within the app directory. No external dependencies are required, allowing immediate evaluation of your current UI structure and design patterns.