New: 97,000+ skills indexed from GitHub repos with 100+ stars · every skill safety-checkedBrowse top skillsTop skills
Esc to closeBrowse all skills
Submit a skillBrowse skills
Submit a skillBrowse skills

Agent skill

Tailwindcss

by MadAppGang in MadAppGang/claude-code

TailwindCSS v4 patterns with CSS-first configuration using @theme, @source, and modern CSS features.

MITAuto-check passedFrontend & Design

Install Tailwindcss

skills CLI
$ npx skills add MadAppGang/claude-code --skill tailwindcss -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install MadAppGang/claude-code tailwindcss --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/MadAppGang/claude-code.git skills-src && mkdir -p .claude/skills && cp -r skills-src/plugins/dev/skills/frontend/tailwindcss .claude/skills/tailwindcss && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
tailwindcss
GitHub stars
283
Token cost
~3.2k tokens
SKILL.md length
477 words
Files
1
Skills in repo
69
Repo updated
First seen
Licence
MIT

At a glance

TailwindCSS v4 patterns with CSS-first configuration using @theme, @source, and modern CSS features.

  • Works in 3 steps: Use Vite plugin - Automatic dead code… → Avoid dynamic class names - Static… → Purge unused styles - Automatic with…
  • Configuring Tailwind
  • SKILL.md covers Overview, Key Changes from v3 to v4, Browser Support and Documentation Index, plus 4 more sections
  • Calls npm

What it does

Tailwindcss is an agent skill from MadAppGang/claude-code. TailwindCSS v4 patterns with CSS-first configuration using @theme, @source, and modern CSS features. Covers design tokens, CSS variables, container queries, dark mode, and Vite integration. Use when configuring Tailwind, defining design tokens, or leveraging modern CSS with Tailwind utilities.

Its SKILL.md is about 3.2k tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.

It sits in Frontend & Design, covering Design tokens, CSS and styling and Theming and dark mode. It works with Tailwind CSS and Vite. The repository describes itself as: claude code plugins marketplace. The licence is MIT.

When your agent uses it

  • Configuring Tailwind
  • Defining design tokens
  • Leveraging modern CSS with Tailwind utilities

Example prompts

  • “/tailwindcss”

Requirements

  • Node.js

Workflow steps

3 steps, taken from the first numbered list in SKILL.md.

  1. Use Vite plugin - Automatic dead code elimination
  2. Avoid dynamic class names - Static analysis can't optimize them
  3. Purge unused styles - Automatic with proper @source config

What it can do on your machine

Read from SKILL.md and the folder at commit 6097ad4. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    Shell commands in SKILL.md call:

    • npm

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    Links to these hosts (documentation or services it may open):

    • tailwindcss.com

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Tailwindcss loads about 3.2k tokens when it runs. Until then it costs about 77 tokens; SKILL.md has 477 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~77
When it runs · the whole SKILL.md, loaded when a task matches
~3.2k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from MadAppGang/claude-code at commit 6097ad4, republished under its MIT licence (© MadAppGang). 477 words, ~3,236 tokens.

