ticktick-ui-skills

Ticktick's UI design system. Use when building interfaces inspired by Ticktick's aesthetic - light mode, Inter font, 4px grid.

Quality

68%

Does it follow best practices?

Impact

—

No eval scenarios have been run

Securityby

Passed

No known issues

Optimize this skill with Tessl

npx tessl skill review --optimize ./skills/ticktick/SKILL.md

Quality

Content

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 well-organized design system reference with clear constraint language (MUST/SHOULD/NEVER) and specific values. Its main weaknesses are the lack of executable code examples (CSS/Tailwind snippets) and the monolithic structure that could benefit from splitting detailed reference tables into separate files. Some data feels like raw extraction output (duplicate style names, count columns) rather than curated guidance.

Suggestions

Add executable code examples—CSS custom properties block, Tailwind config snippet, or a sample component—to make the design tokens immediately copy-paste usable.

Split detailed reference tables (full text styles list, layout patterns) into a separate REFERENCE.md and link to it, keeping SKILL.md as a concise overview with only the most-used tokens.

Deduplicate text style entries (e.g., multiple `text-16px` and `text-15px` rows) and remove low-value columns like 'Count' to reduce noise.

Address the apparent contradiction where `text-primary` is #CACACA (light gray) which may not meet the stated 4.5:1 contrast ratio against #FEFEFE background—clarify intended usage or fix the token.

Dimension	Reasoning	Score
Conciseness	The content is mostly efficient with clear tables and MUST/SHOULD/NEVER constraints, but includes some redundancy (e.g., detected layout patterns with multiple viewport sizes, duplicate text-style entries, and the 'Count' column adding little value). The raw data dumps (all font sizes, all border radii listed twice) could be tightened.	2 / 3
Actionability	Provides specific values (hex codes, pixel sizes, font weights) which are concrete and actionable for UI implementation. However, there are no executable code examples—no CSS snippets, no Tailwind classes, no component code. For a UI design system skill, copy-paste-ready code would significantly improve actionability.	2 / 3
Workflow Clarity	This is a reference/constraint skill rather than a multi-step workflow. The 'When to Apply' section clearly scopes usage, and the MUST/SHOULD/NEVER hierarchy provides unambiguous decision-making guidance. For a design system reference, this level of clarity is appropriate.	3 / 3
Progressive Disclosure	The content is well-structured with clear sections and tables, but it's quite long (~180 lines) and could benefit from splitting detailed reference tables (all text styles, layout patterns) into separate files. Everything is inline in a single monolithic document.	2 / 3
	Total	9 / 12 Passed

Description

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 distinctive enough to avoid conflicts with other skills. However, it lacks specificity about what concrete actions the skill performs (e.g., generating components, applying color palettes, creating layouts) and could benefit from additional trigger terms that users might naturally use.

Suggestions

Add specific concrete actions the skill performs, e.g., 'Generates UI components, applies color palettes, and creates layouts following Ticktick's design system.'

Include additional natural trigger terms users might say, such as 'todo app style', 'task manager UI', 'clean minimal interface', or 'productivity app design'.

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 ('Ticktick's UI design system') and when ('Use when building interfaces inspired by Ticktick'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 'Ticktick', 'UI', 'design system', 'light mode', 'Inter font', '4px grid', and 'interfaces', but misses common variations users might say like 'task manager UI', 'todo app style', 'design tokens', 'component library', or 'styling'.	2 / 3
Distinctiveness Conflict Risk	The description is highly specific to Ticktick's design system with distinct triggers (Ticktick aesthetic, Inter font, 4px grid), making it very unlikely to conflict with other UI or design skills.	3 / 3
	Total	10 / 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: about 2 months 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.