web-design-guidelines

Audit HTML, CSS, and frontend assets against Web Interface Guidelines.

165|11|Updated Dec 31, 2023

Search Tags:#accessibility #review #web-design #ux-audit #web-standards #ui-guidelines

Ready to run

npx skills add https://github.com/devantler-tech/ksail --skill web-design-guidelines-devantler-tech

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/devantler-tech/ksail/tree/main/.agents/skills/web-design-guidelines
Command: npx skills add https://github.com/devantler-tech/ksail --skill web-design-guidelines-devantler-tech

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps ensure web UI code complies with established guidelines, improving accessibility, usability, and consistency across projects.

Core Features & Use Cases

Fetch the latest guidelines from the source URL and keep checks up to date.
Read specified files (or prompt for files/pattern) to apply rules to the target codebase.
Apply all rules in the fetched guidelines and report deviations in a terse, file:line style suitable for quick remediation.
Use cases include auditing a UI repo for accessibility conformance, visual consistency, and adherence to web standards.

Quick Start

Provide the files or pattern to review, and I will fetch the latest Web Interface Guidelines and start auditing.

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 HTML and CSS code for accessibility compliance?▼

To audit HTML and CSS code for accessibility compliance, provide your target files or patterns. The tool fetches the latest web interface guidelines, applies rule matching, and outputs deviations in a concise file:line format for quick remediation.

How does a UX audit against web standards identify UI guideline violations?▼

A UX audit against web standards identifies UI guideline violations by fetching current rules from a source URL, applying pattern matching to the read frontend assets, and flagging design-consistency and accessibility gaps line by line.

Can I check a design system for visual consistency and web accessibility gaps?▼

Yes, you can check a design system for visual consistency and web accessibility gaps. The tool reads specified frontend assets, applies fetched web interface guidelines, and outputs identified deviations in a terse file:line style.

What is the best way to keep UI code aligned with the latest web interface guidelines?▼

The best way to keep UI code aligned with the latest web interface guidelines is to fetch the rules directly from the source URL during an audit, ensuring checks are always up to date against current accessibility and design standards.

Do I need to specify individual files to review web design standards in my repository?▼

You do not need to specify individual files to review web design standards. You can provide a file pattern, and the tool will read the matching frontend assets to apply the fetched rules and output deviations.