web-design-guidelines

Review UI code against fetched Web Interface Guidelines and output findings.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill helps ensure that web interface code adheres to established design and accessibility guidelines, improving the quality and consistency of user interfaces.

Core Features & Use Cases

  • Automated Review: Scans UI code files against a predefined set of web interface guidelines.
  • Compliance Checking: Identifies potential violations of best practices related to design, accessibility, and user experience.
  • Use Case: A developer can use this skill to quickly audit a new component's code before merging it into the main branch, ensuring it aligns with the project's established design system.

Quick Start

Review the file 'src/components/Button.tsx' for compliance with web interface guidelines.

Frequently Asked Questions about web-design-guidelines

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I check my UI code for web design guidelines compliance?

To check UI code for web design guidelines compliance, provide your local component files to the skill. It fetches the latest rules from a specified URL and outputs a terse report of any accessibility or UX violations found.

Can I audit a specific component file for accessibility best practices?

Yes, you can audit a specific component file for accessibility best practices by supplying the file path. The skill processes the local file against fetched web interface guidelines to identify compliance issues.

How does automated code review for web interface guidelines work?

Automated code review for web interface guidelines works by fetching external rules from a URL and applying them directly to your provided files. It scans the UI code to detect violations of established design, accessibility, and UX standards.

What is the best way to ensure a new component adheres to a project's design system?

The best way to ensure a new component adheres to a project's design system is to run an automated compliance check before merging. The skill audits the component code against fetched guidelines to guarantee alignment with established practices.

Do I need an external URL to perform a UI code accessibility check?

Yes, you need an external URL to perform a UI code accessibility check. The skill requires fetching the latest web interface guidelines from a specified URL to evaluate your local files against the correct rules.

What limitations exist when scanning UI code for UX best practices?

A limitation when scanning UI code for UX best practices is that the skill relies entirely on the external guidelines fetched from the provided URL. It outputs findings in a terse format and depends on local file input for processing.