skills.rest
questpie
questpieOFFICIAL
Explore all skills by this author →
Website𝕏@questpieGitHub

web-design-guidelines

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
One-click install
npx skills add https://github.com/questpie/questpie --skill web-design-guidelines-questpie
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Design & Creative Skills→
mftsmfts
8.9k

web-design-guidelines

Review UI code against web interface guidelines fetched from a URL.

Community
Basic
nweiinweii
7

web-design-guidelines

Audit HTML, CSS, and JavaScript UI code against Web Interface Guidelines.

Community
Intermediate
lyzno1lyzno1
1

web-design-guidelines

Audit UI code against current Web Interface Guidelines for accessibility and consistency.

Community
Basic
OKHP3OKHP3
2

web-design-guidelines

Review UI code for compliance with Web Interface Guidelines and accessibility.

Community
Intermediate