lattice-ui-skills

Lattice's UI design system. Use when building interfaces inspired by Lattice'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/lattice/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 effectively identifies a clear niche (Lattice's design system) and includes an explicit 'Use when' clause, making it strong on completeness and distinctiveness. However, it lacks concrete action verbs describing what the skill actually does (e.g., generating components, applying styles) and could include more natural trigger terms users might use when requesting this skill.

Suggestions

Add specific concrete actions the skill performs, e.g., 'Creates UI components, applies spacing and color tokens, generates styled layouts following Lattice's design system.'

Expand trigger terms to include variations like 'design system', 'UI components', 'Lattice theme', 'Lattice styling', or 'Lattice-inspired design'.

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', 'apply spacing tokens', or 'generate layouts'.	2 / 3
Completeness	Clearly answers both what ('Lattice's UI design system') and when ('Use when building interfaces inspired by Lattice's aesthetic - light mode, Inter font, 4px grid') with an explicit 'Use when' clause and trigger conditions.	3 / 3
Trigger Term Quality	Includes 'Lattice' as a key trigger term and some design-related terms like 'light mode', 'Inter font', '4px grid', but misses common variations users might say such as 'design system', 'UI components', 'styling', 'theme', or 'Lattice-style'.	2 / 3
Distinctiveness Conflict Risk	The specificity to 'Lattice' as a named design system with distinct characteristics (Inter font, 4px grid, light mode) makes this highly distinguishable from other UI or design system 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 constraint language and well-organized tables of design tokens. Its main weaknesses are the lack of executable code examples (CSS/Tailwind snippets for implementing the design system) and some redundancy in reference sections. The content would benefit from concrete implementation examples and splitting detailed reference tables into separate files.

Suggestions

Add concrete code examples showing how to implement the design system (e.g., Tailwind config snippet, CSS custom properties block, or a sample component using the tokens)

Remove redundant reference sections—the border-radius scale is listed twice, and the typography reference repeats information already in the text styles table

Consider splitting detailed reference tables (full font size list, all color tokens, border radius scale) into a separate REFERENCE.md file, keeping SKILL.md as a concise overview with the most commonly needed values

Dimension	Reasoning	Score
Conciseness	The content is mostly efficient with well-structured tables and clear MUST/SHOULD/NEVER constraints, but includes some redundancy (e.g., border-radius scale listed twice, typography reference section repeating font sizes that could be inferred from the text styles table). The detected layout patterns and some reference sections add bulk without proportional value.	2 / 3
Actionability	Provides specific values (hex codes, pixel sizes, font weights) and clear constraint language (MUST/SHOULD/NEVER), which is actionable for a design system. However, it lacks concrete code examples—no CSS snippets, no Tailwind classes, no component implementation examples that would make this copy-paste ready for building actual interfaces.	2 / 3
Workflow Clarity	This is a reference/constraint skill rather than a multi-step workflow, so the single-task clarity standard applies. The content is well-organized into logical sections (colors, typography, spacing, borders, layout, components, states, animation, performance) with clear, unambiguous rules that can be applied directly when building UI.	3 / 3
Progressive Disclosure	The content is well-structured with clear section headers and tables, but it's a monolithic file with no references to external files for detailed content. The typography and border radius reference sections could be split out, and the file is long enough (~150+ lines of dense reference material) that progressive disclosure to separate files would improve usability.	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.