web-design-guidelines

Compare HTML, CSS, and JavaScript code against Web Interface Guidelines to identify UI compliance gaps.

Updated Feb 12, 2026
One-click install
npx skills add https://github.com/Trio-Blockchain-Labs/whitepaperiq-pro-landing-page --skill web-design-guidelines-trio-blockchain-labs
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/Trio-Blockchain-Labs/whitepaperiq-pro-landing-page/tree/main/.agents/skills/web-design-guidelines
Command: npx skills add https://github.com/Trio-Blockchain-Labs/whitepaperiq-pro-landing-page --skill web-design-guidelines-trio-blockchain-labs

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps teams ensure their UI code adheres to Web Interface Guidelines, reducing accessibility gaps and design inconsistencies across products.

Core Features & Use Cases

  • Automated UI compliance checks: Compare code against the latest guidelines to flag accessibility, contrast, semantics, and responsive design issues.
  • Guideline-aware reviews: Analyze HTML/CSS/JS to identify violations and suggest fixes with references.
  • Use Case: When asked to review a landing page, run checks against the guidelines and produce a report with actionable remediation steps.

Quick Start

Run a guideline-compliance review on the specified UI files and return a prioritized remediation list.

Frequently Asked Questions about web-design-guidelines

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

FAQPage Schema
How do I check my HTML and CSS for web accessibility compliance?

Run a UI compliance review by fetching the latest Web Interface Guidelines and comparing your HTML, CSS, and JavaScript code against them. It outputs accessibility, contrast, and semantics violations in a file:line format with actionable remediation steps.

What is a UI compliance review for web design guidelines?

A UI compliance review compares HTML, CSS, and JavaScript code against Web Interface Guidelines to identify accessibility, contrast, semantics, and responsive design violations. It outputs findings in a file:line format to help teams reduce design inconsistencies.

Can I audit JavaScript components for responsive design and contrast issues?

Yes, you can audit JavaScript components for responsive design and contrast issues. The review analyzes HTML, CSS, and JavaScript across components and pages, comparing code against guidelines to identify and report violations in a file:line format.

Does this accessibility review require any external dependencies?

No dependencies are required. The review operates without external dependencies but uses WebFetch to retrieve the latest Web Interface Guidelines from the source during execution, ensuring checks run against current accessibility and design standards.

What is the best way to get a prioritized remediation list for UI accessibility gaps?

Run a guideline-compliance review on your specified UI files to get a prioritized remediation list. It compares HTML, CSS, and JavaScript against fetched Web Interface Guidelines and returns actionable fixes in a file:line format.

Why does my web design review output findings in a file:line format?

The review outputs findings in a file:line format to provide precise, actionable locations for accessibility, contrast, and semantics violations. This prescribed format maps each compliance gap directly to your HTML, CSS, or JavaScript code for immediate remediation.