CtrlK
BlogDocsLog inGet started
Tessl Logo

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.

70

Quality

86%

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 exemplarily disciplined rules skill: dense, concrete, and non-redundant, with paired do/don't examples, a clear decision ladder for class values, and well-signaled pointers to deeper material. The only structural gap is that the review checklist and validation checkpoints are distributed across sections rather than consolidated into one explicit build-then-verify sequence.

DimensionReasoningScore

Conciseness

Lean and rule-dense throughout: every line carries a constraint Claude does not already know ('Token names drift — confirm them in the file, never use them from memory', 'bg-[var(--x)] — use bg-(--x)'), with zero padding and no explanation of concepts Claude already knows — Tailwind v4 mechanics are delegated out to the tailwind-v4 skill rather than restated.

5 / 5

Actionability

Guidance is fully concrete with paired right/wrong examples at every decision point: real paths ('packages/playground-ui/src/ds/components/', 'theme.css'), real values ('min-w-100', 'max-h-[calc(100dvh-3rem)]', 'bg-(--row-bg)'), correct ('<DialogContent className="max-w-100">') vs forbidden ('<Button className="bg-red-500 text-xs">') usage, and exact import sources for cn().

5 / 5

Workflow Clarity

There is a clear ordered decision procedure ('Pick the highest rung that fits; each step down needs a reason') plus explicit validation checkpoints — 'Check the exports and existing usage before building anything new', 'confirm them in the file' for tokens — and an escalation path for missing variants/tokens. It falls short of the top anchor because the build-then-verify loop is distributed across sections (review smells) rather than presented as one explicit sequence with fix-and-retry guidance.

4 / 5

Progressive Disclosure

A single well-sectioned SKILL.md with no bundle files; nothing that belongs in a separate reference file is inlined, and deeper material is correctly pointed to one level deep and clearly signaled (the Typography section of packages/playground-ui/README.md, the tailwind-v4 skill, the theme/ @theme blocks). Headers make navigation trivial.

5 / 5

Total

19

/

20

Passed

Description

78%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 with an explicit 'use when' clause, concrete trigger nouns, and a clear out-of-scope boundary. Its main weakness is thin capability coverage: it says what domain the skill covers but not what the skill actually does inside it (compose components, pick tokens/utilities, theme, wire cn()).

Suggestions

List 2-3 concrete actions after the domain, e.g. 'Compose screens from ds/ and domains/ components, pick theme tokens and utilities over arbitrary values, and wire dark mode and cn() class merging.'

Add one or two more natural trigger synonyms users might say, such as 'screen', 'layout', or 'Tailwind', to broaden matching without adding length.

Consider naming the tailwind-v4 boundary directly in the description (e.g. 'Tailwind mechanics live in a separate skill') to reduce overlap risk with closely related skills.

DimensionReasoningScore

Specificity

The description names the domain ("build Mastra frontend interfaces with the @mastra/playground-ui design system") with essentially one concrete action — building UI from the design system — which matches the anchor 'Names domain and 1-2 concrete actions, but not comprehensive'. It does not enumerate the specific actions covered by the skill (composing components, choosing tokens/utilities, theming, wiring).

3 / 5

Completeness

Both halves are explicit: the 'what' ("build Mastra frontend interfaces with the @mastra/playground-ui design system") and the 'when' ("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"), plus an explicit out-of-scope boundary ("The docs site has its own styling and is out of scope"). This clearly matches the anchor for concrete what-and-when trigger phrasing.

5 / 5

Trigger Term Quality

Good natural keyword coverage — "frontend interfaces", "application UI", "pages, components, styling, or tokens", "design system" — phrases a user would plausibly say. A few natural synonyms are missing (e.g. "screen", "form", "layout", "Tailwind"), so it sits between anchor 3 and the comprehensive-synonym coverage of anchor 5.

4 / 5

Distinctiveness Conflict Risk

A clear niche (@mastra/playground-ui application UI) with an explicit scope boundary that excludes the docs site, making it mostly distinct. However, the trigger 'creating or modifying any application UI' is broad and could overlap with closely related skills such as the referenced tailwind-v4 skill, matching 'minor overlap risk with closely related skills' rather than the minimal-conflict anchor 5.

4 / 5

Total

16

/

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
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.