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".

Quality

67%

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Securityby

Passed

No known issues

Optimize this skill with Tessl

npx tessl skill review --optimize ./skills/02-ui-ux-design/SKILL.md

Quality

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.

The skill provides a comprehensive UI/UX design reference but suffers from significant verbosity — the 80+ line design tokens block and detailed explanations of well-known concepts (Nielsen heuristics, skeleton patterns, responsive breakpoints) consume tokens without adding value Claude doesn't already possess. The structure references external files appropriately but then contradicts this by inlining content that belongs in those files. The workflow lacks explicit validation steps and feedback loops for the design review process.

Suggestions

Move the design tokens TypeScript block, skeleton patterns, and Nielsen heuristics checklist to the referenced docs/skill-guides/ui-ux-design.md file, keeping only a brief summary and pointer in SKILL.md.

Add an explicit step-by-step workflow with validation checkpoints, e.g.: 1. Receive spec → 2. Define IA/flows → 3. Validate with PO checklist → 4. Create wireframes → 5. Accessibility audit → 6. Handoff.

Remove explanations of concepts Claude already knows (what Nielsen heuristics are, what skeleton loading is, basic responsive design principles) and keep only project-specific rules and constraints.

Add a concrete example of a complete component specification output so Claude knows exactly what format to produce.

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, skeleton loading patterns, basic responsive design rules) and includes hardcoded token values that are project-specific defaults rather than actionable instructions.	1 / 3
Actionability	The design tokens TypeScript block is executable and copy-paste ready, and the component specification template is concrete. However, much of the content is checklist-style guidance rather than executable steps — the wireframing, prototyping, and actual design workflow lack concrete tool commands or specific output formats.	2 / 3
Workflow Clarity	The skill lists inputs, outputs, responsibilities, and handoff checklists, providing a general sequence. However, there are no explicit validation checkpoints or feedback loops — the 'Evidencia de Conclusao' section is minimal and there's no clear step-by-step process for going from spec to wireframe to validated output.	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/heuristics content should be in those referenced files rather than inline, undermining the split.	2 / 3
	Total	7 / 12 Passed

Validation

100%

Warnings & errors only

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: d87ad31

Reviewed: 15 days ago

Table of Contents

Discovery Implementation Validation

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.