CtrlK
BlogDocsLog inGet started
Tessl Logo
SkillPublic

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

90%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide
SecuritybySnyk

Passed

No findings from the security scan

SKILL.md
Quality
Evals
Security

Quality

Content

93%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 exemplary instruction-only skill body: dense, opinionated rules with concrete examples, paths, and lint enforcement on every line, and no wasted tokens. The only soft spot is workflow clarity — the decision ladder and review checklist act as checkpoints, but an explicit step sequence for building a screen is left implicit.

DimensionReasoningScore

Conciseness

Lean and dense throughout — every sentence is a rule, a file path, or a do/don't example ('Token names drift — confirm them in the file, never use them from memory') with zero padding or explanation of concepts Claude already knows.

5 / 5

Actionability

Fully concrete guidance: exact paths to browse, copy-paste-ready class strings (`bg-(--row-bg)`, `min-w-100`), explicit do/don't pairs (`<DialogContent size="xl" className="h-[80vh]">` fine vs `<Button className="bg-red-500 text-xs">` forbidden), and named lint rules covering the common cases.

5 / 5

Workflow Clarity

The ordered class-value ladder ('Pick the highest rung that fits; each step down needs a reason') and the 'Review smells' checklist with lint rule names provide a clear sequence with checkpoints, but the end-to-end build order (find → choose → wire → verify) is implied by section order rather than stated as explicit steps.

4 / 5

Progressive Disclosure

With no bundle files, the ~57-line body stays a well-sectioned overview that points one level deep to clearly signaled repo artifacts (theme.css, README Typography section, the tailwind-v4 skill) instead of duplicating them, making navigation easy.

5 / 5

Total

19

/

20

Passed

Description

82%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 description: it uses third person, states a clear what, and gives an explicit when-clause with concrete trigger objects plus a scope exclusion. The main gap is that it names one broad action rather than several specific capabilities, and a few natural trigger synonyms (Tailwind, CSS, theme) are absent.

Suggestions

Enumerate 2-3 concrete capabilities in the what-clause (e.g., composing screens from ds/ and domains/ components, choosing theme token utilities, wiring components.css into an app's Tailwind build) instead of the single 'build frontend interfaces' action.

Add natural trigger synonyms users would say — 'Tailwind classes', 'CSS', 'theme/tokens' — to the when-clause to broaden keyword coverage.

DimensionReasoningScore

Specificity

Names the domain and a concrete action ('build Mastra frontend interfaces with the @mastra/playground-ui design system') but enumerates objects (pages, components, styling, tokens) rather than several distinct actions, so coverage is not comprehensive.

3 / 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 — pages, components, styling, or tokens'), with a concrete scope exclusion for the docs site.

5 / 5

Trigger Term Quality

Good natural keyword coverage — 'application UI', 'pages', 'components', 'styling', 'tokens', 'frontend', 'design system' — but common variations like 'Tailwind', 'CSS', or 'theme' are missing, keeping it short of comprehensive.

4 / 5

Distinctiveness Conflict Risk

Clear niche tied to a named design system, with explicit boundaries ('in this repo or in an external consumer of the design system. The docs site has its own styling and is out of scope'), so conflict risk with other skills is minimal.

5 / 5

Total

17

/

20

Passed

Validation

100%

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

Reviewed

Table of Contents

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.