skills.rest
jscraik
jscraikCOMMUNITY
Explore all skills by this author →
Website𝕏@jscraikGitHub

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

Related Skills

Explore More Design & Creative Skills→
Mischio95Mischio95
1

tailwind-design-system

Define Tailwind CSS design tokens as CSS variables with shadcn/ui wrappers.

Community
Advanced
hotriluanhotriluan

ck:ui-styling

Implements accessible shadcn/ui components with Tailwind CSS in React frameworks.

Community
Intermediate
mashharukimashharuki
2

baseline-ui

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

Community
Intermediate
santanapolsantanapol

baseline-ui

Review Tailwind CSS React UI code against baseline UI constraints.

Community
Intermediate