skills.rest
Joel-barriosnuevo
Joel-barriosnuevoCOMMUNITY
Explore all skills by this author →
GitHub

web-design-guidelines

Automates UI review of web interfaces for Web Interface Guidelines conformance.

Updated May 29, 2025
Search Tags:#linting#accessibility#frontend#UI#design-review#web-guidelines
One-click install
npx skills add https://github.com/Joel-barriosnuevo/RockaEterna --skill web-design-guidelines-joel-barriosnuevo
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/Joel-barriosnuevo/RockaEterna/tree/main/.agents/skills/web-design-guidelines
Command: npx skills add https://github.com/Joel-barriosnuevo/RockaEterna --skill web-design-guidelines-joel-barriosnuevo

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps teams ensure UI work respects established Web Interface Guidelines by automatically reviewing assets, components, and interactions for accessibility, visual consistency, and UX best practices.

Core Features & Use Cases

  • Automated UI Review: Scan code and design assets to verify alignment with guidelines.
  • Accessibility Checkpoints: Identify missing alt text, color contrast issues, focus states, and keyboard navigability.
  • Use Case: When updating a web interface, run this Skill to catch accessibility and consistency issues before deployment.

Quick Start

To run a compliance check, provide the UI files or repository path to be evaluated, e.g., "review my UI with assets/index.html and styles.css".

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

You can check web UI accessibility by running an automated review against Web Interface Guidelines, which scans specified files to identify missing alt text, color contrast issues, focus states, and keyboard navigability problems.

How does an automated UI design review work for frontend components?▼

Automated UI review works by fetching the latest Web Interface Guidelines, reading specified frontend files or patterns, and generating concise file:line conformance findings to improve visual consistency and UX best practices.

Can I use an automated design review on my web components and design system?▼

Yes, you can run an automated UI review on web interfaces, sites, and components across repositories and design systems by providing the target file paths or repository directory to evaluate for guideline conformance.

What is the best way to catch accessibility issues in frontend code before deployment?▼

The best way to catch accessibility issues before deployment is to run an automated UI review against established Web Interface Guidelines, which checks frontend assets and interactions for accessibility checkpoints and UX best practices.

What accessibility checkpoints does a web guidelines review cover?▼

A web guidelines review covers accessibility checkpoints including missing alt text, color contrast issues, focus states, and keyboard navigability to ensure UI work respects established Web Interface Guidelines for usability.

Do I need specific dependencies to run a web interface guidelines check?▼

No specific dependencies are required to run a web interface guidelines check, as the skill fetches the latest guidelines and reads your specified UI files or patterns directly to report conformance findings without external tooling.

Related Skills

Explore More Design & Creative Skills→
Rafaelp122Rafaelp122
2

web-design-guidelines

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

Community
Intermediate
armanzeroeightarmanzeroeight
29

accessibility-checker

Validate web content against WCAG accessibility standards and identify common issues.

Community
Intermediate
VidyaBodepudiVidyaBodepudi
2

frontend-ui-engineering

Review web components for accessibility, responsiveness, and performance.

Community
Advanced
thongdn-itthongdn-it
3

web-design-guidelines

Evaluate UI code against Web Interface Guidelines for accessibility and usability.

Community
Intermediate