skills.rest
christofferbergj
christofferbergjCOMMUNITY
Explore all skills by this author →
GitHub

web-design-guidelines

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

5|Updated Feb 6, 2022
Search Tags:#ui#accessibility#usability#review#design-consistency#web-guidelines
One-click install
npx skills add https://github.com/christofferbergj/dotfiles --skill web-design-guidelines-christofferbergj
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/christofferbergj/dotfiles/tree/main/.agents/skills/web-design-guidelines
Command: npx skills add https://github.com/christofferbergj/dotfiles --skill web-design-guidelines-christofferbergj

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Review UI code to ensure compliance with Web Interface Guidelines, helping teams improve accessibility, usability, and visual consistency across products.

Core Features & Use Cases

  • Fetches the latest Web Interface Guidelines from the official source and applies them to provided UI files.
  • Reads the specified UI files or patterns and checks for guideline conformance across layout, color, typography, accessibility, and interaction standards.
  • Outputs concise findings that highlight violations and suggested remediations to accelerate fixes in design reviews.

Quick Start

Review the provided UI files against the latest guidelines to identify and fix accessibility and usability issues.

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 guidelines compliance?▼

You can audit accessibility and UX against best practices by providing your UI files or patterns; the Skill reads them, applies all rules from the fetched Web Interface Guidelines, and outputs concise file:line findings highlighting violations and suggested remediations.

What is web interface guideline conformance checking?▼

Guideline conformance checking reviews UI code against official standards for layout, color, typography, accessibility, and interaction to ensure visual consistency and usability across products and web interfaces.

Can I use this to check accessibility and usability across different web projects?▼

Yes, it applies to web interfaces, apps, and UI components across different projects when asked to review a site, audit accessibility, or check UX against fetched best practices.

How do I review a site for accessibility and UX best practices?▼

You review a site by asking the Skill to audit it; it fetches the latest guidelines, reads your specified files or patterns, applies all rules, and outputs findings in a terse file:line format.

Do I need dependencies or components installed to check design consistency?▼

No dependencies or components are required to check design consistency; the Skill operates independently to fetch guidelines and apply rules to your UI code files.

What format are UI code review findings output in?▼

Findings are output in a terse file:line format that highlights violations and suggested remediations to accelerate fixes during design reviews.

Related Skills

Explore More Design & Creative Skills→
vcnttttvcntttt
1

web-design-guidelines

Analyze UI files for Web Interface Guidelines compliance and report findings.

Community
Basic
ahiendzahiendz
3

web-design-guidelines

Fetch Web Interface Guidelines and report UI compliance issues in file:line format.

Community
Intermediate
thangvawnthangvawn

plankton-code-quality

Automate code quality enforcement with formatters, linters, and Claude subprocesses.

Community
Advanced
aceable-aiaceable-ai
1

web-design-guidelines

Identify deviations from Web Interface Guidelines in UI code.

Official
Intermediate