# Tailwind Excellence Prover MCP for AI Agents AI Agent Connect

> Tailwind Excellence Prover helps your AI agents build production-ready styling by enforcing strict design system rules. It stops your agent from hardcoding random hex codes or creating messy div-soup layouts. It ensures every utility follows your @theme tokens, maintains accessibility standards, and builds with a mobile-first mindset for Tailwind CSS v4.

## Overview
- **Category:** productivity
- **Price:** Free
- **Endpoint:** https://edge.vinkius.com/vk_preview_FdR5Ea2fMyzzvbauD84P40uMFKV5D3exRd23L6Fl/ai-agent-connect
- **Tags:** tailwindcss, design-system, accessibility, responsive, structured-reasoning, decision-pivots, css, agentic-pipeline

## Description

You want your AI to build components that actually look like they belong in a professional design system, but often, it defaults to shortcuts that create technical debt. It might grab a random hex code for a button or nest dozens of divs just to get a layout to sit right. This Connector changes that by acting as a gatekeeper for your styling logic. Instead of letting your agent guess, it forces the AI to stick to your established @theme variables and semantic HTML standards. It checks for things like proper focus rings, contrast ratios, and mobile-first breakpoints before a single line of CSS hits your repo. It is about moving from "it looks okay" to "it meets the spec." When you use this through the Vinkius catalog, you are essentially giving your agent a set of guardrails that ensure the frontend remains maintainable and accessible. You get to focus on the high-level UI while the Connector handles the tedious job of policing utility classes and ensuring every component is production-ready.

## Tools

### validate_tailwind_excellence
Checks your CSS for design token compliance, accessibility, and mobile-first structure. It provides a clear verdict and specific fixes for any violations found.

## Prompt Examples

**Prompt:** 
```
Create a pricing card with a purple background, white text, and a fixed width of 380px.
```

**Response:** 
```
Verdict: **DESIGN_SYSTEM_ABSENT**. 

I found several issues that need fixing to meet your design standards:

*   **Hardcoded Color:** You used `bg-[#6366f1]`. Please define this in your `@theme` as `--color-primary`.
*   **Arbitrary Width:** You used `w-[380px]`. Please use a spacing token like `max-w-sm`.
*   **Mobile-First:** The layout is fixed for desktop. Please use `grid-cols-1` as the base and add `md:grid-cols-2`.

**Fix:** Update your `@theme` block and use the corresponding utility classes.
```

**Prompt:** 
```
Build a navigation bar with a logo, three links, and a search button using our theme.
```

**Response:** 
```
Verdict: **ACCESSIBILITY_VIOLATED**. 

Your current structure uses nested divs for the navigation. To meet accessibility standards, please make these changes:

*   **Semantic HTML:** Replace the outer container with a `<nav>` element.
*   **ARIA Labels:** Add `aria-label='Main navigation'` to the nav element.
*   **Focus States:** Ensure all links have `focus-visible:ring-2`.

**Fix:** Use semantic tags and add the required ARIA attributes.
```

**Prompt:** 
```
Show me a 3-column grid for desktop that stacks on mobile using the primary color.
```

**Response:** 
```
Verdict: **UI_PROVEN**. 

Your code meets all design system requirements:

*   **Mobile-First:** Correctly uses `grid-cols-1` as the base.
*   **Responsive:** Correctly applies `md:grid-cols-2` and `lg:grid-cols-3`.
*   **Tokens:** Correctly uses the `--color-primary` scale.

**Ship it!**
```

## Capabilities

### Enforce design tokens
Ensures all utility values reference your custom @theme scale tokens.

### Block arbitrary values
Prevents the AI from hardcoding random hex colors or pixel sizes.

### Verify accessibility
Checks for focus rings, screen-reader text, and color contrast ratios.

### Validate mobile-first logic
Makes sure your agent writes base styles for mobile and adds complexity upward.

### Audit semantic HTML
Replaces nested divs with proper tags like <nav>, <main>, and <section>.

## Use Cases

### Preventing hardcoded hex colors
A developer asks for a pricing card. The agent tries to use bg-[#6366f1]. The tool flags it and forces a max-width token from the @theme.

### Cleaning up div-soup
A designer wants a navigation bar. The agent uses 10 nested divs. The tool demands a <nav> and <header> structure instead.

### Ensuring dark mode compliance
A user wants a dark mode button. The tool ensures the correct dark: variant is used with the primary color scale.

### Validating mobile-first grids
A team needs a 3-column grid. The tool ensures the agent writes grid-cols-1 as the base style for mobile.

## Benefits

- Stop arbitrary value abuse by forcing the use of @theme tokens using validate_tailwind_excellence.
- Fix accessibility issues early with automated focus-state and contrast checks.
- Eliminate div-soup by ensuring the agent uses semantic HTML tags instead of nested containers.
- Guarantee mobile-first layouts so your site does not break on small screens.
- Keep your codebase clean by preventing @apply proliferation and promoting component abstraction.
- Reduce maintenance time by ensuring every style change happens in one central theme file.

## How It Works

The bottom line is that your AI stops making lazy styling choices that break your design system.

1. Provide your agent with a component description or existing code snippet.
2. The agent calls the validation tool to check against your design rules.
3. You get a pass or fail verdict with specific instructions on how to fix violations.

## Frequently Asked Questions

**Does Tailwind Excellence Prover work with Tailwind v4?**
Yes, it is specifically designed for Tailwind v4. It focuses on the new @theme architecture and CSS-based configuration rather than the old tailwind.config.js approach.

**Can it help me make my site more accessible?**
Yes, it automatically checks for common accessibility failures like missing focus states, lack of ARIA labels, and poor color contrast ratios.

**Does it stop my AI from using random hex codes?**
Yes, it flags any arbitrary hex codes or pixel values that are not part of your defined design tokens and tells the AI how to fix them.

**Will it help me fix div-soup in my layouts?**
It will. The tool audits your markup and demands that you use semantic HTML tags like <nav>, <main>, and <section> instead of nested divs.

**Is it only for React components?**
No, it works on any HTML or CSS output your AI client generates, regardless of the framework you are using.

**How does it handle mobile-first design?**
It ensures your AI client writes base styles for mobile devices first and only adds complexity for larger screens using breakpoints.

**Does it generate Tailwind code?**
No. The agent writes the UI. The tool VALIDATES that it follows design system principles — @theme tokens instead of arbitrary values, semantic HTML for accessibility, mobile-first responsive strategy, and clean component architecture with proper state variants.

**Does it support Tailwind v4?**
Yes. Tailwind v4 awareness is built in: @theme for design tokens (not tailwind.config.js), @import 'tailwindcss' (not @tailwind directives), @utility for custom utilities, @variant for custom variants, built-in container queries, and automatic content detection. It catches v3 anti-patterns in v4 projects.

**Why is accessibility a dedicated pillar?**
Because AI agents consistently generate div soup with no semantic HTML, no focus states, and no ARIA. Tailwind makes styling effortless but semantic structure and accessibility still require deliberate choices. This tool forces: semantic elements, focus-visible:ring, sr-only text, contrast ratios, and motion-safe variants.