skills.rest
pablolospe
pablolospeCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

web-design-guidelines

Assess UI code against Web Interface Guidelines and output file:line findings.

Updated Feb 16, 2025
Search Tags:#ui#accessibility#compliance#review#guidelines#lint#web-design
One-click install
npx skills add https://github.com/pablolospe/el-destino2 --skill web-design-guidelines-pablolospe
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/pablolospe/el-destino2/tree/main/.agents/skills/web-design-guidelines
Command: npx skills add https://github.com/pablolospe/el-destino2 --skill web-design-guidelines-pablolospe

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

UI teams struggle with inconsistent interfaces and accessibility gaps across codebases; this skill automates guideline checks to surface violations.

Core Features & Use Cases

  • Fetch latest Web Interface Guidelines and apply them to target files.
  • Read specified UI files (HTML/CSS/JS) and identify non-compliant patterns.
  • Use case: Reviewer wants to verify a page or PR against the guidelines and generate a compliance report.

Quick Start

Provide the UI files you want reviewed against the latest guidelines.

Frequently Asked Questions about web-design-guidelines

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I check UI code for web design guidelines and accessibility compliance?▼

To check UI code for web design guidelines compliance, you provide target HTML, CSS, or JS files for review. The tool fetches the latest guidelines, reads the files, and outputs non-compliant findings in a concise file:line format.

What is the best way to audit a design system for interface guideline violations?▼

Auditing a design system for interface guideline violations involves reading target UI markup and components against fetched web design guidelines. This automated process surfaces inconsistent patterns and accessibility gaps, outputting a detailed compliance report.

Can I review a PR against Web Interface Guidelines automatically?▼

Yes, you can review a PR against Web Interface Guidelines automatically by providing the changed UI files. The review process reads the specified markup and CSS, identifying non-compliant patterns to generate a concise compliance report.

What file formats are supported for web interface compliance linting?▼

Web interface compliance linting supports UI markup, CSS, and JS component files across pages, sites, or design systems. The tool reads these specified target files to identify non-compliant patterns based on the latest guidelines.

Why does my UI review report show accessibility gaps and inconsistent patterns?▼

Your UI review report shows accessibility gaps and inconsistent patterns because the automated check identified non-compliant code in your target files. It compares your HTML and CSS against fetched web interface guidelines to surface violations.

Does this web design linting tool work with existing design systems?▼

Yes, this web design linting tool works with existing design systems by reading their UI components and markup. It fetches the latest web interface guidelines and applies them to your target files to identify non-compliant patterns across the system.

Related Skills

Explore More Design & Creative Skills→
dongitrandongitran
3

web-design-guidelines

Audit UI code against Web Interface Guidelines and output file:line findings.

Community
Basic
deangilmoreremixdeangilmoreremix

web-design-guidelines

Review UI files against web design and accessibility guidelines.

Community
Intermediate
TrimudTrimud

web-design-guidelines

Compare frontend code against Web Interface Guidelines and report violations.

Community
Intermediate
act70255act70255

ui-visual-validator

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

Community
Advanced