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.
62
72%
Does it follow best practices?
Impact
—
No eval scenarios have been run
Advisory
Suggest reviewing before use
Optimize this skill with Tessl
npx tessl skill review --optimize ./.agents/skills/design-system/SKILL.mdQuality
Discovery
67%Based on the skill's description, can an agent find and select it at the right time? Clear, specific descriptions lead to better discovery.
The description is functional with a clear 'Use when' clause and reasonable domain specificity around Sentry's layout primitives. Its main weaknesses are the lack of concrete action verbs and specific component names, and somewhat generic trigger terms that could overlap with other UI-related skills. Adding specific primitive names and more natural trigger terms would strengthen it.
Suggestions
List specific primitives or components (e.g., 'Layout, Grid, Text, Heading components') to increase specificity and trigger term coverage.
Add more natural trigger terms users might use, such as 'spacing', 'font size', 'CSS', 'flex', or specific Sentry component names like 'Panel', 'TextBlock', etc.
| Dimension | Reasoning | Score |
|---|---|---|
Specificity | Names the domain (Sentry's layout and text primitives) and mentions some actions (implementing UI components, layouts, typography, enforcing core components over styled components), but doesn't list specific concrete actions like which primitives, what layout patterns, or what text components are available. | 2 / 3 |
Completeness | Clearly answers both 'what' (guide for using Sentry's layout and text primitives, enforces core components over styled components) and 'when' (use when implementing UI components, layouts, or typography) with an explicit 'Use when' clause. | 3 / 3 |
Trigger Term Quality | Includes some relevant keywords like 'UI components', 'layouts', 'typography', 'styled components', and 'Sentry', but misses common variations users might say such as 'CSS', 'styling', 'grid', 'flex', 'spacing', 'font', or specific component names. | 2 / 3 |
Distinctiveness Conflict Risk | The Sentry-specific context helps distinguish it, but 'UI components, layouts, or typography' is broad enough to potentially overlap with other UI/styling skills. The mention of 'core components over styled components' adds some distinctiveness but could still conflict with general CSS or component library skills. | 2 / 3 |
Total | 9 / 12 Passed |
Implementation
77%Reviews the quality of instructions and guidance provided to agents. Good implementation is clear, handles edge cases, and produces reliable results.
This is a well-crafted, highly actionable skill with excellent concrete examples showing both anti-patterns and correct usage for every component. Its main weakness is verbosity—the repeated emphasis on Container inheritance, the extensive inline prop listings, and the token reference section make it longer than necessary. The content would benefit from splitting reference material into separate files to reduce the main skill's token footprint.
Suggestions
Extract the Token Reference section into a separate TOKENS.md file and link to it, reducing the main skill's length by ~40 lines
Consolidate the repeated 'Plus ALL Container props' notes into a single prominent callout at the top of the Layout Primitives section rather than repeating it for Flex, Grid, and Stack
| Dimension | Reasoning | Score |
|---|---|---|
Conciseness | The skill is fairly comprehensive but includes some redundancy—repeatedly stating that Flex/Grid/Stack extend Container and inherit all its props, and listing 'Plus ALL Container props' sections multiple times. The do/don't examples are useful but the sheer volume (300+ lines) could be tightened, especially since Claude can infer inheritance patterns. | 2 / 3 |
Actionability | Every component has concrete, copy-paste-ready TSX examples with clear do/don't patterns. Import paths are specified, prop values are enumerated with exact token names, and the examples are executable rather than pseudocode. | 3 / 3 |
Workflow Clarity | For a component usage skill (not a multi-step destructive process), the workflow is clear: check the checklist before creating styled components, use the appropriate primitive, and the abstraction creation workflow has an explicit confirmation step. The decision tree at the end provides a clear sequence for choosing the right component. | 3 / 3 |
Progressive Disclosure | The skill references implementation files (e.g., container.tsx, flex.tsx) for complete prop lists, which is good progressive disclosure. However, the document itself is quite long and monolithic—the token reference section, info components, and general guidelines could potentially be split into separate files. No bundle files are provided to support this structure. | 2 / 3 |
Total | 10 / 12 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 — 11 / 11 Passed
Validation for skill structure
No warnings or errors.
552fb5c
Table of Contents
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.