replit-ui-skills

Replit's UI design system. Use when building interfaces inspired by Replit'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/replit/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 branding around Replit's aesthetic. Its main weakness is the lack of specific concrete actions—it tells Claude what the system is but not what actions it enables (e.g., creating components, applying styles). Trigger terms could also be expanded to cover more natural user phrasings.

Suggestions

Add specific concrete actions the skill performs, e.g., 'Applies Replit's design tokens, builds UI components, styles layouts' to improve specificity.

Expand trigger terms to include variations users might say, such as 'Replit-style UI', 'Replit theme', 'design tokens', 'component styling', or 'Replit look and feel'.

Dimension	Reasoning	Score
Specificity	Names the domain (UI design system) and mentions some specific details (light mode, Inter font, 4px grid), but doesn't list concrete actions like 'create layouts', 'style components', or 'apply design tokens'.	2 / 3
Completeness	Clearly answers both what ('Replit's UI design system') and when ('Use when building interfaces inspired by Replit's aesthetic - light mode, Inter font, 4px grid'), with an explicit 'Use when' clause and trigger conditions.	3 / 3
Trigger Term Quality	Includes 'Replit' and some design terms like 'light mode', 'Inter font', '4px grid', but misses common user terms like 'UI components', 'design system', 'styling', 'theme', or 'Replit-style'.	2 / 3
Distinctiveness Conflict Risk	The specificity to Replit's design system with named attributes (Inter font, 4px grid, light mode) creates a clear niche that is unlikely to conflict with generic UI or other 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 skill with clear semantic structure using MUST/SHOULD/NEVER conventions and well-organized tables. Its main weaknesses are the lack of executable implementation examples (CSS/Tailwind snippets) and some redundancy in reference data. The content would benefit from splitting detailed reference tables into separate files and adding at least one concrete code example showing how to apply these constraints.

Suggestions

Add 1-2 executable code examples (e.g., a Tailwind config snippet or CSS custom properties block) showing how to implement the design tokens

Move detailed reference tables (full text styles list, font sizes, border-radius scale) into a separate REFERENCE.md file and link to it

Remove redundant information like the border-radius scale appearing twice and the 'Count' column that shows '1' for every text style entry

Dimension	Reasoning	Score
Conciseness	The content is mostly efficient with clear tables and MUST/SHOULD/NEVER constraints, but includes some redundancy (e.g., border-radius scale listed twice, font sizes listed separately from the text styles table, multiple 14px text-style entries with minimal differentiation). The 'Count' column showing '1' for every entry adds no value.	2 / 3
Actionability	Provides specific values (hex codes, pixel sizes, font weights) which are concrete and actionable for styling, but lacks executable code examples showing how to implement these in actual CSS/Tailwind/React. The guidance is specific enough to act on but would benefit from at least one implementation snippet.	2 / 3
Workflow Clarity	This is a reference/constraint skill rather than a multi-step workflow, so the single-purpose nature applies. The content is clearly organized by concern (colors, typography, spacing, etc.) with unambiguous MUST/SHOULD/NEVER directives that make the decision process clear.	3 / 3
Progressive Disclosure	The content is well-structured with clear sections and tables, but at ~150 lines it's becoming a wall of reference data that could benefit from splitting detailed token tables and typography references into separate files. No external references are provided for deeper exploration.	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.