tldraw-ui-skills

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

Quality

68%

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/tldraw/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 concise and well-structured with a clear 'Use when' clause and a distinctive niche tied to Tldraw's specific design system. Its main weakness is the lack of concrete actions—it describes the aesthetic but not what the skill actually does (e.g., generate components, apply styles, create layouts). Adding specific capabilities would strengthen it significantly.

Suggestions

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

Include additional trigger terms users might naturally say, such as 'tldraw style', 'tldraw theme', 'tldraw-like interface', or 'tldraw components'.

Dimension	Reasoning	Score
Specificity	Names the domain (UI design system) and mentions some specific details (light mode, Inter font, 4px grid), but doesn't list concrete actions like 'create components', 'style buttons', or 'build layouts'.	2 / 3
Completeness	Clearly answers both what ('Tldraw's UI design system') and when ('Use when building interfaces inspired by Tldraw's aesthetic - light mode, Inter font, 4px grid') with an explicit 'Use when' clause and trigger conditions.	3 / 3
Trigger Term Quality	Includes 'Tldraw' as a strong trigger term and mentions 'UI design system', 'light mode', 'Inter font', and '4px grid', but misses common user phrases like 'tldraw style', 'tldraw-like UI', 'design tokens', 'component styling', or 'tldraw theme'.	2 / 3
Distinctiveness Conflict Risk	The description is highly distinctive by referencing a specific product (Tldraw) and its unique design characteristics (Inter font, 4px grid, light mode), making it very unlikely to conflict with other UI or design skills.	3 / 3
	Total	10 / 12 Passed

Implementation

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 solid design system reference skill with clear constraints using MUST/SHOULD/NEVER language and well-organized tables of design tokens. Its main weaknesses are the lack of executable code examples (CSS/Tailwind/component snippets) that would make it immediately actionable, and some redundancy in reference sections that could be extracted to separate files. The content is well-scoped but reads more like a design specification than an actionable skill.

Suggestions

Add at least 2-3 executable code examples (e.g., a CSS custom properties block defining the tokens, a Tailwind config snippet, or a sample styled component) to make the skill immediately actionable.

Extract the detailed token tables (Semantic Tokens, Text Styles) into a separate REFERENCE.md file and link to it, keeping only the most essential tokens inline.

Remove redundant sections like 'Border Radius Reference' and 'Typography Reference' that repeat information already present in the tables above them.

Dimension	Reasoning	Score
Conciseness	The content is mostly efficient with well-structured tables and clear MUST/SHOULD/NEVER constraints. However, some sections include redundant information (e.g., 'Border Radius Reference' repeats the scale already listed in the Borders section, 'Typography Reference' restates what's in the table, and 'Detected Layout Patterns' adds little value). The duplicate 'body-secondary' entry in the text styles table also suggests unrefined content.	2 / 3
Actionability	The skill provides specific values (hex codes, pixel sizes, font weights) which are concrete and actionable for design implementation. However, it lacks executable code examples — no CSS snippets, no Tailwind classes, no component code. For a UI design system skill, having at least one concrete code example (e.g., a styled button or card component) would make it fully actionable rather than just a reference specification.	2 / 3
Workflow Clarity	This is primarily a reference/constraint skill rather than a multi-step workflow skill. The single-purpose nature (apply these design tokens and rules when building Tldraw-style UIs) is unambiguous. The MUST/SHOULD/NEVER hierarchy provides clear priority ordering, and the 'When to Apply' section clearly scopes when to use the skill.	3 / 3
Progressive Disclosure	The content is well-organized with clear section headers and tables, making it easy to scan. However, at ~150 lines with detailed token tables and reference sections, some of this content (like the full text styles table or the complete semantic tokens table) could be split into a separate reference file to keep the main skill leaner. No external references are provided.	2 / 3
	Total	9 / 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.