raycast-ui-skills

Raycast's UI design system. Use when building interfaces inspired by Raycast'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/raycast/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 has a clear 'Use when' clause and is highly distinctive due to the Raycast brand specificity. However, it lacks concrete action verbs describing what the skill actually does (e.g., generate components, apply styles) and could benefit from additional trigger terms users might naturally use.

Suggestions

Add concrete actions describing what the skill does, e.g., 'Generates UI components, layouts, and styles following Raycast's design system.'

Include additional trigger terms users might say, such as 'Raycast-style', 'Raycast theme', 'Raycast UI', 'clean minimal interface', or 'design tokens'.

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 layouts', 'style components', or 'generate CSS'. It describes attributes rather than actions.	2 / 3
Completeness	Clearly answers both 'what' (Raycast's UI design system) and 'when' (Use when building interfaces inspired by Raycast's aesthetic), with explicit trigger guidance including specific design attributes.	3 / 3
Trigger Term Quality	Includes 'Raycast' as a strong trigger term and mentions some design specifics (Inter font, 4px grid, light mode), but misses common user terms like 'UI components', 'design tokens', 'styling', 'theme', or 'Raycast-style'.	2 / 3
Distinctiveness Conflict Risk	Highly distinctive due to the specific brand reference (Raycast) combined with concrete design attributes (Inter font, 4px grid, light mode). Unlikely to conflict with generic UI or design system 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 is a solid design system reference with well-structured tables and clear constraint language (MUST/SHOULD/NEVER). Its main weaknesses are the lack of executable code examples showing how to implement these tokens in practice, some redundancy in the typography and border sections, and the monolithic structure that could benefit from splitting detailed reference tables into separate files. The specific pixel values in 'Detected Layout Patterns' and near-duplicate text-14px entries suggest raw design extraction that hasn't been fully curated.

Suggestions

Add at least one concrete code example (e.g., a CSS/Tailwind config snippet or a React component) showing how to apply the design tokens in practice

Remove redundant information: the border-radius scale is listed twice, and the Typography Reference section repeats what's in the Text Styles table

Consolidate the five near-identical text-14px entries — if the color differences are meaningful, explain why; otherwise, simplify to one or two variants

Move the detailed token tables and reference data to a separate file (e.g., TOKENS.md) and keep the main skill focused on constraints and a quick-start example

Dimension	Reasoning	Score
Conciseness	The content is mostly efficient with well-structured tables and clear MUST/SHOULD/NEVER constraints. However, there's some redundancy (e.g., border-radius scale listed twice, typography reference section repeats info from the table, multiple near-identical text-14px entries with barely distinguishable hex colors) and the 'Detected Layout Patterns' section with specific pixel widths like 1558px feels like raw extraction data rather than actionable guidance.	2 / 3
Actionability	The skill provides concrete design tokens, specific values, and clear constraints (MUST/SHOULD/NEVER), which is good for a design system reference. However, it lacks executable code examples — no CSS snippets, no Tailwind config, no component code. For a UI design system skill, at least one concrete implementation example (e.g., a styled button or card component) would make it significantly more actionable.	2 / 3
Workflow Clarity	The 'When to Apply' section provides clear triggers, and the MUST/SHOULD/NEVER hierarchy creates implicit ordering of priorities. However, there's no workflow for actually building a component — no step-by-step process like 'start with layout grid, apply tokens, validate contrast ratios.' For a design system that involves multiple interacting constraints, a brief workflow would help.	2 / 3
Progressive Disclosure	The content is well-organized with clear section headers and tables, making it scannable. However, it's a fairly long monolithic document (~150 lines of dense reference material) with no references to external files for detailed specs. The typography and color tables could be split into separate reference files, with the main skill keeping just the key constraints and quick-reference values.	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.