jasper-ui-skills

Jasper's UI design system. Use when building interfaces inspired by Jasper'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/jasper/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 well-structured with a clear 'Use when' clause and a distinct identity tied to Jasper's design system. Its main weakness is the lack of specific concrete actions—it tells Claude what the system is and when to use it, but not what specific tasks it enables (e.g., creating components, applying spacing, generating themed layouts). The trigger terms could also be broader to capture more user phrasings.

Suggestions

Add specific concrete actions the skill enables, e.g., 'Creates UI components, applies spacing tokens, and generates themed layouts following Jasper's design system.'

Expand trigger terms to include common variations like 'component library', 'design tokens', 'themed interface', or 'Jasper 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 components', 'apply spacing tokens', or 'generate layouts'.	2 / 3
Completeness	Clearly answers both what ('Jasper's UI design system') and when ('Use when building interfaces inspired by Jasper's aesthetic - light mode, Inter font, 4px grid') with an explicit 'Use when' clause and trigger conditions.	3 / 3
Trigger Term Quality	Includes some relevant keywords like 'UI', 'design system', 'light mode', 'Inter font', and 'Jasper', but misses common variations users might say such as 'component library', 'styling', 'theme', 'design tokens', or 'interface components'.	2 / 3
Distinctiveness Conflict Risk	The description is clearly scoped to a specific named design system ('Jasper') with distinct characteristics (light mode, Inter font, 4px grid), making it unlikely to conflict with other generic UI or design 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 constraint language (MUST/SHOULD/NEVER), but it reads more like a raw design audit dump than an actionable skill. It lacks executable code examples showing how to implement these tokens in practice, and some values appear suspicious (e.g., 0px input height, #F5261E red as page background for a 'light mode' system, 91px heading size, 40px body text). The content would benefit from consolidation, implementation examples, and splitting detailed references into separate files.

Suggestions

Add concrete code examples (CSS/Tailwind/React components) showing how to implement the design tokens — e.g., a styled button, card, or input component using the specified values.

Review and fix suspicious values: 0px input height, bright red (#F5261E) as page background for a 'light mode' system, and 91px/40px as heading/body sizes seem like extraction errors.

Split the detailed typography reference table and component specifications into separate reference files (e.g., TYPOGRAPHY.md, COMPONENTS.md) and link to them from the main skill.

Add a quick-start section showing a minimal implementation example that demonstrates the core design system (colors, typography, spacing) applied together.

Dimension	Reasoning	Score
Conciseness	The content is reasonably structured but includes excessive detail that may not earn its tokens — e.g., the full typography reference with 10+ text styles and their counts, detected layout patterns with pixel-exact dimensions, and redundant border radius sections. The semantic token table and text styles table could be consolidated. However, it avoids explaining basic concepts Claude already knows.	2 / 3
Actionability	The skill provides specific values (hex codes, pixel sizes, font weights) and clear MUST/SHOULD/NEVER constraints, 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	The skill is primarily a reference 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, no validation steps (e.g., checking contrast ratios), and no feedback loops for verifying the design system is correctly applied.	2 / 3
Progressive Disclosure	The content is organized into clear sections with headers and tables, which aids navigation. However, at ~150+ lines it's quite long for a single file — the detailed typography reference, text styles table, and component specifications could be split into separate reference files. There are no cross-references to external files for deeper detail.	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.