skills.rest
7loro
7loroCOMMUNITY
Explore all skills by this author →
GitHub

web-design-guidelines

Audit UI code against Web Interface Guidelines and report findings in file:line format.

1|Updated Aug 25, 2024
Search Tags:#accessibility#UI#audit#code-review#web-design#design-guidelines
One-click install
npx skills add https://github.com/7loro/dotfiles --skill web-design-guidelines-7loro
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/7loro/dotfiles/tree/main/dot_config/agents/skills/web-design-guidelines
Command: npx skills add https://github.com/7loro/dotfiles --skill web-design-guidelines-7loro

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps ensure UI code conforms to Web Interface Guidelines, saving time on manual reviews and reducing accessibility risks.

Core Features & Use Cases

  • Guideline Compliance Checks: Compare UI code against the latest guidelines fetched from the official source.
  • On-Demand Review: Accepts file paths or patterns to review specific UI components and pages.
  • Actionable Findings: Outputs results in a terse file:line format for quick remediation.
  • Guidelines Source: Fetches fresh rules before each review to guarantee up-to-date checks.

Quick Start

Use the web-design-guidelines skill to review UI files by providing the target files or patterns. The skill fetches the latest guidelines from the source, applies all rules, and outputs findings in the 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 UI code for accessibility and design guidelines?▼

You can audit UI code by providing file paths or patterns for review. The skill fetches the latest Web Interface Guidelines via WebFetch and outputs findings in a terse file:line format for quick remediation.

What is the best way to check web design compliance for a component library?▼

The best way to check web design compliance for a component library is to pass file paths to the reviewer. It fetches fresh rules from the official source and outputs actionable accessibility and consistency findings in a file:line format.

Does this UI audit tool fetch updated accessibility rules automatically?▼

Yes, the UI audit fetches updated accessibility rules automatically. It retrieves the latest guidelines from the official source via WebFetch before each review to guarantee up-to-date compliance checks.

How do I review specific web pages for accessibility issues?▼

To review specific web pages for accessibility issues, provide the target file paths or patterns. The review applies all fetched rules and outputs the specific accessibility findings in a file:line format.

What format are accessibility audit findings reported in?▼

Accessibility audit findings are reported in a terse file:line format. This format points directly to the exact locations of guideline violations in your UI code to enable quick remediation.

Related Skills

Explore More Design & Creative Skills→
FlorianBruniauxFlorianBruniaux
77

web-design-guidelines

Audit UI code against web interface guidelines and report violations.

Community
Intermediate
ArcReelArcReel
3.9k

web-design-guidelines

Audit UI code against Web Interface Guidelines and report violations in file:line format.

Official
Intermediate
ev3rlitev3rlit

web-design-guidelines

Audit UI code against fetched Web Interface Guidelines and output file:line findings.

Community
Intermediate
OctavianTocanOctavianTocan
3

web-design-guidelines

Review UI code against fetched Web Interface Guidelines for compliance.

Community
Intermediate