craft-ui-skills

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

Quality

62%

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Securityby

Passed

No known issues

Optimize this skill with Tessl

npx tessl skill review --optimize ./skills/craft/SKILL.md

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 is reasonably well-structured with an explicit 'Use when...' clause and distinctive brand-specific triggers. Its main weakness is the lack of concrete actions—it describes the design system's attributes but not what the skill actually does (e.g., generate components, apply styles, create layouts). Adding specific capabilities would strengthen it significantly.

Suggestions

Add concrete actions the skill performs, e.g., 'Generates UI components, applies styling, and builds layouts following Craft's design system.'

Include additional natural trigger terms users might say, such as 'components', 'theme', 'styling', 'Craft-style', or 'design tokens'.

Dimension	Reasoning	Score
Specificity	Names the domain ('UI design system') and mentions some specific elements (light mode, Inter font, 4px grid), but doesn't list concrete actions like 'create buttons', 'style forms', 'build layouts'. It describes attributes rather than actions.	2 / 3
Completeness	Clearly answers both 'what' (Craft's UI design system) and 'when' ('Use when building interfaces inspired by Craft's aesthetic - light mode, Inter font, 4px grid'). The 'Use when...' clause is explicit with trigger conditions.	3 / 3
Trigger Term Quality	Includes some relevant terms like 'UI', 'design system', 'Craft', 'light mode', 'Inter font', '4px grid', but misses common user variations like 'components', 'styling', 'theme', 'design tokens', or 'Craft-style'. A user might not naturally say '4px grid' when requesting this skill.	2 / 3
Distinctiveness Conflict Risk	The reference to 'Craft' as a specific brand/product, combined with distinctive attributes like 'Inter font' and '4px grid', creates a clear niche that is unlikely to conflict with generic UI or other design system skills.	3 / 3
	Total	10 / 12 Passed

Implementation

50%

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

This skill provides a solid design token reference with clear constraints using MUST/SHOULD/NEVER language, and the table format for tokens is well-structured. However, it reads more like a raw design audit dump than curated guidance—it lacks executable code examples, includes redundant/low-value data (multiple identical text-14px entries, raw layout dimensions), and could benefit from splitting reference tables into separate files while keeping the main skill focused on key principles and a quick-start example.

Suggestions

Add at least one executable code example (e.g., a Tailwind config snippet or a CSS custom properties block) showing how to implement the design tokens in practice.

Remove or consolidate redundant entries in the Text Styles table (e.g., the five text-14px variants with count=1) and the Detected Layout Patterns section, which adds little actionable value.

Split detailed reference tables (full color tokens, text styles, border radius scales) into a separate REFERENCE.md file and link to it, keeping SKILL.md focused on key constraints and quick-start guidance.

Add a brief workflow or checklist for applying these guidelines when building a new component (e.g., 1. Set base tokens, 2. Apply typography scale, 3. Verify contrast ratios).

Dimension	Reasoning	Score
Conciseness	The skill contains useful design tokens and constraints, but includes redundant reference data (e.g., listing 10 nearly identical text-14px styles with count=1, detected layout patterns that are just viewport sizes, font sizes list). The 'Count' column and some detected metrics feel like raw audit output rather than curated guidance.	2 / 3
Actionability	Provides concrete values (hex codes, pixel sizes, specific CSS properties) and clear MUST/SHOULD/NEVER constraints, which is good. However, there are no executable code examples—no CSS snippets, no Tailwind config, no component code. For a UI design system skill, at least one concrete implementation example would significantly improve actionability.	2 / 3
Workflow Clarity	The skill is organized by design dimension (colors, typography, spacing, etc.) which provides clear structure, but there's no workflow for how to apply these guidelines when building a component. For a reference-style skill this is acceptable, but the 'When to Apply' section is vague and there's no sequencing guidance for building interfaces.	2 / 3
Progressive Disclosure	Content is well-sectioned with clear headings and tables, but everything is in a single monolithic file. The detailed token tables, text style references, and border radius scales could be split into reference files, with the main skill focusing on key constraints and linking out. No external references are provided.	2 / 3
	Total	8 / 12 Passed

Validation

100%

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

Validation for skill structure

No warnings or errors.

Repository: ihlamury/design-skills
Commit: 126714e

Reviewed: 8 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.