skills.rest
rattamnoon
rattamnoonCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

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
One-click install
npx skills add https://github.com/rattamnoon/our-third-story --skill baseline-ui-rattamnoon
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Design & Creative Skills→
pascallammerspascallammers
1

tailwind-design-system

Generate Tailwind CSS design systems with custom themes and design tokens.

Community
Intermediate
AngelP17AngelP17
1

tailwind-design-system

Standardize UI design with Tailwind-based design tokens and component patterns.

Community
Advanced
kentojekentoje
2

ui-skills

Enforce UI constraints for accessible agent interfaces using Tailwind defaults.

Community
Basic
vercel-labsvercel-labs
5.8k

baseline-ui

Validate animation durations, typography scale, and accessibility in Tailwind CSS projects.

Official
Intermediate