skills.rest
molaei2000
molaei2000COMMUNITY
Explore all skills by this author →
GitHub

web-design-guidelines

Analyze UI files against the latest Web Interface Guidelines for compliance.

1|Updated Oct 5, 2025
Search Tags:#ui#accessibility#compliance#review#quality-assurance#code-review#design-guidelines
One-click install
npx skills add https://github.com/molaei2000/triplem.dev --skill web-design-guidelines-molaei2000
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/molaei2000/triplem.dev/tree/main/.agents/skills/web-design-guidelines
Command: npx skills add https://github.com/molaei2000/triplem.dev --skill web-design-guidelines-molaei2000

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Review UI code for compliance with Web Interface Guidelines. Use when asked to "review my UI", "check accessibility", "audit design", "review UX", or "check my site against best practices".

Core Features & Use Cases

  • Fetch latest guidelines from the source URL below
  • Read the specified files (or prompt user for files/pattern)
  • Check against all rules in the fetched guidelines
  • Output findings in the terse file:line format

Guidelines Source 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.

Usage

When a user provides a file or pattern argument:

  1. Fetch guidelines from the source URL above
  2. Read the specified files
  3. Apply all rules from the fetched guidelines
  4. Output findings using the format specified in the guidelines

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

Frequently Asked Questions about web-design-guidelines

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I review my UI code for accessibility and design compliance?▼

To review UI code for accessibility and design compliance, the Skill fetches the latest Web Interface Guidelines, parses target files, and applies the rules to output structured findings in a terse file:line format.

What is a UI code audit against Web Interface Guidelines?▼

A UI code audit against Web Interface Guidelines is a review process that checks frontend code for accessibility, UX consistency, and design quality assurance by applying fetched rules to produce structured findings.

Can I check specific files for UX consistency and design QA?▼

Yes, you can check specific files for UX consistency and design QA by providing a file or pattern argument. If no files are specified, the Skill prompts you to select which target files to review.

Does this design review process require fetching fresh guidelines each time?▼

Yes, the design review process requires fetching fresh guidelines via WebFetch from the source URL before each review to ensure all accessibility and compliance checks apply the most current rules.

How are accessibility audit findings formatted in the output?▼

Accessibility audit findings are formatted as terse file:line entries. The Skill outputs structured findings using the exact format specified within the fetched Web Interface Guidelines content.

Related Skills

Explore More Design & Creative Skills→
sao-codingsao-coding

web-design-guidelines

Fetch current Web Interface Guidelines and evaluate UI code compliance.

Community
Intermediate
PlaneInABottlePlaneInABottle

web-design-guidelines

Audits UI code in HTML/CSS/JS projects for guideline non-compliance and outputs file:line findings.

Community
Advanced
duanbiao2000duanbiao2000
3

sast-configuration

Configure Semgrep, SonarQube, and CodeQL for automated vulnerability detection.

Community
Advanced
code-rabicode-rabi

web-design-guidelines

Evaluate web interface code for industry standards and accessibility compliance.

Official
Intermediate