skills.rest
ShaheerKhawaja
ShaheerKhawajaCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

frontend-audit

Audit React, Vue, or Svelte components for accessibility, performance, and design-system issues.

8|Updated Mar 17, 2026
Search Tags:#performance#accessibility#frontend#audit#responsive#design-system
One-click install
npx skills add https://github.com/ShaheerKhawaja/ProductionOS --skill frontend-audit-shaheerkhawaja
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-audit
Source: https://github.com/ShaheerKhawaja/ProductionOS/tree/main/.claude/skills/frontend-audit
Command: npx skills add https://github.com/ShaheerKhawaja/ProductionOS --skill frontend-audit-shaheerkhawaja

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This frontend-audit skill automates the detection and remediation of quality issues across modern frontend codebases, reducing manual review time and catching regressions early.

Core Features & Use Cases

  • Auto-activates on relevant frontend files (React, Vue, Svelte components; CSS and layout files) to surface accessibility, performance, and design-system inconsistencies.
  • Performs a comprehensive frontend quality checklist (accessibility, responsive design, performance, design tokens) and flags actionable fixes.
  • Useful for ongoing code reviews, design-system enforcement, and pre-release audits to improve user experience and maintainability.

Quick Start

Edit a frontend file to trigger an automatic quality audit and review the resulting accessibility, performance, and design-system checks.

Frequently Asked Questions about frontend-audit

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

FAQPage Schema
How do I automate accessibility and performance audits for React components?▼

Automate frontend audits for React components by editing files to trigger automatic accessibility WCAG checks, performance budget tracking, and responsive breakpoint validation, surfacing actionable fixes.

What is the best way to enforce design token consistency in a Vue project?▼

Enforce design token consistency in Vue projects by running an automated frontend audit that checks component and CSS files against your design system, flagging token inconsistencies for remediation.

Does automated frontend auditing work with Svelte components and CSS layout files?▼

Automated frontend auditing supports Svelte components and CSS layout files, auto-activating on file changes to detect accessibility, performance, and design-system inconsistencies.

How do I run a pre-release frontend quality checklist for responsive design?▼

Run a pre-release frontend quality checklist by editing layout files to trigger an automated audit that validates responsive breakpoints, performance budgets, and accessibility compliance across modern web projects.

When do I need automated frontend codebase auditing for design-system enforcement?▼

You need automated frontend codebase auditing for design-system enforcement when editing React, Vue, or Svelte components to catch token inconsistencies and accessibility regressions early during ongoing code reviews.

Related Skills

Explore More Software Engineering Skills→
Ferreira-JeffersonFerreira-Jefferson
1

frontend-foundations

Establish frontend quality foundations for new React, Vue, or Svelte projects.

Community
Advanced
wahidyankfwahidyankf
3

swe-developing-frontend-ui

Guide TypeScript React UI development with repo-specific design tokens and WCAG compliance.

Community
Intermediate
miles990miles990
20

frontend

Guide React, Next.js, and Vue.js development with component patterns and Tailwind CSS.

Community
Intermediate
FriendlyInternetFriendlyInternet
10

a11y

Review Vue.js code for WCAG/ARIA accessibility compliance and fixes.

Official
Advanced