Download SKILL.mdSave it as .claude/skills/tailwindcss/SKILL.md (or your agent's skills folder).
name
tailwindcss
description
TailwindCSS v4 patterns with CSS-first configuration using @theme, @source, and modern CSS features. Covers design tokens, CSS variables, container queries, dark mode, and Vite integration. Use when configuring Tailwind, defining design tokens, or leveraging modern CSS with Tailwind utilities.

TailwindCSS v4 Patterns

Overview

TailwindCSS v4 introduces a CSS-first approach, eliminating the need for JavaScript configuration files. All customization happens directly in CSS using new directives.

Key Changes from v3 to v4

Featurev3v4
Configurationtailwind.config.jsCSS @theme directive
Content detectionJS array@source directive
Plugin loadingrequire() in JS@plugin directive
Custom variantsJS API@custom-variant directive
Custom utilitiesJS API@utility directive

Browser Support

TailwindCSS v4 requires modern browsers:

  • Safari 16.4+
  • Chrome 111+
  • Firefox 128+

Important: No CSS preprocessors (Sass/Less) needed - Tailwind IS the preprocessor.

Documentation Index

Core Documentation
TopicURLDescription
Installationhttps://tailwindcss.com/docs/installationSetup guides by framework
Using Vitehttps://tailwindcss.com/docs/installation/viteVite integration (recommended)
Editor Setuphttps://tailwindcss.com/docs/editor-setupVS Code IntelliSense
Upgrade Guidehttps://tailwindcss.com/docs/upgrade-guidev3 to v4 migration
Browser Supporthttps://tailwindcss.com/docs/browser-supportCompatibility requirements
Configuration Reference
DirectiveURLDescription
@themehttps://tailwindcss.com/docs/themeDefine design tokens
@sourcehttps://tailwindcss.com/docs/content-configurationContent detection
@importhttps://tailwindcss.com/docs/importImport Tailwind layers
@confighttps://tailwindcss.com/docs/configurationLegacy JS config
CSS Features
FeatureURLDescription
Dark Modehttps://tailwindcss.com/docs/dark-modeDark mode strategies
Responsive Designhttps://tailwindcss.com/docs/responsive-designBreakpoint utilities
Hover & Focushttps://tailwindcss.com/docs/hover-focus-and-other-statesState variants
Container Querieshttps://tailwindcss.com/docs/container-queriesComponent-responsive design
Customization
TopicURLDescription
Theme Configurationhttps://tailwindcss.com/docs/themeToken customization
Adding Custom Styleshttps://tailwindcss.com/docs/adding-custom-stylesExtending Tailwind
Functions & Directiveshttps://tailwindcss.com/docs/functions-and-directivesCSS functions
Pluginshttps://tailwindcss.com/docs/pluginsPlugin system

CSS-First Configuration

Basic Setup
css
/* src/index.css */
@import "tailwindcss";

This single import replaces the v3 directives (@tailwind base, @tailwind components, @tailwind utilities).

@theme Directive - Design Tokens

The @theme directive defines design tokens as CSS custom properties:

css
@import "tailwindcss";

@theme {
  /* Colors */
  --color-primary: hsl(221 83% 53%);
  --color-primary-dark: hsl(224 76% 48%);
  --color-secondary: hsl(215 14% 34%);
  --color-accent: hsl(328 85% 70%);

  /* With oklch (modern color space) */
  --color-success: oklch(0.723 0.191 142.5);
  --color-warning: oklch(0.828 0.189 84.429);
  --color-error: oklch(0.637 0.237 25.331);

  /* Typography */
  --font-display: "Satoshi", "sans-serif";
  --font-body: "Inter", "sans-serif";
  --font-mono: "JetBrains Mono", "monospace";

  /* Spacing */
  --spacing-page: 2rem;
  --spacing-section: 4rem;

  /* Custom breakpoints */
  --breakpoint-xs: 480px;
  --breakpoint-3xl: 1920px;

  /* Animation timing */
  --ease-spring: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  --duration-fast: 150ms;
  --duration-normal: 300ms;
}

Generated utilities from above:

  • Colors: bg-primary, text-primary-dark, border-accent
  • Fonts: font-display, font-body, font-mono
  • Animations: ease-spring, duration-fast
@theme inline Pattern

Use @theme inline to reference existing CSS variables without generating new utilities:

css
/* Define CSS variables normally */
:root {
  --background: oklch(1 0 0);
  --foreground: oklch(0.145 0 0);
  --card: oklch(1 0 0);
  --primary: oklch(0.205 0 0);
}

.dark {
  --background: oklch(0.145 0 0);
  --foreground: oklch(0.985 0 0);
  --primary: oklch(0.985 0 0);
}

/* Map to Tailwind utilities */
@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-primary: var(--primary);
}

When to use @theme inline:

  • Theming with CSS variables (light/dark mode)
  • Shadcn/ui integration
  • Dynamic theme switching
@source Directive - Content Detection
css
@import "tailwindcss";

/* Default: Tailwind scans all git-tracked files */

/* Add additional sources */
@source "../node_modules/my-ui-library/src/**/*.{html,js}";
@source "../shared-components/**/*.tsx";

/* Safelist specific utilities */
@source inline("bg-red-500 text-white p-4");
@custom-variant - Custom Variants
css
@import "tailwindcss";

/* Dark mode variant (class-based) */
@custom-variant dark (&:is(.dark *));

/* RTL variant */
@custom-variant rtl ([dir="rtl"] &);

/* Print variant */
@custom-variant print (@media print { & });

/* Hover on desktop only */
@custom-variant hover-desktop (@media (hover: hover) { &:hover });
@utility - Custom Utilities
css
@import "tailwindcss";

/* Text balance utility */
@utility text-balance {
  text-wrap: balance;
}

/* Scrollbar hide */
@utility scrollbar-hide {
  -ms-overflow-style: none;
  scrollbar-width: none;
  &::-webkit-scrollbar {
    display: none;
  }
}

