🎯

tailwind-patterns

🎯Skill

from jezweb/claude-skills

What it does

A collection of production-ready Claude Code skills covering Tailwind CSS v4, shadcn/ui integration, and modern web development patterns.

Overview

Tailwind-patterns is a skill from the jezweb/claude-skills collection that produces themed Tailwind CSS v4 setups with dark mode support as part of the frontend plugin. It is part of a restructured collection of workflow-oriented skills organized into installable plugins, each designed to generate tangible output rather than serve as reference documentation.

Key Features

Tailwind v4 Theme Building - Generate complete Tailwind CSS v4 theme configurations with dark mode support and shadcn/ui integration
Production Output - Designed to produce real files, projects, and configurations rather than serving as informational reference guides
Plugin-Based Organization - Part of the frontend plugin alongside shadcn-ui skill, installable via /plugin install frontend@jezweb-skills
Skill Creator Tool - Includes a Python-based skill initialization script for creating new custom skills within the framework
Multi-Plugin Ecosystem - Works alongside plugins for Cloudflare Workers, web design, design assets, integrations, Shopify, WordPress, and writing

Who is this for?

This skill is designed for frontend developers who want Claude Code to generate complete, themed Tailwind CSS v4 configurations with dark mode and component library support. It is ideal for developers starting new projects or standardizing design systems who need production-ready Tailwind setups generated through AI-assisted workflows.

📦

Same repository

jezweb/claude-skills(161 items)

tailwind-patterns

Installation

Vibe Index InstallInstalls to .claude/skills/ - auto-recognized by Claude Code

npx vibeindex add jezweb/claude-skills --skill tailwind-patterns

skills.sh Install⚠ Installs to .agents/skills/ - may not be auto-recognized by Claude Code

npx skills add jezweb/claude-skills --skill tailwind-patterns

Manual InstallCopy SKILL.md content and save to the path below

~/.claude/skills/tailwind-patterns/SKILL.md

SKILL.md

1,131Installs

253

Last UpdatedJan 26, 2026

View on GitHub Back to Skills

More from this repository10

🎯

tailwind-v4-shadcn🎯Skill

A collection of production-ready Claude Code skills covering Tailwind CSS v4, shadcn/ui integration, and modern web development patterns.

🎯

tanstack-query🎯Skill

A collection of production-ready Claude Code skills covering Tailwind CSS v4, shadcn/ui integration, and modern web development patterns.

🎯

fastapi🎯Skill

Provides FastAPI development patterns including async endpoints, dependency injection, Pydantic models, authentication, and API documentation best practices

🎯

zustand-state-management🎯Skill

Provides Zustand state management patterns for React including store creation, selectors, middleware, and best practices for scalable client-side state

🎯

react-hook-form-zod🎯Skill

Provides React Hook Form integration patterns with Zod schema validation for type-safe, performant form handling

🎯

nextjs🎯Skill

A collection of production-ready Claude Code skills covering Tailwind CSS v4, shadcn/ui integration, and modern web development patterns.

🎯

shadcn-ui🎯Skill

A collection of production-ready Claude Code skills covering Tailwind CSS v4, shadcn/ui integration, and modern web development patterns.

🎯

color-palette🎯Skill

Skill for generating complete, accessible color palettes from a single brand hex, creating 11-shade scales, semantic tokens, dark mode variants, and WCAG contrast checking for Tailwind v4

🎯

tailwind-theme-builder🎯Skill

A collection of production-ready Claude Code skills covering Tailwind CSS v4, shadcn/ui integration, and modern web development patterns.

🎯

motion🎯Skill

Skill for building React animations with Motion (formerly Framer Motion), covering gestures, scroll effects, spring physics, layout animations, and SVG with bundle sizes from 2.3KB to 34KB