skills.rest
sidjamyl
sidjamylCOMMUNITY
Explore all skills by this author →
GitHub

web-design-guidelines

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

Updated Feb 26, 2026
Search Tags:#ui#code review#accessibility#web design#guidelines#ux
One-click install
npx skills add https://github.com/sidjamyl/GAMES-JTI- --skill web-design-guidelines-sidjamyl
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/sidjamyl/GAMES-JTI-/tree/main/.agents/skills/web-design-guidelines
Command: npx skills add https://github.com/sidjamyl/GAMES-JTI- --skill web-design-guidelines-sidjamyl

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 Code Review: Scans UI code files against a predefined set of web design and accessibility rules.
  • Compliance Checking: Identifies deviations from best practices, ensuring a higher standard of web development.
  • Use Case: When you need to quickly audit a new component's code for accessibility issues or ensure it aligns with your company's design system before merging.

Quick Start

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

Frequently Asked Questions about web-design-guidelines

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

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

To review UI code for web design and accessibility compliance, you can scan your front-end component files against established Web Interface Guidelines to identify deviations and ensure adherence to best practices. This automated code review checks rules for consistency and accessibility.

What is automated UI code compliance checking?▼

Automated UI code compliance checking scans front-end component files against a predefined set of web design and accessibility rules. It identifies deviations from established best practices to ensure higher development standards and improve overall design quality.

Can I audit a React component for accessibility issues before merging?▼

Yes, you can audit a React component for accessibility issues before merging by applying rule-based analysis to the file. This checks the UI code against external guideline definitions to ensure it aligns with your design system and established standards.

Does this front-end code review require fetching external guideline definitions?▼

Yes, this front-end code review requires fetching external guideline definitions to perform comprehensive rule-based analysis. It relies on fetching these predefined web interface guidelines to audit your component code for accessibility and design best practices.

What's the best way to ensure front-end code meets web interface guidelines?▼

The best way to ensure front-end code meets web interface guidelines is using an automated compliance checker. It audits component code against predefined accessibility and design rules, identifying deviations to maintain consistency and quality before merging.

Related Skills

Explore More Design & Creative Skills→
CrokilyCrokily
2

web-design-guidelines

Review UI code for compliance with Web Interface Guidelines.

Community
Intermediate
Nir-BhayNir-Bhay
19

web-design-guidelines

Review UI code for compliance with Web Interface Guidelines and accessibility standards.

Community
Intermediate
patrickhaahrpatrickhaahr

web-design-guidelines

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

Community
Basic
mcggEzmcggEz

web-design-guidelines

Review UI code against Web Interface Guidelines for compliance.

Community
Intermediate