web-design-guidelines

Fetch Web Interface Guidelines and report deviations in HTML/JSX/TSX files.

Updated Aug 23, 2026
One-click install
npx skills add https://github.com/SatohaCC/nextjs-mdx-blog --skill web-design-guidelines-satohacc
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/SatohaCC/nextjs-mdx-blog/tree/main/.agents/skills/web-design-guidelines
Command: npx skills add https://github.com/SatohaCC/nextjs-mdx-blog --skill web-design-guidelines-satohacc

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps teams ensure UI code adheres to the latest Web Interface Guidelines, reducing accessibility and usability gaps during development.

Core Features & Use Cases

  • Guideline compliance: fetch the latest rules and compare project files for conformance.
  • Automated checks: apply checks to frontend assets (HTML/JSX/TSX) to surface deviations.
  • Use Case: when auditing a UI codebase for accessibility and design consistency, run this Skill against a set of UI components to surface non-conforming patterns.

Quick Start

Provide the UI source files or a file pattern 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 audit my frontend codebase for accessibility and UI design consistency?

You can audit frontend UI code for accessibility and visual consistency by providing HTML, JSX, or TSX source files. The tool fetches up-to-date Web Interface Guidelines, compares project files for conformance, and outputs concise deviation findings in a machine-readable format.

What is a Web Interface Guidelines compliance check and how does it work?

A Web Interface Guidelines compliance check identifies and reports deviations from web standards in your UI code. It works by fetching the latest remote rules, applying them to your frontend assets, and surfacing non-conforming interaction patterns and visual inconsistencies.

Can I use this tool to review TSX and JSX components?

Yes, you can use this tool to review TSX and JSX components. It explicitly applies automated checks to frontend assets including HTML, JSX, and TSX files to surface accessibility gaps and ensure UI code adheres to web standards.

What's the best way to check HTML assets for web standards and a11y deviations?

The best way to check HTML assets for a11y deviations is running an automated UI review against your components. This fetches current web standards, parses rules, and applies them directly to your provided files to surface non-conforming patterns.

Do I need to manually configure design guidelines to run a UI code review?

No, you do not need to manually configure design guidelines to run a UI code review. The tool fulfills requirements to automatically fetch up-to-date guidelines from a remote source before applying the rules to your provided files.