readwise-ui-skills

Readwise's UI design system. Use when building interfaces inspired by Readwise'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/readwise/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 its focus on Readwise's specific design system. However, it lacks concrete action verbs describing what the skill actually does (e.g., generating components, applying styles) and could benefit from additional trigger terms users might naturally use.

Suggestions

Add specific concrete actions the skill performs, e.g., 'Generates UI components, applies consistent styling, and builds layouts following Readwise's design system.'

Include additional natural trigger terms users might say, such as 'design system', 'UI components', 'Readwise theme', 'styling', or 'Readwise look and feel'.

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 styling', or 'generate layouts'.	2 / 3
Completeness	Clearly answers both what ('Readwise's UI design system') and when ('Use when building interfaces inspired by Readwise's aesthetic - light mode, Inter font, 4px grid') with an explicit 'Use when' clause and trigger conditions.	3 / 3
Trigger Term Quality	Includes 'Readwise' and some design terms like 'light mode', 'Inter font', '4px grid', and 'interfaces', but misses common variations users might say like 'design system', 'UI components', 'styling', 'theme', or 'Readwise-style'.	2 / 3
Distinctiveness Conflict Risk	Very specific niche — Readwise's particular design system with named attributes (Inter font, 4px grid, light mode) makes it highly unlikely to conflict with other design or UI 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 well-structured design system reference with clear constraint language (MUST/SHOULD/NEVER) and useful token tables. Its main weaknesses are the lack of executable code examples (CSS/Tailwind/component markup) and some redundancy in reference sections. Adding concrete implementation snippets and splitting detailed reference tables into separate files would significantly improve both actionability and conciseness.

Suggestions

Add executable code examples showing how to implement key patterns — e.g., a Tailwind config snippet for the color tokens, a CSS custom properties block, or a React component example for the button variant.

Extract detailed reference tables (full typography list, layout patterns, color palette) into separate reference files and link to them from the main skill to improve progressive disclosure and reduce token cost.

Remove redundant sections like 'Border Radius Reference' (duplicates Borders section) and 'Typography Reference' font families (already clear from the table) to tighten conciseness.

Add a brief workflow or checklist for applying the design system to a new component (e.g., 1. Set tokens → 2. Apply typography scale → 3. Verify contrast → 4. Check grid alignment).

Dimension	Reasoning	Score
Conciseness	The content is mostly efficient with well-structured tables and clear MUST/SHOULD/NEVER constraints, but includes some redundant information (e.g., 'Border Radius Reference' section repeats what's already in the Borders section, 'Typography Reference' lists font sizes already shown in the table, and detected layout patterns with raw pixel dimensions add noise without clear actionability).	2 / 3
Actionability	Provides concrete design tokens, specific values, and clear constraints (MUST/SHOULD/NEVER), but lacks executable code examples. For a UI design system skill, CSS/Tailwind snippets or component code would make this significantly more actionable — e.g., showing how to implement a button variant or apply the typography scale in actual markup.	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 explicit workflow for building a component or page — no step-by-step process for applying these constraints, and no validation checkpoints (e.g., checking contrast ratios or verifying grid alignment).	2 / 3
Progressive Disclosure	Content is well-organized with clear section headers and tables, making it scannable. However, it's a fairly long monolithic file with no references to external files for detailed content (e.g., a full color palette reference, component library, or examples file). The detailed typography and layout tables could be split out to keep the main skill leaner.	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.