skills.rest
vcntttt
vcnttttCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

web-design-guidelines

Analyze UI files for Web Interface Guidelines compliance and report findings.

1|Updated Sep 11, 2023
Search Tags:#design#accessibility#contrast#semantic-html#ux-audit#UI-review#web-guidelines
One-click install
npx skills add https://github.com/vcntttt/dotfiles --skill web-design-guidelines-vcntttt
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/vcntttt/dotfiles/tree/main/.agents/skills/web-design-guidelines
Command: npx skills add https://github.com/vcntttt/dotfiles --skill web-design-guidelines-vcntttt

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps teams enforce accessibility and usability standards in UI code by automating guideline-compliance checks against the latest Web Interface Guidelines.

Core Features & Use Cases

  • Fetch and apply the latest guidelines to HTML, CSS, and JavaScript files.
  • Scan UI components for accessibility issues, semantic HTML, keyboard navigation, and contrast compliance.
  • Use Case: Run a design audit on a web page or app to identify accessibility gaps and deviations from best practices.

Quick Start

Provide the files or patterns to review, for example: src/**/*.html src/components/header.jsx

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 web UI for accessibility and contrast compliance?▼

To audit web UI for accessibility, you can scan HTML, CSS, and JavaScript files against the latest Web Interface Guidelines to identify contrast issues and report findings in a file:line format.

How do I check semantic HTML and keyboard navigation in my web project?▼

Checking semantic HTML and keyboard navigation involves scanning UI components to ensure compliance with web guidelines, detecting structural HTML issues and reporting exact file and line numbers for each finding.

How do I automate design reviews and UX audits for modern web apps?▼

Automating design reviews and UX audits requires fetching the latest web guidelines from a source URL and applying them to UI files, generating a terse report of accessibility gaps and best-practice deviations.

Can I run a UI review on specific component files like React JSX?▼

Yes, you can run a UI review on specific component files by providing file patterns like src/components/header.jsx, allowing targeted accessibility checks and design audits on individual web components.

What is included in a web interface guidelines compliance check?▼

A web interface guidelines compliance check includes scanning for accessibility issues, semantic HTML structure, keyboard navigation support, and color contrast compliance across modern web project files.

Related Skills

Explore More Design & Creative Skills→
brainbrewlabsbrainbrewlabs
7

web-design-guidelines

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

Official
Intermediate
ChristineThamChristineTham

web-design-guidelines

Identify UI accessibility and design guideline violations in project files.

Community
Intermediate
leboncoinleboncoin
92

check-accessibility

Automate WCAG 2.1 AA accessibility testing of Spark UI components with Playwright.

Official
Intermediate
hwj123hwjhwj123hwj
4

web-design-guidelines

Review UI code for compliance with the Web Interface Guidelines.

Community
Intermediate