MCP CheckClaude skills for Tailwind CSS
The 50 strongest of 122 Tailwind CSS skills on GitHub. Skills built for Tailwind CSS come first; no repository gets more than 3 spots. Each links to its folder; copy it into ~/.claude/skills/ to use it.
tailwind design system
Build scalable design systems with Tailwind CSS v4, design tokens, component libraries, and responsive patterns. Use when creating component libraries, implementing design systems, or standardizing UI patterns.
wshobson/agents★ 42kMITFolder:
tailwind-design-systemtailwind theme builder
Set up Tailwind v4 + shadcn/ui themed UI with dark mode. Install deps, configure CSS variables via @theme inline, wire dark mode toggle, verify. Use whenever the user mentions Tailwind v4, setting up Tailwind theming, shadcn/ui colours, dark mode, or…
jezweb/claude-skills★ 1.1kMITFolder:
tailwind-theme-buildertailwind patterns
Tailwind CSS v4 principles. CSS-first configuration, container queries, modern patterns, design token architecture. Use when building with Tailwind v4 or migrating from v3.
coco-research/coco★ 795Licence: see repoFolder:
tailwind-patternstailwind css patterns
Provides comprehensive Tailwind CSS utility-first styling patterns including responsive design, layout utilities, flexbox, grid, spacing, typography, colors, and modern CSS best practices. Use when styling React/Vue/Svelte components, building responsive…
giuseppe-trisciuoglio/developer-kit★ 366MITFolder:
tailwind-css-patternstailwind shadcn
Tailwind CSS utility patterns with shadcn/ui component usage, theming via CSS variables, and responsive design. Use when styling components, installing shadcn components, implementing dark mode, or creating consistent design systems.
BlackBeltTechnology/pi-agent-dashboard★ 337MITFolder:
tailwind-shadcnnextjs typescript tailwindcss supabase
Full-stack Next.js 14 development with TypeScript, TailwindCSS, and Supabase for building production-ready web applications.
Mindrally/skills★ 288Apache-2.0Folder:
nextjs-typescript-tailwindcss-supabasetailwind responsive layouts
Implement responsive CSS layout with Tailwind.
TheGoat395/Codex-Skills★ 135MITFolder:
tailwind-responsive-layoutstailwind design tokens
Map semantic tokens into Tailwind utilities.
TheGoat395/Codex-Skills★ 135MITFolder:
tailwind-design-tokensexample tailwind animation
Learn how to use Tailwind CSS with Helios. Use for styling compositions and animating with utility classes.
BintzGavin/helios★ 123Apache-2.0Folder:
tailwindtailwind expert
Expert guide for Tailwind CSS v4, CSS-first configuration, @theme customization, modern responsive design, and Modern Web Guidance / Panduan ahli untuk Tailwind CSS v4, konfigurasi CSS-first, kustomisasi @theme, dan desain responsif modern.
roedyrustam/vibes-plug★ 116MITFolder:
tailwind-experttailwind v4
Tailwind CSS v4 with CSS-first configuration and design tokens. Use when setting up Tailwind v4, defining theme variables, using OKLCH colors, or configuring dark mode. Triggers on @theme, @tailwindcss/vite, oklch, CSS variables, --color-, tailwind v4.
existential-birds/beagle★ 85Apache-2.0Folder:
tailwind-v4tailwind ops
Tailwind CSS utility patterns, responsive design, component patterns, v4 migration, and configuration. Use for: tailwind, tailwindcss, utility classes, responsive design, dark mode, tailwind v4, tailwind config, tw, container queries, @apply, prose,…
0xDarkMatter/claude-mods★ 78MITFolder:
tailwind-opstailwind best practices
Write Tailwind CSS following practices that keep a fast-to-write codebase maintainable — use design tokens instead of magic values, keep class lists short, group tokens semantically, generate classes in consistent order, avoid @apply for extracting…
evilmartians/agent-skills★ 51MITFolder:
tailwind-best-practicestailwind
Applies GAIA's patterns and conventions for all Tailwind styling. Use this skill whenever writing Tailwind class names, combining classes with `cn`, writing conditional classes, or building component variants. Also trigger when the user asks about custom…
gaia-harness/gaia★ 26MITFolder:
tailwindtailwindcss
Tailwind CSS v4 utility-first discipline: CSS-first configuration, design tokens via @theme, and principled class composition. Invoke whenever task involves any interaction with Tailwind CSS — writing, reviewing, refactoring, debugging, or understanding…
xobotyi/cc-foundry★ 23MITFolder:
tailwindcssfec tailwind design system
用于设计、实现或审查 Tailwind CSS 设计系统、Token 映射、主题扩展、工具类治理、组件变体、暗色模式、响应式工具、safelist 或可维护的 class 组合；中文触发词包括 Tailwind、设计 Token、组件变体、暗色模式、class 管理。
bovinphang/frontend-craft★ 22MITFolder:
fec-tailwind-design-systemkit tailwind
Tailwind CSS guardrails pack — dynamic class purging, v4 CSS-first config, @apply/@reference, arbitrary values. Use when writing Tailwind utility classes or Tailwind configuration.
altafino/FableClaudeMDForOpus★ 7No licence statedFolder:
kit-tailwindweb artifacts builder
Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui). Use for complex artifacts requiring state management, routing, or shadcn/ui components - not for simple…
anthropics/skills★ 185kNo licence statedFolder:
web-artifacts-builderartifacts builder
Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui). Use for complex artifacts requiring state management, routing, or shadcn/ui components - not for simple…
ComposioHQ/awesome-claude-skills★ 78kNo licence statedFolder:
artifacts-builderunocss
UnoCSS instant atomic CSS engine, superset of Tailwind CSS. Use when configuring UnoCSS, writing utility rules, shortcuts, or working with presets like Wind, Icons, Attributify.
antfu/skills★ 6kMITFolder:
unocssfrontend ui dark ts
Build dark-themed React applications using Tailwind CSS with custom theming, glassmorphism effects, and Framer Motion animations. Use when creating dashboards, admin panels, or data-rich interfaces with a refined dark aesthetic.
microsoft/skills★ 3.2kMITFolder:
frontend-ui-dark-tsdesign code
Generate production-ready, accessible, token-driven component code for ANY framework (React+Tailwind, Next.js, SwiftUI, Vue, Svelte, Angular, Solid, Web Components/Lit, React Native, Flutter, Jetpack Compose, vanilla CSS, or CSS-in-JS). Use when the user…
plugin87/ux-ui-agent-skills★ 3.1kMITFolder:
design-codetoken build
Set up or run the token build pipeline. Transform the DTCG tokens/*.json (source of truth) into platform artifacts (CSS variables, Tailwind @theme, JS/TS, iOS Asset Catalog, Android, Compose) with Style Dictionary / Tokens Studio / W3C DTCG export. Use…
plugin87/ux-ui-agent-skills★ 3.1kMITFolder:
token-buildlaunch window planner
Use when the user asks to "pick a launch date", "plan the launch window", or "set the embargo and lift time"; produces a candidate-window comparison table (conflict / tailwind / risk per window) built from industry-event cycles and the competitor launch…
aaron-he-zhu/aaron-marketing-skills★ 3kApache-2.0Folder:
launch-window-plannerform tokens
Use when asked to define a design token system, create tokens, document tokens, set up CSS custom properties, build a Tailwind token config, establish a spacing scale, define color semantics, or bridge design decisions to code. Examples: "set up design…
jeremylongshore/tons-of-skills-marketplace★ 2.9kMITFolder:
form-tokensrefactoring ui
Audit and fix visual hierarchy, spacing, color, and depth in web UIs. Use when the user mentions "my UI looks off" (or amateur/unprofessional), "fix the design", "Tailwind styling", "color palette", "visual hierarchy", "design system", "spacing scale", or…
wondelai/skills★ 2.5kMITFolder:
refactoring-uisenior frontend
Frontend development skill for React, Next.js, TypeScript, and Tailwind CSS applications. Use when building React components, optimizing Next.js performance, analyzing bundle sizes, scaffolding frontend projects, implementing accessibility, or reviewing…
composio-community/awesome-claude-plugins★ 2kNo licence statedFolder:
senior-frontendoma frontend
Frontend specialist for React, Next.js, TypeScript with FSD-lite architecture, shadcn/ui, and design system alignment. Use for UI, component, page, layout, CSS, Tailwind, and shadcn work.
first-fluke/oh-my-agent★ 1.4kMITFolder:
oma-frontendtanstack start
Build a full-stack TanStack Start app on Cloudflare Workers from scratch — SSR, file-based routing, server functions, D1+Drizzle, better-auth, Tailwind v4+shadcn/ui. Use whenever the user mentions TanStack Start, asks to scaffold a full-stack Cloudflare…
jezweb/claude-skills★ 1.1kMITFolder:
tanstack-startvite flare starter
Scaffold a full-stack Cloudflare app from the vite-flare-starter template — React 19 + Hono + D1+Drizzle + better-auth + Tailwind v4+shadcn/ui + TanStack Query + R2 + Workers AI. Run setup.sh to clone, configure, and deploy. Use whenever the user wants a…
jezweb/claude-skills★ 1.1kMITFolder:
vite-flare-startersaas scaffolder
Generate SaaS boilerplate with auth, database schemas, Stripe billing, multi-tenancy, API routes, and dashboard UI on a Next.js/TypeScript/Tailwind stack. Use when starting a new SaaS product, subscription app, or multi-tenant platform.
borghei/Claude-Skills★ 1kLicence: see repoFolder:
saas-scaffolderlight frontend design
Light 按需工程技能·前端设计：把模糊的「做个好看的界面」落成**能跑的 React/Tailwind/shadcn 代码 + 设计决策说明**—— 有**视觉记忆点**(signature element)、**风格自洽**(design tokens 一致)、**适配场景**(学术海报/数据大屏/管理后台/移动端/营销 landing 信息密度各不同)、**反「一眼 AI」**(紫蓝渐变/Inter/16px 圆角/巨型 hero/居中堆叠/emoji 标题)、**视觉无障碍**(WCAG…
Light0305/Light-skills★ 824MITFolder:
light-frontend-designweb design
网页设计与部署。生成精美的单页 HTML 网页（报告、落地页、数据可视化等），支持一键部署到 Cloudflare Pages。使用 Tailwind CSS + Chart.js + Font Awesome 技术栈。当用户要求制作网页、生成报告页面、创建落地页、数据可视化展示、部署网页到线上时使用。
countbot-ai/CountBot★ 783MITFolder:
web-designdesign system generator
Generate design systems with color palettes, typography, spacing scales, component tokens, and Tailwind config
vibeeval/vibecosystem★ 541MITFolder:
design-system-generatorfind docs
Retrieves up-to-date documentation, API references, and code examples for any developer technology. Use this skill whenever the user asks about a specific library, framework, SDK, CLI tool, or cloud service — even for well-known ones like React, Next.js,…
mxyhi/ok-skills★ 507Apache-2.0Folder:
find-docsfrontend dev guidelines
Next.js 15 애플리케이션을 위한 프론트엔드 개발 가이드라인. React 19, TypeScript, Shadcn/ui, Tailwind CSS를 사용한 모던 패턴. Server Components, Client Components, App Router, 파일 구조, Shadcn/ui 컴포넌트, 성능 최적화, TypeScript 모범 사례 포함. 컴포넌트, 페이지, 기능 생성, 데이터 페칭, 스타일링, 라우팅, 프론트엔드 코드 작업 시 사용.
aiskillstore/marketplace★ 446No licence statedFolder:
frontend-dev-guidelinesextract
Refactoring pass — extracts repeated Tailwind class combos and markup into components, and lifts magic values into design tokens. Use when the codebase has obvious duplication, hardcoded hex values or pixel sizes, or when the user says \"clean this up\" /…
educlopez/ui-craft★ 407MITFolder:
extractclaude landing composer
Compose a premium, animated landing page section by section in Next.js + Tailwind + Motion (Framer Motion) — built on a real design system, with editorial copy and motion that feels human-crafted, not template-generated. Use when building or rebuilding a…
OneWave-AI/claude-skills★ 398MITFolder:
claude-landing-composerclaude design system architect
Generate a complete, premium design system from a brand brief or an existing site — color tokens, type scale, spacing/radius/elevation, motion language, and component specs — exported as Tailwind config, CSS variables, and a usage doc. Built to look…
OneWave-AI/claude-skills★ 398MITFolder:
claude-design-system-architectcolor palette extractor
Extract color palettes from images, websites, or designs. Identifies dominant colors, generates complementary schemes, and exports in multiple formats (HEX, RGB, HSL, Tailwind, CSS variables). Use when users need color schemes from images, brand colors, or…
OneWave-AI/claude-skills★ 398MITFolder:
color-palette-extractoralpine js
Alpine.js development guidelines for lightweight reactive interactions with Tailwind CSS and various backend frameworks.
Mindrally/skills★ 288Apache-2.0Folder:
alpine-jsghost
Ghost CMS theme development with Handlebars templating, Alpine.js, Tailwind CSS, and performance optimization
Mindrally/skills★ 288Apache-2.0Folder:
ghostfigma to react
Use when the user wants to extract Figma designs into production-ready React or Next.js components with TypeScript, Tailwind CSS, and pixel-perfect accuracy.
majiayu000/spellbook★ 288MITFolder:
figma-to-reactcss debug
Use this skill to diagnose CSS and frontend layout issues such as positioning, overflow clipping, Tailwind class conflicts, z-index stacking, and React rendering visibility problems.
majiayu000/spellbook★ 288MITFolder:
css-debugfigma to code
Extract Figma designs and generate production-ready React/Next.js components with TypeScript, Tailwind CSS, and pixel-perfect accuracy. Use when a user provides a Figma URL or asks to convert Figma designs to code.
majiayu000/spellbook★ 288MITFolder:
figma-to-codeaceternity ui
100+ animated React components (Aceternity UI) for Next.js with Tailwind. Use for hero sections, parallax, 3D effects, or encountering animation, shadcn CLI integration errors.
secondsky/claude-skills★ 240MITFolder:
aceternity-uihugo
Hugo static site generator with Tailwind v4, headless CMS (Sveltia/Tina), Cloudflare deployment. Use for blogs, docs sites, or encountering theme installation, frontmatter, baseURL errors.
secondsky/claude-skills★ 240MITFolder:
hugoinspira ui
120+ Vue/Nuxt animated components with TailwindCSS v4, motion-v, GSAP, Three.js. Use for hero sections, 3D effects, interactive backgrounds, or encountering setup, CSS variables, motion-v integration errors.
secondsky/claude-skills★ 240MITFolder:
inspira-uihtml draft
Use when user wants a standalone HTML diagram in flat engineering blueprint style — architecture diagrams, system flows, technical spec sheets, component maps. Generates one HTML file using Tailwind v4 (browser CDN) for layout and D3 v7 (CDN) for SVG…
serejaris/personal-corp-os★ 239MITFolder:
html-draftabsolute ui
Build polished, intentional UIs with concrete CSS/Tailwind values — typography, color, layout, spacing, dark mode, accessibility, animations, components. Encodes specific, opinionated rules with exact values, not vague advice. Covers buttons, cards, forms,…
dhruvjainin/absolute★ 223MITFolder:
absolute-ui
Claude skills for Tailwind CSS: before you install one
Is there a Claude skill for Tailwind CSS?
There are 122 of them, spread over 71 repositories on GitHub. Named for it and most starred: tailwind design system (wshobson/agents, ★ 42k), tailwind theme builder (jezweb/claude-skills, ★ 1.1k) and tailwind patterns (coco-research/coco, ★ 795). Stars rate the repository a skill sits in, not the skill.
How do I install a Claude skill for Tailwind CSS?
For Tailwind CSS, take the tailwind-design-system folder from wshobson/agents (the folder that holds SKILL.md) into ~/.claude/skills/ to use it in every Claude Code project, or into .claude/skills/ for one project. In the Claude apps, zip that folder and upload it as a custom skill in settings.
Are all these Tailwind CSS skills in English?
No: 5 of those listed, such as fec tailwind design system and light frontend design, are written mainly in Chinese, Japanese, Korean or Russian rather than English, though the Tailwind CSS task is the same. Claude can follow them either way, but read them before you install.
Is there an official Anthropic skill for Tailwind CSS?
Yes: web artifacts builder comes from Anthropic's own skills repository. The other 121 are community-made.
Can I use these Tailwind CSS skills at work?
Of the 50 Tailwind CSS skills listed here, 43 sit in repositories under an open licence such as MIT or Apache 2.0, and 5, such as kit tailwind and web artifacts builder, state no licence at all, which legally means you may not reuse them. Check the licence file before you copy one into company work.
What should I check before installing a Tailwind CSS skill?
A Tailwind CSS skill is instructions Claude follows, and it can bundle scripts Claude runs, so read SKILL.md and every script first: for tailwind design system, that is everything in the tailwind-design-system folder. 1 of the 50 here, kit tailwind, come from repositories with under 10 stars, so few people have looked at it. Red flags: piping a download into a shell, sending files to a URL, and instructions to hide what it does from you.
More topics: every “Claude skills for…” page.