web-design-guidelines

Enforce Web Interface Guidelines compliance across UI code with file:line findings.

6.2k|818|Updated Feb 26, 2023
One-click install
npx skills add https://github.com/JimmyLv/BibiGPT-v1 --skill web-design-guidelines-jimmylv
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/JimmyLv/BibiGPT-v1/tree/main/.agents/skills/web-design-guidelines
Command: npx skills add https://github.com/JimmyLv/BibiGPT-v1 --skill web-design-guidelines-jimmylv

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill helps teams ensure UI code adheres to current Web Interface Guidelines, reducing design debt and accessibility issues by automatically validating against established rules.

Core Features & Use Cases

  • Fetch the latest Web Interface Guidelines from the official source and apply them to target files.
  • Read specified files or patterns to perform rule checks and produce concise, line-referenced findings.
  • Use for UI reviews, accessibility audits, UX validation, and design conformity checks across projects.

Quick Start

Provide the file or pattern to review and I will fetch the latest guidelines, apply them, and return the results in the standard file:line format.

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 web accessibility and design standards?

To audit UI code for web accessibility and design standards, provide your target files or patterns. The skill fetches the latest official Web Interface Guidelines, applies the rules to your code, and outputs findings in a concise file:line format.

What is the best way to automate UX validation and design conformity checks across a web project?

Automating UX validation and design conformity checks involves fetching established web standards and applying them directly to your UI components. This process identifies design debt and outputs line-referenced findings for immediate code review.

Can I perform a design review on specific UI components without checking the entire web project?

Yes, you can perform a design review on specific UI components by providing the designated file or pattern. The skill reads only those specified targets, applies the web interface guidelines, and returns targeted findings.

How does an automated code review handle web interface guidelines compliance?

An automated code review handles web interface guidelines compliance by fetching current rules from the official source, validating target UI code against them, and generating terse, line-referenced findings to highlight violations.

Do I need to manually configure web standards rules to run an accessibility check on my UI code?

No, you do not need to manually configure web standards rules. The skill automatically fetches the latest Web Interface Guidelines from the official source before applying them to your UI code for accessibility checks and UX audits.

What format should I expect when reviewing accessibility check findings for my UI components?

You should expect findings in a terse file:line format when reviewing accessibility checks. This concise output references exact locations in your UI code where web interface guidelines violations occur, facilitating quick debugging.