Frontend Performance Audit & Optimization Roadmap
Audit React/Vue/Angular apps for performance bottlenecks and create optimization roadmaps
What You Can Do
You can systematically identify performance bottlenecks in your frontend application across React, Vue, and Angular frameworks. This skill analyzes your codebase for common anti-patterns, runtime behavior, and bundle metrics to pinpoint the slowest components and queries. You'll receive a data-driven optimization roadmap prioritized by impact and implementation effort, complete with specific code examples and effort estimates your team can execute immediately.
Features
Detects performance anti-patterns specific to React, Vue, and Angular applications including unnecessary re-renders, inefficient watchers, and unoptimized change detection.
Ranks issues by estimated performance gain, implementation complexity, and risk level so you address the highest-impact improvements first.
Identifies large dependencies, duplicate packages, and code-splitting opportunities to reduce initial load times.
Evaluates Largest Contentful Paint, First Input Delay, and Cumulative Layout Shift factors with specific improvement recommendations.
Creates a structured implementation plan with milestones, effort estimates in story points, and success metrics for each phase.
Provides before-and-after code snippets showing exactly how to implement each optimization in your framework.
Estimates realistic performance improvements (milliseconds saved, bundle reduction percentage) for each recommendation.
Example Output
Performance Audit Summary
Application: E-commerce Dashboard (React) | Total Issues: 24 | Critical: 3 | High: 8 | Medium: 13
Top 3 Bottlenecks
1. Unnecessary ProductCard Re-renders (Estimated Gain: 45% faster interactions)
- Issue: Component re-renders on every parent state change
- Root Cause: Missing React.memo() and un-memoized event handlers
- Fix: Wrap with
React.memo()and useuseCallbackfor handlers - Effort: 2 hours | Risk: Low
2. Oversized Bundle (Estimated Gain: 320KB reduction, 1.2s faster load)
- Issue: Full Material-UI imported instead of tree-shakeable imports
- Root Cause:
import { * } from @mui/materialpattern - Fix: Cherry-pick:
import Button from @mui/material/Button - Effort: 3 hours | Risk: Low
3. N+1 GraphQL Queries (Estimated Gain: 60% fewer requests, 2.1s faster)
- Issue: User list makes individual requests per user
- Root Cause: No batch query or DataLoader pattern
- Fix: Implement batch API endpoint or Apollo DataLoader
- Effort: 6 hours | Risk: Medium
Optimization Roadmap
| Phase | Focus | Effort | Timeline | Expected Improvement |
|---|---|---|---|---|
| Phase 1 | Re-renders, bundle size | 8 SP | Week 1 | 50% faster interactions |
| Phase 2 | API efficiency, code-splitting | 10 SP | Week 2-3 | 2.1s faster page load |
| Phase 3 | Image optimization, caching | 6 SP | Week 4 | 40% faster on repeat visits |
What's Included
- Comprehensive Performance Audit: Full analysis of your codebase covering rendering performance, bundle size, dependencies, and runtime behavior.
- Prioritized Issues List: All findings ranked by impact, effort, and risk with clear severity labels and root cause explanations.
- Implementation Roadmap: Phased optimization plan with story point estimates, timeline, and success metrics for each phase.
- Code Refactoring Examples: Before-and-after code snippets with detailed explanations for implementing each recommendation.
- Executive Summary: High-level overview suitable for presenting to stakeholders with expected ROI and realistic timeline.
- Team Implementation Checklist: Structured task list your team can import directly into Jira, GitHub Issues, or Linear.
Who It's For
- Frontend Engineers & React/Vue/Angular Developers
- Engineering Managers overseeing frontend quality and velocity
- Full-Stack Engineers optimizing end-to-end application performance
- DevOps & Platform Engineers focused on Core Web Vitals
Best For
- Identifying performance bottlenecks in legacy or rapidly growing applications
- Planning data-driven performance improvements with team estimates
- Reducing bundle size and improving Lighthouse scores
- Creating stakeholder-ready optimization roadmaps and business cases
You might also like
You'll structure high-stakes architectural decisions using a proven enterprise framework that systematically evaluates options, assesses risks, aligns stakeholders, and documents trade-offs. This skill guides you through decision matrices, financial impact analysis, implementation planning, and post-decision reviews—ensuring your organization makes defensible architectural choices that scale.
by nakano1122
Claude systematically analyzes production incidents to identify root causes, contributing factors, and systemic vulnerabilities in your infrastructure. You'll receive structured postmortems that guide your team through incident timelines, pinpoint what actually failed, and prioritize infrastructure improvements that prevent recurrence. The skill also detects patterns across your incident history—revealing repeated failures that point to deeper architectural weaknesses.
by nakano1122
This skill generates comprehensive, personalized buyer education and real-time guidance tailored to each client's experience level and concerns. You'll handle objections with empathy and data-backed responses, guide clients through every transaction stage with clear next steps, and build buyer confidence that turns hesitation into action. It creates customized scripts, educational resources, and FAQ compilations that work across real estate, automotive, insurance, and B2B sales.
by nakano1122
Create comprehensive digital transformation roadmaps that span 3-5 years with phased initiatives, business cases, and risk mitigation strategies. This skill helps you align technology investments with business objectives, prioritize competing initiatives by impact and effort, and communicate transformation plans clearly to executive stakeholders. You'll generate ROI projections, resource requirements, and success metrics for each phase.
by nakano1122
Perform comprehensive financial analysis on multifamily acquisitions, from pro forma development to underwriting memoranda. Generate sensitivity analyses, cash flow projections, and investment metrics (IRR, CoC, NOI) that help you evaluate deal quality and portfolio performance. Create institutional-grade reports with rent rolls, expense breakdowns, and risk assessments for due diligence, lender presentations, or investor pitch decks.
by nakano1122
You get immediate structured incident assessment and response coordination. Claude analyzes incident severity, impact scope, and escalation requirements—then generates decision trees, stakeholder communication templates, and post-incident review guides. This skill accelerates your response from triage through resolution to after-action review.
by nakano1122
You conduct systematic architecture reviews that identify technical risks, quantify their business impact, and prioritize technical debt for remediation. The framework generates risk matrices, compliance gap analyses, and actionable roadmaps with effort estimates—ideal for due diligence, modernization planning, or governance decision-making. You produce executive summaries that translate technical findings into business language for stakeholder alignment.
by nakano1122
You can rapidly map your security controls to major regulatory frameworks (SOC 2, ISO 27001, GDPR, HIPAA, PCI-DSS), automatically identify compliance gaps, and generate audit-ready evidence packages. The skill analyzes your control inventory against framework requirements, flags missing or inadequate controls, and produces structured documentation that accelerates compliance reviews and audit preparation.
by nakano1122