web-design-guidelines

Review HTML, CSS, and front-end files against Web Interface Guidelines.

1|Updated Apr 6, 2026

Search Tags:#ui #accessibility #a11y #code-review #web #design-guidelines

Ready to run

npx skills add https://github.com/pkoka888/server-infra-templates --skill web-design-guidelines-pkoka888

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/pkoka888/server-infra-templates/tree/main/.kilo/skills/marketplace/web-design-guidelines
Command: npx skills add https://github.com/pkoka888/server-infra-templates --skill web-design-guidelines-pkoka888

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Front-end teams and designers need a fast, consistent way to verify UI code against up-to-date web interface and accessibility guidelines so issues are caught early and reviews are reproducible.

Core Features & Use Cases

Fetches official guidelines from the published source before each review to ensure checks use the latest rules.
Rule-based file scanning across specified files or glob patterns and reporting in terse file:line format for easy triage.
Use Case: Run on pull requests to detect accessibility regressions in React components, CSS, and static HTML before deployment.

Quick Start

Review the repository files matching src/**/*.{js,jsx,ts,tsx,html,css} against the Web Interface Guidelines and output issues in file:line format.

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 quality?▼

To audit UI code, scan front-end files like HTML, CSS, and components against published web interface guidelines. The review fetches the latest rules and outputs terse file:line findings for easy triage.

How does web interface guideline compliance checking work?▼

Web interface guideline compliance checking works by fetching published rules and applying them to specified front-end file paths or glob patterns. It outputs issues in a terse file:line format for quick triage.

Can I use this accessibility audit on React components and static HTML?▼

Yes, the accessibility audit works on React components, CSS, and static HTML. It scans specified files or glob patterns to detect UI regressions before deployment.

What is the best way to check accessibility regressions on pull requests?▼

The best way to check accessibility regressions is running rule-based file scanning on pull requests. This validates front-end files like JS, TSX, and CSS against updated guidelines, outputting precise file:line issues.

Do I need to manually update web design guidelines for code review?▼

No, you do not need to manually update web design guidelines. The review process fetches the official guidelines from the published source before each scan to ensure checks use the latest rules.