web-design-guidelines

Review UI code against Web Interface Guidelines for compliance.

Updated Feb 23, 2026
One-click install
npx skills add https://github.com/mcggEz/turbo-template --skill web-design-guidelines-mcggez
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/mcggEz/turbo-template/tree/main/.ruler/skills/web-design-guidelines
Command: npx skills add https://github.com/mcggEz/turbo-template --skill web-design-guidelines-mcggez

SYSTEM DOCUMENTATION & REQUIREMENTS

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 specified files against a comprehensive set of web interface guidelines.
  • Compliance Checking: Identifies deviations from best practices in UI code.
  • Use Case: A developer can use this skill to automatically audit a new component's code for accessibility and design consistency before it's merged.

Quick Start

Review the UI code in the file 'src/components/Button.tsx' against the latest 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 audit my UI code for accessibility and web standards?

To audit UI code for accessibility and web standards, you can use an automated review process that scans your specified front-end files against established web interface guidelines to identify deviations from best practices.

What does a front-end design review check for?

A front-end design review checks your UI code for compliance with web interface guidelines, identifying deviations from established design and accessibility best practices to prevent common UI/UX issues before merging.

Can I run a code audit on a specific front-end component file?

Yes, you can run a code audit on a specific front-end component file by specifying the file path, such as 'src/components/Button.tsx', allowing the review process to fetch external guidelines and apply them directly to that file.

When do I need to fetch external web interface guidelines?

You need to fetch external web interface guidelines when performing a code audit on your UI components, as the review process requires applying these external standards to your specified files to accurately identify compliance deviations.

What is the best way to ensure UI code meets design compliance?

The best way to ensure UI code meets design compliance is through an automated review that scans your files against a comprehensive set of web interface guidelines, automatically identifying any deviations from best practices.

Does automated design review replace manual UX testing?

Automated design review complements manual UX testing by scanning code against web interface guidelines to catch accessibility and design standard deviations early, but it focuses on code-level compliance rather than interactive user experience flows.