web-design-guidelines

Evaluate UI code against Web Interface Guidelines and output file:line findings.

4|1|Updated Apr 19, 2016
One-click install
npx skills add https://github.com/praveenperera/dotfiles --skill web-design-guidelines-praveenperera
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/praveenperera/dotfiles/tree/main/claude/skills/web-design-guidelines
Command: npx skills add https://github.com/praveenperera/dotfiles --skill web-design-guidelines-praveenperera

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Review UI code for Web Interface Guidelines compliance. It helps ensure accessibility, UX quality, and visual consistency across projects.

Core Features & Use Cases

  • Fetch the latest guidelines from a central source
  • Read and evaluate target files or patterns against the guidelines
  • Output findings in the concise file:line format for rapid remediation
  • Use cases include accessibility audits, UX conformance checks, and design reviews

Quick Start

Provide the target files or patterns to analyze and the system will fetch guidelines, apply rules, and report findings in file:line format.

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 UX compliance?

A UX audit evaluates your provided files against the latest fetched web interface guidelines. It reads your local UI code to check for accessibility, visual consistency, and best-practice conformance, outputting actionable findings in a concise file:line format.

How do I run a design review on dashboard components against best-practice guidelines?

To run a design review on dashboard components, supply the local file paths or patterns for analysis along with a guidelines source URL. The evaluation workflow applies the fetched rules to your code and reports specific file:line findings for any non-compliant UI elements.

Can I check design consistency across web projects without manually reviewing every file?

Yes, you can check design consistency across web projects by providing target file patterns for the system to evaluate. It automatically applies the latest fetched design guidelines and outputs a deterministic list of file:line findings, eliminating the need for manual review.

What do I need to provide to perform a UI code compliance check?

To perform a UI code compliance check, you need to provide a guidelines source URL and the local target files or patterns to analyze. The system uses these inputs to fetch the latest rules and output deterministic file:line findings for remediation.

Does the UX audit work with any web framework or component library?

The UX audit evaluates local UI code files provided as input, making it applicable to web projects, dashboards, and components regardless of the underlying framework. It checks the provided files against fetched guidelines and outputs non-compliant file:line findings.