CtrlK
BlogDocsLog inGet started
Tessl Logo

theming-context

Using Optics for implementing design system guidelines, theming, and color scales.

52

Quality

66%

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 ./skills/theming-context/SKILL.md
SKILL.md
Quality
Evals
Security

Quality

Content

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

The body is concrete and code-forward with a genuinely useful precedence insight, but it is padded (duplicated dark-mode font rules, an exhaustive font URL), its 'redefine all variants' workflow is incomplete as written, and its navigation sections are fragmented. Tightening the examples and consolidating the doc-pointer sections would move it up a full band.

Suggestions

Trim the Google Fonts import to only the weights actually used and deduplicate the '--op-font-family' dark-mode overrides into one block.

Complete the 'redefine all variants' example (including minus variants) or explicitly point to the Token Reference URL for the full list, and replace 'my-new-value' placeholders with real values.

Add a verification step (e.g., confirm the custom theme compiles and renders in both light and dark modes) and merge the three 'more information' sections into one.

DimensionReasoningScore

Conciseness

The core CSS is useful, but there is real padding: an exhaustive 18-variant Google Fonts weight URL, '--op-font-family' defined in ':root' and then re-set identically in two separate dark-mode blocks, and 'my-new-value' placeholders. This fits 'mostly efficient but includes some unnecessary content that could be tightened' rather than anchor 2, since there is no explanation of concepts Claude already knows.

3 / 5

Actionability

The import example and the color-scale override block with concrete values (164, 100%, 50%) are executable and copy-paste ready. It falls short of 5 because the first CSS block uses non-executable 'my-new-value' placeholders and the 'redefine all its variants' example is only partial (plus and on-scale variants shown, no minus variants).

4 / 5

Workflow Clarity

The critical ordering constraint ('imported after the main Optics styles, ensuring that any token overrides take precedence') is explicit, but the guidance is organized by topic rather than as a sequence, and 'redefine all its variants like so' is followed by an incomplete variant list, leaving the actual workflow implicit with no way to verify a theme is complete. This matches anchor 3 (sequence present but checkpoints missing) rather than 4.

3 / 5

Progressive Disclosure

With no bundle files present, the skill inlines two large CSS blocks that could live in a reference file, and splits 'find more information' across three overlapping sections ('For More Information', 'Documentation Resources', 'When You Need More Information'). Structure exists and external links are clear, but organization could be meaningfully better, matching anchor 3.

3 / 5

Total

13

/

20

Passed

Description

61%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 serviceable description that names a specific tool and reasonable trigger keywords, but it reads more like a topic list than a capability statement. Adding a 'Use when...' clause and one or two concrete actions (e.g., overriding design tokens or building custom themes) would lift it into the top band.

Suggestions

Add an explicit trigger clause, e.g., 'Use when the user wants to customize Optics component styling, build a custom theme, or override design tokens.'

Replace the generic 'implementing design system guidelines' with concrete actions such as 'override design tokens, redefine color scales, and swap fonts'.

Include common synonyms users would actually say — 'dark mode', 'brand colors', 'custom theme' — to broaden trigger coverage.

DimensionReasoningScore

Specificity

The description names the domain ('Using Optics') and a couple of action areas ('theming, and color scales'), but 'implementing design system guidelines' is generic and no concrete actions (e.g., overriding tokens or authoring custom theme files) are stated. It matches anchor 3 (domain plus 1-2 concrete actions, not comprehensive) rather than 4, which requires several specific actions.

3 / 5

Completeness

The 'what' is clear (implementing design system guidelines, theming, and color scales with Optics) but there is no 'Use when...' clause or equivalent explicit trigger guidance, which caps completeness at 3. It is not 2 because the 'what' half is concrete and domain-specific.

3 / 5

Trigger Term Quality

'design system', 'theming', and 'color scales' are natural phrases users would say when needing this skill, giving good keyword coverage. It stays at 4 rather than 5 because common synonyms and variations like 'dark mode', 'brand colors', or 'tokens' are missing.

4 / 5

Distinctiveness Conflict Risk

'Using Optics' anchors the skill to a specific framework, making it mostly distinct with only minor overlap risk against generic theming or design-system skills. It is not 5 because the description lacks distinct trigger phrases that would fully separate it from those related skills.

4 / 5

Total

14

/

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

metadata_version

'metadata.version' is missing

Warning

Total

15

/

16

Passed

Repository
RoleModel/rolemodel-skills
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.