By djankies
Tailwind CSS v4 patterns: CSS-first config, oklch colors, container queries, @utility directive
Configure Tailwind CSS v4 using Vite plugin, PostCSS, or CLI with CSS-first configuration via @import and @theme directives. Use when setting up new projects or migrating build tools.
Create custom utilities with @utility directive supporting static utilities, functional utilities with values, theme-based utilities, and multi-value utilities. Use when extending Tailwind with custom CSS properties or patterns.
Define animations with @keyframes within @theme directive, use animate-{name} utilities, and implement entry animations with starting: variant. Use when creating custom animations or entry effects.
Migrate from Tailwind CSS v3 to v4 including configuration migration (JS to CSS), utility renames, opacity changes, and color system updates. Use when upgrading existing projects to v4.
Review Tailwind CSS v4 patterns for configuration, theming, and utility usage. Use when reviewing CSS files, Vite configs, or components using Tailwind.
Modifies files
Hook triggers on file write and edit operations
Own this plugin?
Verify ownership to unlock analytics, metadata editing, and a verified badge. GitHub access is read-only (username + org membership).
Sign in to claimOwn this plugin?
Verify ownership to unlock analytics, metadata editing, and a verified badge. GitHub access is read-only (username + org membership).
Sign in to claimBased on adoption, maintenance, documentation, and repository signals. Not a security audit or endorsement.
A curated marketplace of Claude Code plugins for various technologies. This repository serves as a central hub for discovering, sharing, and installing Claude Code plugins that enhance development workflows.
Claude Code is an AI-powered coding assistant that can be extended through plugins. Plugins can add custom commands, specialized agents, autonomous skills, event hooks, and integrations with external tools via the Model Context Protocol (MCP).
/plugin marketplace add daniel/claude-configs
/plugin
This will open the plugin browser where you can see all available plugins from this marketplace.
/plugin install <plugin-name>@claude-configs
Replace <plugin-name> with the name of the plugin you want to install.
/help
This will show all available commands, including those added by your installed plugins.
This repository includes a comprehensive plugin template that demonstrates all available plugin features:
/example)@example-agent)The template is located at plugin-template/ and includes detailed documentation for each feature.
A complete Claude Code plugin follows this structure:
my-plugin/
├── .claude-plugin/
│ └── plugin.json # Plugin metadata (required)
├── commands/ # Custom slash commands (optional)
│ └── example-command.md
├── agents/ # Custom agents (optional)
│ └── example-agent.md
├── skills/ # Autonomous skills (optional)
│ └── example-skill.md
├── hooks/ # Event handlers (optional)
│ └── hooks.json
└── .mcp.json # MCP server config (optional)
plugin-template/To test your plugin locally before publishing:
# Add your local plugin directory
/plugin marketplace add ./path/to/your-plugin
# Install the plugin
/plugin install your-plugin-name
# Verify it works
/help
This marketplace includes validation tools to ensure plugins meet quality standards.
# Install dependencies
npm install
# Run validation
npm run validate
The validation script checks:
Currently, this marketplace contains:
More plugins will be added as the marketplace grows. Check back regularly or contribute your own!
Plugins are organized by technology and use case:
We welcome contributions! Please see our Contributing Guide for details on:
npx claudepluginhub djankies/claude-configs --plugin tailwind-4Prisma 6 ORM patterns, client management, query optimization, and security best practices based on real-world AI coding failures
React 19 patterns, hooks, and best practices for modern React applications
TypeScript 5.9 type safety, compiler configuration, and best practices based on real-world AI coding failures. Provides intelligent skill recommendations, type safety validation, and prevents common TypeScript anti-patterns.
Cross-cutting code review plugin that orchestrates review skills from tool plugins
Comprehensive guidance for Zod v4 schema validation, covering breaking changes, new features, and best practices for TypeScript-first runtime validation
Expert Tailwind CSS v4.1 - CSS-first configuration, @theme, @utility, @variant, Oxide engine 5x faster, OKLCH colors, container queries, 15 specialized skills
Tailwind CSS v4 tools for initialization, auditing, migration, and optimization
Complete Tailwind CSS v4 expertise system with 2025/2026 best practices. PROACTIVELY activate for: (1) ANY Tailwind CSS task, (2) Tailwind v4 CSS-first configuration (@theme, @utility, @custom-variant), (3) Mobile-first responsive design and container queries, (4) Dark mode implementation, (5) WCAG 2.2 accessibility (44px touch targets, focus states), (6) Performance optimization and Core Web Vitals, (7) Plugin integration (@tailwindcss/typography, @tailwindcss/forms, container-queries), (8) Framework integration (React, Vue, Next.js, Vite), (9) Migration from v3 to v4, (10) Custom utility and component creation. Provides: Mobile-first design patterns, fluid typography (CSS clamp), container queries, WCAG 2.2 touch targets, OKLCH color systems, CSS-first @theme configuration, @utility and @custom-variant directives, responsive breakpoints, dark mode patterns, typography and forms plugins, animation utilities with reduced motion support, framework-specific integration, performance optimization, and production-ready 2025/2026 patterns. Ensures modern, accessible, performant Tailwind CSS implementations.
Tailwind v4 theming and shadcn/ui component installation, customisation, and recipes.
Production-tested setup for Tailwind CSS v4 with shadcn/ui, Vite, and React. Use when: initializing React projects with Tailwind v4, setting up shadcn/ui, implementing dark mode, debugging CSS variable issues, fixing theme switching, migrating from Tailwind v3, or encountering color/theming problems. Covers: @theme inline pattern, CSS variable architecture, dark mode with ThemeProvider, component composition, vite.config setup, common v4 gotchas, and production-tested patterns.
Ultra-compressed communication mode. Cuts ~75% of tokens while keeping full technical accuracy by speaking like a caveman.