web-design-guidelines

Review UI code against Web Interface Guidelines fetched from a URL.

Updated Feb 26, 2026
One-click install
npx skills add https://github.com/TheGreatL/KanbanBoard --skill web-design-guidelines-thegreatl
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/TheGreatL/KanbanBoard/tree/main/.agents/skills/web-design-guidelines
Command: npx skills add https://github.com/TheGreatL/KanbanBoard --skill web-design-guidelines-thegreatl

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 quality.

Core Features & Use Cases

  • Automated Code Review: Scans UI code against a defined set of best practices and accessibility rules.
  • Guideline Compliance: Verifies adherence to standards fetched from a remote source.
  • Use Case: A developer can use this skill to automatically check a new component's code for accessibility issues and design pattern compliance before merging it into the main codebase.

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 check my front-end code for accessibility and design compliance?

To check front-end code for accessibility and design compliance, you can review UI code against established Web Interface Guidelines. This process scans components to verify adherence to accessibility rules and UX best practices before merging into the codebase.

Can I fetch external web development guidelines to review my UI code?

Yes, you can fetch external web development guidelines to review UI code by retrieving markdown content from a specified URL. The fetched rule sets are then applied to validate front-end components against the latest design system standards.

What is automated UI code review for design system adherence?

Automated UI code review for design system adherence is the process of scanning front-end component code against a defined set of best practices. It ensures consistency, accessibility, and quality by verifying compliance with fetched web interface rules.

Does this UI code review work with any remote markdown ruleset?

Yes, this UI code review works with any remote markdown ruleset as long as you provide the specified URL. It fetches the external markdown content to apply the rule sets required for validating front-end design patterns and compliance.

How do I audit a component for UX best practices before merging?

To audit a component for UX best practices before merging, you review the UI code against fetched Web Interface Guidelines. This validates the component's accessibility features and design pattern compliance automatically prior to codebase integration.

Are there limitations to checking guideline compliance via fetched markdown?

A limitation of checking guideline compliance via fetched markdown is the dependency on an external URL for the latest rules. The review relies entirely on fetching this remote content successfully to apply the design system and accessibility rule sets.