auditing-interface-quality

Stars10

Forks2

UpdatedApril 17, 2026 at 14:57

Comprehensive UI/UX compliance check (A11y, performance, responsive).

Installation

Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.

Source

porcupine-md

porcupine-md/jonggrang

View GitHub Repository View Creator Repositories

Download

Related occupationsSOC

Based on SOC occupation classification

Web and Digital Interface DesignersComputer and Mathematical Occupations·SOC 15-1255

SKILL.md

readonly

name	auditing-interface-quality
description	Comprehensive UI/UX compliance check (A11y, performance, responsive).
phase	10 (Compliance)
role	Reviewer

Auditing Interface Quality

Role Constraints: Reviewer (STRICTLY READ-ONLY for application code). You MAY NOT modify, fix, or write to application source code. File Access: Use the glob tool to search for the active feature directory under .jonggrang/.output/features/. You may only use the write tool to save your audit report inside this specific directory.

Objective

Perform a systematic audit of the interface quality across accessibility (A11y), performance, theming, and responsive design.

Execution Steps

Discover Context: Use glob and read to review the frontend components built or modified for the current feature.
Diagnostic Scan:
- Accessibility (A11y): Check for contrast issues, missing ARIA roles, poor keyboard navigation, semantic HTML, and alt text.
- Performance: Look for layout thrashing, expensive animations, unoptimized images, or unnecessary re-renders.
- Theming: Look for hard-coded colors instead of design tokens, and broken dark mode implementations.
- Responsive Design: Check for fixed widths, touch target sizes (<44px), and horizontal scrolling issues on narrow viewports.
Compile Audit Report:
- Document each issue with its Location, Severity (Critical/High/Medium/Low), Category, Impact, and Recommendation.
- Summarize the overall UI/UX compliance.
Save Report:
- Write the final audit report using the write tool to .jonggrang/.output/features/<active-feature-dir>/interface-audit.md.

Completion Signal

When the interface audit report is saved, output exactly:

INTERFACE_AUDIT_COMPLETE

More from this repository

same repository

jonggrang

porcupine-md/jonggrang

Deterministic AI development workflow orchestrator. Manages task boards (.jonggrang/jonggrang-tasks.json), runs 16-phase pipelines (BUGFIX/SMALL/MEDIUM/LARGE), installs lifecycle hooks for Claude Code and OpenCode, and coordinates five specialist roles (Lead/Developer/Reviewer/TestLead/Tester). Use when planning features, executing multi-step development workflows, or orchestrating AI coding agents. Run via npx jonggrang.

2026-07-2910

orchestrating-feature

porcupine-md/jonggrang

16-phase feature orchestration workflow. Runs in the main thread as Kernel Mode. Coordinates the Lead→Developer→Reviewer→TestLead→Tester assembly line.

2026-06-2310

persisting-agent-outputs

porcupine-md/jonggrang

Protocol for agents to write structured outputs that survive session resets and are findable by the orchestrator.

2026-06-1310

porcupine-md/jonggrang

GitHub workflow automation with the gh CLI — pull requests, issues, releases, the REST/GraphQL API, and safe message escaping. Auth via GH_TOKEN (set in global settings, attached to the sandbox env).

2026-06-0810

glab

porcupine-md/jonggrang

GitLab workflow automation with the glab CLI — merge requests, issues, CI, releases, and safe message escaping. Auth via GITLAB_TOKEN (set in global settings, attached to the sandbox env).

2026-06-0810

iterating-to-completion

porcupine-md/jonggrang

Prevents premature exit and infinite loops. Three mechanisms: Completion Promises, Scratchpads, Loop Detection.

2026-05-2410

name	auditing-interface-quality
description	Comprehensive UI/UX compliance check (A11y, performance, responsive).
phase	10 (Compliance)
role	Reviewer

Auditing Interface Quality

Objective

Perform a systematic audit of the interface quality across accessibility (A11y), performance, theming, and responsive design.

Execution Steps

Discover Context: Use glob and read to review the frontend components built or modified for the current feature.
Diagnostic Scan:
- Accessibility (A11y): Check for contrast issues, missing ARIA roles, poor keyboard navigation, semantic HTML, and alt text.
- Performance: Look for layout thrashing, expensive animations, unoptimized images, or unnecessary re-renders.
- Theming: Look for hard-coded colors instead of design tokens, and broken dark mode implementations.
- Responsive Design: Check for fixed widths, touch target sizes (<44px), and horizontal scrolling issues on narrow viewports.
Compile Audit Report:
- Document each issue with its Location, Severity (Critical/High/Medium/Low), Category, Impact, and Recommendation.
- Summarize the overall UI/UX compliance.
Save Report:
- Write the final audit report using the write tool to .jonggrang/.output/features/<active-feature-dir>/interface-audit.md.

Completion Signal

When the interface audit report is saved, output exactly:

INTERFACE_AUDIT_COMPLETE