CtrlK
BlogDocsLog inGet started
Tessl Logo
SkillPublic

design-system

Guide for using Sentry's layout and text primitives. Use when implementing UI components, layouts, or typography. Enforces use of core components over styled components.

61

Quality

77%

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

Fix and improve this skill with Tessl

tessl review fix ./.agents/skills/design-system/SKILL.md
SKILL.md
Quality
Evals
Security

Quality

Content

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

A dense, well-structured design-system reference that delivers concrete props, token values, and consistent anti-pattern/example pairs Claude could not know otherwise. Its weaknesses are repetition (duplicated Container-prop lists, near-identical negative examples, a redundant checklist) and length that could be offloaded to reference files.

Suggestions

State the Container prop inheritance once (in the Container section) and drop the verbatim 'Plus ALL Container props' lists repeated in the Flex and Grid sections, replacing them with a brief pointer.

Consolidate the structurally identical '❌ Don't create styled components' examples into one general anti-pattern example, keeping only the per-component ✅ usage examples.

Move the Token Reference and Other Core Components sections into a separate reference file (e.g. references/tokens.md) so SKILL.md stays a lean overview pointing one level deep to implementation files.

DimensionReasoningScore

Conciseness

The bulk is genuinely non-obvious domain content (prop token values, import paths, project conventions) rather than concepts Claude already knows, but there is noticeable tighten-able redundancy: "Plus ALL Container props: position, padding, margin, width, height, border, radius, overflow, background, flex/grid item props, and more" is repeated verbatim in both the Flex and Grid sections, the "Quick Reference Checklist" restates rules already given, and each component repeats a structurally identical "❌ Don't create styled components" example. This fits anchor 3 (mostly efficient but could be tightened) rather than anchor 2, since the padding is repetition rather than explanation of known concepts.

3 / 5

Actionability

Concrete import statements ("import {Flex} from '@sentry/scraps/layout'"), exact token enumerations ("\"0\", \"2xs\", \"xs\", \"sm\", \"md\", \"lg\", \"xl\", \"2xl\", \"3xl\""), and consistent ❌/✅ example pairs make the guidance mostly executable and copy-paste ready. It falls short of anchor 5 due to minor example defects such as the unclosed "<UserAvatar user={user}>" and an invalid "border," value in an example's style object.

4 / 5

Workflow Clarity

The one multi-step workflow is explicitly gated with checkpoints ("1. Ask the user for confirmation … 4. Wait for explicit approval before proceeding"), and verification steps exist via the checklist ("Does the primitive support the prop I need? (Check implementation files)") plus the concrete implementation-file paths in section 4. Not anchor 5 because the core styled-component-to-primitive substitution guidance is reference-style rather than a sequenced workflow; not anchor 3 because the decision flow and the gated workflow are explicit, and no destructive or batch operations lack validation.

4 / 5

Progressive Disclosure

Sections are clearly organized and references are one level deep and well signaled ("Read /static/app/components/core/layout/container.tsx for base layout props"). Not anchor 5 because roughly 620 lines are inlined in SKILL.md: the Token Reference and Other Core Components sections, plus per-component Key Props lists that duplicate what the implementation files already contain, could live in separate reference files to keep SKILL.md a lean overview.

4 / 5

Total

15

/

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: it is Sentry-specific, uses third person, explicitly pairs a clear what with an explicit "Use when" trigger clause, and includes natural keywords like UI components, layouts, typography, and styled components. Its main limitation is that it stays at the level of a general enforcement policy rather than naming the specific primitives it covers.

DimensionReasoningScore

Specificity

Names the domain ("Sentry's layout and text primitives") and one to two concrete actions ("Guide for using", "Enforces use of core components over styled components"), matching the anchor for naming a domain with 1-2 actions. It does not list several specific actions (anchor 4), and the enforcement clause is more concrete than the generic level of anchor 2.

3 / 5

Completeness

"Guide for using Sentry's layout and text primitives" clearly answers what it does, and "Use when implementing UI components, layouts, or typography" is an explicit when-clause with concrete trigger phrases. Both what and when are explicitly stated, matching the top anchor rather than anchor 4 where the when could be more specific.

5 / 5

Trigger Term Quality

"UI components", "layouts", "typography", and "styled components" give good coverage of natural phrases a developer would say when this skill is needed. Not anchor 5 because common variations like specific primitive names (Flex, Grid, Stack, Text), "styling", or "Emotion" are absent; better than anchor 3 since the main trigger nouns are all present.

4 / 5

Distinctiveness Conflict Risk

The Sentry-specific scope ("Sentry's layout and text primitives", "core components over styled components") carves a clear niche, but the triggers "UI components, layouts, or typography" are broad frontend terms with minor overlap risk against other UI/styling skills — anchor 4 (mostly distinct). Third-person voice is used throughout, so no voice penalty applies.

4 / 5

Total

16

/

20

Passed

Validation

93%

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

Validation — 15 / 16 Passed

Validation for skill structure

CriteriaDescriptionResult

skill_md_line_count

SKILL.md is long (627 lines); consider splitting into references/ and linking

Warning

Total

15

/

16

Passed

Repository

getsentry/sentry

Path

.agents/skills/design-system/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.