skills.rest
Takashi-Matsumura
Takashi-MatsumuraCOMMUNITY
Explore all skills by this author →
GitHub

web-design-guidelines

Review UI code against Web Interface Guidelines for accessibility and design compliance.

Updated Feb 22, 2026
Search Tags:#code quality#accessibility#ui review#design audit#ux#web guidelines
One-click install
npx skills add https://github.com/Takashi-Matsumura/lion-frame --skill web-design-guidelines-takashi-matsumura
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/Takashi-Matsumura/lion-frame/tree/main/.agents/skills/web-design-guidelines
Command: npx skills add https://github.com/Takashi-Matsumura/lion-frame --skill web-design-guidelines-takashi-matsumura

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill ensures that web interface code adheres to established best practices for design, accessibility, and user experience, preventing common pitfalls and improving overall quality.

Core Features & Use Cases

  • Automated Code Review: Scans specified files against a comprehensive set of web interface guidelines.
  • Best Practice Enforcement: Identifies deviations from accessibility standards, usability heuristics, and design principles.
  • Use Case: A developer can use this Skill to audit a new component's UI code before deployment, ensuring it meets the company's design system and accessibility requirements.

Quick Start

Review the file 'src/components/Button.tsx' for UI guideline 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 front-end UI code for accessibility and design compliance?▼

To audit front-end UI code, you can review your files against a fetched set of Web Interface Guidelines to identify deviations from accessibility standards and design best practices. This process scans specified component files to enforce usability heuristics.

What is a UI guideline compliance review for web interfaces?▼

A UI guideline compliance review is an automated code scanning process that checks front-end web interfaces against established accessibility standards, usability heuristics, and design principles to prevent common pitfalls and improve overall user experience quality.

How do I check a specific component file against web design guidelines?▼

You can check a specific component file by providing its path, such as 'src/components/Button.tsx', to the review process. The system fetches the latest guidelines from a specified URL and applies them to audit the provided file for compliance.

Does the UI review process require fetching guidelines from an external URL?▼

Yes, fetching the latest guidelines from a specified URL is required. This ensures the UI code review process applies the most current established web interface standards, accessibility rules, and design best practices to your provided files.

When do I need to run a design audit on my web components?▼

You need to run a design audit on your web components before deploying a new UI element. This ensures the user interface meets your company's design system requirements and adheres to established accessibility standards prior to release.

Related Skills

Explore More Design & Creative Skills→
gesmith0606gesmith0606

web-design-guidelines

Audit HTML and CSS files against Web Interface Guidelines.

Community
Intermediate
mcggEzmcggEz

web-design-guidelines

Review UI code against Web Interface Guidelines for compliance.

Community
Intermediate
gabriellpequenogabriellpequeno
8

web-design-guidelines

Enforce external UI guideline compliance during front-end design reviews and critiques.

Community
Basic
julianromlijulianromli

critique

Evaluate design and UX quality of web, mobile, and component interfaces.

Community
Advanced