web-design-guidelines

Evaluate UI code against Web Interface Guidelines to detect deviations.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps teams and developers ensure UI components and pages align with the latest Web Interface Guidelines, streamlining accessibility and design consistency reviews.

Core Features & Use Cases

  • Guideline conformance checks: Validate frontend code against the latest Web Interface Guidelines to surface deviations.
  • Accessibility auditing: Check color contrast, semantic HTML, keyboard navigation, and responsive behavior.
  • Use Case: A designer asks to verify a new component library against accessibility and UX guidelines before release.

Quick Start

Review the latest project files to identify accessibility and design guideline violations.

Frequently Asked Questions about web-design-guidelines

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I check frontend code for accessibility and visual consistency violations?

To check frontend code for accessibility and visual consistency violations, evaluate your UI components against Web Interface Guidelines. This process automatically surfaces deviations in semantic HTML, color contrast, keyboard navigation, and responsive behavior to ensure UX compliance.

What is a web interface design review and how does it work?

A web interface design review evaluates frontend components, layout mocks, and design tokens against established guidelines. It implements automated checks to detect UX compliance issues and fetches the latest rules from the source to output concise findings suitable for review.

How do I audit a component library for UX compliance before release?

To audit a component library for UX compliance before release, validate your frontend code against the latest Web Interface Guidelines. This surfaces accessibility issues like poor color contrast or missing keyboard navigation, ensuring design consistency across all components.

Can I use automated guideline checks to review design tokens and layout mocks?

Yes, you can use automated guideline checks to review design tokens and layout mocks. The evaluation scope includes frontend components and layout mocks, detecting deviations and violations in visual consistency and accessibility compliance to streamline design reviews.

Does this web design guideline review fetch the latest rules automatically?

Yes, the web design guideline review fetches the latest rules automatically from the source. It implements automated checks against these updated Web Interface Guidelines to accurately detect any current UX compliance issues or visual deviations in your frontend code.

What limitations exist when evaluating UI code against web design guidelines?

When evaluating UI code against web design guidelines, the scope is limited to frontend components, layout mocks, and design tokens. It surfaces accessibility, visual consistency, and UX compliance issues but outputs concise findings rather than providing automated code fixes.