ui-ux-design
Skill do Designer UI/UX para definição de interfaces e experiência do usuário. Use quando precisar criar wireframes, design system tokens, componentes de UI, fluxos de navegação, acessibilidade, ou qualquer decisão de interface. Trigger em: "design", "UI", "UX", "interface", "wireframe", "componente visual", "layout", "responsivo", "mobile first", "acessibilidade", "design system", "protótipo", "Figma".
74
67%
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/02-ui-ux-design/SKILL.mdQuality
Discovery
100%Based on the skill's description, can an agent find and select it at the right time? Clear, specific descriptions lead to better discovery.
This is a strong skill description that clearly defines its domain (UI/UX design), lists specific capabilities, provides explicit 'Use when' guidance, and enumerates a comprehensive set of trigger terms. The description is well-structured and would allow Claude to confidently select this skill when UI/UX-related tasks arise. Minor note: it uses third person voice appropriately ('Skill do Designer UI/UX para definição...').
| Dimension | Reasoning | Score |
|---|---|---|
Specificity | Lists multiple specific concrete actions: criar wireframes, design system tokens, componentes de UI, fluxos de navegação, acessibilidade, decisão de interface. These are concrete, actionable capabilities. | 3 / 3 |
Completeness | Clearly answers both 'what' (definição de interfaces e experiência do usuário, wireframes, design system tokens, componentes de UI, fluxos de navegação, acessibilidade) and 'when' with an explicit 'Use quando' clause and a dedicated 'Trigger em' list. | 3 / 3 |
Trigger Term Quality | Excellent coverage of natural trigger terms users would say: 'design', 'UI', 'UX', 'interface', 'wireframe', 'componente visual', 'layout', 'responsivo', 'mobile first', 'acessibilidade', 'design system', 'protótipo', 'Figma'. These are terms users would naturally use when needing UI/UX help. | 3 / 3 |
Distinctiveness Conflict Risk | Clearly carves out a distinct niche around UI/UX design with specific triggers like 'wireframe', 'Figma', 'design system', 'mobile first' that are unlikely to conflict with other skills such as general coding or document processing. | 3 / 3 |
Total | 12 / 12 Passed |
Implementation
35%Reviews the quality of instructions and guidance provided to agents. Good implementation is clear, handles edge cases, and produces reliable results.
The skill provides a comprehensive UI/UX design reference but suffers from significant verbosity — the inline design tokens (~80 lines of hardcoded values), skeleton patterns, and Nielsen heuristics explanations bloat the file with content that either Claude already knows or should live in referenced guide files. The actionability is moderate: while templates and tokens are concrete, the core design workflow lacks explicit sequencing and validation steps. The skill would benefit greatly from moving reference material to the already-referenced external files and focusing the main file on a lean workflow with clear decision points.
Suggestions
Move the design tokens code block, skeleton patterns, and Nielsen heuristics checklist to the already-referenced docs/skill-guides/ui-ux-design.md, keeping only a brief summary and link in the main file.
Add an explicit numbered workflow (e.g., 1. Analyze spec → 2. Define IA → 3. Create wireframe → 4. Validate against heuristics → 5. Specify components → 6. Handoff) with validation checkpoints between steps.
Remove explanations of concepts Claude already knows (what skeletons are, what Nielsen heuristics mean, basic responsive design rules) and replace with only project-specific constraints or non-obvious decisions.
Add a concrete example of a complete mini-workflow: given a sample user story input, show the expected wireframe output format and component spec to make the skill truly actionable.
| Dimension | Reasoning | Score |
|---|---|---|
Conciseness | The skill is extremely verbose with large inline code blocks (design tokens ~80 lines) that should be in a separate reference file. It explains concepts Claude already knows (Nielsen heuristics, what skeletons are, basic responsive design patterns) and includes hardcoded color values and spacing that are project-specific defaults rather than skill instructions. | 1 / 3 |
Actionability | The design tokens code block is executable and copy-paste ready, and the component specification template is concrete. However, much of the skill is descriptive checklists and guidelines rather than executable steps — it tells Claude what to deliver but not precisely how to produce wireframes or make design decisions in a text-based environment. | 2 / 3 |
Workflow Clarity | The skill lists inputs, outputs, responsibilities, and handoff checklists, providing a general sequence. However, there's no explicit step-by-step workflow with validation checkpoints — the 'Evidencia de Conclusao' section is minimal and there's no feedback loop for validating design decisions before handoff. | 2 / 3 |
Progressive Disclosure | The skill references external files (docs/skill-guides/ui-ux-design.md, docs/skill-guides/ui-component-mcps.md, GLOBAL.md, policies/*) which is good progressive disclosure. However, the massive design tokens block and detailed skeleton/breakpoint specifications should be in those external files rather than inline, making the main file a wall of content that undermines the disclosure strategy. | 2 / 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
- felvieira/claude-skills-fv
- Commit
e9f6648
- 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.