skills.rest
vitalyiegorov
vitalyiegorovCOMMUNITY
Explore all skills by this author →
Website𝕏@vitalyiegorovGitHub

web-design-guidelines

Review UI code against Web Interface Guidelines and output file:line findings.

7|2|Updated May 11, 2023
Search Tags:#accessibility#ui review#design audit#code compliance#ux review#web guidelines
One-click install
npx skills add https://github.com/vitalyiegorov/suuudokuuu --skill web-design-guidelines-vitalyiegorov
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/vitalyiegorov/suuudokuuu/tree/main/.agents/skills/web-design-guidelines
Command: npx skills add https://github.com/vitalyiegorov/suuudokuuu --skill web-design-guidelines-vitalyiegorov

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps ensure that user interface code adheres to established Web Interface Guidelines, improving consistency, accessibility, and overall quality of web designs.

Core Features & Use Cases

  • Automated Code Review: Scans specified files or patterns against a set of predefined design and accessibility rules.
  • Compliance Checking: Identifies deviations from best practices in UI development.
  • Use Case: A developer can use this skill to quickly audit a new component's code for compliance before merging it into the main codebase.

Quick Start

Use the web-design-guidelines skill to review the file 'src/components/Button.js'.

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 UI code for accessibility and design consistency?▼

This skill performs a UI code review by fetching the latest Web Interface Guidelines and applying them to your specified files or patterns, identifying accessibility issues and design inconsistencies in a terse file:line format.

What is a web design compliance check and how does it work?▼

A web design compliance check scans UI code against predefined rules to ensure it meets established web standards. This skill fetches dynamic guidelines via WebFetch and applies them to your files to detect deviations from best practices.

Can I review a specific component file for web guideline violations?▼

Yes, you can review a specific component file by providing its path or pattern. The skill targets the specified files, applying web interface guidelines to identify accessibility and design consistency issues before merging code.

Does the UX review process require any external dependencies?▼

No, the UX review process requires no external dependencies or components. The skill autonomously fetches the latest rules using WebFetch and operates independently to audit your UI code for compliance.

What format does the design audit use to report code compliance issues?▼

The design audit reports code compliance issues in a terse file:line format. This concise output style pinpoints exact locations of accessibility and design standard violations within your UI code.

Related Skills

Explore More Design & Creative Skills→
noahwins-ngnoahwins-ng
1

web-design-guidelines

Audit UI components, HTML structures, and CSS patterns against design and accessibility standards.

Community
Intermediate
hopeoverturehopeoverture
6

ui-library-usage-auditor

Audit shadcn/ui component usage for accessibility and design-system conformance.

Community
Advanced
janewilkinjanewilkin

lint

Lints Python code with ruff and checks types with mypy.

Community
Intermediate
pvillegapvillega
23

wcag-audit

Detect WCAG violations via ESLint plugins and axe-core runtime scans.

Community
Advanced