skills.rest
rieckt
riecktCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

web-design-guidelines

Detect UI components deviating from the latest Web Interface Guidelines.

Updated Feb 7, 2026
Search Tags:#consistency#a11y#audit#design-review#web-guidelines#UI-accessibility#visual-quality
One-click install
npx skills add https://github.com/rieckt/create-loumi-app --skill web-design-guidelines-rieckt
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/rieckt/create-loumi-app/tree/main/template/skills/base/web-design-guidelines
Command: npx skills add https://github.com/rieckt/create-loumi-app --skill web-design-guidelines-rieckt

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill helps teams ensure UI components comply with the latest Web Interface Guidelines by automatically reviewing code and design assets for conformance.

Core Features & Use Cases

  • Guideline conformance: Detect deviations from the web interface guidelines across UI components, layouts, and styles.
  • Accessibility checks: Identify accessibility gaps (contrast, semantic structure, keyboard navigation) to improve inclusivity.
  • Audit scenarios: Use during UI reviews, design-system validation, or before releasing user-facing features.

Quick Start

Provide the path to the UI project or files to audit. The skill will fetch the latest guidelines and compare the target files against the rules.

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 components for web interface guideline conformance?▼

To audit UI components for web interface guideline conformance, provide the path to your UI project files. The tool fetches the latest published rules and evaluates the target code against those guidelines to detect deviations.

What is checked during an accessibility audit for web interfaces?▼

An accessibility audit for web interfaces checks for contrast issues, semantic structure gaps, and keyboard navigation problems. It evaluates your specified files against published rules to identify accessibility gaps and improve inclusivity.

Can I use this for design-system validation before releasing user-facing features?▼

Yes, you can use this for design-system validation before releasing user-facing features. It evaluates specified codebases and design assets against fetched official guidelines to ensure visual quality and accessibility conformance.

What's the best way to check codebases for visual guideline deviations?▼

The best way to check codebases for visual guideline deviations is to run an automated review against the latest web interface guidelines. The tool fetches official rules and compares target project files to detect layout and style conformance issues.

Do I need to manually update web guidelines to run a UI accessibility check?▼

No, you do not need to manually update web guidelines to run a UI accessibility check. The tool automatically fetches official guidelines from a remote source before evaluating your specified files against the published rules.

Related Skills

Explore More Design & Creative Skills→
ivfariasivfarias
22

CODE_QUALITY_CHECK

Audit codebases against a quality checklist and generate a Markdown report.

Community
Advanced
d-kishid-kishi
1

functional-requirements-check

Verify implementations against specification documents and generate remediation reports.

Community
Advanced
pradyumnasagarpradyumnasagar
6

agent-handoff

Automate inter-skill data transfer and provenance capture via JSON Material Passports.

Community
Advanced
act70255act70255

ui-visual-validator

Validate UI components for visual consistency, design system compliance, and accessibility.

Community
Advanced