skills.rest
Yusei-SHIRAISHI
Yusei-SHIRAISHICOMMUNITY
Explore all skills by this author →
GitHub

web-design-guidelines

Review UI code for compliance with Web Interface Guidelines.

Updated Apr 9, 2019
Search Tags:#design#ui#code review#accessibility#guidelines#ux
One-click install
npx skills add https://github.com/Yusei-SHIRAISHI/my_dotfiles --skill web-design-guidelines-yusei-shiraishi
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/Yusei-SHIRAISHI/my_dotfiles/tree/main/.codex/skills/web-design-guidelines
Command: npx skills add https://github.com/Yusei-SHIRAISHI/my_dotfiles --skill web-design-guidelines-yusei-shiraishi

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps ensure that user interface code adheres to established web design best practices and accessibility standards, preventing common design flaws.

Core Features & Use Cases

  • Automated Code Review: Scans UI code against a predefined set of web interface guidelines.
  • Compliance Checking: Identifies deviations from accessibility and design best practices.
  • Use Case: When you've finished a new feature's UI, use this skill to "review my UI" to catch any potential design or accessibility issues before launch.

Quick Start

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

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 guideline compliance?▼

UI code review for web interface guidelines checks front-end files against external accessibility standards, parsing components like JSX to identify rule adherence and catch potential design flaws before launch.

How do I automate front-end code review for web design best practices?▼

Automating front-end code review for web design best practices involves using a tool that parses your UI code against a predefined set of external guidelines, detecting accessibility issues and design deviations automatically.

Can I check specific front-end component files for accessibility issues?▼

Yes, you can check specific front-end component files for accessibility issues by specifying the file path, such as 'src/components/Button.jsx', for the review tool to parse and validate against web interface guidelines.

When do I need to run a web interface guideline compliance check?▼

You need to run a web interface guideline compliance check after finishing a new feature's UI, ensuring that the front-end code adheres to accessibility standards and design best practices before launch.

What limitations exist when scanning UI code for design guideline deviations?▼

A key limitation when scanning UI code for design guideline deviations is the requirement to fetch external guidelines, meaning the review relies on the availability and parsing accuracy of those predefined external rule sets.

Related Skills

Explore More Software Engineering Skills→
uni-helperuni-helper
95

web-design-guidelines

Analyze UI code for compliance with Web Interface Guidelines.

Official
Intermediate
CallMeLuigiv2CallMeLuigiv2

web-design-guidelines

Audit UI code against current Web Interface Guidelines for accessibility and UX compliance.

Community
Basic
sidjamylsidjamyl

web-design-guidelines

Review UI code files against Web Interface Guidelines for accessibility and design compliance.

Community
Intermediate
Citrus-bitCitrus-bit
135

web-design-guidelines

Review UI code against the Web Interface Guidelines and output file:line violation reports.

Community
Intermediate