Mastra Playground UI를 위한 Tailwind CSS 스타일링 가이드라인입니다. packages/playground-ui 및 packages/playground에서 스타일 코드를 작성, 검토 또는 리팩토링할 때 디자인 시스템 일관성을 보장하기 위해 사용해야 합니다. Tailwind 클래스, 컴포넌트 스타일링, 또는 디자인 토큰과 관련된 작업에서 활성화됩니다.
이 스킬은 Mastra 프로젝트의 Playground UI 및 Playground 패키지에서 Tailwind CSS를 사용할 때 디자인 시스템 일관성을 유지하기 위한 가이드라인을 제공합니다. Tailwind 클래스, 컴포넌트 스타일링, 디자인 토큰과 관련된 작업에서 자동으로 트리거되어 스타일 코드 작성, 검토, 리팩토링 시 올바른 CSS 작성법을 안내합니다. 특히 Mastra Playground UI의 특성에 맞춰진 베스트 프랙티스를 따르며, 불필요한 커스텀 CSS를 지양하고 Tailwind 유틸리티 클래스를 최대한 활용하는 방식으로 코드를 구성합니다. 이를 통해 프론트엔드 개발자들이 일관된 스타일링 패턴을 적용하고 유지보수성을 높일 수 있습니다.
npx skills add https://github.com/mastra-ai/mastra/tree/main/skills/tailwind-best-practicesMastra Playground UI를 위한 Tailwind CSS 스타일링 가이드라인입니다. 이 스킬은 packages/playground-ui 및 packages/playground에서 스타일 코드를 작성, 검토 또는 리팩토링할 때 디자인 시스템 일관성을 보장하기 위해 사용해야 합니다. Tailwind 클래스, 컴포넌트 스타일링, 또는 디자인 토큰과 관련된 작업에서 활성화됩니다.
This repo contains 4 individual skills — each has its own dedicated page.
REQUIRED when modifying any file in packages/playground-ui or packages/playground. Triggers on: React component creation/modification/refactoring, UI changes, new playground features, bug fixes affecting studio UI. Generates Playwright E2E tests that validate PRODUCT BEHAVIOR, not just UI states.
Interactive planning assistant that helps create focused, well-structured ralph-loop commands through collaborative conversation
React performance optimization guidelines from Mastra Engineering. This skill should be used when writing, reviewing, or refactoring React code to ensure optimal performance patterns. Triggers on tasks involving React components, data fetching, bundle optimization, or performance improvements.
Create a Mastra project using create-mastra and smoke test the studio in Chrome using Chrome MCP server
ElevenLabs text-to-speech with mac-style say UX.
Oracle CLI second-model review/debug/refactor/design with selected files, dry-run token checks, API or browser engine.
Capture and automate macOS UI with the Peekaboo CLI.
Generate multiple radically different interface designs for a module using parallel sub-agents. Use when user wants to design an API, explore interface options, compare module shapes, or mentions "design it twice".
Build a throwaway prototype to flesh out a design — a runnable terminal app for state/business-logic questions, or several radically different UI variations toggleable from one route.
Interview the user relentlessly about a plan or design until reaching shared understanding, resolving each branch of the decision tree. Use when user wants to stress-test a plan, get grilled on their design, or mentions "grill me".