baseline-ui

Review frontend UI files against Tailwind, accessibility, and interaction constraints.

Updated Apr 18, 2026

Search Tags:#accessibility #tailwind #motion #frontend-design #ui-consistency #baseline-ui

Ready to run

npx skills add https://github.com/rattamnoon/our-third-story --skill baseline-ui-rattamnoon

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: baseline-ui
Source: https://github.com/rattamnoon/our-third-story/tree/main/.cursor/skills/baseline-ui
Command: npx skills add https://github.com/rattamnoon/our-third-story --skill baseline-ui-rattamnoon

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Enforces a consistent UI baseline to prevent AI-generated interface slop.

Core Features & Use Cases

Tailwind CSS defaults alignment: MUST use Tailwind CSS defaults unless custom values already exist or are explicitly requested
Accessible primitives: MUST use accessible component primitives for anything with keyboard or focus behavior and MUST prefer the project's existing primitives
Interaction & performance: MUST respect safe-area-inset for fixed elements; MUST show errors next to actions; MUST avoid blocking paste in input/textarea

Quick Start

Apply the baseline-ui to your UI work and run /baseline-ui <file> to review it against all constraints.

Frequently Asked Questions about baseline-ui

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

FAQPage Schema

How do I prevent AI-generated interface slop in Tailwind components?▼

To prevent AI-generated interface slop, enforce a consistent UI baseline across your frontend design tasks. This applies Tailwind CSS defaults, accessible primitives, and standardized design tokens to maintain UI consistency.

How do I ensure accessible keyboard and focus behavior in frontend design?▼

To ensure accessible keyboard and focus behavior, you must use accessible component primitives for interactive elements. Your frontend design should prefer the project's existing primitives to maintain a consistent UI baseline.

Does this UI consistency tool work with existing Tailwind CSS custom values?▼

Yes, this UI consistency tool works with existing Tailwind CSS custom values. It enforces Tailwind CSS defaults unless custom values already exist or are explicitly requested in your frontend design components.

What's the best way to handle fixed elements and safe-area-inset in Tailwind?▼

The best way to handle fixed elements is to strictly respect safe-area-inset. Your UI baseline must also show errors next to actions and avoid blocking paste in input or textarea fields for optimal interaction performance.

Why does my AI-generated UI lack motion and standardized design tokens?▼

Your AI-generated UI lacks motion and standardized design tokens because it lacks a consistent UI baseline. Applying baseline constraints enforces motion-based interactions and standardizes design tokens for Tailwind components.