web-design-guidelines

Name: web-design-guidelines
Availability: InStock
Author: QUESTPIE

Review UI code files against fetched Web Interface Guidelines.

5|3|Updated Dec 15, 2025

Search Tags:#design #ui #code review #accessibility #guidelines #web interface

Ready to run

npx skills add https://github.com/questpie/questpie --skill web-design-guidelines-questpie

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/questpie/questpie/tree/main/.opencode/skill/web-design-guidelines
Command: npx skills add https://github.com/questpie/questpie --skill web-design-guidelines-questpie

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill helps ensure that user interface code adheres to established Web Interface Guidelines, improving consistency, accessibility, and overall design quality.

Core Features & Use Cases

Automated Compliance Checks: Scans specified files against a set of predefined design and accessibility rules.
Guideline Fetching: Automatically retrieves the latest guidelines from a remote source before performing checks.
Use Case: A developer can use this Skill to audit a new component's code against the company's official design system before it's merged, catching potential issues early.

Quick Start

Review 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 accessibility and design compliance?▼

You can audit UI code for accessibility and design compliance by fetching the latest Web Interface Guidelines and applying them to specified files. This automated review scans components to detect violations and ensures your user interface meets established standards.

What is a UI code review against web interface guidelines?▼

A UI code review against web interface guidelines is an automated audit that evaluates frontend components for compliance with predefined design and accessibility rules. It retrieves external markdown content defining these rules to evaluate if your code meets best practices.

Can I review a specific component file for design system adherence?▼

Yes, you can review a specific component file for design system adherence by specifying the file path during the audit. The compliance check scans that individual file against the fetched rules to catch potential design and accessibility issues.

Do I need to manually provide the rules for a UX review?▼

No, you do not need to manually provide the rules for a UX review. The compliance check automatically fetches the latest guidelines from a remote source and retrieves the predefined output formats before applying them to your UI code.

When do I need an automated design audit for web interfaces?▼

You need an automated design audit for web interfaces when you want to ensure new UI code adheres to company standards before merging. It catches accessibility issues and design inconsistencies early by checking components against best practices.