ui-ux-audit

Audit and refactor entity index and detail page UI layouts.

16|11|Updated Jun 12, 2025
One-click install
npx skills add https://github.com/liwoo/goravel-inertia-tw-starter --skill ui-ux-audit-liwoo
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: ui-ux-audit
Source: https://github.com/liwoo/goravel-inertia-tw-starter/tree/main/.claude/skills/ui-ux-audit
Command: npx skills add https://github.com/liwoo/goravel-inertia-tw-starter --skill ui-ux-audit-liwoo

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Audit and refactor UI across entity index and detail pages to reduce column clutter and improve readability.

Core Features & Use Cases

  • Enforce a 3-4 column rule for desktop tables and a single composite mobile column.
  • Standardize status color palettes with dark mode compatibility.
  • Provide reusable config for dropdown options and shared validation rules across entities.
  • Use consistent error, loading, and empty state patterns for CRUD pages.

Quick Start

Run a UI/UX audit pass on the target entity screens to identify column density, icon usage, and form validation improvements, then apply the refactors in the frontend codebase.

Frequently Asked Questions about ui-ux-audit

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

FAQPage Schema
How do I reduce column clutter in React entity tables for better readability?

You can audit entity index and detail pages to reduce column clutter by enforcing a 3-4 column rule for desktop tables and a single composite mobile column. This UI refactoring improves overall readability across tablet and mobile layouts.

What is a UI/UX audit pass for frontend entity views?

A UI/UX audit pass for frontend entity views evaluates column density, icon usage, and form validation patterns across desktop and mobile layouts. It enforces consistent color palettes and shared option lists to standardize index and detail pages.

How do I standardize status color palettes and validation patterns across multiple entities?

You can standardize status color palettes by applying reusable configuration with dark mode compatibility across entities. This enforces shared validation rules and eliminates duplicated status configurations between your index tables and detail views.

Can I use Tailwind and Inertia to enforce consistent CRUD error and loading states?

Yes, you can use Tailwind and Inertia to enforce consistent error, loading, and empty state patterns for CRUD pages. The UI audit applies shared validation rules and standardized layouts across your frontend codebase for all entities.

Does this design review approach handle both desktop and mobile layouts?

Yes, this design review approach explicitly handles desktop, tablet, and mobile layouts. It reduces column density on desktop tables and uses a single composite column for mobile screens to ensure consistent entity views across all breakpoints.