web-design-guidelines

Evaluate UI files against Web Interface Guidelines for accessibility, contrast, typography, and layout.

Updated Jan 30, 2026
One-click install
npx skills add https://github.com/gensart-projs/cp-kit --skill web-design-guidelines-gensart-projs
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/gensart-projs/cp-kit/tree/main/packages/cp-toolkit/templates/skills/web-design-guidelines
Command: npx skills add https://github.com/gensart-projs/cp-kit --skill web-design-guidelines-gensart-projs

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill helps teams verify that UI code adheres to Web Interface Guidelines, ensuring accessible, consistent interfaces across projects.

Core Features & Use Cases

  • Fetch latest guidelines from the source URL and apply them to your UI files.
  • Read target files or patterns and validate against all rules before deployment.
  • Use case: you want to ensure your web components meet accessibility and design standards before shipping.

Quick Start

Provide the UI files or patterns to review and the skill will return guideline conformance.

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 UI code for web accessibility and design standards compliance?

You can audit UI code for web interface guidelines by providing target UI assets and code patterns. The skill fetches up-to-date rules from its source URL, validates accessibility, contrast, typography, and layout, and reports conformance findings in a concise file:line format.

What is a web interface guidelines audit and when do I need to run one?

A web interface guidelines audit evaluates your UI assets and code against the latest accessibility, contrast, typography, and layout rules. You need this process before deployment to verify that web components meet design standards and deliver consistent, accessible interfaces.

How do I check if my web components meet accessibility contrast and typography rules?

To check if web components meet accessibility contrast and typography rules, submit your UI files for an automated review. The system fetches the latest web interface guidelines, applies checks to target files, and identifies conformance issues directly by file and line number.

Does the UI review process require any external dependencies or frameworks?

The UI review process requires no external dependencies or frameworks. You simply provide the target UI files or patterns, and the skill independently fetches the latest web interface guidelines from its source URL to validate accessibility, contrast, typography, and layout rules.

Can I use this to verify design standards across multiple web project files at once?

Yes, you can verify design standards across multiple web project files by providing file patterns for review. The system reads the specified UI assets, validates them against fetched web interface guidelines, and reports conformance findings in a concise file:line format before deployment.

How are accessibility and layout audit findings reported in the review output?

Accessibility and layout audit findings are reported in a concise file:line format. This output identifies exactly where target UI files violate the fetched web interface guidelines, allowing you to quickly locate and resolve design standard issues before deployment.