liveblocks-ui-skills
Liveblocks's UI design system. Use when building interfaces inspired by Liveblocks's aesthetic - dark mode, Inter font, 4px grid.
70
62%
Does it follow best practices?
Impact
Pending
No eval scenarios have been run
Passed
No known issues
Optimize this skill with Tessl
npx tessl skill review --optimize ./skills/liveblocks/SKILL.mdQuality
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 (Liveblocks 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 benefit from more natural trigger terms users might use when requesting UI work.
Suggestions
Add specific concrete actions the skill performs, e.g., 'Creates UI components, applies styling, and generates layouts following Liveblocks's design system.'
Include additional natural trigger terms users might say, such as 'theme', 'styling', 'components', 'design tokens', or 'Liveblocks-style'.
| Dimension | Reasoning | Score |
|---|---|---|
Specificity | Names the domain (UI design system) and mentions some specific elements (dark 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 ('Liveblocks's UI design system') and when ('Use when building interfaces inspired by Liveblocks's aesthetic - dark mode, Inter font, 4px grid') with an explicit 'Use when' clause and trigger conditions. | 3 / 3 |
Trigger Term Quality | Includes 'Liveblocks' as a brand trigger and some design terms like 'dark mode', 'Inter font', '4px grid', but misses common user terms like 'styling', 'theme', 'components', 'design tokens', or 'UI components'. | 2 / 3 |
Distinctiveness Conflict Risk | The specific brand name 'Liveblocks' combined with its distinctive aesthetic details (dark mode, Inter font, 4px grid) creates a clear niche that is 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 is a reasonably well-structured design system reference with specific, concrete values (colors, typography, spacing) organized into clear sections with tables. However, it lacks executable code examples (CSS variables, Tailwind config, component snippets) that would make it truly actionable, and includes some raw/redundant data (duplicate text style entries, detected layout patterns) that could be cleaned up or externalized. The MUST/SHOULD/NEVER constraint format is effective but would benefit from accompanying implementation examples.
Suggestions
Add executable code examples: a CSS custom properties block for the semantic tokens, a Tailwind config snippet, or a sample component implementation to make the design system immediately actionable.
Clean up redundant text style entries (multiple 'body-secondary' and 'text-15px' variants with slightly different values) - either consolidate them or explain when each variant applies.
Move the detailed reference tables (full text styles list, detected layout patterns) to a separate REFERENCE.md file and link to it, keeping SKILL.md as a concise overview with the most essential tokens.
Add a contrast ratio validation step or tool recommendation to back up the 4.5:1 accessibility requirement.
| 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., duplicate 'body-secondary' and 'text-15px' entries with slightly different values, detected layout patterns that add little value, and the spacing scale listing individual pixel values 1-8 which is obvious for a 4px grid). Some sections like 'Detected Layout Patterns' feel like raw data dumps rather than curated guidance. | 2 / 3 |
Actionability | The skill provides specific values (hex codes, pixel sizes, font weights) which are concrete and actionable for styling, but lacks executable code examples. No CSS/Tailwind snippets, no component code, no copy-paste ready implementations. The tables serve as reference but an agent would need to translate these into actual code. | 2 / 3 |
Workflow Clarity | For a design system reference skill, there's no multi-step workflow needed, but the 'When to Apply' section is vague about priority/ordering of constraints. The skill reads as a flat reference document rather than guiding through a process of building an interface. There's no validation step (e.g., how to verify contrast ratios meet the 4.5:1 requirement). | 2 / 3 |
Progressive Disclosure | The content is well-organized with clear section headers and tables, but it's a monolithic document that could benefit from splitting detailed reference tables (all text styles, layout patterns) into separate files. At ~150 lines with detailed tables, the inline reference data could be externalized with clear pointers. | 2 / 3 |
Total | 8 / 12 Passed |
Validation
100%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
Table of Contents
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.