CtrlK
BlogDocsLog inGet started
Tessl Logo

tdg-personal/design-system

Use this skill to generate or audit design systems, check visual consistency, and review PRs that touch styling.

53

Quality

53%

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

SecuritybySnyk

Advisory

Suggest reviewing before use

Overview
Quality
Evals
Security
Files

Quality

Discovery

50%

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

The description communicates a reasonable sense of what the skill does but lacks the specificity and explicit trigger guidance needed for reliable skill selection. It would benefit from more concrete actions, natural user-facing keywords (e.g., CSS, tokens, theme), and an explicit 'Use when...' clause to distinguish it from general code review or frontend skills.

Suggestions

Add an explicit 'Use when...' clause with trigger scenarios, e.g., 'Use when the user asks about design tokens, theme consistency, CSS audits, or reviewing styling changes in PRs.'

Include more natural trigger terms users would say, such as 'CSS', 'tokens', 'theme', 'colors', 'typography', 'component library', 'style guide', '.css', '.scss'.

Use third person voice ('Generates and audits design systems...') instead of second person imperative ('Use this skill to...').

DimensionReasoningScore

Specificity

Names the domain (design systems, styling) and lists some actions (generate, audit, check visual consistency, review PRs), but the actions are somewhat broad and not deeply specific about concrete outputs or methods.

2 / 3

Completeness

The 'what' is partially addressed (generate/audit design systems, check consistency, review styling PRs), and there is an implicit 'when' via 'Use this skill to...', but there is no explicit 'Use when...' clause with trigger conditions or user-facing scenarios. Per the rubric, a missing explicit 'Use when...' clause caps completeness at 2.

2 / 3

Trigger Term Quality

Includes relevant terms like 'design systems', 'visual consistency', 'styling', and 'PRs', but misses common variations users might say such as 'CSS', 'theme', 'tokens', 'colors', 'typography', 'component library', or 'style guide'.

2 / 3

Distinctiveness Conflict Risk

The mention of 'design systems' and 'visual consistency' provides some niche, but 'review PRs that touch styling' could overlap with general code review skills, and 'styling' is broad enough to conflict with CSS-specific or frontend skills.

2 / 3

Total

8

/

12

Passed

Implementation

35%

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

This skill reads more like a product feature description or marketing document than an actionable skill for Claude. It describes what the system should do at a high level but provides no executable code, no concrete implementation details, and no real commands. The slash-command examples reference a tool that doesn't exist without explaining how to build or invoke it, making the entire skill aspirational rather than functional.

Suggestions

Replace the conceptual descriptions with actual executable code or concrete tool invocations (e.g., show how to scan CSS files with grep/AST parsing, how to extract color values, how to generate the token JSON).

Add validation checkpoints to each mode's workflow — e.g., after scanning, verify extracted tokens are valid; after generating preview HTML, verify it renders correctly.

Either define the slash-commands as actual MCP tool calls or custom commands with implementation details, or remove them and show the actual steps Claude should take using available tools (file reading, browser MCP, etc.).

Add a concrete input/output example showing what a real design-tokens.json or audit report looks like, so Claude knows the expected format.

DimensionReasoningScore

Conciseness

The content is reasonably structured but includes some unnecessary elaboration. The 10-dimension audit list and AI slop detection list are useful but could be more compact. The 'When to Use' section is somewhat redundant given the skill description.

2 / 3

Actionability

The skill describes what it does conceptually but provides no executable code, no actual implementation steps, and no concrete commands that would work. The slash-command examples at the bottom appear to reference a non-existent CLI tool with no setup instructions. There's no actual code Claude could execute to perform any of these tasks.

1 / 3

Workflow Clarity

The three modes have numbered steps that provide a sequence, but there are no validation checkpoints, no error handling, and no feedback loops. For a skill that involves scanning codebases and generating output files, there should be verification steps (e.g., validate generated tokens, check preview renders correctly).

2 / 3

Progressive Disclosure

The content is organized into clear modes which is good, but everything is inline in one file. The outputs mention DESIGN.md and other files but there are no references to supplementary documentation. The content is borderline monolithic for its length, though the section headers help.

2 / 3

Total

7

/

12

Passed

Validation

90%

Checks the skill against the spec for correct structure and formatting. All validation checks must pass before discovery and implementation can be scored.

Validation10 / 11 Passed

Validation for skill structure

CriteriaDescriptionResult

frontmatter_unknown_keys

Unknown frontmatter key(s) found; consider removing or moving to metadata

Warning

Total

10

/

11

Passed

Reviewed

Table of Contents