baseline-ui

Audit Tailwind-based web interfaces for visual polish and UX completeness.

1|Updated May 12, 2026
One-click install
npx skills add https://github.com/MoxyWolfLLC/moxywolf-plugins --skill baseline-ui-moxywolfllc
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: baseline-ui
Source: https://github.com/MoxyWolfLLC/moxywolf-plugins/tree/main/plugins/saas-frontend-designer/skills/baseline-ui
Command: npx skills add https://github.com/MoxyWolfLLC/moxywolf-plugins --skill baseline-ui-moxywolfllc

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill solves inconsistent, cluttered, or “AI-sloppy” UI presentation by systematically raising spacing, typography, color, and interaction quality to a clean baseline.

Core Features & Use Cases

  • Visual polish audit: Reviews an existing interface in a fixed, high-leverage order to compound improvements rather than scatter changes.
  • Consistent Tailwind design system rules: Normalizes spacing to a 4px grid, aligns typography to a clear 4–5 level hierarchy, reduces to a controlled gray/brand palette, and standardizes border radius and shadow depth.
  • UI completeness checks: Verifies interactive states (hover/focus/disabled), plus loading and empty states, and form labeling/error patterns to remove common UX rough edges.

Quick Start

Run baseline-ui on the current UI codebase and ask for a sequential spacing-to-typography-to-color visual polish pass that fixes focus/disabled states, loading/empty states, and form polish while removing AI-generated styling inconsistencies.

Frequently Asked Questions about baseline-ui

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

FAQPage Schema
How do I fix inconsistent spacing and typography hierarchy in a Tailwind CSS interface?

To fix inconsistent UI presentation, a sequential visual polish audit normalizes Tailwind classnames to a 4px spacing grid and enforces a 4–5 level typography hierarchy. This systematically removes cluttered styling and establishes a clean design baseline across the web interface.

What is the best way to add missing hover, focus, and disabled accessibility states to existing UI components?

Adding missing accessibility states is achieved through a UI completeness check that enforces stateful interaction patterns. This process updates classnames to ensure proper hover, focus rings, and disabled handling are present across all interactive elements.

How do I standardize border radius, shadow depth, and color usage in my web application?

Standardizing border radius, shadow depth, and color usage involves applying consistent design system rules to reduce visual noise. This approach normalizes styling to a controlled gray and brand palette while standardizing shadow depth across the interface.

Can I use this visual audit approach to fix loading and empty states in a Tailwind codebase?

Yes, this visual audit fixes loading and empty states within a Tailwind codebase. The sequential review specifically targets UI completeness by adding missing loading indicators, empty state designs, and proper form labeling and error patterns to remove common UX rough edges.

Why does my AI-generated web interface look visually sloppy and how do I clean it up?

AI-generated interfaces often look sloppy due to scattered, inconsistent styling choices. Cleaning up this presentation requires running a fixed sequential audit that compounds improvements from spacing to typography, ensuring a professional visual baseline.

Does this UI polish method require a specific CSS framework to function correctly?

Yes, this UI polish method requires a Tailwind CSS based interface to function correctly. The sequential audit specifically targets Tailwind classnames to enforce design system rules, normalize spacing, and update interactive accessibility patterns.