hugging-face-ui-skills

Hugging Face's UI design system. Use when building interfaces inspired by Hugging Face's aesthetic - dark 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/hugging-face/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 well-structured with a clear 'Use when' clause and a distinctive niche tied to Hugging Face's brand aesthetic. Its main weakness is the lack of specific concrete actions—it describes the design system but not what the skill actually does with it (e.g., generating components, applying styles, creating layouts). Adding action verbs and a few more natural trigger terms would strengthen it.

Suggestions

Add concrete actions describing what the skill does, e.g., 'Creates UI components, applies theme styles, and generates layouts following Hugging Face's design system.'

Include additional natural trigger terms users might say, such as 'HF style', 'UI theme', 'design tokens', or 'component styling'.

Dimension	Reasoning	Score
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 components', 'style layouts', or 'generate theme configurations'.	2 / 3
Completeness	Clearly answers both what ('Hugging Face's UI design system') and when ('Use when building interfaces inspired by Hugging Face's aesthetic - dark mode, Inter font, 4px grid'), with an explicit 'Use when' clause and trigger conditions.	3 / 3
Trigger Term Quality	Includes 'Hugging Face', 'dark mode', 'Inter font', and '4px grid' which are somewhat relevant, but misses natural user terms like 'HF style', 'UI components', 'design tokens', 'theme', or 'styling'.	2 / 3
Distinctiveness Conflict Risk	Highly distinctive due to the specific brand reference ('Hugging Face') and concrete design parameters (dark mode, Inter font, 4px grid), making it very unlikely to conflict with other UI or design 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 comprehensive design system reference with clear constraints using MUST/SHOULD/NEVER language and well-organized tables of design tokens. However, it reads more like auto-extracted design audit data than a curated skill — some values appear suspect (0px input height, very granular border-radius scale), it lacks executable code examples, and the monolithic structure could benefit from splitting detailed references into separate files. The absence of a workflow for applying these guidelines and some questionable auto-detected values reduce its practical utility.

Suggestions

Add executable code examples (CSS custom properties block, Tailwind config snippet, or sample component markup) to make the design tokens immediately actionable rather than just reference tables.

Review and fix suspicious auto-generated values — input height of '0px' and spacing scale only going to 8px seem incorrect and would produce broken UIs if followed literally.

Add a brief workflow section explaining how to apply these guidelines when building a new component or page (e.g., 1. Set up tokens → 2. Apply layout → 3. Check contrast ratios → 4. Verify grid alignment).

Split detailed reference tables (full text styles list, border radius scale, component variants) into a separate REFERENCE.md file, keeping only the most essential tokens and rules in the main skill.

Dimension	Reasoning	Score
Conciseness	The skill is mostly efficient with its table-based format and MUST/SHOULD/NEVER constraints, but includes some redundant information (e.g., the full border-radius scale is listed twice, many near-duplicate text styles at 14px and 17px with minimal differentiation, and 'detected' metadata like color counts and element counts that add noise without actionability).	2 / 3
Actionability	Provides concrete design tokens, specific values, and clear constraints (MUST/SHOULD/NEVER), which is good for a design system skill. However, it lacks executable code examples (e.g., CSS snippets, Tailwind config, or component markup) and some values seem auto-generated and questionable (input height of '0px', spacing scale only going to 8px for a 4px grid system), reducing practical reliability.	2 / 3
Workflow Clarity	The skill is organized by design system categories (colors, typography, spacing, etc.) which provides a clear reference structure. However, there's no workflow for how to apply these guidelines when building a UI — no sequencing of steps, no validation checkpoints for checking contrast ratios or grid alignment, and no guidance on how to compose these tokens into a working interface.	2 / 3
Progressive Disclosure	Content is well-sectioned with clear headings and tables, making it scannable. However, the file is quite long and monolithic — the detailed text style tables, border radius references, and component specifications could be split into separate reference files with links from the main skill, improving navigation and reducing cognitive load.	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.