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

73%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide

Securityby

Low

Low-risk findings worth noting

Fix and improve this skill with Tessl

tessl review fix ./.claude/skills/web-design-guidelines/SKILL.md

The canonical home for this skill is pleaseai/web-design

Evaluation results

68%

12%

UI Code Review: Notification Card Component

Animation, typography, and content copy review

Criteria

Baseline

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

Baseline

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%

64%

13%

UI Code Review: User Profile Form

Accessibility and form compliance review

Criteria

Baseline

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%

Repository: revokslab/ShipFree
Path: .claude/skills/web-design-guidelines/SKILL.md
Commit: 67b7e3a

Evaluated: 5 months 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.