skills.rest
iadr-dev
iadr-devCOMMUNITY
Explore all skills by this author →
GitHub

baseline-ui

Enforces Tailwind UI baselines for typography, accessibility, layout, and animation in apps via cn-based classes.

2|Updated Apr 26, 2026
Search Tags:#typography#accessibility#design system#tailwind css#motion#ui linting
One-click install
npx skills add https://github.com/iadr-dev/colab --skill baseline-ui-iadr-dev
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: baseline-ui
Source: https://github.com/iadr-dev/colab/tree/main/skills/coding/ui-skills/skills/baseline-ui
Command: npx skills add https://github.com/iadr-dev/colab --skill baseline-ui-iadr-dev

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It prevents inconsistent, inaccessible, or layout-breaking UI that can creep in during rapid UI iteration.

Core Features & Use Cases

  • Tailwind and styling consistency: Enforces typography rules (text-balance, text-pretty, tabular-nums), layout constraints (h-dvh, no h-screen, fixed z-index scale), and class composition via cn (clsx + tailwind-merge).
  • Component accessibility and interaction safety: Ensures focus/keyboard primitives come from a single compatible component system, requires aria-label for icon-only buttons, and mandates localized error placement.
  • Motion and performance guardrails: Restrains animation to compositor-friendly properties, avoids layout/paint animations, caps interaction feedback to 200ms, and respects prefers-reduced-motion.

Quick Start

Run /baseline-ui <file> to review the target file and return any violations with exact snippets, why they matter, and a concrete code-level fix suggestion.

Frequently Asked Questions about baseline-ui

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

FAQPage Schema
How do I enforce a UI baseline and prevent Tailwind CSS anti-patterns?▼

You can enforce a UI baseline by linting Tailwind CSS utility classes to catch inconsistent typography, accessibility gaps, and layout-breaking anti-patterns during rapid UI iteration.

What is the best way to ensure accessible React components with Tailwind?▼

The best way to ensure accessible React components is to mandate focus and keyboard primitives from a single compatible system, require aria-labels for icon-only buttons, and localize error placement.

How do I constrain motion and animation performance in a Tailwind design system?▼

You constrain motion by restricting animations to compositor-friendly properties like transform and opacity, capping interaction feedback to 200ms, and respecting prefers-reduced-motion settings.

Does this UI linting approach require specific Tailwind layout conventions?▼

Yes, this UI linting approach requires specific Tailwind layout conventions, enforcing rules like h-dvh instead of h-screen, fixed z-index scales, and text-balance for consistent rendering.

How do I manage Tailwind class composition to avoid styling conflicts?▼

You manage Tailwind class composition by using a cn utility based on clsx and tailwind-merge, which merges classes logically to prevent styling conflicts and layout-breaking UI.

When do I need to run UI linting checks on my Tailwind codebase?▼

You need to run UI linting checks when developing UI components, styling React views, or reviewing CSS utility usage across interactive surfaces to prevent inconsistent typography and layout anti-patterns.

Related Skills

Explore More Design & Creative Skills→
gustavscirulisgustavscirulis
114

baseline-ui

Validate Tailwind CSS UI against animation, typography, accessibility, and layout constraints.

Community
Intermediate
parisgroup-aiparisgroup-ai
1

pwa-audit

Detect mobile-first PWA usability violations in React/TSX components.

Official
Intermediate
DITEKmaxDITEKmax

baseline-ui

Enforce Tailwind CSS UI and styling constraints for accessibility, animation, typography, and layout.

Community
Intermediate
jscraikjscraik
8

baseline-ui

Enforce Tailwind CSS, animation, accessibility, and layout conventions in React UI components.

Community
Intermediate