Streamline Tailwind CSS workflows by creating semantic components with @apply compositions, dark mode variants, and tests; refactor inline styles to structured patterns; audit code for naming, coverage, and optimizations.
npx claudepluginhub 2389-research/claude-pluginsThis skill should be used when creating new styled components or adding new CSS classes. Triggers on "create component", "new button", "new card", "add styles", "style component", "build UI element". Guides semantic naming, Tailwind composition, dark mode support, and test coverage.
This skill should be used when refactoring existing CSS from inline styles or utility classes to semantic patterns. Triggers on "refactor CSS", "extract styles", "consolidate CSS", "convert inline", "clean up styles", "migrate to semantic". Transforms to semantic classes with dark mode and tests.
This skill should be used when reviewing or auditing existing CSS code for consistency with established patterns. Triggers on "review CSS", "audit styles", "check CSS", "validate stylesheet", "CSS review". Checks semantic naming, dark mode coverage, Tailwind usage, and test coverage.
Claude Code plugins and MCP servers we use at 2389.
Add the marketplace:
/plugin marketplace add 2389-research/claude-plugins
Install plugins individually:
/plugin install css-development@2389-research
/plugin install firebase-development@2389-research
/plugin install terminal-title@2389-research
| Plugin | Description | Documentation |
|---|---|---|
| css-development | CSS development workflows with Tailwind composition, semantic naming, and dark mode by default | README |
| firebase-development | Firebase project workflows including setup, features, debugging, and validation | README |
| terminal-title | Automatically updates terminal title with emoji + project + topic context, plus TodoWrite conventions | README |
This marketplace also lists external MCP servers:
Browse the marketplace: https://2389-research.github.io/claude-plugins
This is a monorepo containing multiple independent plugins. Each plugin:
css-development/, firebase-development/, etc.).claude-plugin/plugin.json configurationSee CLAUDE.md for developer documentation on the monorepo structure and conventions.
mkdir -p new-plugin/.claude-pluginnew-plugin/.claude-plugin/plugin.jsonnew-plugin/skills/new-plugin/README.md and new-plugin/CLAUDE.md.claude-plugin/marketplace.json with new plugin entrynpm run generateSee docs/DEVELOPMENT.md for comprehensive development guide.
Want to chat about these plugins or how we use Claude Code?
Email us: hello@2389.ai
We'd love to hear from you!
Validation and quality enforcement for Tailwind CSS projects with comprehensive utility-first CSS patterns and best practices.
Iterative artifact refinement with investigation-first judge board - constructs problem-specific judges that read the code, understand the problem, and propose evidence-based improvements
Agents and skills that are specialised in building and maintaining web applications
Frontend development skill for React, Next.js, TypeScript, and Tailwind CSS. Includes component scaffolding, bundle analysis, performance optimization, and accessibility best practices.
Use this agent for expert assistance with web development tasks using React, Next.js, NestJS, and other modern web frameworks with TypeScript and Tailwind CSS. This includes code analysis, component creation, debugging, performance optimization, and architectural decisions. Examples: <example>Context: User is building a Next.js app and encounters a routing issue. user: 'My dynamic routes in Next.js are not rendering correctly' assistant: 'Let me use the web-dev agent to analyze your Next.js routing setup and provide a solution' <commentary>This is a Next.js-specific routing issue, so the web-dev agent will provide targeted guidance.</commentary></example> <example>Context: User needs a reusable React component with Tailwind CSS. user: 'I need a card component that matches my app's Tailwind-based design system' assistant: 'I'll use the web-dev agent to create a TypeScript-based React card component styled with Tailwind CSS, following your app's design patterns' <commentary>The user requires a component that aligns with their Tailwind CSS design system, so the web-dev agent ensures compatibility.</commentary></example>
Share bugs, ideas, or general feedback.
Manages shadcn components and projects — adding, searching, fixing, debugging, styling, and composing UI. Provides project context, component docs, and usage examples.
Own this plugin?
Verify ownership to unlock analytics, metadata editing, and a verified badge.
Sign in to claimOwn this plugin?
Verify ownership to unlock analytics, metadata editing, and a verified badge.
Sign in to claim