タグ：tailwind

Builds multi-component web pages that need state or routing with React, Tailwind CSS and shadcn/ui, using bundled init and build scripts, then packs them into a single HTML file for a claude.ai Artifact. Official Anthropic skill.

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.

Official shadcn/ui CLI: initializes projects and adds component source to your codebase on demand, with switchable presets. Since v4 it offers --dry-run and --diff so agents can preview changes, and it comes with an agent skill.

MCP server built into the official shadcn CLI: lets agents browse and search components, blocks and templates in any configured registry, including private ones, and install them into your project in plain language. The project needs a components.json.

Official daisyUI skill: the agent uses daisyUI 5 component classes, semantic colors and themes whenever it writes HTML or JSX, picking components by intended function, reading their guides and following their exact structure. Includes install, usage, config and color guides. Built on Tailwind CSS 4.

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.

Configuration reference for daisyUI 5: how to set enabled themes, the default and prefers-dark theme, root selector, included or excluded modules, class prefix and console logs in the CSS plugin block, with full examples. Part of the official daisyUI skill.

Installation guide for daisyUI 5: requires Tailwind CSS 4 without tailwind.config.js, installs via npm and adds the plugin in CSS, covers the CDN setup, and links framework guides for Next.js, Vue, SvelteKit, Laravel and more. Part of the official daisyUI skill.

Usage rules for daisyUI 5: combine component, part and modifier classes, add Tailwind utilities when needed and the ! override only as a last resort, use the default variant unless asked, make layouts responsive, and follow Refactoring UI for design choices. 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.

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.

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.

Reference for UnoCSS, the atomic CSS engine: config, rules, shortcuts, theme and variants, presets like Wind3, Wind4, Icons and Attributify, and Vite and Nuxt setup. Tells the agent to check uno.config first and stick to plain classes when unsure. Generated by Anthony Fu from official docs.

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.

Makes the agent use Tailwind container queries instead of viewport breakpoints for responsive components, migrating sm:/md:/lg: classes to @container variants. Explains when page-level layout should keep viewport breakpoints and lists common review mistakes. Tailwind v3 needs a 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.