skills.rest
Rafaelp122
Rafaelp122COMMUNITY
Explore all skills by this author →
GitHub

web-design-guidelines

Review frontend UI code against web interface guidelines and output file:line findings.

2|2|Updated Jul 1, 2025
Search Tags:#ui#accessibility#frontend#usability#web-guidelines#design-audit
One-click install
npx skills add https://github.com/Rafaelp122/wedding_management --skill web-design-guidelines-rafaelp122
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/Rafaelp122/wedding_management/tree/main/.agents/skills/web-design-guidelines
Command: npx skills add https://github.com/Rafaelp122/wedding_management --skill web-design-guidelines-rafaelp122

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill automates the review of frontend UI code against a canonical set of web interface guidelines to reduce inconsistent manual audits and to surface accessibility, UX, and design-consistency issues early in development.

Core Features & Use Cases

  • Fetches canonical guidelines: retrieves the latest rules from a specified source before each review so audits remain up to date.
  • File scanning and rule application: reads specified files or patterns in a repository and checks them against every rule in the fetched guidelines.
  • Terse, actionable output: emits findings in a concise file:line format suitable for integration into code review workflows.
  • Use Case: run against a React SPA's components and styles to identify accessibility violations and inconsistent UI patterns before release.

Quick Start

Use web-design-guidelines to fetch the current rules and scan the frontend/src path for accessibility and design violations, returning results in file:line format.

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

Automate UI code review by fetching a canonical web guidelines document, scanning frontend files or patterns, and emitting concise file:line findings for each accessibility or UX violation.

What is the best way to check a component library for design guideline compliance?▼

Review UI code against canonical web interface guidelines to reduce inconsistent manual audits, surfacing accessibility, UX, and design-consistency issues early in development.

Can I run an accessibility audit on a single-page application without manual checks?▼

Yes, you can automate accessibility audits for single-page applications by applying fetched web interface guidelines directly to your source files, returning actionable file:line results without manual review.

Does this UI review process work with any frontend framework?▼

The UI review process works with web projects, single-page applications, and component libraries by inspecting provided files and patterns, making it applicable across frontend repositories and design systems.

How do I integrate design guideline checks into my code review workflow?▼

Integrate design guideline checks by running the audit to emit terse, actionable findings in a concise file:line format, which is suitable for direct integration into code review workflows.

Why do my manual UI audits keep missing accessibility violations?▼

Manual UI audits often miss accessibility violations due to inconsistent rule application; automating the review against a fetched canonical guidelines document surfaces issues early and standardizes the process.

Related Skills

Explore More Design & Creative Skills→
hayatoschayatosc
1

web-design-guidelines

Review HTML, CSS, and JavaScript files against Web Interface Guidelines and accessibility rules.

Community
Intermediate
AnvinX1AnvinX1

web-design-guidelines

Fetch Web Interface Guidelines and audit UI code for accessibility and design consistency.

Community
Intermediate
distribucionesfayosmoreno-sysdistribucionesfayosmoreno-sys

ui-visual-validator

Validate UI modifications for visual regression, compliance, and accessibility.

Community
Advanced
helderbertohelderberto
12

a11y-audit

Audit frontend source files for WCAG violations and report findings by severity.

Community
Intermediate