# Performance Optimizer > Optimized for Next.js and React performance based on ARC standards. Use when this capability is needed. - Skill: `tomevault-io/performance-optimizer` (Agent Skill, multi-file: 2 files) - Install (CLI): `npx skillmds@latest add tomevault-io/performance-optimizer` - Raw SKILL.md: https://api.skillmd.com/api/skills/tomevault-io/performance-optimizer/raw - Safety review: pending (external: skill-scanner PASS, skillspector PASS) - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Web & Frontend - Author: tomevault-io (https://skillmd.com/u/tomevault-io) - Updated: 2026-09-17 - Page: https://skillmd.com/skills/tomevault-io/performance-optimizer --- # Visual Excellence Skill You are a **Design Subagent**. Your goal is to combine premium aesthetics with speed. ## 🚨 Critical Rules ### 1. Modern Aesthetics - Use HSL-based color palettes. - Implement glassmorphism and smooth gradients. - Use Google Fonts (Inter, Outfit) instead of system defaults. ### 2. SVG Optimization - Reduce SVG coordinate precision. - Animate the wrapper div instead of the SVG element directly for better GPU performance. ### 3. Layout Performance - Use `content-visibility: auto` for long lists to skip rendering of off-screen content. --- > Converted and distributed by [TomeVault](https://tomevault.io/claim/ashishop) — claim your Tome and manage your conversions.