skills.rest
mjbalcueva
mjbalcuevaCOMMUNITY
Explore all skills by this author →
𝕏@mj_balcuevaGitHub

web-design-guidelines

Review UI code against fetched Web Interface Guidelines for compliance.

Updated Oct 19, 2025
Search Tags:#ui#code review#accessibility#web design#guidelines#ux
One-click install
npx skills add https://github.com/mjbalcueva/turbo-template --skill web-design-guidelines-mjbalcueva
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/mjbalcueva/turbo-template/tree/main/.ruler/skills/web-design-guidelines
Command: npx skills add https://github.com/mjbalcueva/turbo-template --skill web-design-guidelines-mjbalcueva

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill helps ensure that web interface code adheres to established design and accessibility best practices, preventing common UI/UX issues.

Core Features & Use Cases

  • Automated Review: Scans UI code against a comprehensive set of web interface guidelines.
  • Compliance Checking: Identifies deviations from accessibility, usability, and design standards.
  • Use Case: A developer can use this skill to audit a new component's UI code before it's merged, ensuring it meets the project's quality standards.

Quick Start

Review the UI code in the file 'src/components/Button.tsx' for compliance with web interface 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 my UI code for web design guidelines compliance?▼

Automated UI code review applies fetched web interface guidelines to your specified files to identify accessibility and usability deviations. It scans components against established best practices to ensure consistent, standard-aligned interfaces before merging.

How do I audit a web component for accessibility before merging?▼

Auditing a web component for accessibility involves scanning its UI code against fetched web interface guidelines. The review identifies deviations from established accessibility and usability best practices, preventing common UI/UX issues before code is merged.

What are web interface guidelines and why are they needed?▼

Web interface guidelines are established accessibility and usability best practices applied to UI code to ensure consistent user interfaces. They are needed to prevent common UI/UX issues and maintain quality standards across web development projects.

Can I use this to review UI code in any file format?▼

You can review UI code in specific files like 'src/components/Button.tsx' by providing the file path. The review fetches external web interface guidelines and performs pattern-based analysis to check compliance across the specified code.

Does automated UI review require external dependencies?▼

Automated UI review requires fetching external web interface guidelines to perform compliance checking. It uses these fetched rules to apply pattern-based analysis on your code files, addressing the need for consistent and accessible user interfaces.

Related Skills

Explore More Design & Creative Skills→
NextSpark-jsNextSpark-js

web-design-guidelines

Review UI code against the latest Web Interface Guidelines.

Official
Intermediate
ckyeonckyeon

web-design-guidelines

Identify code deviations from Web Interface Guidelines during UI code reviews.

Community
Intermediate
eventua11yeventua11y
1

fixing-accessibility-issues

Automates remediation of accessibility defects in UI code from linting tools.

Official
Advanced
jaem1n207jaem1n207
18

web-design-guidelines

Reviews UI code for compliance with web interface guidelines.

Community
Intermediate