web-design-guidelines

Analyze UI code against Web Interface Guidelines and report findings in file:line format.

Updated Aug 27, 2026
One-click install
npx skills add https://github.com/Folly-Partners/claudesync --skill web-design-guidelines-folly-partners
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/Folly-Partners/claudesync/tree/main/skills/web-design-guidelines
Command: npx skills add https://github.com/Folly-Partners/claudesync --skill web-design-guidelines-folly-partners

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps ensure web UI code complies with the latest Web Interface Guidelines, reducing accessibility and UX issues in projects.

Core Features & Use Cases

  • Guideline compliance checks: Review UI files against the current Web Interface Guidelines to surface violations.
  • Flexible targets: Accepts file paths or patterns to review specific components or pages.
  • Clear reporting: Outputs findings in a concise file:line format for quick triage and fixes.
  • Use Case: A design team audits a new component library to verify accessibility conformance before deployment.

Quick Start

Provide the target UI files or patterns you want checked, e.g., src/components/Button.jsx or src/pages/**/*.tsx. The skill will fetch the latest guidelines and report findings in the 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 web UI for accessibility and UX compliance?

Web UI auditing checks your interface code against current accessibility and UX guidelines. Provide target files or patterns like src/components/**/*.jsx, and the Skill fetches the latest Web Interface Guidelines, then reports violations in file:line format for quick remediation.

What Web Interface Guidelines does this tool check against?

This Skill applies the current Web Interface Guidelines, which cover accessibility standards, UX consistency patterns, and visual design adherence. It automatically fetches the latest guidelines so your reviews stay current without manual updates.

Can I review specific components or just entire pages?

You can target specific components, pages, or patterns. Provide file paths like src/components/Button.jsx or glob patterns like src/pages/**/*.tsx to audit exactly what you need instead of scanning entire projects.

What format does the Skill use to report findings?

Findings are reported in concise file:line format, showing exactly where violations occur. This format enables fast triage and lets teams prioritize fixes across multiple files without verbose output.

When should I run a UI accessibility audit?

Run audits before deploying new component libraries, shipping UI changes, or after design system updates. Regular audits catch accessibility regressions and UX inconsistencies early, reducing post-deployment issues and compliance risk.

Does this work with frameworks like React, Vue, or plain HTML?

Yes, this Skill accepts any UI file patterns you specify. It analyzes code structure across React, Vue, HTML, and other web frameworks by checking against the same Web Interface Guidelines without framework-specific dependencies.