clerk-ui-skills

Clerk's UI design system. Use when building interfaces inspired by Clerk'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/clerk/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 distinctive identifiers that tie it to Clerk's specific design system. Its main weakness is the lack of concrete actions—it describes the aesthetic parameters but not what the skill actually does (e.g., generate components, style pages). Adding specific capabilities would strengthen it significantly.

Suggestions

Add concrete actions the skill performs, e.g., 'Generates UI components, styles forms, and builds layouts following Clerk's design system.'

Include additional natural trigger terms users might say, such as 'Clerk-style UI', 'authentication page design', 'sign-in form', or 'Clerk dashboard'.

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', 'style forms', or 'build authentication pages'.	2 / 3
Completeness	Clearly answers both what ('Clerk's UI design system') and when ('Use when building interfaces inspired by Clerk's aesthetic - light mode, Inter font, 4px grid'), with an explicit 'Use when' clause and trigger conditions.	3 / 3
Trigger Term Quality	Includes 'Clerk' as a key trigger term and some design-related terms (light mode, Inter font, 4px grid), but misses natural user phrases like 'Clerk-style', 'authentication UI', 'sign-in page', 'dashboard design', or 'Clerk components'.	2 / 3
Distinctiveness Conflict Risk	Highly distinctive - specifically targets Clerk's design aesthetic with unique identifiers (Inter font, 4px grid, light mode). 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 is a reasonably well-structured design system reference with clear semantic tokens, typography scales, and interaction guidelines using effective MUST/SHOULD/NEVER conventions. Its main weaknesses are the lack of executable code examples showing practical implementation, some apparent data quality issues (0px input height, single-entry layout patterns), and redundant information that inflates token usage without adding value.

Suggestions

Add a quick-start code example showing CSS custom properties or Tailwind config setup using the defined tokens, so Claude can immediately apply the design system

Review and fix apparent data extraction errors: '0px' input height and the single-entry 'Detected Layout Patterns' section seem incorrect or useless

Remove redundant data: drop RGB values (HEX suffices for Claude), the 'Count' column in text styles, and the 'Typography Reference' section that repeats the table above it

Split the detailed reference tables (all text styles, component variants) into a separate REFERENCE.md and keep SKILL.md as a concise overview with the most common tokens and patterns

Dimension	Reasoning	Score
Conciseness	The skill is mostly efficient with its table-based format and MUST/SHOULD/NEVER conventions, but includes some redundant information (e.g., the 'Count' column showing '1' for every text style adds no value, RGB values alongside HEX are unnecessary for Claude, and the 'Typography Reference' section repeats information already in the table). The detected layout patterns section with a single entry is also low-value.	2 / 3
Actionability	The skill provides specific values (colors, sizes, spacing scales) which are concrete and actionable for implementation, but lacks any executable code examples showing how to apply these constraints in practice (e.g., a Tailwind config snippet, CSS custom properties setup, or a sample component). The '0px height for input fields' specification seems like a data extraction error rather than actionable guidance.	2 / 3
Workflow Clarity	The 'When to Apply' section provides clear triggers, and the MUST/SHOULD/NEVER hierarchy creates implicit priority ordering. However, there's no workflow for how to actually build a component using these constraints — no sequencing of steps like 'set up tokens first, then typography, then layout.' For a design system reference, this is acceptable but could benefit from a quick-start workflow.	2 / 3
Progressive Disclosure	The content is well-organized with clear section headers and tables, making it scannable. However, it's a fairly long monolithic document (~150+ lines) that could benefit from splitting detailed reference tables (text styles, component variants) into separate files while keeping the SKILL.md as a concise overview with links.	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.