web-design-guidelines

Audit web frontend files against Web Interface Guidelines and output file:line findings.

Updated Mar 8, 2026
One-click install
npx skills add https://github.com/darthlinuxer/dialectic-crew-ai --skill web-design-guidelines-darthlinuxer
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/darthlinuxer/dialectic-crew-ai/tree/main/src/mcp/skills/web-design-guidelines
Command: npx skills add https://github.com/darthlinuxer/dialectic-crew-ai --skill web-design-guidelines-darthlinuxer

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps designers and front-end engineers quickly identify violations of Web Interface Guidelines across codebases, reducing manual review time and preventing accessibility, performance, and UX regressions.

Core Features & Use Cases

  • Guidelines retrieval: Load the latest Web Interface Guidelines via Context7, Tavily, BraveSearch, or Serper.dev and fall back to WebSearch/WebFetch only when necessary.
  • File-aware audits: Read specified files or patterns and check them exhaustively against guideline rules.
  • Terse actionable output: Emit findings in concise file:line format for straightforward triage and remediation.
  • Use Cases: pre-release accessibility audits, CI gating for frontend merges, and post-implementation UX compliance checks.

Quick Start

Review the src/frontend directory for accessibility, performance, and UX issues and return findings in terse 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 web frontend code for accessibility and UX compliance?

Audit web frontend code by reading specified files and checking them exhaustively against Web Interface Guidelines rules. It retrieves the latest standards via search tools and outputs findings in a terse file:line format for straightforward triage and remediation.

What is the best way to automate pre-release accessibility checks for UI components?

Automate pre-release accessibility checks by loading Web Interface Guidelines through search providers and applying them to your UI code. The Skill outputs concise file:line findings, fitting naturally into CI gating for frontend merges to prevent regressions.

Can I use search tools like Tavily or BraveSearch to load web design guidelines for code review?

Yes, you can load web design guidelines for code review using Tavily, BraveSearch, Context7, or Serper.dev. The Skill uses these search providers to retrieve rules and falls back to WebSearch or WebFetch only when necessary.

Does this accessibility audit tool require any external dependencies?

No, this accessibility audit tool requires zero external dependencies. It operates independently to read frontend files and check them against Web Interface Guidelines, optionally using available search tools like Context7 or Tavily to load the latest rules.

How are accessibility and UX violations reported for remediation?

Accessibility and UX violations are reported in a terse file:line format for easy remediation. This concise output structure allows developers to quickly triage findings and fix issues across web frontend files, components, and static assets.