web-design-guidelines

Review UI code against Web Interface Guidelines and report violations.

2|1|Updated Feb 2, 2026
One-click install
npx skills add https://github.com/fadilsflow/kreasi --skill web-design-guidelines-fadilsflow
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/fadilsflow/kreasi/tree/main/.agents/skills/web-design-guidelines
Command: npx skills add https://github.com/fadilsflow/kreasi --skill web-design-guidelines-fadilsflow

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill ensures that user interface code adheres to established Web Interface Guidelines, improving consistency, accessibility, and overall user experience.

Core Features & Use Cases

  • Compliance Review: Automatically checks UI code against a predefined set of web design and accessibility rules.
  • Automated Auditing: Identifies specific lines of code that violate guidelines, providing actionable feedback.
  • Use Case: Developers can use this skill to audit their front-end code before deployment, catching potential accessibility issues or design inconsistencies early in the development cycle.

Quick Start

Use the web-design-guidelines skill to review the file 'src/components/Button.jsx' for 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 my UI code for web design compliance?

To audit UI code for compliance, you can use a skill that fetches the latest web interface guidelines and analyzes specific files to identify violations. It automatically checks your code against predefined accessibility and design rules, flagging exact lines that need correction.

What is an automated UX review for web development?

An automated UX review for web development checks your user interface code against predefined accessibility and design rules to ensure consistency and best practices. It identifies specific lines of code that violate guidelines, providing actionable feedback to improve overall user experience.

Can I check my front-end files for accessibility issues before deployment?

Yes, you can check front-end files for accessibility issues by running a compliance review on specific components like 'src/components/Button.jsx'. The review compares your code against the latest web guidelines and flags exact lines where accessibility standards are violated.

Does this web guidelines review work with specific UI frameworks?

The review process analyzes specified UI code files directly, meaning it can be applied to various front-end frameworks as long as you provide the file paths. It focuses on the code structure and compliance with web interface guidelines rather than requiring a specific framework dependency.

How do I identify which lines of code violate web accessibility rules?

To identify lines of code that violate web accessibility rules, run an automated design audit on your files. The audit fetches the latest web interface guidelines and pinpoints the exact lines in your code that fail to meet the established accessibility and design standards.