skills.rest
DanielShuguang
DanielShuguangCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

web-design-guidelines

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

1|Updated Jul 30, 2023
Search Tags:#ui#accessibility#design review#code audit#ux#web guidelines
One-click install
npx skills add https://github.com/DanielShuguang/tool-box --skill web-design-guidelines-danielshuguang
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/DanielShuguang/tool-box/tree/main/.trae/skills/web-design-guidelines
Command: npx skills add https://github.com/DanielShuguang/tool-box --skill web-design-guidelines-danielshuguang

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 user experience.

Core Features & Use Cases

  • Automated Code Review: Scans UI code against a predefined set of best practices and accessibility standards.
  • Compliance Checking: Verifies adherence to guidelines, flagging potential issues.
  • Use Case: When you need to ensure a new feature's UI meets company design standards or accessibility requirements before deployment.

Quick Start

Review the UI code in the 'src/components' directory 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 audit my UI code for web design guidelines compliance?▼

To audit UI code, fetch the latest web interface guidelines and review specified files for best practices. This process identifies accessibility and design issues, outputting findings in a terse file:line format for quick remediation.

What does an automated UI code review check for?▼

An automated UI code review checks for compliance with web interface guidelines, flagging potential accessibility issues and design inconsistencies. It ensures adherence to best practices by verifying code against predefined standards.

Can I scan specific component directories for accessibility issues?▼

Yes, you can scan specific component directories for accessibility issues by specifying the target path like 'src/components'. The review checks the UI code within those files against web design guidelines.

How are UI compliance findings reported?▼

UI compliance findings are reported in a terse file:line format. This structure pinpoints exactly where the UI code violates web interface guidelines, ensuring quick identification and resolution of accessibility and design issues.

Do I need external dependencies to perform a web design code audit?▼

No external dependencies are required to perform a web design code audit. The review operates independently by fetching the latest guidelines and analyzing your UI code directly against those accessibility and design standards.

Related Skills

Explore More Design & Creative Skills→
wellnessbrotherjay-debugwellnessbrotherjay-debug

web-design-guidelines

Review UI code for Web Interface Guidelines compliance and report findings in file:line format.

Community
Intermediate
kolodachkolodach

web-design-guidelines

Review UI code against current web interface guidelines and report file:line violations.

Community
Intermediate
apexradiusapexradius

a11y-check

Audit web content accessibility against WCAG 2.2 AA standards.

Official
Advanced
samuelross99samuelross99
1

web-design-guidelines

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

Community
Intermediate