skills.rest
yunseo-kim
yunseo-kimCOMMUNITY
Explore all skills by this author →
Website𝕏@yunse0_kimGitHub

web-design-guidelines

Audit UI code against web interface guidelines and output violations in file:line format.

1|1|Updated Feb 15, 2026
Search Tags:#code review#accessibility#frontend#audit#ux#web-design
One-click install
npx skills add https://github.com/yunseo-kim/agent-toolbox --skill web-design-guidelines-yunseo-kim
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/yunseo-kim/agent-toolbox/tree/main/catalog/skills/web-design-guidelines
Command: npx skills add https://github.com/yunseo-kim/agent-toolbox --skill web-design-guidelines-yunseo-kim

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 user experience across applications.

Core Features & Use Cases

  • Compliance Auditing: Checks UI code against over 100 rules covering accessibility, performance, UX, forms, animation, typography, and more.
  • Automated Review: Provides a structured, file-and-line-number output of violations.
  • Use Case: When developing a new feature, use this Skill to automatically scan the UI code for potential accessibility issues or performance bottlenecks before deployment.

Quick Start

Use the web-design-guidelines skill to review the code in 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 audit my UI code for web design guidelines and accessibility?▼

To audit UI code for web design guidelines, scan your specified files or patterns to identify violations across accessibility, performance, UX, forms, animation, and typography. The audit outputs findings in a terse file:line format.

What is the best way to check frontend components for accessibility compliance?▼

Checking frontend components for accessibility compliance involves scanning the UI code against over 100 established web interface rules. This automated review provides a structured, file-and-line-number output of any violations found.

How do I review my frontend code for UX and performance bottlenecks?▼

Reviewing frontend code for UX and performance bottlenecks requires running an automated compliance scan against bundled web interface guidelines. It identifies performance issues and outputs structured findings indicating exact file and line numbers.

Can I use an automated code review to check forms and typography in my web application?▼

Yes, you can use an automated code review to check forms and typography. The audit scans UI code against a comprehensive ruleset covering forms, animation, and typography, returning a structured list of violations.

What format does the web design guidelines audit output use for identified violations?▼

The web design guidelines audit outputs identified violations in a terse file:line format. This structured output maps directly to the scanned UI code, pinpointing exact locations of accessibility, UX, or performance issues.

Do I need to configure anything to audit UI code for web interface guidelines?▼

No configuration is needed to audit UI code for web interface guidelines beyond specifying the target files or patterns. The Skill utilizes a bundled reference document containing the complete ruleset to scan your code directly.

Related Skills

Explore More Software Engineering Skills→
vuminhieuvuminhieu

web-design-guidelines

Audit UI code against Web Interface Guidelines and report file:line findings.

Community
Intermediate
chris-c-thomaschris-c-thomas
3

web-design-guidelines

Review UI code against official Web Interface Guidelines and report violations in file:line format.

Community
Intermediate
murphytruemanmurphytrueman
155

cicd-integration

Generate CI/CD pipeline configurations for design system quality checks.

Community
Advanced
eventua11yeventua11y
1

reviewing-web-awesome

Validate Web Awesome 3 component accessibility in Eventua11y against WCAG 2.2 AA.

Official
Intermediate