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
This skill helps you create balanced quarterly roadmaps by systematically evaluating features against infrastructure needs, team capacity, and risk factors. You'll transform vague priorities into a prioritized roadmap with clear trade-offs documented and stakeholder buy-in achieved. The output includes dependency mapping, capacity forecasts, and a phased delivery plan that scales with your team's growth.
by nakano1122
You can evaluate vendors comprehensively across security, financial stability, operations, and compliance using structured scoring matrices. Claude generates detailed risk assessments, produces vendor comparison reports, and recommends approval/rejection decisions backed by quantified scores.
by nakano1122
Compile market data, identify comparable retail properties, and create professional market analysis reports that clients can trust. This skill transforms raw market information into polished, client-ready documents that justify valuations, support investment decisions, and guide retail location strategy. You'll save hours of research and formatting while delivering expert-level analysis.
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
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 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
This skill guides you through systematic technology assessments using proven evaluation frameworks. You provide your current environment, business goals, and constraints—Claude produces detailed assessment reports with technology recommendations, risk analyses, implementation roadmaps, and ROI projections. Get actionable strategic advice grounded in your specific business context, not generic tech trends.
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