PaperclipOrg
Claude Agent Skill · by Mastra Ai

Tailwind Best Practices

Install Tailwind Best Practices skill for Claude Code from mastra-ai/mastra.

Install
Terminal · npx
$npx skills add https://github.com/vercel-labs/agent-skills --skill vercel-react-best-practices
Works with Paperclip

How Tailwind Best Practices fits into a Paperclip company.

Tailwind Best Practices drops into any Paperclip agent that handles this kind of work. Assign it to a specialist inside a pre-configured PaperclipOrg company and the skill becomes available on every heartbeat — no prompt engineering, no tool wiring.

S
SaaS FactoryPaired

Pre-configured AI company — 18 agents, 18 skills, one-time purchase.

$27$59
Explore pack
Source file
SKILL.md76 lines
Expand
---name: tailwind-best-practicesdescription: 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.--- # Tailwind Best Practices ## Overview Styling guidelines for the Mastra Playground UI, containing 5 rules across 3 categories. Rules are prioritized by impact to guide automated refactoring and code generation. These rules ensure design system consistency, prevent token drift, and maintain component library integrity. ## Scope - `packages/playground-ui`- `packages/playground` ## When to Apply Reference these guidelines when: - Writing new React components with Tailwind styles- Reviewing code for styling consistency- Refactoring existing styled components- Adding or modifying UI elements ## Priority-Ordered Guidelines Rules are prioritized by impact: | Priority | Category        | Impact   || -------- | --------------- | -------- || 1        | Component Usage | CRITICAL || 2        | Design Tokens   | CRITICAL || 3        | ClassName Usage | HIGH     | ## Quick Reference ### Critical Patterns (Apply First) **Component Usage:** - Use existing components from `@playground-ui/ds/components/` (`component-use-existing`)- Never create new components in the `ds/` folder **Design Tokens:** - Only use tokens from `tailwind.config.ts` in `@playground-ui` (`tokens-use-existing`)- Never modify design tokens or `tailwind.config.ts` (`tokens-no-modification`) ### High-Impact Patterns **ClassName Usage:** - No arbitrary Tailwind values except `height` and `width` (`classname-no-arbitrary`)- No `className` prop on DS components except `h-`/`w-` on `DialogContent` and `Popover` (`classname-no-ds-override`) ## References Full documentation with code examples is available in: - `references/tailwind-best-practices-reference.md` - Complete guide with all patterns- `references/rules/` - Individual rule files organized by category To look up a specific pattern, grep the rules directory: ```grep -l "component" references/rules/grep -l "token" references/rules/grep -l "className" references/rules/``` ## Rule Categories in `references/rules/` - `component-*` - Component usage rules (1 rule)- `tokens-*` - Design token rules (2 rules)- `classname-*` - ClassName usage rules (2 rules)