skills.rest
alslimany
alslimanyCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

baseline-ui

Enforce Tailwind CSS, motion, and accessibility rules for UI consistency.

Updated Apr 15, 2026
Search Tags:#consistency#accessibility#frontend#tailwind#ui-design#design-system#baseline-ui
One-click install
npx skills add https://github.com/alslimany/tams --skill baseline-ui-alslimany
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: baseline-ui
Source: https://github.com/alslimany/tams/tree/main/.cursor/skills/baseline-ui
Command: npx skills add https://github.com/alslimany/tams --skill baseline-ui-alslimany

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Enforces an opinionated UI baseline to prevent AI-generated interface slop, helping teams maintain consistency and accessibility across products.

Core Features & Use Cases

  • MUST use Tailwind CSS defaults unless custom values already exist or are explicitly requested
  • MUST use motion/react (formerly framer-motion) when JavaScript animation is required
  • SHOULD use tw-animate-css for entrance and micro-animations in Tailwind CSS
  • MUST use cn utility (clsx + tailwind-merge) for class logic
  • MUST use accessible component primitives for anything with keyboard or focus behavior
  • MUST use the project’s existing component primitives first
  • NEVER mix primitive systems within the same interaction surface
  • SHOULD prefer Base UI for new primitives if compatible with the stack
  • MUST add an aria-label to icon-only buttons
  • NEVER rebuild keyboard or focus behavior by hand unless explicitly requested
  • MUST use an AlertDialog for destructive or irreversible actions
  • SHOULD use structural skeletons for loading states
  • NEVER use h-screen, use h-dvh
  • MUST respect safe-area-inset for fixed elements
  • MUST show errors next to where the action happens
  • NEVER block paste in input or textarea elements
  • NEVER add animation unless explicitly requested
  • MUST animate only compositor props (transform, opacity)
  • NEVER animate layout properties (width, height, top, left, margin, padding)
  • SHOULD avoid animating paint properties (background, color)
  • SHOULD use ease-out on entrance
  • NEVER exceed 200ms for interaction feedback
  • MUST pause looping animations when off-screen
  • SHOULD respect prefers-reduced-motion
  • NEVER introduce custom easing curves unless explicitly requested
  • SHOULD avoid animating large images or full-screen surfaces
  • MUST use text-balance for headings and text-pretty for body
  • MUST use tabular-nums for data
  • SHOULD use truncate or line-clamp for dense UI
  • NEVER modify letter-spacing unless explicitly requested
  • MUST use a fixed z-index scale
  • SHOULD use size-* for square elements instead of w-*

Quick Start

Review the current UI work and align components with the Baseline UI rules for Tailwind defaults, animations, accessibility, and primitives.

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 UI slop and maintain frontend consistency?▼

To prevent AI-generated UI slop and maintain frontend consistency, enforce an opinionated UI baseline using Tailwind CSS defaults, accessible component primitives, and strict motion constraints to ensure predictable design outcomes across all surfaces.

What are the Tailwind CSS animation rules for accessible frontend design?▼

Accessible frontend design animation rules require animating only compositor props like transform and opacity, using ease-out for entrances, never exceeding 200ms for interaction feedback, and respecting prefers-reduced-motion to prevent layout property animations.

How do I manage Tailwind CSS component consistency and accessibility?▼

Manage Tailwind CSS component consistency and accessibility by using the cn utility (clsx + tailwind-merge) for class logic, applying existing component primitives first, and never mixing primitive systems within the same interaction surface to ensure predictable behavior.

Does this UI baseline require specific libraries for JavaScript animation and accessibility?▼

This UI baseline requires motion/react (formerly framer-motion) for JavaScript animation and accessible component primitives for keyboard or focus behavior, recommending Base UI for new primitives to ensure strict accessibility and predictable design outcomes.

What Tailwind CSS utilities should I use for responsive layout and text rendering?▼

Use h-dvh instead of h-screen, respect safe-area-inset for fixed elements, apply text-balance for headings, text-pretty for body text, and tabular-nums for data to ensure proper responsive layout and readable text rendering.

When should I use AlertDialog and structural skeletons in frontend UI design?▼

Use AlertDialog for destructive or irreversible actions to ensure user safety, and apply structural skeletons for loading states to maintain visual consistency, preventing layout shift and AI slop in frontend UI design.

Related Skills

Explore More Design & Creative Skills→
gustavscirulisgustavscirulis
114

baseline-ui

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

Community
Intermediate
elophantoelophanto
116

baseline-ui

Enforce Tailwind defaults and accessible component constraints in UI reviews.

Community
Intermediate
better-i18nbetter-i18n
16

ui-skills

Enforce accessible, performant UI constraints for agent-driven web development.

Official
Intermediate
automata-networkautomata-network

design-bible

Align React, Vue, and HTML UI development with token-driven design system rules.

Official
Advanced