arc-ui-skills
Arc's UI design system. Use when building interfaces inspired by Arc'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/arc/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 has a clear niche and explicit trigger guidance, making it strong on completeness and distinctiveness. However, it lacks concrete action verbs describing what the skill actually does (e.g., generates components, applies styles, creates layouts) and could benefit from additional natural trigger terms users might use when seeking Arc-inspired designs.
Suggestions
Add specific concrete actions the skill performs, e.g., 'Generates UI components, applies styling, and creates layouts following Arc's design system.'
Include additional natural trigger terms users might say, such as 'Arc browser style', 'Arc-like UI', 'minimal modern interface', or 'Arc theme'.
| Dimension | Reasoning | Score |
|---|---|---|
Specificity | Names the domain (UI design system) and mentions some specific elements (light mode, Inter font, 4px grid), but doesn't list concrete actions like 'create layouts', 'style components', or 'generate CSS'. It describes attributes rather than actions. | 2 / 3 |
Completeness | Clearly answers both what ('Arc's UI design system') and when ('Use when building interfaces inspired by Arc's aesthetic - light mode, Inter font, 4px grid') with an explicit 'Use when' clause and specific trigger conditions. | 3 / 3 |
Trigger Term Quality | Includes some relevant terms like 'Arc', 'UI design system', 'light mode', 'Inter font', '4px grid', but misses common user variations like 'Arc browser style', 'Arc-like design', 'minimal UI', 'clean interface', or 'Arc theme'. | 2 / 3 |
Distinctiveness Conflict Risk | Very distinct niche - specifically targets Arc's aesthetic with concrete identifiers (Inter font, 4px grid, light mode). Unlikely to conflict with generic UI or other design system skills due to the specific brand reference. | 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 reasonably well-structured design system reference with clear constraint language (MUST/SHOULD/NEVER) and specific token values. Its main weaknesses are the lack of executable code examples (CSS/Tailwind/component snippets) and some raw-data-dump sections that feel unprocessed. The color token choices also seem questionable (e.g., `surface-raised` being dark blue, `warning` being near-white, `text-primary` being light purple on a light gray background), which may indicate auto-generated values that weren't curated.
Suggestions
Add concrete code examples — at minimum a CSS custom properties block defining the tokens, and ideally a sample component (e.g., a button in HTML/CSS or React/Tailwind) showing the design system in action.
Curate the raw data sections: the typography reference lists duplicate style names and the layout section includes 'detected' patterns that read like audit output. Consolidate into a clean, intentional scale.
Consider splitting the detailed token tables (full typography reference, border radius scale) into a separate REFERENCE.md file, keeping SKILL.md as a concise overview with the most critical constraints.
| Dimension | Reasoning | Score |
|---|---|---|
Conciseness | The content is mostly efficient with well-structured tables and clear MUST/SHOULD/NEVER directives, but includes some redundancy (e.g., listing font sizes twice, duplicate 'text-13px' and 'text-12px' entries, detected layout patterns that feel like raw audit output rather than curated guidance). The 'Detected Layout Patterns' and element width lists feel like unprocessed data dumps rather than actionable constraints. | 2 / 3 |
Actionability | The skill provides specific values (hex codes, pixel sizes, font weights) and clear directives (MUST/SHOULD/NEVER), which is good. However, it lacks any executable code examples — no CSS snippets, no Tailwind classes, no component code. For a UI design system skill, concrete implementation examples (e.g., a button component, a heading style) would significantly improve actionability. | 2 / 3 |
Workflow Clarity | This is primarily a reference/constraint skill rather than a multi-step workflow. The single-purpose nature (apply these design tokens and rules when building Arc-style UIs) is unambiguous. The MUST/SHOULD/NEVER hierarchy provides clear priority ordering, and the 'When to Apply' section clearly scopes usage. | 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 table and border radius scale could be split into a separate reference file. There are no cross-references to external files for deeper detail, though the content is structured enough to navigate. | 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.