shopify-ui-skills
Shopify's UI design system. Use when building interfaces inspired by Shopify's aesthetic - light mode, Inter font, 4px grid.
75
68%
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/shopify/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 is concise and well-structured with a clear 'Use when' clause that makes it easy for Claude to know when to select this skill. Its main weakness is the lack of specific concrete actions (what it actually does beyond being a design system) and missing some natural trigger terms users might use like 'Polaris' or 'Shopify-style'.
Suggestions
Add concrete actions the skill performs, e.g., 'Generates components, layouts, and color schemes following Shopify's Polaris design system'.
Include additional trigger terms users might naturally say, such as 'Polaris', 'Shopify admin', 'e-commerce dashboard', or 'Shopify-style UI'.
| Dimension | Reasoning | Score |
|---|---|---|
Specificity | Names the domain (Shopify 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 admin panels'. | 2 / 3 |
Completeness | Clearly answers both what ('Shopify's UI design system') and when ('Use when building interfaces inspired by Shopify's aesthetic') with explicit trigger guidance including specific details about light mode, Inter font, and 4px grid. | 3 / 3 |
Trigger Term Quality | Includes 'Shopify' and 'UI design system' as natural keywords, plus some specifics like 'Inter font' and '4px grid', but misses common variations users might say like 'Polaris', 'admin dashboard', 'e-commerce UI', or 'Shopify-style components'. | 2 / 3 |
Distinctiveness Conflict Risk | Highly distinctive — specifically targets Shopify's design aesthetic with concrete identifiers (Inter font, 4px grid, light mode), making it very unlikely to conflict with 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 skill provides a solid design system reference with specific, opinionated constraints using clear MUST/SHOULD/NEVER language and well-organized tables of design tokens. Its main weaknesses are the lack of executable code examples (CSS/Tailwind/React snippets) that would make it immediately actionable, and some redundancy in reference sections that repeat information already presented in tables. The content would benefit from splitting detailed reference tables into separate files and adding implementation examples.
Suggestions
Add executable code examples (CSS custom properties, Tailwind config, or React component snippets) to make the design tokens and constraints immediately implementable rather than requiring translation from specification to code.
Split detailed reference tables (full typography scale, semantic tokens) into separate referenced files to keep SKILL.md as a concise overview with quick-start essentials.
Remove redundant sections like 'Border Radius Reference' and 'Typography Reference' that restate information already present in the tables above them, and drop the 'Count' column from the Text Styles table.
| 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 Reference' repeats the scale already listed above, 'Typography Reference' restates font info from the table, and 'Detected Layout Patterns' adds little actionable value). Some tables have a 'Count' column with all '1' values that adds no information. | 2 / 3 |
Actionability | Provides specific values (hex codes, pixel sizes, border radii) which are concrete and useful, but lacks executable code examples. For a UI design system skill, CSS/Tailwind snippets or component code would make this copy-paste ready. The guidance is specific but still requires Claude to translate specifications into implementation. | 2 / 3 |
Workflow Clarity | This is a reference/constraint skill rather than a multi-step workflow, so the single-purpose nature applies. The MUST/SHOULD/NEVER hierarchy creates clear priority ordering, and the 'When to Apply' section clearly scopes usage. No destructive or batch operations are involved. | 3 / 3 |
Progressive Disclosure | Content is well-organized with clear sections and tables, but it's a fairly long monolithic document. The extensive typography table with 10 rows, layout patterns, and detailed token tables could be split into referenced files. No external references are provided for deeper dives into specific areas like component patterns or accessibility guidelines. | 2 / 3 |
Total | 9 / 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.