web-design-guidelines

Review UI code files for compliance with Web Interface Guidelines.

Updated Mar 5, 2026
One-click install
npx skills add https://github.com/kyirexy/dearclaw --skill web-design-guidelines-kyirexy
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/kyirexy/dearclaw/tree/main/skills/public/web-design-guidelines
Command: npx skills add https://github.com/kyirexy/dearclaw --skill web-design-guidelines-kyirexy

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires WebFetch, and 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 Compliance Checking: Scans UI code files against a predefined set of web design and accessibility rules.
  • Guideline Fetching: Automatically retrieves the latest guidelines from a specified source URL before each review.
  • Use Case: A developer can use this skill to quickly audit a new component's code for accessibility issues and adherence to design best practices before merging it into the main codebase.

Quick Start

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

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

To audit UI code for accessibility and compliance, you can review files against established web interface guidelines. This skill fetches the latest rules from a remote URL and applies them to specified front-end files to detect violations.

How do I check front-end components for web design best practices?

Checking front-end components for web design best practices involves scanning code files against predefined rules. This skill automates the audit by fetching guidelines from a remote source and evaluating your specified file patterns.

Can I review specific file patterns for UI compliance?

Yes, you can review specific file patterns for UI compliance. The skill applies defined web interface rules to specified front-end files or patterns, ensuring targeted automated code audits for your components.

What is the best way to automate accessibility checks before merging code?

Automating accessibility checks before merging requires a tool that fetches the latest guidelines and scans your code. This skill retrieves rules from a specified URL and audits your components to ensure adherence to best practices.

Do I need a remote URL to perform an automated UI code review?

Yes, a remote source URL is required. The skill automatically retrieves the latest web interface guidelines from the specified URL before applying all defined accessibility and design rules to your front-end files.

Does this automated code audit work with standard front-end development workflows?

Yes, this automated code audit integrates into front-end development workflows. It reviews your UI code files for adherence to accessibility and design best practices, improving consistency before components are merged into the main codebase.