web-design-guidelines

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

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

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill ensures that user interface code adheres to established web interface guidelines, improving consistency, accessibility, and overall design quality.

Core Features & Use Cases

  • Automated Compliance Checks: Scans UI code against a predefined set of best practices and accessibility standards.
  • Guideline Fetching: Automatically retrieves the latest guidelines from a specified source to ensure checks are up-to-date.
  • Use Case: A developer can use this skill to audit a new component's code before merging, ensuring it meets accessibility requirements and design system standards.

Quick Start

Review the UI code in the 'src/components' directory 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 and accessibility compliance?

You can check UI code for web design guidelines by scanning files against remote accessibility standards, outputting non-compliance findings in a terse file:line format. This fetches the latest rules to ensure your components meet design system requirements.

What is automated UI code review for web design standards?

Automated UI code review for web design standards is the process of fetching remote guidelines and applying them to specified file patterns. It checks for adherence to accessibility, design, and best practice standards to improve consistency and quality.

Can I audit a specific directory for accessibility and UX best practices?

Yes, you can audit a specific directory by specifying file patterns like 'src/components' for compliance checks. The review fetches the latest web interface guidelines and applies them to those files to ensure they meet accessibility requirements.

Does the web design compliance check work without external dependencies?

No, the web design compliance check requires fetching the latest rules from a remote source to function accurately. It relies on retrieving these external guidelines to evaluate your UI code against current accessibility and design best practices.

What format does the UI code review output for accessibility findings?

The UI code review outputs accessibility findings in a terse file:line format. This concise output style directly points to the exact locations in your UI code where web interface guidelines are not met.

When should I run a web interface guidelines audit on my components?

You should run a web interface guidelines audit before merging new UI components. This ensures your code meets accessibility requirements and design system standards, preventing non-compliant code from affecting overall design quality.