skills.rest
avoidthekitchen
avoidthekitchenCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

web-design-guidelines

Audit HTML, CSS, and JavaScript/React files against Web Interface Guidelines.

1|Updated Apr 13, 2026
Search Tags:#accessibility#a11y#frontend#code-audit#ui-review#web-guidelines
One-click install
npx skills add https://github.com/avoidthekitchen/avilingo-v2 --skill web-design-guidelines-avoidthekitchen
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/avoidthekitchen/avilingo-v2/tree/main/.agents/skills/web-design-guidelines
Command: npx skills add https://github.com/avoidthekitchen/avilingo-v2 --skill web-design-guidelines-avoidthekitchen

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill automates reviewing UI code for compliance with Web Interface Guidelines, reducing manual effort when checking accessibility, layout consistency, and design rule adherence.

Core Features & Use Cases

  • Up-to-date rule fetching: Retrieves the canonical Web Interface Guidelines before each review to ensure checks reflect the latest guidance.
  • File-pattern audits: Reads specified files or patterns and evaluates each file against all guideline rules.
  • Terse, actionable output: Emits findings in a concise file:line format suitable for quick triage and integration into CI or code review workflows.
  • Use Case: Run against a React or static site codebase to surface accessibility violations, inconsistent component behavior, and guideline mismatches prior to release.

Quick Start

Review src/components/Header.jsx against the web interface guidelines and report any file:line findings.

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 code for accessibility and web guidelines?▼

To audit frontend code for accessibility, this Skill fetches canonical web interface guidelines, parses rules, and evaluates specified HTML, CSS, or JavaScript/React files against them. It outputs terse findings in a file:line format for quick triage.

What is automated UI code review for layout consistency?▼

Automated UI code review for layout consistency checks your codebase against web interface guidelines to detect design-system adherence mismatches. This Skill retrieves the latest rules and evaluates files to surface violations before release.

How do I check React components for accessibility violations?▼

To check React components for accessibility violations, apply this Skill to your codebase. It reads specified file patterns, evaluates each guideline rule against file contents, and reports actionable findings in file:line format.

Does this web guideline audit work with static site codebases?▼

Yes, this web guideline audit works with static site codebases and React projects. It reads your specified HTML, CSS, and JavaScript files, evaluates them against fetched accessibility and design rules, and outputs concise findings.

Can I integrate accessibility auditing into my CI workflow?▼

Yes, you can integrate accessibility auditing into CI workflows because this Skill emits terse, actionable findings in file:line format. This concise output is designed for quick triage and seamless integration into code review processes.

Related Skills

Explore More Design & Creative Skills→
allthingslinuxallthingslinux
4

web-design-guidelines

Evaluate UI files against Web Interface Guidelines and report violations.

Official
Basic
kolodachkolodach

web-design-guidelines

Review UI code against current web interface guidelines and report file:line violations.

Community
Intermediate
kbrdn1kbrdn1
3

formatter-linter-expert

Detect project type and run ecosystem-specific formatters and linters.

Community
Advanced
sadie100sadie100

cafe24-find-source

Trace bundled CSS and JS files to their Cafe24 source files.

Community
Advanced