skills.rest
FindMalek
FindMalekCOMMUNITY
Explore all skills by this author →
Website𝕏@foundmalekGitHub

web-design-guidelines

Audits frontend components for compliance with Web Interface Guidelines.

9|2|Updated Nov 10, 2025
Search Tags:#ui#consistency#accessibility#frontend#audit#design-review#web-guidelines
One-click install
npx skills add https://github.com/FindMalek/dukkani --skill web-design-guidelines-findmalek
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/FindMalek/dukkani/tree/main/.windsurf/skills/web-design-guidelines
Command: npx skills add https://github.com/FindMalek/dukkani --skill web-design-guidelines-findmalek

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Streamlines the validation of UI implementations against established Web Interface Guidelines, helping teams ensure accessible, consistent, and high-quality interfaces.

Core Features & Use Cases

  • Automated UI guideline checks against frontend codebases (React, Vue, plain HTML/CSS)
  • Accessibility and usability assessment aligned with the latest interface standards
  • Use Case: Quickly audit a stale component library to identify violations and generate a remediation plan

Quick Start

Run the web-design-guidelines review on your UI project to obtain a compliance report.

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 frontend codebase for UI accessibility and consistency?▼

You can audit UI codebases for accessibility and UX quality by running rule-based validation against Web Interface Guidelines, which checks frontend components, responsive design, and UX consistency to report findings in a concise file:line format.

What is a UI design audit and when do I need one for my web project?▼

A UI design audit validates frontend implementations against established Web Interface Guidelines to ensure accessible, consistent, and high-quality interfaces. You need one to identify violations in a stale component library and generate a remediation plan.

Does the UI accessibility audit work with Vue and plain HTML/CSS projects?▼

Yes, the UI accessibility audit works with React, Vue, and plain HTML/CSS projects. It applies rule-based validation to frontend components across these frameworks to assess accessibility and UX consistency.

How do I check my React components for UX consistency and accessibility violations?▼

Run a rule-based audit against fetched Web Interface Guidelines to check React components for UX consistency and accessibility violations. The validation reports compliance findings in a concise file:line format, highlighting areas needing remediation.

What is the best way to validate a stale component library against web guidelines?▼

The best way to validate a stale component library is to perform an automated UI guideline check against your frontend codebase. This applies rule-based validation to identify accessibility and usability violations, outputting a concise file:line compliance report.

Related Skills

Explore More Design & Creative Skills→
NagyViktNagyVikt
2

web-design-guidelines

Audit web interface code against centralized design and accessibility guidelines.

Community
Intermediate
matteotittamatteotitta
29

design-incident-response

Triage design remediation tasks from audit findings into prioritized action plans.

Community
Advanced
fanthusfanthus

frontend-design

Generate frontend interfaces with design guidance and HTML/CSS/JS or React code.

Community
Intermediate
SensLiaoSensLiao

qa-a11y-compliance

Scan web applications for WCAG 2.2 AA accessibility compliance.

Community
Advanced