skills.rest
mst-software-vn
mst-software-vnOFFICIAL
Explore all skills by this author →
WebsiteGitHub

web-design-guidelines

Review UI code files against fetched Web Interface Guidelines and report findings.

1|Updated Mar 2, 2026
Search Tags:#code review#accessibility#frontend#ui review#design audit#ux#web guidelines
One-click install
npx skills add https://github.com/mst-software-vn/mst-checkscam --skill web-design-guidelines-mst-software-vn
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/mst-software-vn/mst-checkscam/tree/main/.claude/skills/web-design-guidelines
Command: npx skills add https://github.com/mst-software-vn/mst-checkscam --skill web-design-guidelines-mst-software-vn

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? After writing UI code, developers often lack a systematic way to check it against accessibility, performance, and design best practices, leading to inconsistent quality and missed issues. ## Core Features & Use Cases - Guideline-Based Auditing: Fetches the latest Web Interface Guidelines from the vercel-labs repository and applies every rule to your code. - Structured Findings Output: Reports violations in a terse file:line format so issues are easy to locate and fix. - Use Case: After building a landing page, ask for a review of your HTML/CSS/JSX files to catch accessibility violations, UX anti-patterns, and best-practice deviations before shipping. ## Quick Start Review my UI files in the components directory against the web interface guidelines.

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 issues?▼

Provide the files or file pattern you want reviewed, and the skill fetches the latest Web Interface Guidelines and checks your code against every rule. Findings are reported in a file:line format so you can jump directly to each issue.

What is the web interface guidelines audit workflow?▼

The workflow is: fetch the latest guidelines from the vercel-labs repository, read the specified files, apply all rules, and output findings. It is designed as the audit step after designing and coding your UI.

Does the UI review work without specifying files?▼

No. If you do not provide a file or pattern argument, the skill asks which files to review. You can pass a single file path or a glob-style pattern to scope the audit.

When should I run a design audit versus learning design principles?▼

Run this audit after coding to catch accessibility, performance, and best-practice violations. For learning design principles like color, typography, and UX psychology before coding, use the related frontend-design skill instead.

Why does the guideline review fetch rules from a URL?▼

The skill fetches guidelines from the vercel-labs web-interface-guidelines repository before each review so audits always use the latest rules rather than a stale bundled copy. This requires network access at review time.

Related Skills

Explore More Design & Creative Skills→
arkcle83arkcle83

design-guide

Standardizes UI design across HTML, CSS, React, and other modern frameworks.

Community
Intermediate
thgtertothgterto

web-design-guidelines

Analyzes UI code for compliance with Web Interface Guidelines and reports violations.

Community
Intermediate
ntdev204ntdev204

frontend-design

Teach frontend design principles for UI components, color, typography, and layout.

Community
Intermediate
gaiastudio-aigaiastudio-ai
2

gaia-test-a11y

Run automated accessibility tests on deployed web applications with axe-core, pa11y, and Lighthouse.

Official
Advanced