web-design-guidelines

Audit UI files against the latest Web Interface Guidelines and report deviations.

Updated Mar 12, 2026
One-click install
npx skills add https://github.com/arvidfcjarfalla-prog/atlas --skill web-design-guidelines-arvidfcjarfalla-prog
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/arvidfcjarfalla-prog/atlas/tree/main/.agents/skills/web-design-guidelines
Command: npx skills add https://github.com/arvidfcjarfalla-prog/atlas --skill web-design-guidelines-arvidfcjarfalla-prog

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps teams ensure UI code adheres to Web Interface Guidelines by automatically auditing files against the latest standards.

Core Features & Use Cases

  • Guideline-driven UI audits: fetch the latest rules, scan target files, and report deviations in a concise file:line format.
  • Accessibility review: assess semantic HTML, color contrast, and keyboard navigation to improve inclusivity.
  • Design consistency checks: verify components align with brand and design system guidelines.

Quick Start

Provide the UI files you want reviewed and the skill will fetch the latest guidelines, perform the compliance checks, and report findings.

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

To audit UI code for web design guideline compliance, provide your UI files for review. The system fetches current standards, applies the rules to your code, and reports deviations in a concise file:line format.

How does an accessibility review check semantic HTML and color contrast?

An accessibility review checks semantic HTML and color contrast by scanning target UI files against current web standards. It assesses these elements alongside keyboard navigation to identify inclusivity issues and report them precisely.

Can I use this for a site-wide UX audit across multiple web projects?

Yes, you can use this for a site-wide UX audit across web projects. The process applies to reviewing multiple UI files, performing accessibility checks, and verifying design consistency across your entire project scope.

What is the best way to ensure components align with a design system?

The best way to ensure components align with a design system is to run design consistency checks. This verifies your UI code matches brand guidelines and reports any deviations using a direct file:line format.

Do I need to manually provide the latest web standards to run a UX audit?

No, you do not need to manually provide web standards to run a UX audit. The process automatically fetches the latest web interface guidelines before reading your target files and applying the compliance rules.

Why does my UI code still fail accessibility checks after a review?

Your UI code may fail accessibility checks if deviations were reported but not fixed. The review outputs findings in a file:line format detailing semantic HTML, color contrast, and keyboard navigation issues requiring code updates.