color-system

Applies and reviews SurfSense's canonical light and dark color palette, semantic design tokens, typography, charts, borders, shadows, and theme mappings. Use when creating or changing frontend colors, themes, component styling, data visualizations, or design tokens.

Quality

83%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide

Securityby

Passed

No findings from the security scan

Quality

Content

82%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 high-quality, token-efficient instruction skill with concrete token names, measured contrast data, and a well-sequenced validated workflow. The main gap is that the referenced canonical PALETTE.css file is absent from the bundle.

Suggestions

Ship PALETTE.css alongside SKILL.md (or in references/) so the canonical palette contract the body points to actually exists and can be verified, since the skill treats it as the source of truth.

Add one concrete validation step the model can run after applying tokens (e.g., a contrast-check command or a token-pair checklist to re-run) to turn the report-and-escalate feedback loop into a fix-validate-retry loop.

Include one short executable example showing the global token layer application (e.g., a `@theme inline` snippet or the components.json → global CSS lookup) to close the actionability gap for the most common implementation case.

Dimension	Reasoning	Score
Conciseness	Lean and dense: principles, workflow, guardrails, a known-accessibility constraint, coordination, and output report — all useful, no padding, no explanation of CSS/Tailwind basics Claude already knows.	5 / 5
Actionability	Gives concrete, copy-paste-ready utility classes ("bg-background text-foreground", "border-border"), specific token names (chart-1..chart-5, ring), and measured contrast ratios (4.11:1, 3.90:1, 3.64:1), but provides no complete executable code block or validation command.	4 / 5
Workflow Clarity	A clear 6-step sequence with explicit validation checkpoints (check fg/bg pairs in both themes against WCAG 4.5:1/3:1, verify all affected states) and report-based feedback loops, but the loop is report-and-escalate ("request a palette decision") rather than fix-and-retry.	4 / 5
Progressive Disclosure	Well-organized sections with clearly signaled one-level-deep references (PALETTE.css and sibling SKILL.md links), but the referenced canonical PALETTE.css is not present in the bundle to verify, which is a notable gap for the skill's core contract.	4 / 5
	Total	17 / 20 Passed

Description

83%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, third-person description that clearly states both capability and trigger conditions with concrete, domain-specific language. Minor room to broaden action verbs and add natural synonyms like "dark mode".

Dimension	Reasoning	Score
Specificity	Names two concrete verbs ("Applies and reviews") over a comprehensive list of objects (palette, tokens, typography, charts, borders, shadows, theme mappings), but the action vocabulary is limited to apply/review rather than a broader set of distinct operations.	4 / 5
Completeness	Explicitly answers what ("Applies and reviews SurfSense's canonical...palette, semantic design tokens, typography, charts, borders, shadows, and theme mappings") and when ("Use when creating or changing frontend colors, themes, component styling, data visualizations, or design tokens") with concrete trigger phrases.	5 / 5
Trigger Term Quality	Includes natural trigger phrases ("frontend colors", "themes", "component styling", "data visualizations", "design tokens") a user would say, but misses common synonyms like "dark mode/light mode" or "CSS variables".	4 / 5
Distinctiveness Conflict Risk	Scoped to a named niche (SurfSense's canonical color system) with distinct triggers, but "component styling" and "frontend colors" risk minor overlap with sibling styling skills it explicitly cross-references.	4 / 5
	Total	17 / 20 Passed

Validation

93%

Warnings & errors only

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

Criteria	Description	Result
relative_links	Relative link issues: 2 missing	Warning

	Total	15 / 16 Passed

Repository: MODSetter/SurfSense
Path: .cursor/skills/color-system/SKILL.md
Commit: be4a191

Reviewed: 15 days ago

Table of Contents

Discovery Implementation Validation

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.