skills.rest
mastra-ai
mastra-aiOFFICIAL
Explore all skills by this author →
Website𝕏@mastraGitHub

mastra-frontend

Build Mastra application UIs by composing @mastra/playground-ui design system components with Tailwind v4 utilities.

27.6k|2.7k|Updated Aug 6, 2024
Search Tags:#Tailwind#Frontend#themING#Design system#Mastra#CSS tokens#UI Components
One-click install
npx skills add https://github.com/mastra-ai/mastra --skill mastra-frontend
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: mastra-frontend
Source: https://github.com/mastra-ai/mastra/tree/main/.claude/skills/mastra-frontend
Command: npx skills add https://github.com/mastra-ai/mastra --skill mastra-frontend

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Frontend work in the Mastra ecosystem often drifts off the design system: developers hand-write colors, font sizes, and shadows, guess token names from memory, or rebuild components that already exist. This Skill enforces the boundary between look (owned by the design system) and layout (owned by the consumer) so every screen stays consistent.

Core Features & Use Cases

  • Component discovery rules: Directs you to browse packages/playground-ui/src/ds/components/ and src/domains/ before building anything new, preventing duplicate components.
  • Token and class selection hierarchy: Provides a five-rung decision ladder from DS variants down to square-bracket arbitrary values, with theme.css as the single source of truth for token names.
  • Theme contract and wiring guidance: Explains the dark/light palette flip via html.light, the cn() utility with its extended twMerge config, and when local CSS custom properties beat new @theme tokens.
  • Use Case: When adding a settings dialog to a Mastra app, use this Skill to compose existing ds/ primitives, size the dialog with max-w-100, and avoid review smells like bg-[#hex] or dark: overrides on semantic tokens.

Quick Start

Use the mastra-frontend skill to build a new page in the playground UI using existing design system components and theme tokens.

Frequently Asked Questions about mastra-frontend

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I build a UI with the Mastra playground-ui design system?▼

Compose existing components from packages/playground-ui/src/ds/components/ and src/domains/, then arrange them with Tailwind layout utilities like gap, flex, and max-w. Never hand-write colors, font sizes, or shadows; the design system owns the look.

When can I use className on a design system component?▼

className is allowed only for layout concerns such as max-w-100, shrink-0, or margins. Using it for look properties like bg-red-500 or text-xs is forbidden; instead use the component's variants and props, or request a new variant.

How do I find the correct Tailwind token names in Mastra?▼

Read the @theme block in packages/playground-ui/theme.css, where --color-x maps to bg-x/text-x/border-x and --spacing-x maps to p-x/gap-x. Token names drift over time, so confirm them in the file rather than relying on memory.

Can I add a new color token to theme.css for one component?▼

No. theme.css variables are API and require explicit design team approval to modify. For runtime or single-component values, use a plain CSS custom property consumed via the bg-(--var) shorthand, which generates no utility.

Why should I use cn() instead of twMerge from tailwind-merge?▼

The cn() utility exported from @mastra/playground-ui uses a twMerge instance extended with the design system scales, so utilities like text-ui-md merge correctly. Importing twMerge directly from tailwind-merge mis-merges these custom classes.

Does the Mastra design system support dark mode?▼

Yes. The palette defaults to dark in :root and html.light flips the semantic variables. Theming happens automatically through semantic tokens, so you should never write dark: color overrides on them.

Related Skills

Explore More Software Engineering Skills→
kellyclaudeaikellyclaudeai

Tailwind v4 Design Tokens Skill

Configure Tailwind CSS v4 with semantic design tokens for Vite and PostCSS projects.

Community
Intermediate
gptdeividgptdeivid

copilotkit-setup

Install CopilotKit packages and wire runtime endpoints for existing apps.

Community
Advanced
stencilastencila
900

theme-review

Review Stencila theme.css files for correctness, token usage, and cross-target compatibility.

Official
Intermediate
akashic-devkitakashic-devkit
2

tailwind-best-practices

Enforce Tailwind CSS styling guidelines for the Mastra Playground UI.

Official
Intermediate