skills.rest
monmacllcapp
monmacllcappOFFICIAL
Explore all skills by this author →
GitHub

web-design-guidelines

Review UI code files against Web Interface Guidelines for compliance.

Updated Aug 27, 2026
Search Tags:#design#ui#code review#accessibility#guidelines#ux
One-click install
npx skills add https://github.com/monmacllcapp/skill-forks --skill web-design-guidelines-monmacllcapp
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/monmacllcapp/skill-forks/tree/main/skills/frontend/skills/web-design-guidelines
Command: npx skills add https://github.com/monmacllcapp/skill-forks --skill web-design-guidelines-monmacllcapp

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) components.

What problem does it solve?

This Skill helps ensure that user interface code adheres to established Web Interface Guidelines, improving consistency, accessibility, and overall design quality.

Core Features & Use Cases

  • Automated Code Review: Scans UI code files against a predefined set of design and accessibility rules.
  • Compliance Checking: Identifies deviations from best practices and guidelines.
  • Use Case: A developer can use this Skill to quickly audit a new component's code before merging, ensuring it aligns with the project's established design system and accessibility standards.

Quick Start

Use the web-design-guidelines skill to review the file 'src/components/Button.js' for UI guideline 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 review UI code for accessibility and design compliance?▼

Review UI code for accessibility and design compliance by scanning frontend files against established Web Interface Guidelines. The skill fetches the latest rules from a specified URL using WebFetch to identify deviations from best practices and design system standards.

What is automated UI guideline code review and how does it work?▼

Automated UI guideline code review scans component files against predefined accessibility and design rules to ensure consistency. It fetches the latest guidelines from a specified URL via WebFetch to apply up-to-date rule application during frontend development workflows.

How do I check a frontend component for design system adherence?▼

Check a frontend component for design system adherence by running the skill against specific UI code files like 'src/components/Button.js'. It audits the code against fetched guidelines to verify compliance with established accessibility standards and design quality rules.

Can I use this guideline review skill with my frontend development workflow?▼

Yes, you can use this guideline review skill with frontend development workflows requiring design and accessibility audits. It applies to any UI code file review process, fetching established Web Interface Guidelines to ensure components align with project design standards before merging.

Does the accessibility audit pull the latest web interface guidelines dynamically?▼

Yes, the accessibility audit pulls the latest web interface guidelines dynamically by fetching rules from a specified URL using WebFetch. This ensures up-to-date rule application when checking UI code files for compliance with current accessibility and design standards.

What are the limitations of automated UI code compliance checking?▼

A limitation of automated UI code compliance checking is that it relies on fetching guidelines from a specified URL, requiring a valid connection. It scans code files against predefined rules but does not perform visual rendering tests or runtime accessibility checks.

Related Skills

Explore More Design & Creative Skills→
FlorianBruniauxFlorianBruniaux
77

web-design-guidelines

Audit UI code against web interface guidelines and report violations.

Community
Intermediate
beemanbeeman
12

web-design-guidelines

Evaluate web UI components against Web Interface Guidelines for compliance.

Community
Intermediate
sgpropertyanalyticssgpropertyanalytics
2

web-design-guidelines

Check frontend UI files against the latest Web Interface Guidelines.

Official
Intermediate
Trio-Blockchain-LabsTrio-Blockchain-Labs

web-design-guidelines

Compare HTML, CSS, and JavaScript code against Web Interface Guidelines to identify UI compliance gaps.

Official
Intermediate