ui-doctor

Name: ui-doctor
Availability: InStock
Author: Iress

Audit React, Vue, or Angular codebases for IDS component usage and compliance.

1|4|Updated Oct 8, 2025

Search Tags:#accessibility #audit #compliance #code-quality #design-system #ids #ui-review

Ready to run

npx skills add https://github.com/iress/design-system --skill ui-doctor

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: ui-doctor
Source: https://github.com/iress/design-system/tree/main/.agents/skills/ui-doctor
Command: npx skills add https://github.com/iress/design-system --skill ui-doctor

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Audit and validate that an application correctly uses IDS components, follows IDS principles, and meets compliance requirements. This skill helps AI agents perform comprehensive UI reviews, identify areas where native HTML or third-party elements should be replaced with IDS components, assess adherence to IDS design principles, and produce actionable reports with recommendations.

Core Features & Use Cases

Audit IDS component usage and flag non-IDS elements to ensure design system consistency.
Assess token usage, provider setup, and required CSS imports to guarantee proper IDS integration.
Generate actionable reports with recommendations to improve IDS adoption and consistency across projects.

Quick Start

Provide the target codebase and run the ui-doctor analysis to generate an IDS compliance report.

Frequently Asked Questions about ui-doctor

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

FAQPage Schema

How do I audit design system compliance in a React or Vue codebase?▼

To audit design system compliance in a React or Vue codebase, you analyze source files, styles, and patterns to verify component adoption, token usage, and provider setup, identifying native HTML elements that should be replaced with design system components.

What is IDS component adoption validation and when do I need it?▼

IDS component adoption validation is the process of checking an application's codebase to ensure it correctly uses IDS components, follows design principles, and meets compliance requirements. You need it to maintain UI consistency and accessibility across modern web applications.

Does this design system audit work with Angular applications?▼

Yes, the design system audit works with Angular applications, as well as React and Vue. It evaluates source files, styles, and patterns in modern web applications to verify IDS adoption, provider setup, CSS imports, and form patterns.

How do I check my codebase for non-IDS elements and accessibility gaps?▼

To check your codebase for non-IDS elements and accessibility gaps, apply an automated UI review to evaluate form patterns, token usage, and layout guidelines. This flags non-compliant elements and generates an actionable report with recommendations.

What is the best way to generate an actionable UI compliance report?▼

The best way to generate an actionable UI compliance report is to run an automated analysis on the target codebase to identify design system usage gaps and compliance issues, producing recommendations to improve consistency and accessibility across projects.

Why should I evaluate CSS imports and token usage in my web application?▼

You should evaluate CSS imports and token usage to guarantee proper IDS integration and ensure design system consistency. Assessing these alongside provider setup verifies that the application meets required compliance and accessibility guidelines.