skills.rest
BRANDNEWSHVT
BRANDNEWSHVTOFFICIAL
Explore all skills by this author →
WebsiteGitHub

frontend-audit

Audit frontend code for architectural, accessibility, and performance issues.

Updated Aug 20, 2025
Search Tags:#architecture#performance#accessibility#frontend#audit#design-system
One-click install
npx skills add https://github.com/BRANDNEWSHVT/mercora --skill frontend-audit-brandnewshvt
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-audit
Source: https://github.com/BRANDNEWSHVT/mercora/tree/main/storefront-nuxt/.agents/skills/frontend-audit
Command: npx skills add https://github.com/BRANDNEWSHVT/mercora --skill frontend-audit-brandnewshvt

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Frontend code is the user's direct experience. Architecture problems here manifest as bugs users can see and feel. The UI is the product; when the frontend is brittle, teams spend time debugging UI glitches, chasing inconsistent components, and addressing performance regressions.

Core Features & Use Cases

  • Architecture auditing and component design review
  • State management and reactivity checks
  • Accessibility and design system consistency verification
  • Bundle size and rendering performance analysis
  • Use Case: On major frontend refactor or new feature rollout

Quick Start

Run a frontend-audit on the current project and review components, state management, accessibility, and performance findings.

Frequently Asked Questions about frontend-audit

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

FAQPage Schema
How do I audit frontend architecture for React or Vue projects?▼

A frontend audit identifies architectural, accessibility, and performance issues across React, Vue, Svelte, and vanilla JS. It reviews component architecture, state management, design system consistency, and bundle size, providing actionable recommendations and measurable quality criteria.

What does a frontend accessibility and design system consistency check involve?▼

A frontend accessibility and design system consistency check verifies component UI patterns and a11y compliance. It assesses React, Vue, Svelte, and vanilla JS projects to identify architectural inconsistencies and ensure clean architecture and measurable quality.

Can I use this frontend audit for vanilla JavaScript projects?▼

Yes, you can use this frontend audit for vanilla JavaScript projects. It provides framework-agnostic guidance explicitly designed for React, Vue, Svelte, and vanilla JS, analyzing component architecture, state management, and bundle size without requiring framework-specific dependencies.

How do I analyze bundle size and rendering performance during a frontend refactor?▼

To analyze bundle size and rendering performance during a frontend refactor, run an audit focusing on component architecture and state management. This identifies performance regressions and provides actionable recommendations and measurable quality criteria for your application.

When do I need to run a frontend code audit?▼

You need to run a frontend code audit during major frontend refactors or new feature rollouts. It identifies architectural, accessibility, and performance issues before they manifest as visible UI glitches, ensuring clean architecture and preventing performance regressions.

Related Skills

Explore More Software Engineering Skills→
AbsolutelySkilledAbsolutelySkilled
207

frontend-developer

Review and optimize frontend UI code across React, Vue, Svelte, and vanilla JS.

Official
Advanced
boparaiamritboparaiamrit
5

frontend-audit

Audit frontend codebases for architecture, state management, accessibility, and performance issues.

Community
Advanced
matthewharwoodmatthewharwood
1

react-doctor

Analyze React codebases for security, performance, correctness, and architecture issues.

Community
Advanced
yun520-1yun520-1
38

code-analyzer

Analyze codebases for architectural patterns, code quality, and DDD elements.

Community
Advanced