github-ui-skills
GitHub's UI design system. Use when building interfaces inspired by GitHub's aesthetic - dark mode, Inter font, 4px grid.
67
58%
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/github/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 well-structured with a clear 'Use when' clause and a distinct niche targeting GitHub's design system. Its main weakness is the lack of specific concrete actions—it describes the design system's attributes but not what the skill actually does (e.g., generate components, apply styles, create layouts). Adding more trigger term variations would also improve discoverability.
Suggestions
Add concrete actions the skill performs, e.g., 'Generates UI components, applies color schemes, and creates layouts following GitHub's design system.'
Expand trigger terms to include variations like 'GitHub-style', 'GitHub theme', 'Primer design system', 'GitHub UI components'.
| Dimension | Reasoning | Score |
|---|---|---|
Specificity | Names the domain (GitHub UI design system) and mentions some specific elements (dark mode, Inter font, 4px grid), but doesn't list concrete actions like 'create layouts', 'style components', or 'generate color palettes'. | 2 / 3 |
Completeness | Answers both 'what' (GitHub's UI design system with dark mode, Inter font, 4px grid) and 'when' (Use when building interfaces inspired by GitHub's aesthetic), with an explicit 'Use when' clause. | 3 / 3 |
Trigger Term Quality | Includes 'GitHub' and some design terms like 'dark mode', 'Inter font', '4px grid', but misses common user terms like 'GitHub-style', 'GitHub theme', 'UI components', 'design tokens', or 'GitHub look and feel'. | 2 / 3 |
Distinctiveness Conflict Risk | Clearly scoped to GitHub's specific design system with distinctive triggers (GitHub aesthetic, Inter font, 4px grid), making it unlikely to conflict with other UI or design skills. | 3 / 3 |
Total | 10 / 12 Passed |
Implementation
42%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 comprehensive set of design constraints with specific values, which is valuable for maintaining consistency. However, it suffers from being a monolithic reference document that mixes high-level rules with detailed lookup tables, lacks executable code examples (CSS variables, Tailwind config, or component snippets), and could benefit significantly from splitting reference data into separate files. Some values seem auto-generated from design analysis (e.g., 'detected lightness: 12', 'used 54x', input height '0px') and need curation.
Suggestions
Split detailed reference tables (text styles, semantic tokens, border radius scales) into a separate REFERENCE.md file and link to it from the main skill
Add executable code examples: a CSS custom properties block defining the design tokens, a sample Tailwind config, or a concrete component implementation showing the system in use
Review and curate auto-generated values that seem incorrect or unhelpful—input height '0px' and element widths '10px, 9px, 11px' appear to be artifacts rather than intentional design decisions
Add a validation checklist or quick-reference section at the top summarizing the most critical constraints (dark background, Inter font, 4px grid, contrast ratios) for fast scanning
| Dimension | Reasoning | Score |
|---|---|---|
Conciseness | The skill contains useful design tokens and constraints, but includes excessive detail that could be trimmed—e.g., the full text styles table with 10 rows of 15px variants, detected layout patterns with redundant viewport info, and font size lists that are more reference data than actionable guidance. Some of this belongs in a separate reference file. | 2 / 3 |
Actionability | The skill provides concrete values (hex codes, pixel sizes, specific CSS properties) and clear MUST/SHOULD/NEVER constraints, which is good. However, it lacks executable code examples—no CSS snippets, no Tailwind config, no component code. For a UI design system skill, showing a concrete component implementation or CSS custom properties setup would significantly improve actionability. | 2 / 3 |
Workflow Clarity | This is primarily a reference/constraint skill rather than a multi-step workflow, so explicit sequencing is less critical. However, there's no guidance on how to apply these constraints in order (e.g., start with colors, then typography, then layout), and no validation steps for checking contrast ratios or grid alignment despite mentioning accessibility requirements. | 2 / 3 |
Progressive Disclosure | Everything is in a single monolithic file with no references to external files for detailed content. The extensive token tables, typography reference, and border radius scales could be split into separate reference files, with the main SKILL.md providing a concise overview and links. The file is quite long and mixes high-level constraints with granular reference data. | 1 / 3 |
Total | 7 / 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.