front-ui-skills

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

Quality

68%

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/front/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 concise and well-structured with a clear 'Use when' clause and distinctive identifiers that tie it to Front's specific design system. Its main weakness is the lack of concrete actions—it describes the system's attributes but not what the skill actually does (e.g., generating components, applying styles). Adding specific capabilities would strengthen it.

Suggestions

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

Include additional trigger terms users might naturally say, such as 'Front theme', 'Front-style components', 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 components', 'apply styling', or 'build layouts'. It describes attributes rather than actions.	2 / 3
Completeness	Clearly answers both what ('Front's UI design system') and when ('Use when building interfaces inspired by Front's aesthetic - light mode, Inter font, 4px grid'), with an explicit 'Use when' clause and specific trigger conditions.	3 / 3
Trigger Term Quality	Includes some relevant terms like 'Front', 'UI design system', 'light mode', 'Inter font', '4px grid', and 'interfaces', but misses common variations users might say like 'Front-style', 'design tokens', 'component library', 'Front theme', or 'styling'.	2 / 3
Distinctiveness Conflict Risk	Highly distinctive due to the specific reference to 'Front's' design system with concrete identifiers (Inter font, 4px grid, light mode). Unlikely to conflict with other generic UI or design system 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 solid design system reference with clear constraints using MUST/SHOULD/NEVER language and well-organized semantic token tables. Its main weaknesses are verbosity from raw audit data (detected counts, exhaustive font size lists) that could be trimmed or moved to a reference file, and the lack of executable code examples showing implementation patterns (e.g., CSS custom properties, Tailwind config, or component snippets).

Suggestions

Add executable code examples: a CSS custom properties block defining the tokens, a Tailwind config snippet, or a sample component implementing the design system constraints.

Move detailed reference data (full text styles table, font size enumeration, detected layout patterns) to a separate REFERENCE.md file and link to it, keeping SKILL.md as a concise overview.

Remove meta-observations like 'currently 30 colors detected' and 'currently 4 detected' — these read as audit notes rather than actionable design constraints.

Dimension	Reasoning	Score
Conciseness	The skill contains useful design tokens and constraints, but includes excessive raw data dumps (e.g., 10 text styles with counts of 1, full font size lists, detected layout patterns with pixel dimensions) that add bulk without proportional value. The 'SHOULD reduce color palette (currently 30 colors detected)' and similar meta-observations about the design system feel like audit notes rather than actionable instructions.	2 / 3
Actionability	The skill provides concrete values (hex codes, pixel sizes, specific CSS properties) and clear MUST/SHOULD/NEVER constraints, which is good. However, it lacks executable code examples showing how to implement these patterns (e.g., a Tailwind config snippet, a CSS custom properties block, or a component example). The guidance is specific but not copy-paste ready for implementation.	2 / 3
Workflow Clarity	This is a reference/constraint skill rather than a multi-step workflow, so the single-task exemption applies. The content is well-organized with clear sections, and the MUST/SHOULD/NEVER hierarchy provides unambiguous priority ordering for design decisions. The 'When to Apply' section clearly scopes when to use these guidelines.	3 / 3
Progressive Disclosure	The content is reasonably well-structured with clear section headers and tables, but it's a long monolithic file. The detailed text styles table, full font size lists, and layout pattern dimensions could be split into a reference file, keeping SKILL.md as a concise overview with links to detailed specs.	2 / 3
	Total	9 / 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.