skills.rest
wildanjr19
wildanjr19COMMUNITY
Explore all skills by this author →
GitHub

web-design-guidelines

Check frontend code against Web Interface Guidelines for UI non-compliance.

2|Updated Apr 7, 2026
Search Tags:#accessibility#a11y#frontend#code-review#design-review#ui-review#web-guidelines
One-click install
npx skills add https://github.com/wildanjr19/semar-kos-finder --skill web-design-guidelines-wildanjr19
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/wildanjr19/semar-kos-finder/tree/main/.agents/skills/web-design-guidelines
Command: npx skills add https://github.com/wildanjr19/semar-kos-finder --skill web-design-guidelines-wildanjr19

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Helps developers and designers ensure user interfaces comply with established web interface guidelines, reducing usability and accessibility gaps.

Core Features & Use Cases

  • Automated guideline checks: verify UI code against accessibility, contrast, keyboard navigation, and responsive design rules.
  • Issue localization: output specific file and line references for each violation (file:line).
  • Guideline-driven feedback: describe what needs to be changed to meet standards and best practices.

Quick Start

Provide the UI codebase to scan and run the guideline checks to receive a compliance report.

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 frontend code for accessibility and contrast compliance?▼

To audit frontend code for accessibility and contrast compliance, scan your React or plain HTML/CSS codebase against established web interface guidelines. The process returns specific file and line references detailing each usability and accessibility violation.

What is a UI code review against web guidelines?▼

A UI code review against web guidelines is the process of checking frontend code for accessibility, contrast, keyboard navigation, and responsive design issues. It provides guideline-driven feedback describing exactly what changes are needed to meet standards.

Can I use this to check React and plain HTML/CSS for keyboard navigation issues?▼

Yes, you can check React and plain HTML/CSS codebases for keyboard navigation issues. The review applies accessibility and navigation rules to your specified files to detect UI non-compliance across these frontend environments.

How do I get file and line references for accessibility violations in my code?▼

To get file and line references for accessibility violations, run automated guideline checks on your UI codebase. The compliance report localizes each issue using a standard file:line output format for direct navigation.

What's the best way to ensure responsive design compliance in a frontend codebase?▼

The best way to ensure responsive design compliance is to verify your frontend code against web interface guidelines. This automated check identifies non-compliance and returns findings with specific file and line references for each violation.

Related Skills

Explore More Design & Creative Skills→
ehylandehyland

web-design-guidelines

Evaluate HTML, CSS, and JavaScript UI code against Web Interface Guidelines.

Community
Intermediate
FnSK4R17sFnSK4R17s
1

web-design-guidelines

Audit UI code for Web Interface Guidelines compliance and report violations.

Community
Intermediate
Jonathan0823Jonathan0823
7

frontend-design

Translate design direction into React, Vue, HTML/CSS, or Next.js frontend code.

Community
Basic
hdkz-devhdkz-dev

accessibility-ally

Audit web applications for semantic HTML, keyboard navigation, and color contrast issues.

Community
Intermediate