CtrlK
BlogDocsLog inGet started
Tessl Logo

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 básica", "design system", "protótipo", "Figma".

66

Quality

78%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide

SecuritybySnyk

Passed

No findings from the security scan

Fix and improve this skill with Tessl

tessl review fix ./skills/02-ui-ux-design/SKILL.md
SKILL.md
Quality
Evals
Security

Quality

Content

65%Weight 40%Scale 1-3

Reviews the quality of instructions and guidance provided to agents. Good implementation is clear, handles edge cases, and produces reliable results.

The body delivers highly actionable, opinionated design guidance with executable token code and concrete checklists, but is undermined by length: generic reference material Claude already knows (Nielsen list, default breakpoints, default-palette tokens) and a topical rather than sequenced organization with limited in-bundle progressive disclosure.

Suggestions

Move the full Nielsen heuristics list, the default breakpoint table, and the large default-palette token block into a referenced doc (the skill already flags docs/skill-guides/ui-ux-design.md) and keep only the non-obvious opinionated content inline.

Add an explicit numbered workflow (1. pick anchor → 2. set dials → 3. emit tokens/wireframe → 4. validate via Nielsen checklist → 5. handoff) with validation checkpoints so the topical sections hang off a clear sequence.

Replace the default Tailwind blue/gray token palette with a placeholder or anchor-driven example, since the skill's own anti-patterns warn against exactly those defaults.

DimensionReasoningScore

Conciseness

The opinionated core (aesthetic anchors, intensity dials, anti-patterns, vertical table) is dense and earns its tokens, but the Nielsen heuristics checklist, basic mobile-first breakpoint table, generic component-spec template, and a large default Tailwind-blue token block restate concepts Claude already knows — matching the mostly-efficient-but-could-be-tightened anchor.

2 / 3

Actionability

Provides an executable, copy-paste-ready design-tokens TypeScript block, concrete 1–10 intensity dials, named anchors, a per-component spec template, and explicit handoff checklists — concrete and specific guidance rather than vague direction.

3 / 3

Workflow Clarity

A loose implicit flow exists (choose anchor → calibrate dials → tokens/wireframe → Nielsen validation → handoff) and the "Evidencia de Conclusao" checklist plus Nielsen heuristics act as validation, but the body is organized topically rather than as an explicitly numbered sequence with checkpoint gates, matching the steps-present-but-checkpoints-implicit anchor.

2 / 3

Progressive Disclosure

External detail is well-signaled one level deep ("consultar docs/skill-guides/ui-ux-design.md apenas quando necessario"), but those targets live outside this bundle (no references/scripts/assets present) and the body itself is a ~370-line monolith with the token block, anchor list, and anti-pattern table all inline that could be split out — matching the some-structure-but-could-be-better-organized anchor.

2 / 3

Total

9

/

12

Passed

Description

92%Weight 40%Scale 1-3

Based on the skill's description, can an agent find and select it at the right time? Clear, specific descriptions lead to better discovery.

A strong, well-structured Portuguese description that clearly states capabilities and provides an explicit, comprehensive trigger list. Its only weakness is moderate conflict risk from a few overly broad trigger terms that overlap with adjacent frontend/design skills.

Suggestions

Narrow the broadest triggers ("design", "UI", "layout") or qualify them (e.g. "design de interface", "UI layout") to reduce overlap with a general frontend-design skill.

Drop the catch-all "ou qualquer decisão de interface" — it dilutes specificity and invites over-triggering.

DimensionReasoningScore

Specificity

Lists multiple concrete actions — "criar wireframes, design system tokens, componentes de UI, fluxos de navegação, acessibilidade" — matching the multiple-specific-actions anchor; only mildly softened by the catch-all "ou qualquer decisão de interface".

3 / 3

Completeness

Explicitly answers both what ("definição de interfaces e experiência do usuário" + the action list) and when ("Use quando precisar criar ... Trigger em: ..."), satisfying the what-AND-when anchor.

3 / 3

Trigger Term Quality

The "Trigger em" list gives broad natural coverage users would actually say ("design", "UI", "UX", "wireframe", "layout", "protótipo", "Figma"), matching the good-coverage anchor.

3 / 3

Distinctiveness Conflict Risk

The niche is clear via "wireframe", "design system", "protótipo", "Figma", but broad terms like "design", "UI", "layout" overlap with a general frontend-design skill, so it could still trigger for a near-neighbor skill.

2 / 3

Total

11

/

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.

Validation16 / 16 Passed

Validation for skill structure

No warnings or errors.

Repository
felvieira/claude-skills-fv
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.