CtrlK
BlogDocsLog inGet started
Tessl Logo

likethemammal/emotion-required

Enforce Emotion (@emotion/styled and @emotion/react) as the only styling library; forbid styled-components usage.

95

1.61x
Quality

97%

Does it follow best practices?

Impact

92%

1.61x

Average score across 4 eval scenarios

SecuritybySnyk

Passed

No known issues

Overview
Quality
Evals
Security
Files

Quality

Content

92%

Reviews the quality of instructions and guidance provided to agents. Good implementation is clear, handles edge cases, and produces reliable results.

This is a high-quality convention/constraint skill that efficiently communicates project-specific styling rules. It excels at actionability with exact imports, executable code patterns, and a comprehensive forbidden/replacement table. The content is well-organized with appropriate edge case coverage, though the referenced bundle files couldn't be verified.

DimensionReasoningScore

Conciseness

Every section earns its place — the forbidden table, canonical imports, edge cases, and state transform patterns all convey project-specific knowledge Claude wouldn't already have. No padding or explanation of basic concepts.

3 / 3

Actionability

Provides exact import statements, executable code patterns (getButtonBackground), a concrete forbidden/replacement table, and specific file path references. Fully copy-paste ready guidance.

3 / 3

Workflow Clarity

This is primarily a constraint/convention skill rather than a multi-step workflow. The single task (use Emotion, not styled-components) is unambiguous, with clear rules, a forbidden table, and edge case handling that leaves no ambiguity about what to do.

3 / 3

Progressive Disclosure

References to good-examples.md, bad-examples.md, and rationale.md are well-signaled and one level deep, which is good structure. However, no bundle files were provided, so we can't verify these references exist. The main content is well-organized but the forbidden table and edge cases section could arguably be in a reference file to keep the overview leaner.

2 / 3

Total

11

/

12

Passed

Description

100%

Based on the skill's description, can an agent find and select it at the right time? Clear, specific descriptions lead to better discovery.

This is a strong, well-crafted skill description that clearly defines its purpose, lists concrete actions, and provides explicit activation triggers. It uses third-person voice throughout and includes highly specific technical terms that serve as natural trigger keywords. The distinction between what it does and when it activates is clear and well-articulated.

DimensionReasoningScore

Specificity

Lists multiple specific concrete actions: enforcing Emotion as the styling library, forbidding styled-components imports, handling styled.x usage, css template literals, theme provider setup, .styles.js file creation, and hover/active state styling.

3 / 3

Completeness

Clearly answers both 'what' (enforce Emotion, forbid styled-components, handle CSS-in-JS styling) and 'when' with explicit triggers via the 'Activates on tasks involving...' clause listing specific scenarios.

3 / 3

Trigger Term Quality

Excellent coverage of natural trigger terms users would encounter: '@emotion/styled', '@emotion/react', 'styled-components', 'CSS-in-JS', 'styled.x', 'css template literals', 'theme provider', '.styles.js', 'hover/active state styling'. These are terms developers would naturally use.

3 / 3

Distinctiveness Conflict Risk

Highly distinctive — targets a very specific niche (Emotion CSS-in-JS library enforcement in a particular codebase context with legacy styled-components). Unlikely to conflict with other skills due to the narrow domain and specific library references.

3 / 3

Total

12

/

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.

Validation11 / 11 Passed

Validation for skill structure

No warnings or errors.

Reviewed

Table of Contents