web-design-guidelines

Review UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "audit design", "review UX", or "check my site against best practices".

Quality

77%

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Securityby

Advisory

Suggest reviewing before use

Optimize this skill with Tessl

npx tessl skill review --optimize ./skills/web-design-guidelines/SKILL.md

Evaluation results

64%

13%

UI Code Review: User Profile Form

Accessibility and form compliance review

Criteria

Without context

With context

Guidelines fetched

100%

file:line output format

12%

50%

No preamble

40%

Icon button aria-label

100%

Paste block flagged

100%

outline:none without replacement

100%

transition:all flagged

100%

Missing autocomplete

100%

div onClick flagged

100%

spellCheck on email

Placeholder format

aria-live missing

100%

Terse findings

20%

68%

12%

UI Code Review: Notification Card Component

Animation, typography, and content copy review

Criteria

Without context

With context

file:line format used

100%

prefers-reduced-motion missing

100%

Non-transform animation flagged

100%

transition:all flagged

100%

Ellipsis character

100%

Loading text format

100%

Straight quotes flagged

100%

Vague button label

62%

100%

Passive voice in copy

100%

Error message no fix

100%

min-w-0 missing on flex child

text-wrap on heading

92%

52%

UI Code Review: Orders Data Table Page

Performance, navigation state, i18n, and dark mode review

Criteria

Without context

With context

file:line format used

28%

100%

Large list virtualization

100%

DOM layout read in render

100%

URL state missing

100%

Destructive action no confirmation

100%

Hardcoded date format

100%

Hardcoded number format

100%

color-scheme dark missing

100%

Image missing dimensions

100%

Below-fold lazy loading

Terse output

100%

No preamble

100%

Repository: jarrodwatts/claude-code-config
Commit: bb7e8b0

Evaluated: 29 days ago
Agent: Claude Code
Model: Claude Sonnet 4.6

Table of Contents

UI Code Review: User Profile Form UI Code Review: Notification Card Component UI Code Review: Orders Data Table Page

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.