skills.rest
bytedance
bytedanceOFFICIAL
Explore all skills by this author →
Website𝕏@ByteDanceOSSGitHub

web-design-guidelines

...

79.6k|10.9k|Updated May 7, 2025
Search Tags:#ui#code review#accessibility#web design#guidelines#ux
One-click install
npx skills add https://github.com/bytedance/deer-flow --skill web-design-guidelines-bytedance
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Design & Creative Skills→
kunhai-88kunhai-88

web-design-guidelines

Reviews web interface code for design and accessibility guideline compliance.

Community
Intermediate
leifericfleifericf
5

check-design

Review UI components for compliance with design language standards and UI experience targets.

Community
Advanced
jgwilljgwill
1

web-design-guidelines

Review web interface code for UX, accessibility, and design compliance.

Community
Intermediate
zivtechzivtech

ui-critic

Evaluate UI designs and live web interfaces for usability and WCAG 2.1 AA accessibility.

Official
Advanced