todoist-ui-skills

Todoist's UI design system. Use when building interfaces inspired by Todoist'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/todoist/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 distinctive triggers that tie it to Todoist's specific design language. Its main weakness is the lack of concrete actions—it describes what the system is but not what specific tasks it enables (e.g., building components, applying typography, creating layouts). Adding more natural trigger terms and explicit capabilities would strengthen it.

Suggestions

Add specific concrete actions the skill performs, e.g., 'Creates UI components, applies typography and spacing, generates color palettes following Todoist's design system.'

Include additional natural trigger terms users might say, such as 'Todoist-style', 'minimal task app UI', 'clean productivity interface', or 'Todoist clone'.

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 styles', or 'build layouts'.	2 / 3
Completeness	Clearly answers both what ('Todoist's UI design system') and when ('Use when building interfaces inspired by Todoist'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 'Todoist', 'UI', 'design system', 'light mode', 'Inter font', and '4px grid', but misses common variations users might say such as 'task manager UI', 'Todoist-style', 'clean minimal interface', or 'component library'.	2 / 3
Distinctiveness Conflict Risk	Very specific niche targeting Todoist's particular design aesthetic with distinct identifiers (Inter font, 4px grid, light mode), making it unlikely to conflict with other 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 skill provides a comprehensive design system reference with specific values and clear MUST/SHOULD/NEVER rules, which is valuable for consistent UI implementation. However, it appears partially auto-generated from design analysis (evidenced by 'currently 20 colors detected', 'used 75x' counts, and suspicious values like 0px input height), resulting in some questionable or redundant data that undermines actionability. It would benefit from curation of extracted values, addition of code examples, and splitting reference tables into separate files.

Suggestions

Add executable code examples (CSS/Tailwind snippets or component templates) showing how to implement key patterns like the color tokens, typography styles, and interactive states.

Curate auto-extracted values - the 0px input height, element widths of 5-11px, and 'Count: 1' columns appear to be raw extraction artifacts that should be reviewed and corrected or removed.

Split detailed reference tables (semantic tokens, text styles, typography reference) into a separate REFERENCE.md file, keeping SKILL.md as a concise overview with the most important rules and links to details.

Remove redundant sections like 'Border Radius Reference' which repeats the scale already stated in the Borders section, and the font families listing that adds no value when only Inter is used.

Dimension	Reasoning	Score
Conciseness	The content is mostly efficient with well-structured tables and clear rules, but includes some redundancy (e.g., 'Border Radius Reference' repeats the scale already mentioned in the Borders section, 'Typography Reference' lists font sizes already shown in the table). Some detected values like '0px height for input fields' and element widths of '7px, 8px, 10px, 11px, 5px' seem like raw extraction artifacts rather than curated guidance.	2 / 3
Actionability	The skill provides specific values (hex codes, pixel sizes, font weights) which are concrete, but lacks executable code examples showing how to implement these patterns (e.g., CSS/Tailwind snippets, component templates). The MUST/SHOULD/NEVER rules are clear directives but some values appear auto-extracted and questionable (e.g., input height of 0px, element widths of 5-11px), reducing trustworthiness.	2 / 3
Workflow Clarity	This is primarily a reference/design-system skill rather than a multi-step workflow, so explicit sequencing is less critical. However, there's no guidance on the order of applying these constraints when building a UI, and no validation steps (e.g., checking contrast ratios, verifying grid alignment). The 'When to Apply' section is minimal.	2 / 3
Progressive Disclosure	The content is well-organized with clear section headers and tables, making it scannable. However, it's quite long as a single file (~150+ lines of detailed reference tables) and would benefit from splitting detailed token/style tables into separate reference files, keeping SKILL.md as a concise overview with links.	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.