auditing-interface-quality

Audit frontend UI for accessibility, performance, and theming gaps.

11|2|Updated Apr 7, 2026
One-click install
npx skills add https://github.com/porcupine-md/jonggrang --skill auditing-interface-quality
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: auditing-interface-quality
Source: https://github.com/porcupine-md/jonggrang/tree/main/skills/library/frontend/auditing-interface-quality
Command: npx skills add https://github.com/porcupine-md/jonggrang --skill auditing-interface-quality

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This audit helps teams enforce UI quality by systematically checking accessibility, performance, and theming across features.

Core Features & Use Cases

  • Accessibility checks: contrast, keyboard navigation, ARIA roles, alt text.
  • Performance & theming: identify layout thrash, slow animations, hard-coded colors, and broken dark mode.
  • Compliance & reporting: generate a structured report suitable for reviewer feedback and design stakeholders.

Quick Start

Review the active frontend feature and generate an interface audit report, saving it to the .jonggrang output path.

Frequently Asked Questions about auditing-interface-quality

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

FAQPage Schema
How do I audit UI accessibility and performance gaps in my frontend components?

To audit UI accessibility and performance, this skill analyzes contrast, keyboard navigation, load times, and theming consistency across responsive layouts. It generates a formal audit report and saves the results directly to the feature's interface-audit.md output path.

What is the best way to check dark mode and theming consistency across modern UI patterns?

Checking dark mode and theming consistency involves scanning frontend components for hard-coded colors and broken theme patterns. This skill analyzes theming gaps across modern UI patterns and provides a structured report suitable for design stakeholder review.

Does this UI audit tool check ARIA roles and keyboard navigation for responsive layouts?

Yes, this UI audit tool checks ARIA roles, keyboard navigation, alt text, and color contrast. It is explicitly designed for frontend components across responsive layouts, identifying both accessibility violations and performance issues like layout thrash.

How do I generate a formal accessibility report for reviewer feedback?

Generating a formal accessibility report requires scanning the active frontend feature for compliance gaps. This skill discovers context via glob, analyzes the UI systematically, and saves a structured markdown report to the .jonggrang output directory for stakeholders.

Can I use this to identify layout thrash and slow animations without external dependencies?

Yes, you can identify layout thrash and slow animations without external dependencies. This skill operates independently to detect performance bottlenecks and accessibility issues, outputting a comprehensive interface audit report for the active feature directory.

When do I need an interface audit for my frontend feature?

You need an interface audit when enforcing UI quality across accessibility, performance, and theming. It is applicable when you must systematically check contrast, navigation, load times, and dark mode consistency before delivering a frontend feature for review.