@zackkorman/web-design-guidelines-4

@zackkorman/web-design-guidelines-4 — AI coding skill

View in AI SkillSafe app
0 downloads
0 stars
0 demos
SKILL.md
nameweb-design-guidelines-4
descriptionReview 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".

Web Interface Guidelines

  • Icon-only buttons need aria-label
  • Form controls need <label> or aria-label
  • Interactive elements need keyboard handlers (onKeyDown/onKeyUp)
  • <button> for actions, <a>/<Link> for navigation (not <div onClick>)
  • Images need alt (or alt="" if decorative)
  • Decorative icons need aria-hidden="true"
  • Async updates (toasts, validation) need aria-live="polite"
  • Use semantic HTML (<button>, <a>, <label>, <table>) before ARIA
  • Headings hierarchical <h1><h6>; include skip link for main content
  • scroll-margin-top on heading anchors

Embed badges

Add these to your README to show the skill's verification status.

SkillSafe verified badge
Verified badge
[![SkillSafe verified badge](https://api.skillsafe.ai/v1/badge/@zackkorman/web-design-guidelines-4/verified)](https://skillsafe.ai/skill/@zackkorman/web-design-guidelines-4/)
Installs badge
Installs badge
[![Installs badge](https://api.skillsafe.ai/v1/badge/@zackkorman/web-design-guidelines-4/installs)](https://skillsafe.ai/skill/@zackkorman/web-design-guidelines-4/)
Scan badge
Scan badge
[![Scan badge](https://api.skillsafe.ai/v1/badge/@zackkorman/web-design-guidelines-4/scan)](https://skillsafe.ai/skill/@zackkorman/web-design-guidelines-4/)
Eval pass rate badge
Eval pass rate
[![Eval pass rate badge](https://api.skillsafe.ai/v1/badge/@zackkorman/web-design-guidelines-4/eval)](https://skillsafe.ai/skill/@zackkorman/web-design-guidelines-4/)