mastra-frontend

How to build Mastra frontend interfaces with the @mastra/playground-ui design system. This skill should be used when creating or modifying any application UI — pages, components, styling, or tokens — in this repo or in an external consumer of the design system. The docs site has its own styling and is out of scope.

Quality

85%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide

Securityby

Passed

No findings from the security scan

Quality

Content

86%Weight 40%Scale 1-5

Reviews the quality of instructions and guidance provided to agents. Good implementation is clear, handles edge cases, and produces reliable results.

An excellent, lean styling guide that is highly actionable and well-structured, deferring detail to source files and providing a concrete review checklist. Only minor conciseness trimming in the framing prose would tighten it further.

Dimension	Reasoning	Score
Conciseness	Dense and directive throughout with no padding about concepts Claude already knows, but the opening paragraph restates the design-system premise from the description and a few framing sentences could be trimmed, keeping it just shy of fully lean.	4 / 5
Actionability	Fully concrete guidance throughout — exact token-to-utility mappings (--color-x → bg-x/text-x), real file paths (packages/playground-ui/theme.css), copy-paste class examples, and named functions like cn() with specific anti-pattern syntax in 'Review smells'.	5 / 5
Workflow Clarity	Provides a clear ranked decision sequence for choosing class values plus a 'Review smells' verification checklist and an explicit approval gate for design-system changes, but lacks a validate→fix→retry feedback loop (which is not really applicable to styling).	4 / 5
Progressive Disclosure	A clear overview organized into well-labeled sections that points to source-of-truth files (theme.css, ds/components, domains/) for deeper detail rather than duplicating it, with easy navigation and no inlined content that belongs elsewhere.	5 / 5
	Total	18 / 20 Passed

Description

83%Weight 40%Scale 1-5

Based on the skill's description, can an agent find and select it at the right time? Clear, specific descriptions lead to better discovery.

A strong, well-scoped description that clearly states both what the skill does and when to use it, with concrete trigger terms and explicit out-of-scope guidance. It is held back only by somewhat generic verbs and missing synonyms in trigger coverage.

Dimension	Reasoning	Score
Specificity	Names the domain and lists several concrete objects — 'creating or modifying any application UI — pages, components, styling, or tokens' — but the verbs (build/create/modify) stay somewhat generic, leaving minor coverage gaps relative to the comprehensive 5 anchor.	4 / 5
Completeness	Explicitly answers both what ('How to build Mastra frontend interfaces with the @mastra/playground-ui design system') and when ('This skill should be used when creating or modifying any application UI') with concrete trigger phrases, plus explicit in/out-of-scope boundaries.	5 / 5
Trigger Term Quality	Good natural keywords a user would say ('application UI', 'pages, components, styling, or tokens', '@mastra/playground-ui'), but it lacks synonyms and common variations like 'building a screen' that would push it to comprehensive coverage.	4 / 5
Distinctiveness Conflict Risk	Clear niche scoped to the @mastra/playground-ui design system and 'this repo or an external consumer', with the docs site explicitly excluded; minor overlap risk remains with closely related frontend or Tailwind skills.	4 / 5
	Total	17 / 20 Passed

Validation

100%

Warnings & errors only

Checks the skill against the spec for correct structure and formatting. All validation checks must pass before discovery and implementation can be scored.

Validation — 16 / 16 Passed

Validation for skill structure

No warnings or errors.

Repository: mastra-ai/mastra
Path: .claude/skills/mastra-frontend/SKILL.md
Commit: 35c4dbc

Reviewed: about 4 hours ago

Table of Contents

Discovery Implementation Validation

Is this your skill?

If you maintain this skill, you can claim it as your own. Once claimed, you can manage eval scenarios, bundle related skills, attach documentation or rules, and ensure cross-agent compatibility.