skills.rest
usenotra
usenotraOFFICIAL
Explore all skills by this author →
Website𝕏@usenotraGitHub

web-design-guidelines

Analyze UI code for Web Interface Guidelines compliance across HTML, CSS, and JS files.

148|39|Updated Dec 13, 2025
Search Tags:#accessibility#frontend#UI#compliance#review#guidelines
One-click install
npx skills add https://github.com/usenotra/notra --skill web-design-guidelines-usenotra
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/usenotra/notra/tree/main/.agents/skills/web-design-guidelines
Command: npx skills add https://github.com/usenotra/notra --skill web-design-guidelines-usenotra

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps teams ensure UI code adheres to Web Interface Guidelines, reducing accessibility issues and visual inconsistencies during development.

Core Features & Use Cases

  • Fetch latest guidelines from the official source and apply them to your UI files.
  • Evaluate accessibility, semantics, contrast, keyboard navigation, and responsive behaviors across HTML, CSS, and JavaScript assets.
  • Use Case: Audit a web page or component library to surface violations and generate actionable fixes.

Quick Start

Use the web-design-guidelines skill by supplying the target file or pattern (e.g., index.html or src/**/*) and allow it to fetch the latest rules from the Guidelines Source.

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 code for UI compliance and accessibility issues?▼

To check UI compliance, the Skill analyzes your HTML, CSS, and JavaScript files against Web Interface Guidelines, surfacing accessibility, semantics, and responsive design violations in a file:line format.

What is the best way to audit a frontend component library for visual consistency?▼

The best way to audit visual consistency is to evaluate multiple file sets using this Skill, which fetches the latest rules from the Guidelines Source and applies them to your components to generate actionable fixes.

Can I review keyboard navigation and contrast across multiple frontend files at once?▼

Yes, you can review keyboard navigation and contrast across multiple files by supplying a target pattern like src/**/*, allowing the Skill to evaluate all matching assets for accessibility and visual compliance.

Does the accessibility review process require any external dependencies?▼

No dependencies are required for the accessibility review process; the Skill internally fetches the latest compliance rules directly from the Guidelines Source using WebFetch during execution.

How are accessibility and UI guideline violations reported in the codebase?▼

Violations are reported in a file:line format, pinpointing exact locations in your HTML, CSS, or JavaScript where accessibility, semantics, or responsive behaviors fail to meet the fetched Web Interface Guidelines.

Related Skills

Explore More Design & Creative Skills→
d0whc3rd0whc3r

web-design-guidelines

Compare UI code files against Web Interface Guidelines and report compliance issues in file:line format.

Community
Intermediate
yutanpo1227yutanpo1227

web-design-guidelines

Audit UI code against Web Interface Guidelines for accessibility and design compliance.

Community
Intermediate
johnlindquistjohnlindquist
24

chrome

Automate browser interactions for web testing and data extraction with Puppeteer or Playwright.

Community
Advanced
alexanderopalexanderop
8

web-design-guidelines

Audit local UI files against Web Interface Guidelines and report violations.

Community
Basic