skills.rest
baotoq
baotoqCOMMUNITY
Explore all skills by this author →
GitHub

design-web-guidelines

Review UI code for compliance with Web Interface Guidelines.

Updated Jan 9, 2025
Search Tags:#accessibility#frontend#ui review#design audit#ux review#web guidelines
One-click install
npx skills add https://github.com/baotoq/go-shortener --skill design-web-guidelines
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-web-guidelines
Source: https://github.com/baotoq/go-shortener/tree/main/.agents/skills/design-web-guidelines
Command: npx skills add https://github.com/baotoq/go-shortener --skill design-web-guidelines

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 files for compliance with a predefined set of web design and accessibility rules.
  • Guideline Fetching: Automatically retrieves the latest guidelines from a specified source to ensure reviews are up-to-date.
  • Use Case: A developer can use this skill to quickly audit a new component's HTML and CSS to ensure it meets accessibility standards before merging it into the main branch.

Quick Start

Use the design-web-guidelines skill to review the file 'src/components/Button.jsx' for compliance.

Frequently Asked Questions about design-web-guidelines

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I audit frontend code for web accessibility and UI design compliance?▼

To audit frontend code for accessibility and UI compliance, you can review UI component files against established Web Interface Guidelines to automatically check for design best practices and accessibility standards.

What is a UI review for web guidelines and when do I need it?▼

A UI review for web guidelines is an automated code check that scans frontend files for adherence to accessibility rules and design standards, needed before merging new UI components to ensure user experience consistency.

Can I use a design audit skill to check specific frontend component files?▼

Yes, you can perform a design audit on specific frontend component files by specifying the file path, allowing the review process to apply web interface rules directly to individual UI code files.

How do I ensure my UI code review uses the latest web accessibility standards?▼

To ensure your UI code review uses the latest web accessibility standards, the review process automatically fetches external guideline definitions from a specified source before applying them to your frontend code.

What's the best way to automate UX review for frontend development workflows?▼

The best way to automate UX review in frontend workflows is to scan component code against fetched web guidelines, ensuring adherence to established accessibility and design best practices before integration.

Are there limitations to automated web guidelines compliance checking?▼

Automated web guidelines compliance checking is limited to scanning provided UI code files and requires fetching external guideline definitions, meaning it cannot review runtime visual rendering or dynamic states outside the code.

Related Skills

Explore More Design & Creative Skills→
deangilmoreremixdeangilmoreremix

web-design-guidelines

Review UI files against web design and accessibility guidelines.

Community
Intermediate
yckkkkyckkkk
1

normalize

Align frontend components to design system tokens and patterns.

Community
Advanced
rahmatullahbossrahmatullahboss

web-design-guidelines

Analyze web UI code against interface standards for accessibility and design issues.

Community
Intermediate
timothyshentimothyshen

design-guard

Run multi-layer UI/UX reviews covering accessibility and design system consistency.

Community
Advanced