MCP For Claude Marketplace
Tailwind Excellence Prover

Tailwind Excellence Prover MCP Connector for Claude

A+

AI agents build bloated styling layers containing arbitrary values, div-only layouts, inaccessible contrast, and legacy configurations. This prover enforces strict design token structures (@theme), utility-first compliance, semantic HTML, mobile-first layouts, and interactive focus states.

1 tools Official Updated Jun 28, 2026 Official Vinkius Partner
More Details Connect to Claude

Generating utility-first styles without strict design token constraints results in visual inconsistency, bloated files, and inaccessible web experiences. This tool analyzes class declarations to guarantee compliance with modern design system architecture.

The Problem

Tailwind stylesheets often suffer from five major implementation failures:

  • Token Detachment — Hardcoding random hex colors or arbitrary pixel sizes instead of using custom @theme variables.
  • Arbitrary Value Abuse — Overusing classes like w-[347px] or text-[#e74c3c] for elements that should map to consistent design scales.
  • Div-Soup Layouts — Ignoring semantic HTML markup (, ) and leaving interactive elements without clear focus indicator states.
  • Desktop-First Hardcoding — Designing views for wide viewports and overriding layout behavior instead of building mobile-first scales.
  • Legacy v3 Anti-patterns — Maintaining tailwind.config.js setups instead of adopting clean v4 CSS-based @theme declarations.

How It Works

5 Decision Pivots validate the CSS structure:

  1. designTokensUsed — Ensures all utility values reference custom @theme scale tokens.
  2. noArbitraryAbuse — Restrains inline arbitrary classes to one-off alignments, enforcing scales.
  3. accessibilityMet — Verifies focus rings, screen-reader text, color contrast, and keyboard navigation.
  4. responsiveMobileFirst — Enforces base-mobile scaling overrides using progressive screen breakpoints.
  5. componentStructureClean — Audits class ordering patterns, state variants, and utility file extractions.
tailwindcssdesign-systemaccessibilityresponsivestructured-reasoningdecision-pivotscssagentic-pipeline

1 tools expose this connector's capabilities to your AI agent.

validate_tailwind_excellence

PILLAR I — DESIGN SYSTEM: Tailwind v4 uses @theme in CSS (NOT tailwind.config.js). Define tokens: --color-primary/secondary/danger (50-950 scale), --spacing-* (4px base), --font-heading/body, --radius-sm/md/lg. Dark mode via dark: variant or color-scheme. NEVER abuse arbitrary values ([347px], [#e74c3c]) — if used >1x it belongs in @theme. PILLAR II — ACCESSIBILITY: semantic HTML (header/main/nav/section, NOT div soup), aria-label on icon buttons, alt on images, sr-only for screen readers, focus-visible:ring-2 on EVERY interactive element, 4.5:1 contrast ratio, motion-safe:/motion-reduce: for animations. PILLAR III — RESPONSIVE: Mobile-first (base=mobile, sm:/md:/lg: upward). Grid: grid-cols-1 md:grid-cols-2 lg:grid-cols-3. @container for component-level responsive. Fluid typography. Touch targets ≥44px. TAILWIND v4: @import "tailwindcss" (no @tailwind directives), @theme for tokens, @utility for custom utilities, @variant for custom variants, automatic content detection. If rejected, fix the design violation. Structured reflection for Tailwind CSS v4 excellence — forces systematic validation across three pillars: design system integrity, accessibility compliance, and responsive mastery. Built from Tailwind v4 architecture (@import "tailwindcss", @theme block, @utility, @variant, automatic content detection — NOT the legacy tailwind.config.js approach). Catches Arbitrary Value Abuse (using [#e74c3c] and [347px] instead of design tokens — a component uses bg-[#e74c3c] for error states. Searched the codebase: appears 14 times. Another component uses text-[#e74c3c]. A third uses border-[#e74c3c]. 14 occurrences of a hardcoded hex value. If the brand color changes: 14 places to update. One is missed. Now the error state is #e74c3c in 13 places and #e74c4c (typo) in 1 place. Fix: @theme { --color-danger: #e74c3c; } then bg-danger, text-danger, border-danger everywhere. 1 place to update. 0 risk of inconsistency. Rule: if an arbitrary value appears more than once, it belongs in @theme. Acceptable arbitrary use: one-off alignment like top-[3px] that is truly unique), Div Soup (47 nested <div> elements, zero semantic HTML — a pricing page: <div> for header, <div> for nav, <div> for main, <div> for cards, <div> for card content, <div> for footer. 47 divs total. Screen reader announces: "group, group, group, group, group..." — meaningless. Google cannot determine content structure — no article, no section, no heading hierarchy. Fix: <header> for page header, <nav> for navigation, <main> for primary content, <section> for pricing tiers, <article> for each plan, <footer> for page footer. Same Tailwind classes. Completely different semantic meaning. Screen reader: "banner, navigation, main, region: pricing, article: Pro Plan, contentinfo." Semantic HTML costs zero effort — it is choosing the RIGHT element instead of the wrong one), Desktop-First Responsive (writing base styles for desktop and overriding downward — component: grid-cols-3 sm:grid-cols-1. Problem: sm: means "640px and UP" in Tailwind. This is NOT "make it 1 column on mobile." This says: "3 columns at all sizes, then 1 column at 640px+" — the OPPOSITE of intent. On mobile (< 640px): 3 columns. Completely broken layout. Horizontal scroll. Unusable. Fix: grid-cols-1 md:grid-cols-2 lg:grid-cols-3. Base = mobile (1 column). md: = tablet (2 columns). lg: = desktop (3 columns). Mobile-first means: base styles ARE mobile. Breakpoints ADD complexity upward. If you write grid-cols-3 FIRST: you are thinking desktop-first — and mobile is broken), Accessibility Theater (icon-only buttons without aria-label, missing focus states — a delete button: <button class="p-2"><TrashIcon /></button>. Visually: a trash icon. Clear to sighted users. Screen reader: "button." That is all. No label. The user has NO idea what this button does. Fix: <button class="p-2" aria-label="Delete item"><TrashIcon /><span class="sr-only">Delete item</span></button>. Also: no focus-visible:ring-2 on the button — keyboard users cannot see which button is focused. Fix: add focus-visible:ring-2 focus-visible:ring-primary/50 to EVERY interactive element. Contrast: text-gray-400 on bg-white = 3.5:1 ratio. WCAG AA requires 4.5:1. Fail. Fix: text-gray-600 on bg-white = 5.7:1. Compliant), and @apply Proliferation (200 lines of @apply defeating Tailwind's purpose — a CSS file: .btn { @apply px-4 py-2 rounded-md font-medium text-white bg-primary hover:bg-primary/90 focus-visible:ring-2 focus-visible:ring-primary/50 transition-colors; } .btn-sm { @apply px-3 py-1.5 text-sm rounded; } .btn-lg { @apply px-6 py-3 text-lg rounded-lg; } ...200 lines of @apply classes. This is just writing CSS with extra steps. The utility-first philosophy is lost. In Tailwind v4: use @utility instead of @apply for custom utilities. Better: use component files (React/Vue/Svelte) to encapsulate repeated patterns. The classes stay in the template. The component IS the abstraction. @apply is acceptable for: base styles on html/body, prose typography, third-party overrides. Everything else: classes in the template, extracted to components when > 10 utilities). Call once per component or page

See how to talk to your AI agent using Tailwind Excellence Prover.

I'll create a pricing card with bg-[#6366f1], text-[#ffffff], w-[380px], mt-[32px], wrapped in divs, no dark mode, desktop only.

Verdict: DESIGN_SYSTEM_ABSENT. Define @theme tokens: --color-primary: #6366f1 (then bg-primary), --spacing-8 for mt-8, consistent widths via max-w-sm. Add dark mode (dark:bg-gray-900). Use semantic HTML (section/article). Add responsive breakpoints.

@theme with --color-primary (50-950), --spacing scale, --radius scale. PricingCard: <section> with <article>, focus-visible:ring on CTA, sr-only on icon, dark:bg-gray-900. grid-cols-1 md:grid-cols-2 lg:grid-cols-3. hover:bg-primary/90 transition-colors.

Verdict: UI_PROVEN. Design tokens in @theme (color scale, spacing, radius). Semantic HTML (section/article). Accessible (focus-visible, sr-only, dark mode). Mobile-first responsive (grid breakpoints). Clean architecture (hover/transition states). Ship it.

I'll build a nav with @theme tokens, proper colors, but all divs, no <nav> element, no aria-label, no focus states on links, and no responsive — desktop fixed width only.

Verdict: ACCESSIBILITY_VIOLATED. Tokens and colors correct, but: use <nav> not <div>, add aria-label='Main navigation', focus-visible:ring-2 on every link, sr-only for screen readers. Semantic HTML + ARIA are non-negotiable.

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.

Related Connectors

NEW
BP

Battle Pass Value Calculator MCP

4 tools Official

Analyze the economic efficiency of gaming Battle Passes by calculating ROI and break-even points.

A+ View details →
LE

LinkedIn Engagement Prover MCP

1 tools Official

AI agents write LinkedIn posts that get zero engagement. This tool forces scroll-stopping hooks, eliminates bait tactics, ensures authentic voice with save-worthy value, optimizes format for the 2026 algorithm, and prevents algorithm violations. Built from deep research on LinkedIn 360Brew.

A+ View details →
TM

Techstars Mentor Prover MCP

1 tools Official

A founder pitched for 45 minutes without mentioning a single customer conversation, a single mentor challenge, or a single dollar of revenue. Zero feedback sought. Zero market validation. Zero network. That is not acceleration — that is solo building in a vacuum. This tool forces five Techstars-level axes: mentor leverage, feedback discipline, customer discovery, revenue readiness, and network strategy.

A+ View details →
NEW
CV

Color Vibration Analyzer MCP

3 tools Official

Discover the energetic frequency and chakra alignment of any color.

A+ View details →