baseline-ui

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

8|4|Updated Jan 15, 2026

Search Tags:#ui #accessibility #design system #tailwind css #animation #component review

Ready to run

npx skills add https://github.com/jscraik/Agent-Skills --skill baseline-ui-jscraik

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: baseline-ui
Source: https://github.com/jscraik/Agent-Skills/tree/main/frontend/ui/baseline-ui
Command: npx skills add https://github.com/jscraik/Agent-Skills --skill baseline-ui-jscraik

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill prevents AI-generated interfaces from becoming inconsistent or low-quality by enforcing a strict set of UI, interaction, animation, and typography rules.

Core Features & Use Cases

Design System Enforcement: Ensures adherence to Tailwind CSS, animation, and accessibility standards.
Component Auditing: Reviews UI components for common anti-patterns and accessibility violations.
Use Case: When building a new React component, use this skill to ensure it follows the project's established design tokens, animation principles, and accessibility guidelines before it's merged.

Quick Start

Apply these constraints to any UI work in this conversation.

Frequently Asked Questions about baseline-ui

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

FAQPage Schema

How do I enforce UI consistency when building React components with Tailwind CSS?▼

To enforce UI consistency in React components, validate Tailwind CSS utilities, animation durations, and typography scale against an opinionated design baseline before merging new views.

How do I check my React components for accessibility violations and layout anti-patterns?▼

Check React components for accessibility violations and layout anti-patterns by auditing them against strict interaction rules, ensuring adherence to established component accessibility guidelines.

What is an opinionated UI baseline for AI-generated interfaces?▼

An opinionated UI baseline for AI-generated interfaces is a strict set of rules enforcing design system standards, focusing on Tailwind CSS conventions, animation principles, and accessibility guidelines.

Can I use this to review CSS utilities and enforce design tokens before merging UI components?▼

Yes, you can review CSS utilities and enforce design tokens by applying constraints to UI work, validating typography scale, and preventing layout anti-patterns before merging components.

Does this component auditing approach work for validating animation durations in Tailwind CSS?▼

Yes, component auditing works for validating animation durations in Tailwind CSS by enforcing strict animation principles and interaction rules to prevent inconsistent UI behaviors.

What are the limitations of enforcing a strict UI baseline for design system adherence?▼

Limitations of enforcing a strict UI baseline include potential friction when integrating highly custom CSS utilities or animation behaviors that deviate from established Tailwind CSS conventions and accessibility standards.