Toolkit for diagnosing and resolving Web Vitals issues (LCP, FID, CLS), profiling rendering loops, and optimizing JavaScript bundles. Use when an application feels sluggish, load times exceed 3 seconds, or React/Vue apps suffer from excessive re-renders.
Comprehensive architectural guidelines and tools for achieving 60fps rendering and lightning-fast load times.
Script Paths: Gemini/Codex/cursorlike:
.agent_scripts/development_frontend-performance/. Claude (folder mode):.claude/skills/development/frontend-performance/scripts/.
This skill provides three core capabilities through automated scripts:
# Script 1: Bundle Size Analyzer
node .agent_scripts/development_frontend-performance/bundle_analyzer.js [options]
# Script 2: Unused CSS/JS Purger
node .agent_scripts/development_frontend-performance/asset_purger.js [options]
# Script 3: React Re-render Profiler
node .agent_scripts/development_frontend-performance/react_profiler_parser.js [options]
Automates the scanning of webpack/vite build outputs to identify massive dependencies (like lodash or moment) that should be tree-shaken or replaced.
Features:
React.lazy()) split pointsUsage:
node .agent_scripts/development_frontend-performance/bundle_analyzer.js ./dist/stats.json
Scans HTML and JSX files to find and remove CSS classes or unused exported Javascript functions that made it into the final build.
Features:
Usage:
node .agent_scripts/development_frontend-performance/asset_purger.js ./src/ --build-dir ./dist/
Parses the JSON output from the React DevTools Profiler to mathematically identify which components are rendering for the longest duration, and why.
Features:
useMemo / useCallback opportunitiesUsage:
node .agent_scripts/development_frontend-performance/react_profiler_parser.js profile_trace.json
Comprehensive guide available in references/core_web_vitals.md:
setTimeout.width and height on images to prevent the page from jumping.Technical reference guide in references/rendering_optimization.md:
Object.is)React.memo (and when NOT to, as memoization has a cost)react-window)Tools: Lighthouse, Webpack Bundle Analyzer, React DevTools Profiler Metrics: LCP, FID, CLS, TTFB, TTI Concepts: Tree-shaking, Code-splitting, Critical CSS, Web Workers
<link rel="preconnect">) to critical third-party domains (like Google Fonts or APIs) early in the <head>.references/core_web_vitals.mdreferences/rendering_optimization.md.agent_scripts/development_frontend-performance/ directorynpx skills add cagriemiracikkapi-projects/development/frontend-performance下载完整 Skill 目录，包含 SKILL.md 及所有相关文件
Search for places (restaurants, cafes, etc.) via Google Places API proxy on localhost.
Interact with GitHub using the `gh` CLI. Use `gh issue`, `gh pr`, `gh run`, and `gh api` for issues, PRs, CI runs, and advanced queries.
Create or update AgentSkills. Use when designing, structuring, or packaging skills with scripts, references, and assets.
Start voice calls via the OpenClaw voice-call plugin.
Notion API for creating and managing pages, databases, and blocks.
Gemini CLI for one-shot Q&A, summaries, and generation.
Category:developer