vercel-ui-skills

Vercel's UI design system. Use when building interfaces inspired by Vercel'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/vercel/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 Vercel's specific design language. Its main weakness is the lack of concrete actions—it describes what the system is but not what specific tasks it enables (e.g., creating components, styling pages). Trigger terms could also be expanded to cover more natural user phrasings.

Suggestions

Add specific concrete actions like 'Creates components, styles layouts, and applies design tokens following Vercel's design system'

Expand trigger terms to include variations users might say, such as 'Vercel-style', 'minimalist UI', 'clean dashboard design', or 'modern web interface'

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 layouts', or 'apply design tokens'.	2 / 3
Completeness	Clearly answers both what ('Vercel's UI design system') and when ('Use when building interfaces inspired by Vercel's aesthetic') with explicit trigger guidance including specific criteria.	3 / 3
Trigger Term Quality	Includes 'Vercel' and some design terms like 'light mode', 'Inter font', '4px grid', but misses common user phrases like 'Vercel-style', 'clean UI', 'minimalist design', 'dashboard', or 'shadcn'.	2 / 3
Distinctiveness Conflict Risk	Clearly scoped to Vercel's specific aesthetic with distinct identifiers (Inter font, 4px grid, light mode), making it 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 constraint language (MUST/SHOULD/NEVER) and specific values organized into logical sections. Its main weaknesses are the lack of executable code examples (no CSS, Tailwind, or component snippets) and the monolithic structure that could benefit from splitting detailed reference tables into separate files. Some sections contain redundant or low-value information (e.g., count columns, detected layout dimensions) that could be trimmed.

Suggestions

Add concrete code examples for key patterns - e.g., a Tailwind/CSS snippet for a button component, a card layout, or a heading style that demonstrates the design tokens in use.

Split detailed reference tables (full text styles, layout patterns) into a separate REFERENCE.md file, keeping only the most essential tokens and rules in the main SKILL.md.

Remove low-value data like the 'Count' column in text styles, 'used 21x' annotations, and the detected layout dimensions that don't translate to actionable guidance.

Dimension	Reasoning	Score
Conciseness	The content is mostly efficient with well-structured tables and clear MUST/SHOULD/NEVER constraints, but includes some redundant information like the 'Count' column in text styles (all showing '1'), the 'used 21x' note for Inter, and detected layout patterns that add bulk without clear actionability. The typography reference section partially duplicates the text styles table.	2 / 3
Actionability	Provides specific values (hex codes, pixel sizes, border radii) and clear constraint language (MUST/SHOULD/NEVER), which is good. However, it lacks executable code examples - no CSS snippets, no Tailwind classes, no component code. For a UI design system skill, concrete implementation examples (e.g., a button component, a card layout) would significantly improve actionability.	2 / 3
Workflow Clarity	This is a reference/constraint skill rather than a multi-step workflow skill. The single-purpose nature (apply these design tokens and rules when building Vercel-style UIs) is unambiguous. The 'When to Apply' section clearly scopes usage, and constraints are organized by domain (colors, typography, spacing, etc.) making them easy to follow.	3 / 3
Progressive Disclosure	The content is well-organized with clear section headers and tables, but it's a fairly long monolithic document (~150 lines of detailed specifications). The extensive text styles table and layout patterns could be split into separate reference files, with SKILL.md providing a concise overview and linking out 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.