skills.rest
ratnesh-maurya
ratnesh-mauryaCOMMUNITY
Explore all skills by this author →
Website𝕏@_ratneshmauryaGitHub

baseline-ui

Validates Tailwind CSS components against animation, typography, accessibility, and layout constraints.

1|Updated Aug 17, 2025
Search Tags:#typography#accessibility#react#ui review#tailwind css#design consistency#animation
One-click install
npx skills add https://github.com/ratnesh-maurya/mdconverter --skill baseline-ui-ratnesh-maurya
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: baseline-ui
Source: https://github.com/ratnesh-maurya/mdconverter/tree/main/.claude/skills/baseline-ui
Command: npx skills add https://github.com/ratnesh-maurya/mdconverter --skill baseline-ui-ratnesh-maurya

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? AI-generated UI code often contains inconsistent styling, inaccessible components, and performance-harming animation patterns. This Skill enforces an opinionated baseline of UI constraints so Tailwind CSS and React interfaces stay consistent, accessible, and performant. ## Core Features & Use Cases - Constraint Enforcement: Applies rules for animation durations, typography scale, z-index usage, and layout anti-patterns across any UI work in the conversation. - File Review Mode: Reviews a specific file against all constraints and outputs violations with quoted snippets, explanations, and concrete code-level fixes. - Accessibility Guardrails: Requires accessible primitives (Base UI, React Aria, Radix), aria-labels on icon-only buttons, and AlertDialog for destructive actions. - Use Case: While building a React dashboard with Tailwind CSS, invoke the Skill to review a component file and receive a list of violations such as animating layout properties, using h-screen instead of h-dvh, or missing aria-labels, each with a suggested fix. ## Quick Start Ask the AI to review your component file with baseline-ui and list all violations with fixes.

Frequently Asked Questions about baseline-ui

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

FAQPage Schema
How do I review a React component for UI consistency issues?▼

Invoke the Skill with a file path to review that file against all constraints. It outputs each violation with the exact quoted snippet, a one-sentence explanation of why it matters, and a concrete code-level fix.

What animation rules should Tailwind CSS projects follow?▼

Animate only compositor properties like transform and opacity, never layout properties such as width, height, or margin. Keep interaction feedback under 200ms, use ease-out on entrances, and respect prefers-reduced-motion.

Which accessible component primitives work with React and Tailwind?▼

Use Base UI, React Aria, or Radix for anything with keyboard or focus behavior, preferring the project's existing primitives first. Never mix primitive systems within the same interaction surface or rebuild focus behavior by hand.

Why should I use h-dvh instead of h-screen in CSS?▼

h-screen uses the static viewport height which causes layout issues on mobile browsers with dynamic toolbars. h-dvh tracks the dynamic viewport height, and fixed elements should also respect safe-area-inset.

When should animation not be added to a UI component?▼

Never add animation unless explicitly requested, and avoid animating large blur or backdrop-filter surfaces and full-screen elements. Looping animations must pause when off-screen, and will-change should only apply during active animations.

Related Skills

Explore More Software Engineering Skills→
vuanhtu1993vuanhtu1993

shadcn/ui Skills for Next.js 16

Integrate shadcn/ui into Next.js 16 projects with pnpm.

Community
Intermediate
PostalocityPostalocity
1

multimodal-looker

Analyze diagrams, screenshots, and UI mockups to extract components and design tokens.

Official
Advanced
Rational-PartnersRational-Partners
4

portal-tailwind

Enforce tw- prefixed Tailwind utilities for portal UI styling.

Official
Intermediate
chris78reychris78rey

design-system-components

Generate HTML/Tailwind UI components and design tokens with CSS variables and reusable patterns.

Community
Basic