baseline-ui

Enforce standardized UI design tokens and accessible primitives in Tailwind-based React projects.

Updated Apr 14, 2026

Search Tags:#accessibility #a11y #react #components #tailwind #ui-design #baseline-ui

Ready to run

npx skills add https://github.com/sjoerdbeentjes/open-agents --skill baseline-ui-sjoerdbeentjes

💬 Prompt for ChatGPT / Claude Chat▼

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Baseline UI enforces an opinionated UI baseline to prevent AI-generated interface slop, ensuring accessible, consistent Tailwind-based interfaces across projects.

Core Features & Use Cases

Enforces consistent UI design tokens and practices for Tailwind projects
Guides usage of accessible primitives and recommended components
Helps maintain design consistency across components, layouts, and interactions in React workflows

Quick Start

Apply the Baseline UI constraints to your next React component to ensure accessibility and design consistency.

Frequently Asked Questions about baseline-ui

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

FAQPage Schema

How do I enforce accessibility and consistent UI baselines in Tailwind React components?▼

You can enforce accessibility and consistent UI baselines in Tailwind React projects by applying standardized design tokens, accessible primitives, and interaction rules to prevent interface inconsistencies across components.

What is UI baseline enforcement and how does it prevent inconsistent interfaces?▼

UI baseline enforcement prevents inconsistent interfaces by imposing a standardized set of rules for typography, spacing, and animation gating, ensuring that all generated components adhere to accessible and cohesive design practices.

Can I use this to guide design reviews for React and Tailwind projects?▼

Yes, you can use it to guide design reviews for React and Tailwind projects by checking components against enforced rules for typography, layout, animation gating, and the usage of accessible primitives to maintain interaction consistency.

What's the best way to standardize typography and spacing across Tailwind-based projects?▼

The best way to standardize typography and spacing across Tailwind-based projects is to impose an opinionated UI baseline that enforces consistent design tokens and accessible practices throughout your React component workflows.

Does this UI baseline approach work without specific component library dependencies?▼

Yes, the UI baseline approach works without specific component library dependencies, using documented guidance in the SKILL.md to enforce rules for typography, layout, animation gating, and accessible primitives directly within your Tailwind setup.