Tools

Official shadcn/ui skill: uses the shadcn CLI to read project config and component docs, then adds, searches, composes and fixes components following styling, form and accessibility rules. Can also start new projects from presets.

Color rules for daisyUI 5: explains semantic names such as primary, base-100 and error with their -content foregrounds, says to prefer them over fixed Tailwind colors and never add dark: to them, and shows how to enable, create and override themes. Part of the official daisyUI skill.

Google Labs' DESIGN.md format and CLI: designers capture colors, typography and spacing in a file for agents; lint checks broken references and WCAG contrast, diff compares versions and export outputs design tokens for Tailwind and more. Needs Node.js; the format is in alpha.

Adds scroll-reveal animations that fire when elements enter the viewport, using an IntersectionObserver snippet plus keyframes and a Tailwind arbitrary animation class; tune threshold, rootMargin, duration, delay and play-once behavior.

Gives the agent three exact Tailwind arbitrary-value shadow utilities (sm, md, lg) for layered, neutral elevation on cards, controls, popovers and hero media, with rules against mixing them with default shadows, tinting or stacking.

General guidance for building UI with Tailwind CSS: responsive and state variants, dark mode, sparing arbitrary values, components before @apply, and pitfalls such as dynamically built class names missing in production, with button and hero examples.

Reads any website's design system in a headless browser and exports DTCG design tokens, Tailwind config, Figma variables and a brand guide in one command, scoring contrast and cross-page consistency. Also an MCP server or Claude Code plugin. Needs Node.js and Chromium or Chrome.

Builds landing pages in two halves: intake questions, page structure, layout choice, conversion copy and SEO first, then a strict visual system for fonts, Tailwind type scale, spacing, radius, backgrounds, icons and motion. The rules are opinionated, e.g. no Inter font and no background gradients.

Interviews you on scope, pain points and brand tone, infers the visual language from existing styles, and builds five React UI variants on a temporary route with a feedback overlay. Iterates on feedback, then writes an implementation plan and deletes the temp files.

Design token CLI (formerly Cobalt UI): reads W3C DTCG tokens for color, type, spacing and more, validates them and generates CSS, Sass, JS/TS, Swift, Tailwind and other code via plugins. Runs in CI so design specs flow into code automatically. Needs a Node.js project.

Works in the OKLCH color space for web projects: converts hex, rgb and hsl to oklch, generates palettes and dark-mode scales without hue drift, checks APCA and WCAG contrast and fixes it via lightness, handles P3 gamut fallbacks, and themes Tailwind v4.

Applies a Swiss International Style design system with Tailwind CSS: a 12-column grid on an 8px base, IBM Plex Sans with light headings, a stone palette, hierarchy through opacity rather than hue, a single accent color, body text capped at 60ch, mobile-first layouts and dark mode.

Styles elevated surfaces such as cards, dialogs, popovers and toasts with smooth-shadow-ring utilities instead of pairing a border or ring with a shadow, avoiding the double-edge look. Covers ring and shadow tinting, dark mode and overrides. Requires the shadow-plugin Tailwind plugin.

When the agent changes a single CSS value or Tailwind class in a Next.js App Router project, a floating bar appears on the page so you can fine-tune it with arrow keys before persisting. Loads a runtime script from budge.design in app/layout.tsx.

Fixes hover and click dead zones between spaced interactive elements such as chart bars, list rows, tabs and nav items by making hit targets flush and moving visual spacing inside each item, with React and Tailwind examples.

Turns Paper designs (via Paper MCP, Viewfinder or exported JSX) into componentized React/Next.js code: maps hierarchy and reusable components first, one component per icon, tokens in globals.css, shadcn reuse, real fonts and data-driven charts.

Reduces CSS custom properties and Tailwind v4 design tokens in globals.css without changing visuals: maps usage to find live tokens, deletes dead ones, collapses values similar in light and dark modes via a scripted rename map, and verifies with typecheck, lint and build.

Prototyper UI's animation conventions for writing, reviewing or debugging component motion: copy-paste class strings for overlays, dialogs and sheets, press-feedback scales, state transitions, easing tokens and prefers-reduced-motion handling.

Usage guide for the Prototyper UI component library, built on @base-ui/react and Tailwind CSS v4 with copy-paste distribution, OKLCH colors and CVA variants: setup, theme tokens, component selection and patterns, noting render= replaces Radix asChild.