mobbin-ui-skills

Mobbin's UI design system. Use when building interfaces inspired by Mobbin'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/mobbin/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 brand-specific triggers that minimize conflict risk. However, it lacks specificity about what concrete actions the skill performs beyond referencing the design system, 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., 'Applies Mobbin's UI design system to build components, style layouts, and configure typography.'

Include additional natural trigger terms users might say, such as 'design tokens', 'component styling', 'Mobbin theme', or 'UI 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', 'apply styles', or 'build layouts'.	2 / 3
Completeness	Clearly answers both what ('Mobbin's UI design system') and when ('Use when building interfaces inspired by Mobbin's aesthetic - light mode, Inter font, 4px grid') with an explicit 'Use when' clause and trigger conditions.	3 / 3
Trigger Term Quality	Includes 'Mobbin' as a key trigger term and mentions 'UI design system', 'light mode', 'Inter font', and '4px grid', but misses common variations users might say like 'design tokens', 'component library', 'styling', or 'theme'.	2 / 3
Distinctiveness Conflict Risk	Highly distinctive due to the specific brand name 'Mobbin' and concrete design specifications (Inter font, 4px grid, light mode), making it very 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 well-structured design system reference with clear constraints using MUST/SHOULD/NEVER conventions and specific token values. Its main weaknesses are the lack of executable implementation examples (no CSS/Tailwind/component code) and the inclusion of what appears to be raw audit data (detected layout patterns, element counts) that adds noise without clear actionability. The document would benefit from being split into a concise overview with links to detailed reference tables.

Suggestions

Add at least one executable code example showing how to implement the design tokens (e.g., CSS custom properties block, Tailwind config snippet, or a sample component using the specified typography and spacing).

Move the detailed text styles table and border radius reference into a separate REFERENCE.md file, keeping only the key rules and most common values in the main SKILL.md.

Remove or consolidate raw audit artifacts like near-duplicate text style entries (multiple body-secondary rows with slightly different colors) and the 'Detected Layout Patterns' section—either distill these into actionable rules or move them to a separate audit file.

Add a validation/verification note for key constraints, such as how to check contrast ratios meet 4.5:1 or how to audit that spacing adheres to the 4px grid.

Dimension	Reasoning	Score
Conciseness	The content is mostly efficient with good use of tables and MUST/SHOULD/NEVER conventions, but includes some redundancy (e.g., the text styles table has many near-identical entries with slightly different colors like #AFAFAF, #B2B2B2, #B5B5B5 that could be consolidated). The 'Detected Layout Patterns' and element widths list (72px, 61px, 27px, 78px) feel like raw audit data rather than actionable guidance.	2 / 3
Actionability	The skill provides specific values (hex codes, pixel sizes, font weights) which is concrete, but lacks executable code examples showing how to implement these design tokens in practice (e.g., CSS custom properties, Tailwind config, or component snippets). The MUST/SHOULD/NEVER rules are clear directives but would benefit from at least one implementation example.	2 / 3
Workflow Clarity	The skill is primarily a reference/constraint document 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 new interface, and no validation steps (e.g., how to verify contrast ratios meet the 4.5:1 requirement, or how to audit spacing against the 4px grid).	2 / 3
Progressive Disclosure	The content is well-organized with clear section headers and tables, but it's a fairly long monolithic document (~150 lines of dense reference material). The detailed text styles table and border radius reference could be split into separate reference files, with the main SKILL.md providing a concise overview and linking out.	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.