web-design-guidelines

Review UI code for compliance with Web Interface Guidelines.

Updated Jul 15, 2023
One-click install
npx skills add https://github.com/ulasalyesil/personal-website-v2 --skill web-design-guidelines-ulasalyesil
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/ulasalyesil/personal-website-v2/tree/main/.cursor/skills/web-design-guidelines
Command: npx skills add https://github.com/ulasalyesil/personal-website-v2 --skill web-design-guidelines-ulasalyesil

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps ensure that user interface code adheres to established web interface guidelines, improving consistency, accessibility, and overall quality.

Core Features & Use Cases

  • Compliance Checking: Audits UI code against a defined set of best practices and rules.
  • Automated Review: Fetches the latest guidelines and applies them to specified files or patterns.
  • Use Case: When you need to ensure a new component or a set of UI files meets your team's design standards before merging.

Quick Start

Use the web-design-guidelines skill to review the accessibility of the components in the 'src/components' directory.

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

Auditing UI code for accessibility involves reviewing user interface elements against established web interface guidelines. This checks your files to ensure adherence to best practices across web projects.

What is a web design audit and when do I need it?

A web design audit is a compliance check that reviews UI code against a defined set of best practices. You need it to improve consistency, accessibility, and overall quality before merging new components.

How do I check accessibility best practices for components in a specific directory?

To check accessibility best practices for components, you apply rule sets to specified file paths or patterns like the 'src/components' directory. This fetches external guideline documents to evaluate your UI code.

Does this UI review process require fetching external documents?

Yes, this UI review process requires fetching external guideline documents. It retrieves these guidelines to apply rule sets to your specified file paths or patterns during the compliance checking phase.

What is the best way to ensure UI files meet team design standards before merging?

The best way to ensure UI files meet team design standards is automating a review that fetches the latest guidelines and applies them to your code. This verifies new components match established rules before merge.