/* Flex center shorthand */
@utility flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}
Show full SKILL.md (191 more words)Show less
@plugin - Plugin Configuration
css
@import "tailwindcss";

/* Load a plugin */
@plugin "@tailwindcss/typography";
@plugin "@tailwindcss/forms";
@plugin "@tailwindcss/container-queries";

/* Plugin with options */
@plugin "@tailwindcss/typography" {
  className: prose;
}
@config - Legacy JS Configuration

When you need JS configuration (rare in v4):

css
@import "tailwindcss";
@config "./tailwind.config.ts";

Vite Integration

Installation
bash
npm install tailwindcss @tailwindcss/vite
Vite Configuration
typescript
// vite.config.ts
import tailwindcss from "@tailwindcss/vite"
import react from "@vitejs/plugin-react"
import path from "path"
import { defineConfig } from "vite"

export default defineConfig({
  plugins: [react(), tailwindcss()],
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "./src"),
    },
  },
})
CSS Entry Point
css
/* src/index.css */
@import "tailwindcss";

@theme {
  /* Your design tokens */
}
TypeScript Path Aliases
json
// tsconfig.json
{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

Modern CSS Features with Tailwind v4

Native CSS Variables

Tailwind v4 uses native CSS variables without wrapper functions:

css
/* v3 - Required hsl wrapper */
--primary: 221 83% 53%;
background-color: hsl(var(--primary));

/* v4 - Direct CSS value */
--color-primary: hsl(221 83% 53%);
/* Used as: bg-primary */
oklch Color Format
css
@theme {
  /* oklch: lightness, chroma, hue */
  --color-brand: oklch(0.65 0.2 250);
  --color-brand-light: oklch(0.85 0.15 250);
  --color-brand-dark: oklch(0.45 0.25 250);
}

Benefits of oklch:

  • Perceptually uniform
  • Consistent lightness across hues
  • Better for generating color scales
  • Native browser support
Container Queries
html
<!-- Parent needs @container -->
<div class="@container">
  <!-- Child responds to container width -->
  <div class="grid grid-cols-1 @md:grid-cols-2 @lg:grid-cols-3">
    <!-- Content -->
  </div>
</div>
css
/* Named containers */
.sidebar {
  container-name: sidebar;
  container-type: inline-size;
}

/* Target named container */
@container sidebar (min-width: 300px) {
  .nav-item { /* expanded styles */ }
}
:has() Pseudo-Class
html
<!-- Style parent based on child state -->
<label class="group has-[:invalid]:border-red-500 has-[:focus]:ring-2">
  <input type="email" class="peer" />
</label>
css
/* Card with image gets different padding */
.card:has(> img) {
  @apply p-0;
}

/* Form with invalid fields */
.form:has(:invalid) {
  @apply border-red-500;
}
Native CSS Nesting
css
.card {
  @apply rounded-lg bg-white shadow-md;

  .header {
    @apply border-b p-4;
  }

  .content {
    @apply p-6;
  }

  &:hover {
    @apply shadow-lg;
  }

  &.featured {
    @apply border-2 border-primary;
  }
}

Utility Patterns

Responsive Design (Mobile-First)
html
<!-- Breakpoints: sm(640px), md(768px), lg(1024px), xl(1280px), 2xl(1536px) -->
<div class="
  p-4 text-sm               /* Mobile */
  sm:p-6 sm:text-base       /* Tablet */
  lg:p-8 lg:text-lg         /* Desktop */
  2xl:p-12 2xl:text-xl      /* Large screens */
">
State Variants
html
<!-- Hover, focus, active -->
<button class="
  bg-primary text-white
  hover:bg-primary-dark
  focus:ring-2 focus:ring-primary focus:ring-offset-2
  active:scale-95
  disabled:opacity-50 disabled:cursor-not-allowed
">

<!-- Group hover -->
<div class="group">
  <span class="group-hover:underline">Label</span>
  <span class="opacity-0 group-hover:opacity-100">Icon</span>
</div>

<!-- Peer focus -->
<input class="peer" />
<span class="invisible peer-focus:visible">Hint text</span>
Dark Mode

Strategy 1: Class-based (recommended)

css
@custom-variant dark (&:is(.dark *));
html
<html class="dark">
<body class="bg-white dark:bg-gray-900 text-black dark:text-white">

Strategy 2: Media query

css
@custom-variant dark (@media (prefers-color-scheme: dark) { & });
Animation Utilities
html
<!-- Built-in animations -->
<div class="animate-spin" />
<div class="animate-pulse" />
<div class="animate-bounce" />

<!-- Custom animation -->
<div class="animate-[fadeIn_0.5s_ease-out]" />
css
@theme {
  --animate-fade-in: fadeIn 0.5s ease-out;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}
Size Utility (v4)
html
<!-- v3: Two classes -->
<div class="w-10 h-10">

<!-- v4: Single class -->
<div class="size-10">

Best Practices

When to Use @apply

Use @apply sparingly for true component abstraction:

css
/* Good: Repeated pattern across many components */
@layer components {
  .btn-primary {
    @apply px-4 py-2 bg-primary text-white rounded-md;
    @apply hover:bg-primary-dark focus:ring-2 focus:ring-primary;
    @apply disabled:opacity-50 disabled:cursor-not-allowed;
    @apply transition-colors duration-fast;
  }
}

/* Bad: One-off styling (just use utilities in HTML) */
.my-special-div {
  @apply mt-4 p-6 bg-gray-100; /* Just put these in className */
}

Rule: Only extract patterns when reused 3+ times.

Design Token Naming
css
@theme {
  /* Semantic naming (preferred) */
  --color-primary: hsl(221 83% 53%);
  --color-primary-foreground: hsl(0 0% 100%);

  /* Not: --color-blue-600: ... */

  /* Scale naming when needed */
  --color-gray-50: oklch(0.985 0 0);
  --color-gray-100: oklch(0.970 0 0);
  --color-gray-900: oklch(0.145 0 0);
}
Performance
  1. Use Vite plugin - Automatic dead code elimination
  2. Avoid dynamic class names - Static analysis can't optimize them
  3. Purge unused styles - Automatic with proper @source config
html
<!-- Good: Static class names -->
<div class={isActive ? "bg-primary" : "bg-gray-100"}>

<!-- Bad: Dynamic class construction -->
<div class={`bg-${color}-500`}> <!-- Can't be purged -->
CSS Layers Order

Tailwind v4 uses CSS cascade layers:

1. @layer base - Reset, typography defaults
2. @layer components - Reusable components
3. @layer utilities - Utility classes (highest priority)

Custom styles should go in appropriate layers:

css
@layer components {
  .card { /* component styles */ }
}

@layer utilities {
  .text-shadow { /* utility styles */ }
}
  • shadcn-ui - Component library using Tailwind (CSS variables, theming)
  • css-modules - Alternative: scoped CSS for complex components
  • react-typescript - React patterns with Tailwind className
  • design-references - Design system guidelines (Tailwind UI reference)

© MadAppGang, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

Just SKILL.md in plugins/dev/skills/frontend/tailwindcss of MadAppGang/claude-code.

Open the folder on GitHubat commit 6097ad4

Compare with similar skills

Tailwindcss next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Tailwindcss compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Tailwindcss this skillMadAppGang/claude-code283—~3.2kAutomated safety check: PassMIT
Tailwind Theme Builderjezweb/claude-skills1.1k1 repos~3.2kAutomated safety check: PassMIT
Tailwind V4 Shadcnever-works/ever-works1582 repos~3.8kAutomated safety check: PassMIT
Shadcn Tailwind UILiarMTTT/TavernWeave148—~1.7kAutomated safety check: PassCustom licence
Tailwind V4 Shadcnsecondsky/claude-skills227—~4kAutomated safety check: PassMIT
MCP Developmentcoollabsio/coolify63k1 repos~949Automated safety check: PassMIT

Similar skills

  • Tailwind Theme Builder

    jezweb/claude-skills

    Set up Tailwind v4 + shadcn/ui themed UI with dark mode. An agent skill from jezweb/claude-skills.

    1.1k GitHub starsUsed in 1 repo~3.2k tokens
    Frontend & DesignAuto-check passed

  • Tailwind V4 Shadcn

    ever-works/ever-works

    Production-tested setup for Tailwind CSS v4 with shadcn/ui, Vite, and React.

    158 GitHub starsUsed in 2 repos~3.8k tokens
    Frontend & DesignAuto-check passed

  • Shadcn Tailwind UI

    LiarMTTT/TavernWeave

    Build, restyle, or review accessible React interfaces that use shadcn/ui, Radix UI primitives, and Tailwind CSS.

    148 GitHub stars~1.7k tokensUpdated 3 days ago
    Frontend & DesignAuto-check passed

  • Tailwind V4 Shadcn

    secondsky/claude-skills

    | Production-tested setup for Tailwind CSS v4 with shadcn/ui, Vite, and React.

    227 GitHub stars~4k tokensUpdated 9 days ago
    Frontend & DesignAuto-check passed

  • MCP Development

    coollabsio/coolify

    A skill your agent uses for Laravel MCP development. An agent skill from coollabsio/coolify.

    63k GitHub starsUsed in 1 repo~949 tokens
    Frontend & DesignAuto-check passed

  • Preline Theme Generator

    htmlstreamofficial/preline

    Generates light and dark Preline theme CSS from a brand color or mood, previews it, and validates token coverage through bundled local scripts.

    6.5k GitHub stars~619 tokensUpdated 1 mo ago
    Frontend & DesignAuto-check: warnings

More from MadAppGang/claude-code

All 69 skills in this repo

  • API Spec Analyzer

    MadAppGang/claude-code

    Analyzes API documentation from OpenAPI specs to provide TypeScript interfaces, request/response formats, and implementation guidance.

    283 GitHub starsUsed in 1 repo~2.7k tokens
    Auto-check passed

  • Content Brief

    MadAppGang/claude-code

    Content brief template and creation methodology for SEO-optimized content.

    283 GitHub starsUsed in 1 repo~959 tokens
    Auto-check passed

  • Context Detection

    MadAppGang/claude-code

    A skill your agent uses when detecting project technology stack from files/configs/directory structure, auto-loading framework-specific skills, or analyzing multi-stack fullstack projects (e.g…

    283 GitHub stars~5.4k tokensUpdated 6 mo ago
    Auto-check passed

  • Content Optimizer

    MadAppGang/claude-code

    On-page SEO optimization techniques including keyword density, meta tags, heading structure, and readability.

    283 GitHub starsUsed in 1 repo~694 tokens
    Auto-check passed

  • Keyword Cluster Builder

    MadAppGang/claude-code

    Techniques for expanding seed keywords and clustering by topic and intent.

    283 GitHub starsUsed in 1 repo~674 tokens
    Auto-check passed

  • Serp Analysis

    MadAppGang/claude-code

    SERP analysis techniques for intent classification, feature identification, and competitive intelligence.

    283 GitHub starsUsed in 1 repo~1k tokens
    Auto-check passed

Works with

Categories

Questions about Tailwindcss

What does Tailwindcss do?

TailwindCSS v4 patterns with CSS-first configuration using @theme, @source, and modern CSS features. Tailwindcss is an agent skill from MadAppGang/claude-code. TailwindCSS v4 patterns with CSS-first configuration using @theme, @source, and modern CSS features.

When should I use Tailwindcss?

Tailwindcss fits situations like: configuring Tailwind; defining design tokens; leveraging modern CSS with Tailwind utilities.

How do I install Tailwindcss in Claude Code?

Run `npx skills add MadAppGang/claude-code --skill tailwindcss -a claude-code`. Or copy the skill folder (plugins/dev/skills/frontend/tailwindcss in MadAppGang/claude-code) into .claude/skills/tailwindcss in your project. Claude Code loads it when a task matches its description.

How do I install Tailwindcss in Codex?

Run `npx skills add MadAppGang/claude-code --skill tailwindcss -a codex`. Or copy the skill folder (plugins/dev/skills/frontend/tailwindcss in MadAppGang/claude-code) into .agents/skills/tailwindcss in your project. Codex loads it when a task matches its description.

Can I use Tailwindcss in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add MadAppGang/claude-code --skill tailwindcss -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/tailwindcss, .gemini/skills/tailwindcss, .github/skills/tailwindcss and .opencode/skills/tailwindcss in your project.

What does Tailwindcss need to run?

Going by SKILL.md and its folder, Tailwindcss needs the command-line tools its instructions call (npm). Our summary lists: Node.js.

Does Tailwindcss access the network?

SKILL.md names 1 domain. As links in the text: tailwindcss.com. This is read from the text; nothing was executed.

Is Tailwindcss safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Tailwindcss use?

Tailwindcss is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Tailwindcss use?

About 3.2k tokens (SKILL.md is roughly 13k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Tailwindcss?

Skills that share tags, products or a category with Tailwindcss: Tailwind Theme Builder (jezweb/claude-skills, 1.1k stars), Tailwind V4 Shadcn (ever-works/ever-works, 158 stars), Shadcn Tailwind UI (LiarMTTT/TavernWeave, 148 stars) and Tailwind V4 Shadcn (secondsky/claude-skills, 227 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Tailwindcss?

MadAppGang (a GitHub organization) maintains it in MadAppGang/claude-code, which has 283 GitHub stars. The repository holds 69 skills in this directory. The repository was last updated on March 15, 2026.

Source: MadAppGang/claude-code on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.