web-design-guidelines

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

53|33|Updated Sep 15, 2022
One-click install
npx skills add https://github.com/tutur3u/platform --skill web-design-guidelines-tutur3u
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/tutur3u/platform/tree/main/.opencode/skill/web-design-guidelines
Command: npx skills add https://github.com/tutur3u/platform --skill web-design-guidelines-tutur3u

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps ensure UI code adheres to the latest Web Interface Guidelines by fetching the most recent rules and evaluating frontend files for accessibility, consistency, and best practices.

Core Features & Use Cases

  • Fetch latest guidelines: Retrieve up-to-date rules from the remote source before reviews.
  • File analysis: Scan HTML, CSS, and JS assets to identify accessibility, color contrast, semantic structure, and UX inconsistencies.
  • Output format: Report findings in the concise file:line format suitable for CI and design reviews.
  • Use Case: A design team reviews a landing page and design system components to ensure alignment with current accessibility and usability standards.

Quick Start

Run the web-design-guidelines skill on your UI files to audit accessibility and design conformance. For example, apply it to index.html and styles.css to surface violations and generate a compact report.

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 UI code for web accessibility and visual consistency?

You can audit UI code by scanning HTML, CSS, and JavaScript assets to identify accessibility gaps, color contrast issues, semantic structure problems, and UX inconsistencies. The analysis fetches the latest web interface guidelines and reports violations in a concise file:line format.

What is the best way to check frontend files against web interface guidelines?

The best way to check frontend files is to retrieve the most recent rules from a remote source and evaluate your frontend project assets. This process surfaces compliance gaps across accessibility, visual QA, and UX consistency, generating a compact report suitable for design reviews.

Can I use this design review process for CI pipelines and automated checks?

Yes, you can use this design review process for CI pipelines because it outputs findings in a terse file:line format. This concise reporting style integrates smoothly into automated checks, helping teams catch accessibility and UX consistency violations during development.

Do I need specific dependencies to perform an accessibility and UX consistency audit?

No specific dependencies are required to perform an accessibility and UX consistency audit. The process works by fetching up-to-date rules from a remote source and analyzing your existing HTML, CSS, and JavaScript files directly to identify compliance gaps.

How do I review a landing page and design system components for compliance?

To review a landing page and design system components, apply the audit process to your target files like index.html and styles.css. It evaluates the assets against current accessibility and usability standards, surfacing violations and generating a compact report.

Why does my frontend design review report violations in a file:line format?

Your frontend design review reports violations in a file:line format to provide concise, actionable output suitable for CI and design reviews. This terse structure helps developers quickly locate and fix accessibility, semantic, and UX consistency issues in the code.