skills.rest
Cancey-Dejean
Cancey-DejeanCOMMUNITY
Explore all skills by this author →
GitHub

web-design-guidelines

Review UI code against Web Interface Guidelines for compliance.

Updated Nov 3, 2024
Search Tags:#accessibility#ui review#design audit#code compliance#ux review#web guidelines
One-click install
npx skills add https://github.com/Cancey-Dejean/vue-storybook-starter-clean --skill web-design-guidelines-cancey-dejean
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/Cancey-Dejean/vue-storybook-starter-clean/tree/main/.agents/skills/web-design-guidelines
Command: npx skills add https://github.com/Cancey-Dejean/vue-storybook-starter-clean --skill web-design-guidelines-cancey-dejean

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 design quality.

Core Features & Use Cases

  • Automated Code Review: Scans UI code files against a defined set of best practices and guidelines.
  • Compliance Checking: Identifies deviations from accessibility, UX, and design standards.
  • Use Case: A developer can use this Skill to audit a new component's code before merging, ensuring it meets the project's design system and accessibility requirements.

Quick Start

Use the web-design-guidelines skill to review the file 'src/components/Button.vue'.

Frequently Asked Questions about web-design-guidelines

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I run an automated design audit on my UI code?▼

To run an automated design audit, this Skill fetches the latest Web Interface Guidelines and scans your local UI code files to identify deviations from established design and accessibility standards.

Can I check my Vue components for accessibility compliance?▼

Yes, you can check Vue components for accessibility compliance by specifying the file path, such as 'src/components/Button.vue', and the Skill will process it against the fetched web guidelines.

What is a UX review against web guidelines?▼

A UX review against web guidelines is an automated process that evaluates your UI code for compliance with established best practices, identifying accessibility issues and design deviations before merging.

Does this automated code review require internet access to fetch rules?▼

Yes, the automated code review requires internet access because it uses WebFetch to retrieve the latest external Web Interface Guidelines before applying those rules to your local files.

What limitations exist when checking UI code for design compliance?▼

A limitation when checking UI code for design compliance is that the Skill processes local files against fetched external rules, meaning it requires accurate file paths and an active connection to fetch the latest guidelines.

Related Skills

Explore More Design & Creative Skills→
harsh-m-patilharsh-m-patil

web-design-guidelines

Analyze UI code for compliance with Web Interface Guidelines.

Community
Intermediate
matteotittamatteotitta
29

design-incident-response

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

Community
Advanced
AshesOfTheUndeadAshesOfTheUndead

elegant

Standardize UI design with token-based typography, color, and spacing.

Community
Intermediate
uni-helperuni-helper
95

web-design-guidelines

Analyze UI code for compliance with Web Interface Guidelines.

Official
Intermediate