skills.rest
brainbrewlabs
brainbrewlabsOFFICIAL
Explore all skills by this author →
GitHub

web-design-guidelines

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

7|3|Updated Mar 17, 2026
Search Tags:#html#accessibility#css#audit#guidelines#web-design#ui-review
One-click install
npx skills add https://github.com/brainbrewlabs/brainbrew-devkit --skill web-design-guidelines-brainbrewlabs
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/brainbrewlabs/brainbrew-devkit/tree/main/plugin/config/templates/develop/skills/web-design-guidelines
Command: npx skills add https://github.com/brainbrewlabs/brainbrew-devkit --skill web-design-guidelines-brainbrewlabs

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill automates the manual and error-prone process of checking web UI source files against an authoritative set of Web Interface Guidelines so teams can catch accessibility, layout, and UX regressions early.

Core Features & Use Cases

  • Guidelines Fetching: Always retrieves the latest rule set from the canonical source before each review to ensure checks are up to date.
  • File Pattern Review: Reads specified files or user-provided file patterns (HTML, CSS, JS) and evaluates them against the fetched rules.
  • Terse Findings Output: Produces concise, machine-friendly results in a file:line format for quick triage, CI integration, or automated fixes.
  • Use Case: Run as a pre-PR audit to detect accessibility violations and design guideline deviations across a web app's frontend code.

Quick Start

Use the web-design-guidelines skill to review the UI files in src/ui for accessibility and guideline violations.

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 HTML and CSS files for accessibility violations?▼

You can audit UI code for accessibility by applying this skill to your HTML, CSS, and JavaScript files. It fetches the latest web interface guidelines from a canonical URL and outputs violations in a terse file:line format for quick triage.

Can I check frontend code against web design guidelines before creating a pull request?▼

Yes, you can check frontend code against web design guidelines before a pull request. The skill reads specified file patterns or targeted UI files and evaluates them against the fetched rules to catch accessibility, layout, and UX regressions early in development.

Does this accessibility audit tool support continuous integration pipelines?▼

Yes, this accessibility audit tool supports continuous integration pipelines by producing terse, machine-friendly findings in a file:line format. This allows CI systems to parse accessibility and layout regressions for automated fixes.

What is the best way to automate UX best-practice reviews for web app source files?▼

The best way to automate UX best-practice reviews is fetching the canonical guideline document and evaluating specified file patterns against it. This skill automates checking web app source files to detect layout and UX deviations across frontend code.

Why does the UI review fetch the guideline document from a URL before checking my code?▼

The UI review fetches the guideline document from a URL before checking your code to ensure checks are always up to date. Retrieving the latest rule set from the canonical source prevents stale accessibility and layout checks during the audit.

Are there limitations when reviewing client-side JavaScript for layout and UX regressions?▼

A limitation when reviewing client-side JavaScript for layout and UX regressions is that findings are output in a terse file:line format. This concise format prioritizes quick triage and CI integration over detailed explanatory feedback for complex accessibility issues.

Related Skills

Explore More Design & Creative Skills→
hayatoschayatosc
1

web-design-guidelines

Review HTML, CSS, and JavaScript files against Web Interface Guidelines and accessibility rules.

Community
Intermediate
BEIRUXBEIRUX

web-design-guidelines

Review UI code against Web Interface Guidelines and output file:line findings.

Official
Intermediate
nanorepublicananorepublica
61

Frontend CSS

Enforce frontend CSS coding standards for naming, organization, and responsive design.

Community
Basic
dachentdachent
18

frontend-design-codex

Validate frontend UI components through browser rendering and screenshot analysis.

Community
Advanced