web-design-guidelines

...

79.6k|10.9k|Updated May 7, 2025

Search Tags:#ui #code review #accessibility #web design #guidelines #ux

Ready to run

npx skills add https://github.com/bytedance/deer-flow --skill web-design-guidelines-bytedance

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/bytedance/deer-flow/tree/main/skills/public/web-design-guidelines
Command: npx skills add https://github.com/bytedance/deer-flow --skill web-design-guidelines-bytedance

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 UI code against a predefined set of web design best practices.
Accessibility Auditing: Identifies potential accessibility issues within the code.
Design Consistency: Helps maintain a uniform look and feel across web interfaces.
Use Case: A developer can use this skill to quickly audit a new component's code before merging to ensure it meets the company's design system standards.

Quick Start

Use the web-design-guidelines skill to review the accessibility of the file 'button.js'.

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 front-end code for web design compliance?▼

To audit front-end code for web design compliance, you can review specified files or patterns against predefined Web Interface Guidelines to identify accessibility issues and ensure design consistency.

Can I check a specific component file for accessibility issues?▼

Yes, you can check a specific component file like 'button.js' for accessibility issues by fetching external guidelines and applying them directly to the specified file.

What is automated UI code review for accessibility and best practices?▼

Automated UI code review for accessibility and best practices is the process of scanning user interface code against established web design guidelines to improve consistency and overall design quality.

Does this web design review work with my front-end development workflow?▼

Yes, this web design review applies to front-end development workflows, allowing developers to quickly audit new component code before merging to ensure it meets design system standards.

What's the best way to ensure UI code meets web standards before merging?▼

The best way to ensure UI code meets web standards before merging is to run an automated compliance check that scans the code for accessibility issues and design consistency.

Why does my user interface code fail design consistency checks?▼

User interface code fails design consistency checks when it does not adhere to established Web Interface Guidelines, which can be identified by auditing the code for compliance and accessibility issues.