shortcut-ui-skills

Shortcut's UI design system. Use when building interfaces inspired by Shortcut'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/shortcut/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 brand-specific triggers that minimize conflict risk. However, it lacks specificity about what concrete actions the skill performs (e.g., generating components, applying styles, creating layouts) and could benefit from additional trigger terms users might naturally use.

Suggestions

Add specific concrete actions the skill performs, e.g., 'Creates UI components, applies consistent styling, and generates layouts following Shortcut's design system.'

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

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 styles', or 'build layouts'.	2 / 3
Completeness	Clearly answers both what ('Shortcut's UI design system') and when ('Use when building interfaces inspired by Shortcut's aesthetic - light mode, Inter font, 4px grid') with an explicit 'Use when' clause and trigger conditions.	3 / 3
Trigger Term Quality	Includes some relevant terms like 'Shortcut', 'UI', 'design system', 'light mode', 'Inter font', '4px grid', but misses common variations users might say such as 'component library', 'styling', 'theme', 'design tokens', or 'Shortcut-style'.	2 / 3
Distinctiveness Conflict Risk	Very distinct due to the specific brand name 'Shortcut' and concrete design specifications (Inter font, 4px grid, light mode), making it unlikely to conflict with 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 comprehensive design system reference with well-structured sections and concrete token values, but suffers from apparent auto-generated content that hasn't been curated (duplicate body-secondary entries, suspicious 0px input height, raw layout dimensions). It would benefit from executable implementation examples and pruning of redundant or erroneous data to increase both actionability and conciseness.

Suggestions

Add executable code examples showing implementation (e.g., CSS custom properties block, Tailwind config snippet, or a sample component using these tokens)

Curate auto-extracted values: remove duplicate body-secondary entries with near-identical colors, fix the '0px' input height which appears erroneous, and consolidate the font size list to recommended sizes vs. detected sizes

Add a quick-start checklist or verification section (e.g., 'Before shipping, verify: contrast ratios meet 4.5:1, all spacing aligns to 4px grid, no arbitrary border-radius values')

Split detailed reference tables (full font size list, detected layout patterns, text styles inventory) into a separate REFERENCE.md file, keeping only the primary/recommended values in the main skill

Dimension	Reasoning	Score
Conciseness	The skill is mostly efficient with its MUST/SHOULD/NEVER constraint format, but includes excessive detail that adds little value - like listing all 17 font sizes, multiple near-identical body-secondary entries with slightly different colors, and redundant 'Detected Layout Patterns' with specific pixel dimensions that seem auto-generated rather than curated.	2 / 3
Actionability	Provides concrete design tokens, specific values, and clear constraints (MUST/SHOULD/NEVER), but lacks executable code examples showing how to implement these in practice (e.g., Tailwind config, CSS custom properties setup, or component snippets). Some values seem erroneous or auto-extracted without curation (e.g., input height of '0px', inconsistent body-secondary entries).	2 / 3
Workflow Clarity	The skill is primarily a reference/constraint document rather than a multi-step workflow, so strict workflow scoring is less applicable. However, there's no guidance on the order of applying these constraints, no validation steps for checking compliance, and the 'When to Apply' section is minimal. For a design system skill, a checklist or verification approach would improve clarity.	2 / 3
Progressive Disclosure	Content is organized into clear sections with good headers and tables, but it's a long monolithic document that could benefit from splitting detailed reference tables (all font sizes, layout patterns) into separate files. No external references are provided for deeper topics like accessibility testing or component implementation patterns.	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.