skills.rest
yeohj0710
yeohj0710COMMUNITY
Explore all skills by this author →
GitHub

web-design-guidelines

Identify UI guideline compliance issues in HTML, CSS, and JavaScript codebases.

Updated Dec 5, 2024
Search Tags:#accessibility#compliance#ui-review#web-guidelines#design-audit#frontend-review
One-click install
npx skills add https://github.com/yeohj0710/wellnessbox --skill web-design-guidelines-yeohj0710
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/yeohj0710/wellnessbox/tree/main/.agents/skills/web-design-guidelines
Command: npx skills add https://github.com/yeohj0710/wellnessbox --skill web-design-guidelines-yeohj0710

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Review UI code to ensure it adheres to the Web Interface Guidelines, helping teams catch accessibility and UX issues early.

Core Features & Use Cases

  • Fetch the latest Web Interface Guidelines before reviews to ensure up-to-date checks.
  • Analyze HTML, CSS, and JavaScript files for accessibility, semantic structure, contrast, and usability.
  • Output findings in a terse file:line format suitable for integration into code reviews and design audits.

Quick Start

Provide the target files or patterns, and I will fetch the latest guidelines and audit them for compliance.

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 web accessibility and visual consistency?▼

Audit HTML and CSS code for web accessibility by providing target files to the tool. It fetches the latest Web Interface Guidelines and reports compliance issues in a terse file:line format.

What is a UI guideline compliance audit for frontend code?▼

A UI guideline compliance audit for frontend code identifies accessibility, semantic structure, contrast, and usability issues. It checks HTML, CSS, and JavaScript projects against established web guidelines to catch UX problems early.

Can I check JavaScript files for UI guideline compliance?▼

Yes, you can check JavaScript files for UI guideline compliance. The audit analyzes HTML, CSS, and JavaScript projects to identify accessibility and visual consistency issues against the fetched Web Interface Guidelines.

How do I integrate web design guideline checks into my code review process?▼

Integrate web design guideline checks into code reviews by using the tool's terse file:line output format. Provide target file patterns, and paste the reported findings directly into your review comments or design audit reports.

What's the best way to ensure my web UI review uses up-to-date accessibility standards?▼

The best way to ensure a web UI review uses up-to-date accessibility standards is to fetch the latest Web Interface Guidelines before analyzing files. This guarantees checks reflect current compliance requirements.

Does this design audit require any external dependencies or linting tools to run?▼

No, this design audit does not require external dependencies or linting tools to run. It independently fetches fresh rules from the Web Interface Guidelines source and evaluates your frontend files directly.

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
msichtermanmsichterman

web-design-guidelines

Audit UI code against the latest Web Interface Guidelines and report findings in file:line format.

Community
Intermediate
kennedym-dskennedym-ds
14

accessibility-wcag

Evaluate and implement WCAG 2.1 AA accessibility patterns for frontend web development.

Community
Advanced
revyidrevyid

web-design-guidelines

Check HTML and CSS files against updated web interface guidelines.

Community
Intermediate