tailwind-best-practices

Q: How to install tailwind-best-practices?

Open your MCP config: ~/.claude.json. Then add the config to "mcpServers": { "tailwind-best-practices": { "command": "...", "args": [] } }. Finally, /mcp in Claude Code.

Q: What is tailwind-best-practices best for?

tailwind-best-practices is categorized under General. It covers: code-review, refactoring, design, coding.

New

20.9kSmitheryGeneralby mastra-ai

Tailwind CSS styling guidelines for Mastra Playground UI. This skill should be used when writing, reviewing, or refactoring styling code in packages/playground-ui and packages/playground to ensure design system consistency. Triggers on tasks involving Tailwind classes, component styling, or design tokens.

First seen 6/15/2026

Summary

This skill enforces Tailwind CSS best practices and design system consistency for the Mastra Playground UI.

It helps developers write, review, and refactor styling code in packages/playground-ui and packages/playground by ensuring proper use of Tailwind classes, design tokens, and component styling patterns.

Install & Usage

Open your MCP config

~/.claude.json

Add the server config

Add the configuration to "mcpServers": { "tailwind-best-practices": { "command": "...", "args": [] } }

Restart Claude Code

/mcp

Use Cases

Review a pull request for Tailwind CSS code in packages/playground-ui to ensure it follows design system tokens.

Refactor inline styles or custom CSS in playground components to use Tailwind utility classes.

Check for consistent spacing, color, and typography tokens across multiple UI components.

Optimize Tailwind class ordering and remove unused classes from component files.

Ensure responsive design patterns are correctly applied using Tailwind breakpoint prefixes.

Validate that new components adhere to the established Tailwind configuration and theme.

Usage Examples

/tailwind-best-practices Review the Tailwind classes in src/components/Button.tsx for consistency with our design tokens.

Refactor the Card component in packages/playground-ui to use Tailwind utility classes instead of custom CSS.

Check the responsive layout in packages/playground/src/pages/Dashboard.tsx and suggest improvements using Tailwind breakpoints.

View source on GitHub

code-reviewrefactoringdesigncoding

Security Audits

LicenseUnknownSourceWarnRepositoryPass

Frequently Asked Questions

What is tailwind-best-practices?

This skill enforces Tailwind CSS best practices and design system consistency for the Mastra Playground UI. It helps developers write, review, and refactor styling code in packages/playground-ui and packages/playground by ensuring proper use of Tailwind classes, design tokens, and component styling patterns.

How to install tailwind-best-practices?

To install tailwind-best-practices: open your mcp config (~/.claude.json), then add the config to "mcpServers": { "tailwind-best-practices": { "command": "...", "args": [] } }. Finally, /mcp in Claude Code.

What is tailwind-best-practices best for?

tailwind-best-practices is a mcp categorized under General. It is designed for: code-review, refactoring, design, coding. Created by mastra-ai.

What can I use tailwind-best-practices for?

tailwind-best-practices is useful for: Review a pull request for Tailwind CSS code in packages/playground-ui to ensure it follows design system tokens.; Refactor inline styles or custom CSS in playground components to use Tailwind utility classes.; Check for consistent spacing, color, and typography tokens across multiple UI components.; Optimize Tailwind class ordering and remove unused classes from component files.; Ensure responsive design patterns are correctly applied using Tailwind breakpoint prefixes.; Validate that new components adhere to the established Tailwind configuration and theme..