web-design-guidelines

Identify UI code violating Web Interface Guidelines in HTML, CSS, and JavaScript.

Updated Apr 10, 2026
One-click install
npx skills add https://github.com/browleytwilio/segmentdemobuilder --skill web-design-guidelines-browleytwilio
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/browleytwilio/segmentdemobuilder/tree/main/.agents/skills/web-design-guidelines
Command: npx skills add https://github.com/browleytwilio/segmentdemobuilder --skill web-design-guidelines-browleytwilio

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Review UI code for compliance with the latest Web Interface Guidelines, helping teams ensure accessibility, usability, and visual consistency.

Core Features & Use Cases

  • Fetches fresh guidelines from the official source and applies them to your codebase.
  • Analyzes HTML, CSS, and JavaScript for accessibility, contrast, semantic structure, and responsive design.
  • Use Case: Run an accessibility audit on a landing page to identify contrast issues and semantic problems.

Quick Start

Provide the UI codebase or file pattern and run a compliance pass against the latest 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 audit my web UI code for accessibility and design conformance?

To audit web UI code for accessibility and design conformance, provide your HTML, CSS, and JavaScript file patterns to the tool. It fetches the latest Web Interface Guidelines and outputs concise, machine-readable findings highlighting violations in semantic structure, contrast, and responsive design.

Can I run an accessibility audit on a single landing page component?

Yes, you can run an accessibility audit on a single landing page component by specifying the relevant UI codebase or file pattern. The tool analyzes the provided HTML, CSS, and JavaScript to identify contrast issues and semantic problems based on the latest guidelines.

What does a web interface design review cover for HTML and CSS?

A web interface design review covers HTML and CSS compliance with accessibility standards, visual contrast, semantic structure, and responsive design. It fetches official guidelines, reads your specified files, and highlights violations across pages, components, and design systems.

Does this UI review tool work with existing JavaScript design systems?

Yes, this UI review tool works with existing JavaScript design systems, as well as HTML and CSS files. It applies the latest Web Interface Guidelines to your codebase to ensure accessibility, usability, and visual consistency across your components.

What is the best way to check web accessibility compliance across a full codebase?

The best way to check web accessibility compliance across a full codebase is to run a compliance pass against the latest Web Interface Guidelines. Provide your project's file patterns, and the tool outputs concise, machine-readable findings detailing accessibility and usability issues.

Are there limitations to checking responsive design conformance with this tool?

The tool checks responsive design conformance by analyzing HTML, CSS, and JavaScript against fetched Web Interface Guidelines. However, it outputs findings in a machine-readable format, meaning users must interpret and implement the highlighted semantic and contrast fixes manually.