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

Install with Tessl CLI

npx tessl i github:tibelf/ai_project_init --skill web-design-guidelines

What are skills?

Review — 81%

Does it follow best practices?

If you maintain this skill, you can automatically optimize it using the tessl CLI to improve its score:

npx tessl skill review --optimize ./path/to/skill

Learn more

Validation — 10 / 11 Passed

Validation for skill structure

SKILL.md

Review

Evals

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%

Without context: $0.2927 · 1m 57s · 8 turns · 11 in / 6,094 out tokens

With context: $0.5419 · 2m 19s · 24 turns · 31 in / 7,923 out tokens

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

Without context: $0.2783 · 1m 36s · 10 turns · 15 in / 5,259 out tokens

With context: $0.6248 · 2m 52s · 31 turns · 149 in / 8,407 out tokens

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%

Without context: $0.2702 · 1m 37s · 8 turns · 13 in / 5,675 out tokens

With context: $0.5363 · 2m 28s · 26 turns · 390 in / 6,871 out tokens

Evaluated: about 17 hours ago
Agent: Claude Code

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.