CtrlK
BlogDocsLog inGet started
Tessl Logo
SkillPublic

starlight-theme

Create and apply custom themes to an Astro Starlight documentation site. Use when customizing colors, typography, or spacing via CSS custom properties, using the Tailwind CSS integration, applying light/dark mode variants, or loading custom fonts.

Quality

91%

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

86%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 well-built skill body: lean, copy-paste-ready code for both the plain-CSS and Tailwind paths, an explicit philosophical model (cascade layers, CSS custom properties as API), and a strong anti-patterns section that encodes real failure modes with consequences. The two residual gaps are mild redundancy between examples and anti-patterns, and the absence of a post-change verification step.

Suggestions

Add a brief verification step after each approach (e.g., run `npm run dev` and toggle dark mode to confirm overrides applied) to close the workflow_clarity gap.

Deduplicate the dark-mode CSS snippet: keep it in Approach 1 and reference it from the `.dark` anti-pattern instead of repeating it verbatim.

Trim the Philosophy-to-anti-pattern restatements of the unlayered-CSS and import-ordering rules to one authoritative statement each.

DimensionReasoningScore

Conciseness

The body is efficient: it never explains what Astro/Starlight/CSS are, states the load-bearing facts ('Starlight styles live in CSS cascade layers. Unlayered CSS always wins.'), and keeps each anti-pattern to WHY/Consequence/BAD/GOOD. Minor trimming opportunities keep it below the 5 anchor: the `:root[data-theme='dark']` snippet appears both in Approach 1 and again nearly verbatim in the dark-mode anti-pattern, the unlayered-CSS rule is stated in Philosophy and restated in the layer anti-pattern, and the starlight-tailwind import ordering is repeated between the Approach 2 code and its anti-pattern. It is well above the 3 anchor, which expects unnecessary explanation rather than deliberate repetition.

4 / 5

Actionability

Both approaches are fully executable: exact `--sl-*` variable blocks to put in `src/styles/custom.css`, the exact `customCss: ['./src/styles/custom.css']` registration, runnable commands (`npx astro add tailwind`, `npm install @astrojs/starwind-tailwind`), a complete `global.css` including the layer order line, and the updated `astro.config.mjs` with the Vite plugin. The only elision (the full `@theme` scale mapping) is deliberately deferred to a real reference file, matching the 5 anchor 'copy-paste ready code or commands; specific examples cover the common cases'.

5 / 5

Workflow Clarity

Approach 1 is explicitly sequenced (Step 1 create the file, Step 2 register in astro.config.mjs) and Approach 2 gives an ordered install-then-wire flow, with the anti-patterns enumerating failure modes and their consequences. It sits at the 4 anchor rather than 5 because there is no verification checkpoint (e.g., run the dev server and confirm the dark-mode toggle or that the accent palette applied) after the steps. It comfortably exceeds the 3 anchor — the sequence is well defined, not merely listed; and since CSS theming is not a destructive or batch operation, the validation cap does not apply.

4 / 5

Progressive Disclosure

SKILL.md is a genuine overview: the full variable catalogue lives in `references/css-variables-reference.md` (a real, verified 98-line file), referenced three times with clear signals ('See css-variables-reference.md for the full list', 'for the full Tailwind @theme color scale mapping') plus a References table with When-to-Use guidance. References are exactly one level deep (the reference file points only to external URLs, not nested local files), so this matches the top anchor 'clear overview with well-signaled one-level-deep references; easy navigation' rather than the 4 anchor with organization gaps.

5 / 5

Total

18

/

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: third-person voice, concrete action verbs, an explicit 'Use when...' clause with multiple natural trigger phrases, and tight scoping to the Astro Starlight niche. The only improvement space is adding a few more synonyms/colloquial triggers (e.g., 'brand colors', 'accent color').

DimensionReasoningScore

Specificity

The description lists multiple concrete actions — 'Create and apply custom themes', 'customizing colors, typography, or spacing via CSS custom properties', 'using the Tailwind CSS integration', 'applying light/dark mode variants', 'loading custom fonts' — giving comprehensive coverage of the skill's capabilities within its niche. It matches the anchor 'Lists multiple specific concrete actions; comprehensive coverage' and is not below it (that anchor would require only 1-2 actions with gaps) nor is there a higher anchor.

5 / 5

Completeness

It explicitly answers both questions: 'Create and apply custom themes to an Astro Starlight documentation site' (what) and 'Use when customizing colors, typography, or spacing via CSS custom properties, using the Tailwind CSS integration, applying light/dark mode variants, or loading custom fonts' (when, with concrete trigger phrases). This matches the top anchor exactly; the 4 anchor would require a less explicit or less specific 'when' clause.

5 / 5

Trigger Term Quality

Good keyword coverage with natural phrases users would say: 'colors', 'typography', 'spacing', 'Tailwind CSS', 'light/dark mode variants', 'custom fonts', 'Astro Starlight'. It falls short of the 5 anchor ('comprehensive coverage of natural terms including synonyms and file extensions') because common variations like 'brand', 'branding', 'accent color', or a natural restatement like 'theming' are absent. It clearly exceeds the 3 anchor, which expects missing common variations.

4 / 5

Distinctiveness Conflict Risk

It carves out a clear niche — theming an 'Astro Starlight documentation site' via 'CSS custom properties' and the 'Tailwind CSS integration' — with distinct triggers unlikely to fire for other skills. Only the briefest overlap risk exists with a generic Tailwind skill, which the explicit 'Astro Starlight documentation site' scoping disambiguates, keeping it at the 5 anchor rather than 4.

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

pantheon-org/tekhne

Path

skills/documentation/astro-starlight/skills/starlight-theme/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.