apple-ui-skills
Apple's UI design system. Use when building interfaces inspired by Apple'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/apple/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 reasonably effective with a clear 'Use when' clause and distinctive design system parameters. Its main weakness is the lack of concrete actions—it describes what the system is but not what it does (e.g., generating components, styling layouts). The trigger terms could also be expanded to cover more natural user phrasings like 'iOS style' or 'Apple-like design'.
Suggestions
Add specific concrete actions such as 'Generates layouts, styles components, and applies spacing' to clarify what the skill actually does.
Expand trigger terms to include common variations like 'iOS design', 'macOS style', 'Apple-like', 'HIG', or 'Apple Human Interface Guidelines'.
| Dimension | Reasoning | Score |
|---|---|---|
Specificity | Names the domain (Apple's UI design system) and mentions some specific details (light mode, Inter font, 4px grid), but doesn't list concrete actions like 'create layouts', 'style components', or 'generate design tokens'. | 2 / 3 |
Completeness | Clearly answers both 'what' (Apple's UI design system) and 'when' with an explicit 'Use when building interfaces inspired by Apple's aesthetic' clause including specific trigger conditions. | 3 / 3 |
Trigger Term Quality | Includes some relevant keywords like 'Apple', 'UI design', 'light mode', 'Inter font', and '4px grid', but misses common user variations like 'Apple-style', 'iOS design', 'macOS look', 'HIG', 'Human Interface Guidelines', or 'Apple aesthetic'. | 2 / 3 |
Distinctiveness Conflict Risk | The combination of Apple's aesthetic, Inter font, 4px grid, and light mode creates a very specific niche that is unlikely to conflict with other design system skills or generic UI 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 well-structured design system reference with clear constraint language (MUST/SHOULD/NEVER) and specific token values. Its main weaknesses are the lack of executable implementation examples (no CSS/Tailwind/component code) and some redundant information that could be trimmed or moved to separate reference files. Adding even one or two concrete component implementation examples would significantly boost its practical utility.
Suggestions
Add concrete implementation examples — e.g., a styled button component in CSS/Tailwind or a React component showing how to apply the design tokens in practice.
Remove redundant information: RGB values alongside HEX, the 'Typography Reference' section that repeats the table data, and the single-value 'Border Radius Reference' section.
Consider splitting the detailed token tables and typography reference into a separate REFERENCE.md file, keeping SKILL.md as a concise overview with the most critical rules and a quick-start example.
| Dimension | Reasoning | Score |
|---|---|---|
Conciseness | The content is mostly efficient with well-structured tables and clear MUST/SHOULD/NEVER constraints. However, some sections include redundant detail (e.g., 'Detected Layout Patterns' with pixel-specific heights, the 'Typography Reference' section repeating what's already in the table, and the 'Border Radius Reference' section with a single value). The RGB values alongside HEX are arguably unnecessary since Claude can convert between them. | 2 / 3 |
Actionability | The skill provides specific values (colors, sizes, spacing) and clear rules (MUST/SHOULD/NEVER), which is good. However, it lacks executable code examples — no CSS snippets, no Tailwind classes, no component code showing how to actually implement these guidelines. For a UI design system skill, concrete implementation examples (e.g., a button component, a heading styled correctly) would significantly improve actionability. | 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 Apple-style UIs) is unambiguous. The 'When to Apply' section clearly scopes usage, and the MUST/SHOULD/NEVER hierarchy provides clear decision-making guidance without needing sequential steps. | 3 / 3 |
Progressive Disclosure | The content is well-organized with clear section headers and tables, but it's a fairly long monolithic document. Some sections (like the full typography reference with all font sizes, or the detailed layout patterns) could be split into separate reference files. There are no cross-references to external files for deeper detail. | 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.