npx claudepluginhub gopherguides/gopher-ai --plugin tailwindThis skill uses the workspace's default tool permissions.
You have access to up-to-date Tailwind CSS documentation via MCP tools. Use these tools to provide accurate, current information.
Generates design tokens/docs from CSS/Tailwind/styled-components codebases, audits visual consistency across 10 dimensions, detects AI slop in UI.
Records polished WebM UI demo videos of web apps using Playwright with cursor overlay, natural pacing, and three-phase scripting. Activates for demo, walkthrough, screen recording, or tutorial requests.
Delivers idiomatic Kotlin patterns for null safety, immutability, sealed classes, coroutines, Flows, extensions, DSL builders, and Gradle DSL. Use when writing, reviewing, refactoring, or designing Kotlin code.
You have access to up-to-date Tailwind CSS documentation via MCP tools. Use these tools to provide accurate, current information.
mcp__tailwindcss__search_tailwind_docsUse when user asks about any Tailwind feature, utility, or concept.
mcp__tailwindcss__get_tailwind_utilitiesUse when user needs utility classes for a specific CSS property.
mcp__tailwindcss__get_tailwind_colorsUse when user asks about colors, palettes, or color-related utilities.
mcp__tailwindcss__convert_css_to_tailwindUse when user has CSS they want to convert to Tailwind utility classes.
mcp__tailwindcss__generate_component_templateUse when user needs a component template with Tailwind styling.
Read the relevant file for detailed patterns, code examples, and documentation URLs:
docs-urls.md — Official Documentation URLsURL tables organized by category (Getting Started, Core Concepts, Layout, Spacing, Sizing, Typography, Backgrounds & Borders, Effects, Transforms & Animation, Interactivity). Use with WebFetch when MCP tools are unavailable.
v4-syntax.md — Tailwind CSS v4 Core SyntaxCRITICAL: v4 changed significantly from v3. Covers @import "tailwindcss", @theme directive for CSS-based configuration (colors, fonts, spacing), @source for detection, @variant dark for dark mode, @layer components for extraction, @plugin for plugins.
best-practices.md — Best PracticesClass ordering convention (layout → spacing → sizing → typography → colors → effects → interactive), responsive design (mobile-first, breakpoint reference), component extraction rule (3+ times), theme variables over hardcoded values, accessibility (focus-visible, sr-only, contrast).
anti-patterns.md — v4 Anti-Patternsv3 → v4 migration table (tailwind.config.js → @theme, @tailwind → @import, etc.), common mistakes (inline styles, px values, duplicate/conflicting utilities).
quick-reference.md — Quick ReferenceResponse guidelines for helping with Tailwind, example response flow, spacing scale table, common utility patterns (centered content, card, responsive grid, truncation, gradient, fixed header).
For the latest documentation, always refer to https://tailwindcss.com/docs