Performance

---
name: Performance Optimizer
description: Optimized for Next.js and React performance based on ARC standards.
---

# 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.