skills.rest
perimetre
perimetreOFFICIAL
Explore all skills by this author →
WebsiteGitHub

web-design-guidelines

Assess UI code against live Web Interface Guidelines and report file:line results.

Updated Aug 23, 2026
Search Tags:#a11y#frontend#best-practices#design-guidelines#ui-review#web-accessibility#ui-audit
One-click install
npx skills add https://github.com/perimetre/ai-toolkit --skill web-design-guidelines-perimetre
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/perimetre/ai-toolkit/tree/main/plugins/perimetre-apps/skills/web-design-guidelines
Command: npx skills add https://github.com/perimetre/ai-toolkit --skill web-design-guidelines-perimetre

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Web interfaces often fail to meet consistency, accessibility, and usability standards, leading to poor user experience and potential compliance issues.

Core Features & Use Cases

  • Fetch the latest Web Interface Guidelines and apply them to the provided UI files to ensure accessibility and visual consistency.
  • Audit components, pages, and design tokens for conformance with the guidelines and best practices.
  • Use Case: A design system team validates a new component library for WCAG compliance and design-token consistency before release.

Quick Start

Provide your UI files and the tool will fetch the latest guidelines to start the review.

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 UI code for web accessibility and design guideline compliance?▼

You can audit UI code for web accessibility by providing your interface files to the tool, which fetches the latest Web Interface Guidelines and reports conformance results in a terse file:line format.

What is the best way to check frontend components for WCAG compliance before release?▼

The best way to check frontend components for WCAG compliance is running a project-wide UI audit that validates design tokens and component code against fetched live guidelines to ensure visual consistency.

Can I review design tokens and web accessibility across a whole project?▼

Yes, you can review design tokens and web accessibility across a whole project by applying the tool to perform project-wide audits that assess pages and components for guideline alignment.

How does a UI audit report accessibility violations in frontend code?▼

A UI audit reports accessibility violations by fetching live source guidelines, validating the provided UI files against them, and outputting results in a required terse file:line format.

Do I need to manually input web accessibility guidelines to run a UI review?▼

No, you do not need to manually input web accessibility guidelines because the tool automatically fetches the latest Web Interface Guidelines from the source URL to start the review process.

When should I use an automated UI audit for web accessibility instead of manual checks?▼

You should use an automated UI audit for web accessibility when validating large component libraries or design systems for consistency and compliance before release to avoid manual review bottlenecks.

Related Skills

Explore More Design & Creative Skills→
chipermanchiperman

web-design-guidelines

Audit UI code files against Web Interface Guidelines.

Community
Basic
nweiinweii
7

web-design-guidelines

Audit HTML, CSS, and JavaScript UI code against Web Interface Guidelines.

Community
Intermediate
1479089714790897
7

kwp-design-design-system

Audit component libraries for naming inconsistencies and missing documentation.

Community
Intermediate
OKHP3OKHP3
2

web-design-guidelines

Review UI code for compliance with Web Interface Guidelines and accessibility.

Community
Intermediate