ui-designer
Expert UI designer specializing in visual design systems, component libraries, and pixel-perfect interface creation. Creates beautiful, consistent, accessible user interfaces that enhance UX and reflect brand identity
38
23%
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 ./design-ui-designer/skills/SKILL.mdQuality
Discovery
32%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 reads more like a resume headline than a skill selection guide. It uses first/second-person-adjacent framing ('Expert UI designer') and relies on aspirational adjectives ('beautiful, consistent, accessible') rather than concrete actions. The complete absence of a 'Use when...' clause makes it difficult for Claude to know when to select this skill over others.
Suggestions
Add an explicit 'Use when...' clause with trigger terms like 'design system,' 'component library,' 'UI mockup,' 'color palette,' 'typography scale,' 'style guide,' or 'interface design.'
Replace vague qualifiers ('beautiful, consistent, accessible') with concrete actions such as 'Creates design tokens, builds reusable component specs, defines color palettes and typography scales, produces layout compositions.'
Rewrite in third person action voice (e.g., 'Designs and documents UI component libraries...') instead of the persona-style 'Expert UI designer specializing in...' framing.
| Dimension | Reasoning | Score |
|---|---|---|
Specificity | Names the domain (UI design) and some actions like 'visual design systems, component libraries, and pixel-perfect interface creation,' but these are more like category labels than concrete specific actions. It lacks specifics like 'create color palettes, define spacing tokens, build button components.' | 2 / 3 |
Completeness | Describes what it does at a high level but completely lacks any 'Use when...' clause or explicit trigger guidance. Per the rubric, a missing 'Use when...' clause caps completeness at 2, and the 'what' portion is also somewhat vague, so this scores a 1. | 1 / 3 |
Trigger Term Quality | Includes some relevant terms like 'UI designer,' 'design systems,' 'component libraries,' and 'accessible,' but misses many natural user terms like 'mockup,' 'wireframe,' 'layout,' 'theme,' 'CSS,' 'Figma,' 'style guide,' or file format references. | 2 / 3 |
Distinctiveness Conflict Risk | Somewhat specific to UI design and design systems, but terms like 'accessible user interfaces,' 'UX,' and 'brand identity' are broad enough to overlap with general frontend development skills, accessibility skills, or branding skills. | 2 / 3 |
Total | 7 / 12 Passed |
Implementation
14%Reviews the quality of instructions and guidance provided to agents. Good implementation is clear, handles edge cases, and produces reliable results.
This skill reads more like a persona/role-play prompt than an actionable skill file. It is extremely verbose, spending most of its token budget on identity framing, communication style, success metrics, and learning/memory sections that provide no novel guidance to Claude. The concrete CSS examples are useful but generic, and the workflow lacks any meaningful validation or decision-making steps.
Suggestions
Remove all persona/identity/memory/communication style sections — these waste tokens on things Claude doesn't need to be told and aren't actionable instructions.
Replace the vague 4-step workflow with specific, executable steps including validation checkpoints (e.g., 'Run axe-core accessibility audit on generated components' or 'Verify color contrast ratios using specific tool/formula').
Extract the CSS design token system and deliverable template into separate referenced files (e.g., TOKENS.md, TEMPLATE.md) to keep the main skill lean and navigable.
Add concrete input/output examples showing how to respond to a specific UI design request, rather than describing abstract goals and metrics.
| Dimension | Reasoning | Score |
|---|---|---|
Conciseness | Extremely verbose and padded with content Claude already knows. The personality framing ('Your Identity & Memory', 'Communication Style', 'Learning & Memory', 'Success Metrics') adds no actionable value. The CSS token system, while concrete, is a generic Tailwind-like setup that Claude can generate on demand. Much of the content describes what a UI designer does rather than providing novel, specific instructions. | 1 / 3 |
Actionability | The CSS design token system and component styles are concrete and executable, which is good. However, the workflow steps are vague ('Review brand guidelines', 'Analyze user interface patterns'), and the deliverable template is a fill-in-the-blank placeholder rather than actionable guidance. Much of the content describes goals rather than providing specific instructions on how to achieve them. | 2 / 3 |
Workflow Clarity | The 4-step workflow is extremely vague with no validation checkpoints. Steps like 'Review brand guidelines and requirements' and 'Research accessibility requirements' are bash comments with no actual commands. There are no feedback loops, no verification steps, and no clear decision points for when to proceed or iterate. | 1 / 3 |
Progressive Disclosure | This is a monolithic wall of text at ~300+ lines with no references to external files. The massive inline CSS code blocks, the full deliverable template, and all the personality/metrics sections could be split into separate reference files. The final line references 'core training' which is a non-existent resource, providing no actual navigation. | 1 / 3 |
Total | 5 / 12 Passed |
Validation
90%Checks the skill against the spec for correct structure and formatting. All validation checks must pass before discovery and implementation can be scored.
Validation — 10 / 11 Passed
Validation for skill structure
| Criteria | Description | Result |
|---|---|---|
frontmatter_unknown_keys | Unknown frontmatter key(s) found; consider removing or moving to metadata | Warning |
Total | 10 / 11 Passed | |
- Repository
- OpenRoster-ai/awesome-openroster
- Commit
09aef5d
- 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.