web-design-guidelines

Apply Web Interface Guidelines to UI code and report accessibility gaps in file:line format.

1|Updated Feb 24, 2026

Search Tags:#ui #accessibility #frontend #review #web-guidelines #design-compliance #guidelines-source

Ready to run

npx skills add https://github.com/FlukeSupakorn/klin-app --skill web-design-guidelines-flukesupakorn

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/FlukeSupakorn/klin-app/tree/main/.agents/skills/web-design-guidelines
Command: npx skills add https://github.com/FlukeSupakorn/klin-app --skill web-design-guidelines-flukesupakorn

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill helps ensure UI code adheres to Web Interface Guidelines, enabling early detection of accessibility and usability gaps.

Core Features & Use Cases

Fetches and applies up-to-date guidelines from the official web interface sources.
Analyzes UI files to detect accessibility issues, color contrast, semantic structure, and interaction patterns.
Use Case: A design team reviews a component library to ensure it meets accessibility and usability standards before release.

Quick Start

Apply the guidelines to the target UI files by pointing the skill at your codebase.

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 frontend codebase for accessibility and UX compliance?▼

To audit UI code, you apply web interface guidelines to your frontend project files. This skill fetches up-to-date rules from official sources and evaluates your code to identify accessibility and usability gaps, outputting findings in a file:line format.

Can I review a design system component library for usability gaps?▼

Yes, you can review a design system or component library for usability gaps. The skill analyzes UI files to detect semantic structure, color contrast, and interaction pattern issues across frontend projects before release.

What is the best way to automatically detect color contrast issues in UI code?▼

The best way to detect color contrast issues is by evaluating your UI code against official web interface guidelines. The skill fetches these rules and scans your files to flag accessibility violations in a precise file:line format.

Does this accessibility review work with existing frontend design patterns?▼

Yes, the accessibility review works with existing frontend design patterns. The skill evaluates files or patterns you provide from your codebase, assessing them against fetched web guidelines to ensure your current UI meets compliance standards.

How are accessibility violations reported when reviewing UI files?▼

Accessibility violations are reported in a file:line format. After fetching and applying web interface guidelines to your UI code, the skill outputs specific findings that pinpoint exactly where semantic structure or interaction gaps occur.

Why do I need to fetch rules from a web guidelines source to review UI code?▼

Fetching rules from a web guidelines source ensures your UI review uses the most up-to-date accessibility standards. The skill retrieves official compliance rules dynamically to accurately evaluate your frontend files for current usability gaps.