stripe-ui-skills

Stripe's UI design system. Use when building interfaces inspired by Stripe'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/stripe/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 clearly scoped to a specific design system with an explicit 'Use when' clause and distinctive identifiers. Its main weakness is the lack of concrete actions—it describes the system's attributes but not what it actually does (e.g., generate components, style layouts, apply color palettes). Trigger terms could also be expanded to cover more natural user phrasings.

Suggestions

Add specific concrete actions like 'Generates buttons, cards, forms, and layouts following Stripe's design patterns' to improve specificity.

Expand trigger terms to include natural variations users might say, such as 'Stripe-like UI', 'clean minimalist dashboard', 'Stripe theme', or 'payment interface styling'.

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 buttons', 'style forms', 'build dashboards'. It describes attributes rather than actions.	2 / 3
Completeness	Clearly answers both what ('Stripe's UI design system') and when ('Use when building interfaces inspired by Stripe's aesthetic') with explicit trigger guidance including specific conditions.	3 / 3
Trigger Term Quality	Includes 'Stripe' and some design terms like 'light mode', 'Inter font', '4px grid', but misses common user phrases like 'Stripe-like', 'clean UI', 'payment page design', 'dashboard styling', 'minimalist design', or 'Stripe theme'.	2 / 3
Distinctiveness Conflict Risk	Highly distinctive - specifically targets Stripe's design aesthetic with concrete identifiers (Inter font, 4px grid, light mode). Unlikely to conflict with other design system skills unless there are multiple Stripe-related 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 token reference with clear MUST/SHOULD/NEVER constraints, which is valuable for consistent UI implementation. However, it reads more like auto-extracted design audit data than curated guidance—some values appear suspect (0px input height, arbitrary element widths), and it lacks executable code examples showing how to apply these tokens in practice. The content would benefit from curation to remove noise, addition of implementation examples, and splitting reference tables into separate files.

Suggestions

Add executable code examples (CSS custom properties, Tailwind config, or component snippets) showing how to implement the design tokens in practice

Audit and curate auto-extracted values—input height '0px', element widths '10px, 227px, 7px, 30px, 17px', and some color assignments (e.g., destructive as #D29E79) appear incorrect or uncurated

Move detailed reference tables (full font size list, all text styles, border radius scale) to a separate REFERENCE.md and keep SKILL.md as a concise overview with the most important constraints

Add a validation checklist or verification steps (e.g., 'verify contrast ratios meet 4.5:1', 'confirm spacing aligns to 4px grid') to help catch implementation errors

Dimension	Reasoning	Score
Conciseness	The content is mostly efficient with clear token tables and MUST/SHOULD/NEVER constraints, but includes some redundant information (e.g., listing every detected font size from 5px-53px, element widths like '10px, 227px, 7px' that seem auto-generated rather than curated, and duplicate text style entries). The 'count: 1' columns and some reference sections feel like raw data dumps rather than curated guidance.	2 / 3
Actionability	The skill provides specific values (hex codes, pixel sizes, font weights) which are concrete, but lacks executable code examples showing how to implement these design tokens in practice (e.g., CSS/Tailwind snippets, component templates). Some values seem suspect or auto-extracted (input height '0px', inconsistent element widths), reducing trustworthiness and copy-paste readiness.	2 / 3
Workflow Clarity	The skill is primarily a reference/constraint document rather than a multi-step workflow, so explicit sequencing is less critical. However, there's no guidance on the order of applying these constraints when building a UI, and no validation steps (e.g., checking contrast ratios, verifying grid alignment). The 'When to Apply' section is helpful but minimal.	2 / 3
Progressive Disclosure	The content is well-organized with clear section headers and tables, making it scannable. However, it's a long monolithic document (~150 lines of detailed specs) that could benefit from splitting detailed reference tables (all font sizes, all border radii) 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.