web-design-guidelines

Review UI code for web interface guideline compliance and accessibility.

61|3|Updated Feb 14, 2026
One-click install
npx skills add https://github.com/joelhooks/joelclaw --skill web-design-guidelines-joelhooks
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/joelhooks/joelclaw/tree/main/.agents/skills/web-design-guidelines
Command: npx skills add https://github.com/joelhooks/joelclaw --skill web-design-guidelines-joelhooks

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps ensure that web interface code adheres to established design and accessibility guidelines, preventing common UI/UX issues before deployment.

Core Features & Use Cases

  • Automated Code Review: Scans specified files against a set of predefined web interface guidelines.
  • Compliance Checking: Identifies deviations from best practices related to UI, accessibility, and design.
  • Use Case: Use this Skill to audit a new component's code before merging to ensure it meets the company's accessibility standards and design system.

Quick Start

Review the file 'src/components/Button.tsx' for compliance with web interface guidelines.

Frequently Asked Questions about web-design-guidelines

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

FAQPage Schema
How do I check UI code for accessibility and design compliance?

You can audit UI code for accessibility and design compliance by scanning specified front-end file paths against predefined web interface guidelines, identifying deviations from UX best practices before deployment.

What is a web interface design review for front-end components?

A web interface design review is an automated code audit that analyzes front-end file patterns to verify adherence to accessibility standards and design systems, preventing common UI and UX issues during development workflows.

Can I scan a specific component file for design system deviations?

Yes, you can scan a specific component file by specifying its path or pattern for review, allowing the tool to fetch external guideline definitions and analyze that single file's compliance with web guidelines.

Does this code review process work with standard web application workflows?

This code review process works within front-end development workflows for web applications by fetching external guideline definitions and auditing file paths to ensure UI code meets established accessibility standards before merging.

What are the limitations of automated UI compliance checking?

Automated UI compliance checking requires fetching external guideline definitions and analyzing specified file paths, meaning it cannot review undefined patterns and depends on predefined guidelines rather than detecting novel design or UX issues.