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.

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

71%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 highly actionable, well-structured style-guide skill: concrete code patterns, complete token references, and an unusually good guardrail workflow around abstraction creation. Its weaknesses are repetition of the inheritance rule and a 600+ line monolithic body that inlines API-reference detail a references/ file could carry.

Suggestions

Move the full prop enumerations and Token Reference section into a references/ file (e.g., references/props.md, references/tokens.md) and keep SKILL.md as an overview with well-signaled links, reducing context load.

State the Container-inheritance rule once (in the callout) and drop the repeated 'Extends Container, inheriting all Container props' sentences from the Flex, Grid, and Stack sections.

Close the incomplete JSX snippets (e.g., the UserAvatar and responsive Flex examples) or add the missing imports (Tooltip, Image) so examples are fully copy-paste ready.

DimensionReasoningScore

Conciseness

The body is dense with proprietary prop lists, token values, and ❌/✅ code examples Claude cannot know elsewhere, with no padding explaining known concepts. However, the Container-inheritance fact is restated in the callout and again in the Container, Flex, Grid, and Stack sections, which could be trimmed — minor over-explanation matching the 4 anchor rather than the lean 5.

4 / 5

Actionability

Nearly every section pairs concrete import statements, prop values, and copy-ready ❌/✅ examples covering common cases. Minor gaps keep it below 5: a few snippets are not complete executable JSX (e.g., '<UserAvatar user={user}>' is unclosed, '<Flex direction={{...}}>' snippet ends mid-component) and some examples use symbols like Tooltip and Image without imports.

4 / 5

Workflow Clarity

This is a reference/decision-guidance skill rather than a multi-step process, and its decision flow is unambiguous: a Quick Reference Checklist, per-component 'When to Use' sections, and an explicitly numbered thin-abstraction workflow with a hard checkpoint (ask, explain, justify, wait for explicit approval). No validation loops are needed since no destructive or batch operations are involved, but the mostly-reference structure keeps it at 4 rather than 5.

4 / 5

Progressive Disclosure

The one-level-deep pointers to implementation files are clearly signaled ('refer to the implementation files', a dedicated 'Check Implementation Files' section with explicit paths), but roughly 400 lines of prop enumerations and token tables are inlined directly in SKILL.md with no bundle files at all — content that would more appropriately live in a references/ file, matching the anchor where content that should be separate is inline.

3 / 5

Total

15

/

20

Passed

Description

73%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 concise, third-person description with an explicit 'Use when' clause and a clearly distinguished Sentry-specific niche. Its main weakness is modest action specificity and trigger coverage — mentioning concrete component names or conflict signals like styled-components/Emotion would sharpen it.

Suggestions

Name the concrete primitives or actions (e.g., 'Use Flex, Grid, Stack, Text, and Heading from @sentry/scraps instead of Emotion styled components') to raise specificity.

Add trigger synonyms users actually say, such as 'styled components', 'CSS-in-JS', or 'Emotion', to strengthen trigger-term coverage and the when-clause.

DimensionReasoningScore

Specificity

Names the domain ('Sentry's layout and text primitives') and 1-2 concrete actions ('Enforces use of core components over styled components'), but does not enumerate several specific capabilities or components, matching the 1-2-concrete-actions anchor.

3 / 5

Completeness

It explicitly answers both what ('Guide for using Sentry's layout and text primitives... Enforces use of core components over styled components') and when ('Use when implementing UI components, layouts, or typography'), but the when-clause could name more concrete triggers such as styled-components or Emotion usage, matching the anchor where 'when' could be more explicit.

4 / 5

Trigger Term Quality

'UI components', 'layouts', and 'typography' are natural phrases users would say, giving good keyword coverage; a few natural terms are missing (e.g., 'styled components', 'CSS', 'Emotion', 'flex/grid'), so it falls just short of comprehensive synonym coverage.

4 / 5

Distinctiveness Conflict Risk

'Sentry's layout and text primitives' carves out a clear, codebase-specific niche with distinct triggers; minimal risk of firing for unrelated skills.

5 / 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 (631 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.