mcpField
W
web-design-guidelines

web-design-guidelines

github.com/tech-leads-clubDesign & UI7.1k254 installsUpdated today
Repository

About web-design-guidelines

A skill for reviewing web interface files against a set of design and implementation guidelines. It checks accessibility, interaction, content, performance, and related concerns, then reports concise file-and-line findings.

Key features

  1. 01Accessibility and semantic HTML checks
  2. 02Keyboard and focus review
  3. 03Forms, animation, and typography checks
  4. 04Navigation, localization, and theme review
  5. 05Concise file:line findings

Use cases

  1. 01Review files before a web interface release
  2. 02Find accessibility and keyboard issues
  3. 03Check pages for layout and content edge cases

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/tech-leads-club/agent-skills --skill web-design-guidelines

After installing, type/web-design-guidelinesin Claude Code to confirm it loaded.

Bundled filesreferences/guideline.md

Details

From the project README

Web Interface Guidelines

Review files for compliance with Web Interface Guidelines.

How It Works

  1. Read the guidelines from #[[file:references/guideline.md]]
  2. Read the specified files (or prompt user for files/pattern)
  3. Check against all rules in the guidelines
  4. Output findings in the terse file:line format

Guidelines Reference

All rules and output format instructions are in:

#[[file:references/guideline.md]]

The guidelines cover:

  • Accessibility (ARIA, semantic HTML, keyboard navigation)
  • Focus states and keyboard interaction
  • Forms (autocomplete, validation, labels)
  • Animation (reduced motion, performance)
  • Typography (proper characters, number formatting)
  • Content handling (overflow, empty states)
  • Images (dimensions, lazy loading)
  • Performance (virtualization, DOM reads)
  • Navigation & state (URL sync, deep linking)
  • Touch & interaction (tap delays, safe areas)
  • Dark mode & theming
  • Locale & i18n
  • Hydration safety
  • Common anti-patterns to flag

Usage

When a user provides a file or pattern argument:

  1. Read the guidelines from references/guideline.md
  2. Read the specified files
  3. Apply all rules from the guidelines
  4. Output findings using the format specified in the guidelines

If no files specified, ask the user which files to review.

Output Format

Follow the format in the guidelines:

  • Group findings by file
  • Use file:line format (VS Code clickable)
  • Terse, high signal-to-noise
  • State issue + location
  • Skip explanation unless fix is non-obvious

Comments

Markdown supported