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.