CtrlK
BlogDocsLog inGet started
Tessl Logo
SkillPublic

bestax-theming

Customize colors, branding, dark mode, and visual tokens of an app built with @allxsmith/bestax-bulma. Use when changing the primary/brand color, recoloring components, overriding Bulma --bulma-* CSS variables, setting fonts/radius/spacing tokens, adding light/dark mode, or configuring the app-wide icon library / class prefix via ConfigProvider.

Quality

85%

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

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.

Highly actionable, package-specific guidance with copy-paste code and a useful verification checklist, dragged down by dense run-on prose with a triple-repeated first-paint rule and by two example files that are referenced but missing from the bundle.

Suggestions

Ship the referenced examples/theme-config.tsx and examples/dark-mode.tsx (or remove the Examples section and the citations to it) — both are cited in the body and checklist but absent from the bundle.

State the index.html first-paint rule once in the dark-mode section and reference it from the checklist and contrast bullets instead of repeating it three times.

Break the opening Approach paragraph's nested clauses about --bulma-<color>-invert-l and --bulma-<color>-on-scheme-l into a short bulleted list so the recolor sequence reads in one pass.

DimensionReasoningScore

Conciseness

All content is package-specific with no generic-concept padding, but the opening Approach paragraph is a multi-clause run-on ('the stylesheet's build picked the label on a solid color … and the color's text on the page … so when the new color reads lighter or darker…'), and the index.html first-paint rule is repeated three times (dark-mode paragraph, single-mode contrast bullet, checklist). Not 2: nothing explains concepts Claude already knows; not 4: the repetition and winding sentences are more than minor trims.

3 / 5

Actionability

Copy-paste-ready Quick start and ConfigProvider code, exact prop names (primaryH/primaryS/primaryL, bulmaVars, colorMode, iconLibrary, classPrefix), and concrete CSS selectors ('[data-theme=\'dark\']', ':root:not([data-theme])', '--my-canvas: var(--bulma-scheme-main)') cover the common cases.

5 / 5

Workflow Clarity

Override paths are ordered with one marked 'runtime, preferred', the contrast section gives an explicit conditional rule ('Apply exactly one of these rules whenever custom color tokens or fixed-color surfaces exist'), and the closing checklist serves as verification. Not 5: there is no error-recovery/feedback loop and the dense opening paragraph obscures the recolor sequence; not 3: the checklist and explicit decision rules are genuine checkpoints.

4 / 5

Progressive Disclosure

The two main references (references/css-variables.md, references/themeable-components.md) are real, well-signaled, one level deep, and accurately described — but the body and checklist cite examples/theme-config.tsx and examples/dark-mode.tsx, and no examples/ directory exists in the bundle, so navigation breaks for the Examples section. Not 4: dangling file references are more than a minor organization gap.

3 / 5

Total

15

/

20

Passed

Description

92%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 names the target package, enumerates concrete capabilities, and closes with an explicit 'Use when…' trigger clause. Its only weakness is missing the most natural synonym ('theme'/'theming') among its trigger terms.

DimensionReasoningScore

Specificity

Enumerates multiple concrete actions — 'changing the primary/brand color, recoloring components, overriding Bulma --bulma-* CSS variables, setting fonts/radius/spacing tokens, adding light/dark mode, or configuring the app-wide icon library / class prefix via ConfigProvider' — with no gaps in coverage.

5 / 5

Completeness

Sentence one states the 'what' ('Customize colors, branding, dark mode, and visual tokens of an app built with @allxsmith/bestax-bulma') and an explicit 'Use when…' clause gives concrete 'when' triggers.

5 / 5

Trigger Term Quality

Good natural keywords ('primary/brand color', 'recoloring components', 'dark mode', 'fonts', 'icon library'), but the most natural synonym a user would say — 'theme'/'theming'/'restyle' — is absent. Not 3: coverage goes well beyond 'some relevant keywords'; not 5: a few common phrasings are missing.

4 / 5

Distinctiveness Conflict Risk

Scoped to a named package (@allxsmith/bestax-bulma), Bulma --bulma-* variables, and ConfigProvider — a clear niche with distinct triggers and minimal conflict risk with generic styling skills.

5 / 5

Total

19

/

20

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 — 16 / 16 Passed

Validation for skill structure

No warnings or errors.

Repository

allxsmith/bestax

Path

skills/bestax-theming/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.