gumroad-ui-skills

Gumroad's UI design system. Use when building interfaces inspired by Gumroad'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/gumroad/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 functional with a clear 'Use when' clause and distinctive branding tied to Gumroad. Its main weakness is the lack of specific concrete actions—it describes the design system's attributes but not what the skill actually does (e.g., generate components, apply styles, create layouts). The trigger terms are adequate but could be broader.

Suggestions

Add specific concrete actions the skill performs, e.g., 'Creates buttons, cards, forms, and layouts following Gumroad's design system'

Expand trigger terms to include variations users might say, such as 'Gumroad-style UI', 'dark theme components', 'design tokens', or 'UI components'

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 buttons', 'style forms', 'build layouts', etc.	2 / 3
Completeness	Clearly answers both what ('Gumroad's UI design system') and when ('Use when building interfaces inspired by Gumroad's aesthetic - dark mode, Inter font, 4px grid') with an explicit 'Use when' clause and trigger conditions.	3 / 3
Trigger Term Quality	Includes 'Gumroad' as a strong trigger term and mentions 'dark mode', 'Inter font', and '4px grid', but misses common variations users might say like 'Gumroad-style', 'design system', 'component library', 'UI components', or 'styling'.	2 / 3
Distinctiveness Conflict Risk	The specificity to Gumroad's brand aesthetic with named attributes (dark mode, Inter font, 4px grid) creates a clear niche that is unlikely to conflict with other design system skills or generic UI 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-structured tables for design tokens. Its main weaknesses are the lack of executable code examples (no CSS, Tailwind, or component snippets), some redundant information across sections, and the monolithic structure that could benefit from splitting detailed references into separate files. Some values seem questionable (e.g., input height of 0px) which could cause issues.

Suggestions

Add at least 2-3 executable code examples showing how to implement key components (e.g., a button, card, or header) using these design tokens in CSS/Tailwind

Split detailed reference tables (full typography list, all font sizes, layout patterns) into a separate REFERENCE.md file, keeping SKILL.md as a concise overview with the most essential tokens

Review and fix suspicious values like input height '0px' which appears to be a data extraction error and could lead to broken implementations

Add a brief 'Quick Start' workflow showing the sequence for applying the design system when building a new page (e.g., 1. Set base styles → 2. Apply layout → 3. Add components)

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., listing font sizes twice, detected layout patterns with raw pixel values that add little value, RGB values alongside HEX). Some sections like 'Border Radius Reference' repeat what was just stated above.	2 / 3
Actionability	Provides concrete design tokens, specific values, and clear constraints (MUST/SHOULD/NEVER), but lacks executable code examples. No CSS snippets, no Tailwind classes, no component code. For a UI design system skill, having at least one concrete code example (e.g., a button component or a card layout) would significantly improve actionability.	2 / 3
Workflow Clarity	The skill is primarily a reference/constraint document rather than a multi-step workflow, so workflow clarity is less critical. However, there's no guidance on the order of applying these constraints when building a UI, and the 'When to Apply' section is vague. For a design system, a brief 'getting started' sequence (set up fonts → apply colors → use spacing grid → add components) would help.	2 / 3
Progressive Disclosure	Content is well-organized with clear section headers and tables, making it scannable. However, the file is quite long (~150 lines of dense reference material) and could benefit from splitting detailed token tables and typography references into separate files, keeping SKILL.md as a concise overview with links to detailed specs.	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.