ramp-ui-skills

Ramp's UI design system. Use when building interfaces inspired by Ramp'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/ramp/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 strong distinctiveness through the Ramp brand name. Its main weakness is the lack of specific concrete actions—it describes the design system's attributes but not what Claude should do with it (e.g., create components, style layouts, build dashboards). Adding more natural trigger terms would also improve discoverability.

Suggestions

Add concrete actions like 'Creates UI components, styles layouts, and builds dashboard interfaces following Ramp's design system'.

Include additional trigger terms users might naturally say, such as 'design system', 'UI components', 'Ramp-style', 'dashboard', or 'fintech 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 buttons', 'style forms', 'build card layouts', etc.	2 / 3
Completeness	Clearly answers both what ('Ramp's UI design system') and when ('Use when building interfaces inspired by Ramp's aesthetic - light mode, Inter font, 4px grid') with an explicit 'Use when' clause and trigger conditions.	3 / 3
Trigger Term Quality	Includes 'Ramp' as a strong trigger term and some design-related terms (light mode, Inter font, 4px grid), but misses natural user phrases like 'design system', 'component library', 'UI components', 'Ramp-style', or 'dashboard design'.	2 / 3
Distinctiveness Conflict Risk	Very distinct due to the specific brand name 'Ramp' and the particular design specifications (Inter font, 4px grid, light mode). Unlikely to conflict with other design system skills unless there are multiple Ramp-related 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 skill with clear constraint language (MUST/SHOULD/NEVER) and specific design token values. Its main weaknesses are the lack of executable code examples (no CSS, Tailwind, or component snippets) and some redundancy in the typography and layout sections. The content would benefit from concrete implementation examples and better progressive disclosure by moving detailed reference tables to separate files.

Suggestions

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

Move the detailed Text Styles table (10 rows) and full font size list to a separate TYPOGRAPHY_REFERENCE.md, keeping only the primary styles (heading-1, body) inline

Remove the 'Count' column from tables as values of '1' add no useful information, and consolidate duplicate 'body-secondary' and 'text-16px' entries into variant descriptions

Add a quick-start section with a minimal copy-paste-ready component example that demonstrates colors, typography, spacing, and border-radius together

Dimension	Reasoning	Score
Conciseness	The content is mostly efficient with well-structured tables and MUST/SHOULD/NEVER constraints, but includes some redundancy (e.g., 'Detected Layout Patterns' with near-duplicate entries, overly detailed text style tables with individual counts of '1', and the typography reference section partially duplicates the text styles table). The 'Count' column adds no value.	2 / 3
Actionability	The skill provides specific values (hex codes, pixel sizes, font weights) and clear constraint language (MUST/SHOULD/NEVER), which is good. However, it lacks any 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 UI) is unambiguous. The MUST/SHOULD/NEVER hierarchy provides clear priority ordering, and the content is well-sequenced from colors → typography → spacing → layout → components → states → animation → performance.	3 / 3
Progressive Disclosure	The content is well-organized with clear sections and tables, but it's a fairly long monolithic document (~150 lines of detailed reference tables). The detailed text styles table with 10 rows and the full font size list could be split into a separate reference file, with SKILL.md keeping just the key styles and linking out for the complete catalog.	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.