skills.rest
Adrienenjalbert
AdrienenjalbertCOMMUNITY
Explore all skills by this author →
GitHub

web-design-guidelines

Identify UI guideline violations and generate file:line remediation notes.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill helps ensure UI implementations comply with external web interface guidelines by surfacing deviations and providing actionable remediation notes.

Core Features & Use Cases

  • Guideline-compliance review: Compare UI components, styles, and interactions against external interface guidelines.
  • Automated findings: Generate precise, file:line level issues suitable for pull requests.
  • Use Case: Auditing a design system or a component library to ensure accessibility and consistency across pages.

Quick Start

Run a guideline review on the target UI files to identify deviations and generate remediation notes.

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 components for accessibility and UI consistency violations?▼

To audit frontend components for accessibility and UI consistency, you can run a guideline-based design review that compares implementations against external web interface guidelines and outputs actionable remediation notes with precise file:line findings.

What is the best way to generate actionable code review comments for UI guideline deviations?▼

Generating actionable code review comments for UI guideline deviations involves identifying implementations that violate external web interface guidelines and producing precise, file:line level findings with minimal context suitable for pull requests.

Can I review styles and accessibility conformance across a design system repository?▼

Yes, you can review styles and accessibility conformance across a design system repository by applying guideline-compliance checks to frontend components and styles, surfacing deviations for remediation.

Do I need the latest web interface guidelines to perform a UI design review?▼

Yes, performing a UI design review requires the latest external web interface guidelines when available to accurately identify violations and generate precise remediation notes for your frontend codebase.

How does guideline-based UI design review handle file and line level issue reporting?▼

Guideline-based UI design review handles issue reporting by analyzing frontend components and styles, then outputting precise file:line findings with minimal context to directly pinpoint accessibility and consistency violations.

When should I use automated UI guideline compliance checks instead of manual design review?▼

Automated UI guideline compliance checks are ideal when auditing a component library or design system to ensure accessibility and consistency across pages, providing precise file:line findings that are suitable for pull request integration.

Related Skills

Explore More Design & Creative Skills→
nakafaainakafaai
78

web-design-guidelines

Analyze UI files against Web Interface Guidelines and report issues in file:line format.

Official
Basic
Kevin-Liu-01Kevin-Liu-01
16

web-design-guidelines

Identify UI design and accessibility issues in React/TSX, HTML/CSS, and assets against the latest Web Interface Guidelines.

Community
Intermediate
aniruddh2003aniruddh2003
1

speckit.checker

Run static analysis tools to detect security vulnerabilities, type errors, and linting issues.

Community
Intermediate
distribucionesfayosmoreno-sysdistribucionesfayosmoreno-sys

ui-visual-validator

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

Community
Advanced