skills.rest
kos3nz
kos3nzCOMMUNITY
Explore all skills by this author →
GitHub

web-design-guidelines

Audit HTML, CSS, and JavaScript UI code against Web Interface Guidelines.

Updated Nov 16, 2022
Search Tags:#ui#accessibility#validation#audit#code-review#web-design#design-guidelines
One-click install
npx skills add https://github.com/kos3nz/dotfiles --skill web-design-guidelines-kos3nz
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/kos3nz/dotfiles/tree/main/.config/agents/skills/web-design-guidelines
Command: npx skills add https://github.com/kos3nz/dotfiles --skill web-design-guidelines-kos3nz

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Review UI code for Web Interface Guidelines compliance. Provide checks for accessibility, performance, and visual consistency.

Core Features & Use Cases

  • Fetch latest guidelines from the source URL, read target files, apply rules, and report violations in a concise file:line format.
  • Validate UI components, HTML, CSS, and JavaScript against guidelines to ensure accessibility and design consistency.
  • Use Case: Given a UI codebase with multiple components, run the skill to surface accessibility issues and deviations from design guidelines.

Quick Start

Provide the path(s) to the UI files you want reviewed, and the skill will fetch guidelines and analyze them.

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 for web design guideline compliance?▼

To audit UI code for web design guideline compliance, provide the file paths to your HTML, CSS, and JavaScript. The tool fetches remote guidelines, analyzes the files, and outputs violations in a concise file:line format.

Can I check my UI codebase for accessibility and UX issues automatically?▼

Yes, you can check your UI codebase for accessibility and UX issues by running an audit against web interface guidelines. It reads your specified components and surfaces accessibility deviations in a concise file:line format.

What do I need to provide to run a UI code review for design consistency?▼

To run a UI code review for design consistency, you only need to provide the paths to the UI files you want reviewed. The skill handles fetching the latest guidelines and applying the validation rules automatically.

Does this web design validation work with JavaScript files or only HTML and CSS?▼

This web design validation works with HTML, CSS, and JavaScript files. It reviews the provided UI assets across all three formats to ensure accessibility, performance, and visual consistency compliance.

How are accessibility violations reported when auditing a UI codebase?▼

Accessibility violations are reported in a concise file:line format when auditing a UI codebase. This allows you to quickly locate and fix design guideline deviations directly within your HTML, CSS, or JavaScript files.

Related Skills

Explore More Design & Creative Skills→
Overdrive-ConsultingOverdrive-Consulting
3

web-design-guidelines

Check HTML, CSS, and JavaScript/TypeScript files against Web Interface Guidelines.

Official
Intermediate
billh93billh93

web-design-guidelines

Identify UI code compliance issues against the latest Web Interface Guidelines.

Community
Intermediate
redpanda-dataredpanda-data
34

visual-review

Automate visual and accessibility reviews of frontend UI changes with Playwright.

Official
Advanced
eykissvrinoeykissvrino
1

web-design-guidelines

Validate project files against Web Interface Guidelines and report issues in file:line format.

Community
Intermediate