view --main tailwind-best-practices-pravila-stilizatsii-dlya-react-i-tailwind-css.md

tailwind-best-practices — Правила стилизации для React и Tailwind CSS

Name: tailwind-best-practices — Правила стилизации для React и Tailwind CSS
Author: mastra-ai/mastra

Обеспечьте единообразие и поддерживаемость пользовательского интерфейса на основе React, используя этот репозиторий, который устанавливает и применяет строгие правила стилизации. Это особенно важно при разработке игр и работе с игровым движком, где последовательность и эффективность критичны для успешной геймдев.

Репозиторий tailwind-best-practices содержит приоритезированные правила, охватывающие использование компонентов, управление design token и применение классов, что позволяет автоматизировать рефакторинг и генерировать код с высокой степенью согласованности. Правила направлены на предотвращение расхождения design token и поддержание целостности библиотеки компонентов.

Примените эти рекомендации при написании новых React компонентов, рефакторинге существующего кода и проверке соответствия стилизации, особенно при работе с Next.js и Node.js. Это гарантирует, что ваш UI остается согласованным и легким в поддержке на протяжении всего жизненного цикла проекта.

$ git log --oneline --stat

⭐ звёзды: 22,432

форки: 1,807

обновлено: 29 марта 2026 года в 06:35

Проводник файлов

1 файлы

SKILL.md

readonly --- lines

--- name: tailwind-best-practices description: 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)

Инициализация мануала...