CtrlK
BlogDocsLog inGet started
Tessl Logo

neon-ui-skills

Neon's UI design system. Use when building interfaces inspired by Neon's aesthetic - dark mode, Inter font, 4px grid.

75

Quality

68%

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

SecuritybySnyk

Passed

No known issues

Optimize this skill with Tessl

npx tessl skill review --optimize ./skills/neon/SKILL.md
SKILL.md
Quality
Evals
Security

Quality

Discovery

75%

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 has a clear 'Use when' clause and is distinctive thanks to the Neon brand reference and specific design attributes. However, it lacks concrete action verbs describing what the skill actually does (e.g., generating components, applying styles) and could benefit from more natural trigger terms users might use when requesting Neon-styled interfaces.

Suggestions

Add concrete actions describing what the skill does, e.g., 'Generates UI components, applies color palettes, and styles layouts following Neon's design system.'

Expand trigger terms with natural variations users might say, such as 'Neon theme', 'Neon-style components', 'Neon branding', 'design tokens', or 'Neon color palette'.

DimensionReasoningScore

Specificity

Names the domain (UI design system) and mentions some specific elements (dark mode, Inter font, 4px grid), but doesn't list concrete actions like 'create buttons', 'style forms', 'generate component layouts'. It describes attributes rather than actions.

2 / 3

Completeness

Clearly answers both what ('Neon's UI design system') and when ('Use when building interfaces inspired by Neon's aesthetic - dark mode, Inter font, 4px grid') with an explicit 'Use when' clause and trigger conditions.

3 / 3

Trigger Term Quality

Includes some relevant terms like 'Neon', 'dark mode', 'Inter font', '4px grid', and 'UI design system', but misses common user variations like 'Neon-style', 'Neon branding', 'Neon theme', 'components', 'design tokens', or 'styling'.

2 / 3

Distinctiveness Conflict Risk

Highly distinctive due to the specific brand reference ('Neon') combined with concrete design attributes (dark mode, Inter font, 4px grid). Unlikely to conflict with generic UI or other brand-specific design skills.

3 / 3

Total

10

/

12

Passed

Implementation

62%

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

This is a well-organized design system reference with clear constraint language (MUST/SHOULD/NEVER) and specific values. Its main weaknesses are the lack of executable code examples (CSS, Tailwind, or component snippets) that would make it immediately actionable, and some meta-commentary ('detected lightness: 0', count columns) that doesn't add instructional value. The content would benefit from being split into a concise overview with references to detailed specification files.

Suggestions

Add concrete code examples—CSS custom properties block, Tailwind config snippet, or a sample component—to make the design tokens immediately usable rather than requiring translation from tables.

Remove meta-observations like 'detected lightness: 0', 'currently 15 colors detected', 'currently 5 detected', and 'Count' columns, as these describe the source analysis rather than providing actionable guidance.

Consider splitting detailed reference tables (full text styles, layout patterns) into a separate REFERENCE.md file, keeping SKILL.md as a concise overview with the most critical tokens and rules.

DimensionReasoningScore

Conciseness

The content is mostly efficient with well-structured tables and clear MUST/SHOULD/NEVER constraints. However, some redundancy exists (e.g., 'detected lightness: 0', 'currently 15 colors detected', 'currently 5 detected') which are meta-observations rather than actionable guidance, and the extensive text styles table with count columns adds marginal value.

2 / 3

Actionability

The skill provides specific values (hex codes, pixel sizes, font weights) and clear constraint rules (MUST/SHOULD/NEVER), which is good for a design system. However, it lacks any concrete code examples—no CSS snippets, no Tailwind classes, no component templates—making it harder to directly implement. For a UI design skill, executable CSS/component examples would significantly improve actionability.

2 / 3

Workflow Clarity

This is a reference/constraint-based skill rather than a multi-step workflow, so the single-task clarity standard applies. The content is well-organized into clear sections (Colors, Typography, Spacing, etc.) with unambiguous rules using MUST/SHOULD/NEVER language, making it easy to follow when building interfaces.

3 / 3

Progressive Disclosure

The content is well-structured with clear section headers and tables, but it's a fairly long monolithic document (~150 lines of detailed specifications). Some sections like the full text styles table and layout patterns could be split into reference files. No external file references are provided for deeper dives.

2 / 3

Total

9

/

12

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.

Validation11 / 11 Passed

Validation for skill structure

No warnings or errors.

Repository
ihlamury/design-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.