web-design-guidelines

Review UI code against fetched Web Interface Guidelines rules.

Updated Sep 8, 2025
One-click install
npx skills add https://github.com/FernaandoJr/oikwee --skill web-design-guidelines-fernaandojr
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/FernaandoJr/oikwee/tree/main/.agents/skills/web-design-guidelines
Command: npx skills add https://github.com/FernaandoJr/oikwee --skill web-design-guidelines-fernaandojr

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill helps ensure that user interface code adheres to established Web Interface Guidelines, improving consistency, accessibility, and overall user experience.

Core Features & Use Cases

  • Automated Code Review: Scans specified files or patterns against a set of predefined design and accessibility rules.
  • Compliance Checking: Identifies deviations from best practices in UI development.
  • 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 meets the project's design standards.

Quick Start

Use the web-design-guidelines skill to review the file 'src/components/Button.tsx'.

Frequently Asked Questions about web-design-guidelines

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

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

To review UI code for web design guidelines compliance, you can scan specified files or patterns against predefined design and accessibility rules to identify deviations from best practices.

Can I audit my component's accessibility and UX before merging?

Yes, you can audit a component's accessibility and UX by running an automated code review that checks the code content against the latest web interface rules before merging.

How does automated compliance checking work for web interfaces?

Automated compliance checking works by fetching the latest web interface guidelines and performing rule-based analysis on your code content to ensure consistent and accessible web interfaces.

What's the best way to check if my web development meets accessibility standards?

The best way to check if your web development meets accessibility standards is to use an automated tool that fetches external guidelines and applies rule-based analysis to your specified files.

Do I need specific file patterns to scan for UI code review?

You need to specify files or patterns for the UI code review to work effectively. The tool scans these specified inputs against predefined design and accessibility rules to find deviations.

Why does my UI code fail design guidelines checks?

Your UI code fails design guidelines checks when the rule-based analysis identifies deviations from the fetched web interface guidelines, indicating non-compliance with established design and accessibility best practices.