skills.rest
NAinfini
NAinfiniCOMMUNITY
Explore all skills by this author →
GitHub

web-design-guidelines

Check web project files against remote UI guidelines and report file:line findings.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps teams verify UI code against Web Interface Guidelines, catching accessibility gaps, design inconsistencies, and UX issues before release. It is invoked when a designer or developer asks to review a UI, check accessibility, audit design, review UX, or verify a site against best practices.

Core Features & Use Cases

  • Guidelines-based review: fetch the latest Web Interface Guidelines and compare target files against them.
  • File-pattern analysis: read specified files or patterns to scope the check.
  • Deterministic output: produce concise findings in a file:line style to enable quick remediation.
  • Use Case: a frontend team runs the skill on their design system to identify color contrast issues and semantic markup gaps in a React app.

Quick Start

Use the web-design-guidelines skill to review the UI files by specifying the target files or patterns, for example: src/**/*.{js,jsx,ts,tsx}.

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

To audit frontend code for accessibility and design consistency, use a skill that fetches web interface guidelines and analyzes specified files, reporting issues in a concise file:line format for quick remediation.

Can I check my React components for UI guideline compliance?▼

Yes, you can check React components for UI guideline compliance by specifying file patterns like src/**/*.{js,jsx,ts,tsx} to scope the analysis and identify semantic markup gaps and color contrast issues.

What is the best way to review a design system for accessibility gaps?▼

The best way to review a design system for accessibility gaps is automating checks against the latest web interface guidelines, catching visual inconsistencies and UX issues across pages and styles before release.

How does an automated UI design review work?▼

An automated UI design review works by fetching remote web interface guidelines, reading specified project files or patterns, and comparing the code against those standards to produce deterministic findings.

Do I need to install dependencies to run a web design guideline check?▼

No, you do not need to install dependencies to run a web design guideline check, as the skill operates standalone by fetching guidelines from a remote source and analyzing your local frontend files directly.

Related Skills

Explore More Design & Creative Skills→
calcosmiccalcosmic
9

react

Codify React UI best practices for component design, state management, and performance.

Community
Advanced
jrmatherlyjrmatherly

web-design-guidelines

Analyze HTML/CSS/JS files for accessibility and design guideline compliance.

Community
Basic
akourmazakourmaz

checklist-ux-review

Audit frontend UI implementations for visual states, accessibility, and responsive behavior.

Community
Intermediate
tmcfarlanetmcfarlane
105

web-design-guidelines

Validate UI code against Web Interface Guidelines for accessibility and usability gaps.

Community
Intermediate