baseline-ui

Name: baseline-ui
Availability: InStock
Author: spinboxx

Enforce Tailwind defaults, typography, spacing, and ARIA accessibility in React UI components.

Updated Aug 27, 2026

Search Tags:#ui #consistency #accessibility #frontend #tailwind #baseline #design-system

Ready to run

npx skills add https://github.com/SpinBoxx/turborepo-boilerplate --skill baseline-ui-spinboxx

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: baseline-ui
Source: https://github.com/SpinBoxx/turborepo-boilerplate/tree/main/.agents/skills/baseline-ui
Command: npx skills add https://github.com/SpinBoxx/turborepo-boilerplate --skill baseline-ui-spinboxx

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Inconsistent UI quality and design drift across Tailwind-based projects are mitigated by enforcing a cohesive baseline and rules.

Core Features & Use Cases

Enforce Tailwind defaults and typography scale to ensure consistent headings, body text, and spacing.
Promote accessibility best practices by leveraging accessible primitives and adding necessary ARIA attributes.
Provide a reusable baseline for UI components, views, and design reviews to minimize AI-generated slop.

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 and prevent design drift in Tailwind projects?▼

You can enforce UI consistency by applying a solid Tailwind baseline that standardizes typography scales, spacing, and reusable primitives across React views to prevent design drift and minimize AI-generated slop.

What is the best way to ensure accessibility in Tailwind CSS components?▼

The best way to ensure accessibility is leveraging accessible primitives and adding necessary ARIA attributes, such as enforcing aria-labels on icon buttons, to meet baseline accessibility adherence standards.

Can I use this UI baseline with other core component libraries?▼

No, this baseline requires using a single primitive system without mixing core UI libraries. It enforces Tailwind defaults and motion/react for animations to maintain a cohesive design system architecture.

How do I review CSS utilities to ensure they meet a design system baseline?▼

Review CSS utilities by checking them against a solid Tailwind-based baseline that validates typography, spacing, and accessibility adherence, ensuring UI component development meets design system requirements.

Does this UI baseline support motion and animations in React views?▼

Yes, the baseline supports animations by requiring motion/react for animations instead of other libraries, ensuring consistent motion design alongside typography and spacing constraints in React views.