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".
59
67%
Does it follow best practices?
Impact
—
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 includes a comprehensive list of trigger terms. The description uses third person voice appropriately and is well-structured with both a capability summary and explicit trigger keywords. Minor note: it's written in Portuguese, but the structure and content quality are excellent.
| Dimension | Reasoning | Score |
|---|---|---|
Specificity | Lists multiple specific concrete actions: creating wireframes, design system tokens, UI components, navigation flows, accessibility decisions, and interface decisions. These are concrete, actionable capabilities. | 3 / 3 |
Completeness | Clearly answers both 'what' (defining interfaces and user experience, creating wireframes, design system tokens, UI components, navigation flows, accessibility) and 'when' (explicit 'Use quando precisar...' clause plus a dedicated 'Trigger em:' list with specific keywords). | 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 requesting UI/UX help. | 3 / 3 |
Distinctiveness Conflict Risk | Clearly carved out niche for UI/UX design work with highly specific triggers like 'wireframe', 'Figma', 'design system', 'mobile first'. Unlikely to conflict with general coding or document skills due to the domain-specific terminology. | 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.
This skill is comprehensive in scope but severely over-inflated for a SKILL.md file. It inlines extensive reference material (design tokens with hardcoded values, aesthetic anchor catalog, Nielsen heuristics, skeleton patterns) that Claude either already knows or should be in separate referenced files. The actionability is moderate — it provides templates and token structures but lacks a clear procedural workflow for the actual design process from input to validated output.
Suggestions
Move the full design tokens TypeScript block, aesthetic anchors catalog, Nielsen heuristics, and skeleton patterns into referenced files (e.g., `docs/design-tokens-template.ts`, `docs/aesthetic-anchors.md`) and keep only a 2-3 line summary with links in SKILL.md.
Remove the Nielsen heuristics checklist entirely — Claude already knows these. Replace with a one-liner: 'Validate against Nielsen's 10 heuristics before handoff.'
Add a clear numbered workflow: 1. Receive spec → 2. Choose aesthetic anchor → 3. Define tokens → 4. Create wireframes → 5. Validate (heuristics + accessibility) → 6. If issues, iterate → 7. Handoff. Include explicit validation gates.
The hardcoded primary color palette (blue) contradicts the anti-pattern warning about Tailwind defaults. Either make the token file a true template with placeholder values or remove it and reference a generator script.
| Dimension | Reasoning | Score |
|---|---|---|
Conciseness | The skill is extremely verbose at ~300+ lines. It includes a full design token file with hardcoded color values (Tailwind defaults ironically, despite warning against them), extensive aesthetic anchor descriptions Claude could infer, Nielsen heuristics Claude already knows, and skeleton loading patterns that are basic UI knowledge. The anti-pattern list and aesthetic anchors section alone consume massive token budget for information that could be a referenced file. | 1 / 3 |
Actionability | The design tokens TypeScript file is executable and the component specification template is concrete. However, much of the skill is descriptive rather than instructive — the aesthetic anchors describe styles but don't provide actionable steps for applying them, the Nielsen checklist is a reference list not a procedure, and the wireframe/prototyping process lacks concrete tooling or output format examples. | 2 / 3 |
Workflow Clarity | The skill has clear inputs/outputs and handoff sections, but lacks a sequenced workflow with validation checkpoints. There's no step-by-step process for going from spec to wireframe to validated design. The 'Evidencia de Conclusao' section is a checklist but isn't integrated into a workflow with explicit validation gates or feedback loops for iterating on designs. | 2 / 3 |
Progressive Disclosure | The skill references external files like `docs/skill-guides/ui-ux-design.md` and `docs/skill-guides/ui-component-mcps.md` for detailed content, which is good. However, the main file still contains massive inline content (full token definitions, all aesthetic anchors, complete Nielsen checklist, skeleton patterns) that should be in referenced files. The token file alone is ~60 lines that could be a template reference. | 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
7577622
- 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.