web-design-guidelines

Audit React/TypeScript web interfaces against Web Interface Guidelines for UI, UX, and accessibility issues.

Updated Mar 3, 2026
One-click install
npx skills add https://github.com/createtree2017/createtree-office --skill web-design-guidelines-createtree2017
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/createtree2017/createtree-office/tree/main/.agents/skills/web-design-guidelines
Command: npx skills add https://github.com/createtree2017/createtree-office --skill web-design-guidelines-createtree2017

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps you catch UI and UX issues by checking your web interface against a vetted set of interface best-practice rules.

Core Features & Use Cases

  • Guideline-based UI auditing: Compares your provided files against Web Interface Guidelines to surface rule violations.
  • Targeted review workflow: Works when you specify a file, set of files, or a pattern to focus the audit on the most relevant UI areas.
  • Actionable findings: Produces results in a compact file:line format so you can quickly locate and fix problems.

Quick Start

Use web-design-guidelines to audit the UI code in the file you provide.

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 React codebase for UI and accessibility compliance issues?▼

To audit your React codebase for accessibility compliance, provide your frontend files or patterns to the review process, which scans them against Web Interface Guidelines and outputs findings in a file:line format for quick fixes.

What is a UI audit and how does it find best practice violations in frontend code?▼

A UI audit scans frontend TypeScript files against vetted web best practices, checking for UX and accessibility compliance issues. It compares your provided code patterns to guideline rules and surfaces violations in a compact file:line format for quick location.

Can I review specific files or directories in my TypeScript project for accessibility issues?▼

Yes, you can perform a targeted review of specific files or directories by specifying a file, a set of files, or a pattern input, focusing the accessibility audit only on the most relevant UI areas of your TypeScript project.

What's the best way to check existing web interfaces against web best practices?▼

The best way to check existing web interfaces is using a guideline-based UI auditing approach that fetches the latest rules and scans your provided files, producing actionable findings that pinpoint exactly where UX and accessibility violations occur.

Do I need to provide my entire frontend codebase to perform a UX review?▼

You do not need to provide your entire frontend codebase to perform a UX review. You can specify a file, a set of files, or a pattern to focus the audit on the most relevant UI areas and limit the scope of the scan.

How are accessibility compliance issues reported when scanning frontend code?▼

Accessibility compliance issues are reported in a compact file:line format, allowing you to quickly locate and fix the exact UI, UX, or best practice violations found within your provided frontend files.