skills.rest
PlaneInABottle
PlaneInABottleCOMMUNITY
Explore all skills by this author →
GitHub

web-design-guidelines

Audits UI code in HTML/CSS/JS projects for guideline non-compliance and outputs file:line findings.

1|Updated Aug 26, 2025
Search Tags:#accessibility#code-quality#ux-patterns#ui-review#web-guidelines#design-audit
One-click install
npx skills add https://github.com/PlaneInABottle/configs --skill web-design-guidelines-planeinabottle
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/PlaneInABottle/configs/tree/main/agents/.agents/skills/web-design-guidelines
Command: npx skills add https://github.com/PlaneInABottle/configs --skill web-design-guidelines-planeinabottle

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Rapidly verify UI code compliance against the latest Web Interface Guidelines, surfacing accessibility, UX, and design gaps with actionable findings.

Core Features & Use Cases

  • Fetches current guidelines from the official web-interface-guidelines source.
  • Analyzes target UI files (HTML/CSS/JS) for conformance and accessibility issues.
  • Outputs actionable file:line findings to guide fixes across projects.
  • Use Case: Run a codebase audit before a design review or release to ensure alignment with standards.

Quick Start

Provide the UI source files or patterns to review and I will fetch the latest guidelines and report 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 UI code for accessibility and design consistency issues?▼

You can audit UI code by fetching the latest Web Interface Guidelines and analyzing your HTML, CSS, and JS assets to identify non-compliant accessibility, UX, and design patterns. The audit outputs actionable file:line findings to guide fixes.

What is the best way to check web project files against official UX patterns?▼

Checking web project files against official UX patterns involves validating your HTML, CSS, and JS source code against current Web Interface Guidelines. This process surfaces non-compliant UX patterns and outputs findings in a file:line format for quick fixes.

Can I use this design audit for HTML, CSS, and JavaScript source files?▼

Yes, this design audit specifically applies to web projects containing HTML, CSS, and JS assets. It analyzes these target UI files to check conformance with current web guidelines and reports accessibility and design violations.

How do I find non-compliant UI patterns before a design review or release?▼

To find non-compliant UI patterns before a release, provide your UI source files to run a codebase audit. The tool fetches up-to-date rules and reports accessibility, design consistency, and UX pattern violations in a file:line format.

Does the UI review fetch current web-accessibility rules automatically?▼

Yes, the UI review fetches current web-accessibility rules automatically from the official web-interface-guidelines source. It uses these up-to-date rules to analyze your target UI files and output actionable conformance findings.

Are there limitations when running a web guidelines conformance check on my codebase?▼

The web guidelines conformance check is limited to analyzing HTML, CSS, and JS assets for accessibility, design consistency, and UX validation. It outputs findings in a file:line format, meaning you must manually apply the suggested fixes to your codebase.

Related Skills

Explore More Design & Creative Skills→
LAF-USLAF-US

web-design-guidelines

Validate HTML/CSS/JS UI code against the latest Web Interface Guidelines.

Official
Intermediate
ZawHlaingPhyoTsukiZawHlaingPhyoTsuki

web-design-guidelines

Audit frontend UI files for Web Interface Guidelines violations.

Community
Intermediate
sambersamber
2.9k

golang-lint

Configure and run golangci-lint to analyze Go projects and interpret results.

Community
Advanced
MohammedSaudAlsahliMohammedSaudAlsahli

Skeumorphism Design System Skill

Generate Skeumorphism design system guidelines with WCAG 2.2 AA accessibility standards.

Community
Advanced