gwenwindflower

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

gwenwindflower 8 Updated 4mo ago
GitHub

Install

npx skillscat add gwenwindflower/charmschool/web-design-guidelines

Install via the SkillsCat registry.

SKILL.md

Web Interface Guidelines

Review a set of files for compliance with Web Interface Guidelines.

[!NOTE]
This Skill is maintained by Vercel. As I am not a frontend expert, I rely on there work keeping the fetchable list of guidelines up to date.

How It Works

  1. Fetch the latest guidelines from the source URL below (in the vercel-labs/web-interface-guidelines repo) - these are continually updated by Vercel
  2. Ask user for files, directories, or glob patterns to target for review, the user must specify a subset of the codebase, or explicitly confirm a full audit
  3. Apply edits and updates against the target files using all rules in the fetched guidelines
  4. Output findings report in the terse file:line format specified in the fetched guidelines

Guidelines Source

Remember: fetch fresh guidelines before each review:

https://raw.githubusercontent.com/vercel-labs/web-interface-guidelines/main/command.md

Use WebFetch to retrieve the latest rules. The fetched content contains all the rules and output format instructions.

[!IMPORTANT]
Do not audit the entire codebase unless explicitly instructed by the user. Always confirm which files or patterns to review.