skills.rest
mauricioacp
mauricioacpCOMMUNITY
Explore all skills by this author →
GitHub

baseline-ui

Enforce accessible UI primitives and Tailwind defaults across React projects.

1|1|Updated Feb 7, 2026
Search Tags:#react#tailwind#design-systems#ui-consistency#accessible-design#baseline-ui
One-click install
npx skills add https://github.com/mauricioacp/tanstack-convex-better-auth-template --skill baseline-ui-mauricioacp
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: baseline-ui
Source: https://github.com/mauricioacp/tanstack-convex-better-auth-template/tree/main/.agents/skills/baseline-ui
Command: npx skills add https://github.com/mauricioacp/tanstack-convex-better-auth-template --skill baseline-ui-mauricioacp

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Enforces an opinionated UI baseline to prevent AI-generated interface slop.

Core Features & Use Cases

  • Enforces consistent UI primitives and patterns across a project.
  • Encourages accessible, data-driven design decisions aligned with the team's design system.
  • Use Case: ensure all new screens adhere to a unified visual language and interaction behavior.

Quick Start

Install baseline-ui in your project and apply its constraints to your UI work.

Frequently Asked Questions about baseline-ui

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

FAQPage Schema
How do I enforce a consistent UI baseline in React projects?▼

To enforce a consistent UI baseline in React projects, apply uniform constraints and patterns using accessible primitives, Tailwind defaults, and aria-labels for icon-only buttons. This prevents interface slop and ensures screens adhere to a unified visual language.

What is the best way to prevent AI-generated UI slop in component libraries?▼

The best way to prevent AI-generated UI slop in component libraries is to enforce an opinionated UI baseline. This approach enforces consistent UI primitives, accessible design decisions, and uniform interaction behaviors aligned with your design system.

Does baseline-ui work with Tailwind defaults for accessible design?▼

Yes, baseline-ui works with Tailwind defaults to enforce accessible design. It guides animation and layout rules while specifically enforcing the use of accessible primitives and aria-labels for icon-only buttons across your front-end projects.

How do I ensure aria-labels are used for icon-only buttons in my design system?▼

To ensure aria-labels are used for icon-only buttons in your design system, apply an opinionated UI baseline that enforces accessible primitives. This constrains AI-generated interfaces to follow uniform accessibility patterns automatically.

When do I need to enforce UI consistency constraints for front-end projects?▼

You need to enforce UI consistency constraints for front-end projects when building React-based UI work, component libraries, or design systems requiring uniform patterns. This ensures new screens adhere to a unified visual language and interaction behavior.

Related Skills

Explore More Design & Creative Skills→
thkim2015thkim2015

moai-library-shadcn

Implement shadcn/ui components in React applications with Tailwind CSS.

Community
Advanced
arthtyagiarthtyagi
1

baseline-ui

Enforce consistent Tailwind CSS and React UI constraints across design reviews.

Community
Intermediate
gustavscirulisgustavscirulis
114

baseline-ui

Validate Tailwind CSS UI against animation, typography, accessibility, and layout constraints.

Community
Intermediate
WellApp-aiWellApp-ai
341

design-context

Align UI decisions with design system tokens, Storybook stories, and codebase patterns.

Official
Basic