
performance
by MoJuiceX
🍊 Tang Gang OS - Mobile app for Wojak Farmers Plot (4200 NFTs on Chia). Gallery | Treasury | Generator | BigPulpIntelegence | Game. Built with Ionic + React.
SKILL.md
name: performance description: | Mobile game performance optimizer for canvas-based games. Analyzes game files for performance bottlenecks and applies cutting-edge 2024-2025 optimization patterns.
- MANDATORY TRIGGERS: optimize, performance, FPS, lag, slow, mobile performance, frame drops, jank, stuttering
- Use when: optimizing any game in src/pages/ or src/games/, fixing mobile performance issues, improving frame rate, reducing battery drain
Game Performance Optimizer
Optimize canvas-based games for 60 FPS on mid-range mobile devices (iPhone 11, Pixel 5).
Quick Start
- Read
references/patterns.mdfor the 8 gold-standard optimization patterns - Analyze the target game file for RED FLAGS
- Apply fixes using patterns from the reference
- Output summary of changes
Execution Steps
Step 1: Identify Game File
Find the game based on user input:
- Full path: use directly (e.g.,
src/pages/FlappyOrange.tsx) - Game name: check
src/pages/[Name].tsxfirst, thensrc/games/[Name]/index.tsx
Step 2: Read References
Always read first: references/patterns.md - Contains all 8 optimization patterns with code.
Step 3: Read Game + Dependencies
Read the main game file, then trace imports from:
src/lib/canvas/- Canvas utilitiessrc/lib/juice/- Audio, particles, effectssrc/hooks/- Game hookssrc/systems/- Shared systems
Step 4: Identify RED FLAGS
Check for these critical issues:
| RED FLAG | Pattern to Apply |
|---|---|
createLinearGradient in game loop | OffscreenCanvas caching (#2) |
useState for position/velocity | useRef for game state (#4) |
new Particle() in loop | Object pooling (#3) |
new AudioContext() per sound | Audio singleton (#5) |
No cancelAnimationFrame cleanup | Add cleanup return |
| No delta time in physics | Fixed timestep (#1) |
No touch-action: none CSS | Passive listeners (#6) |
No visibilitychange handler | Page Visibility API (#7) |
devicePixelRatio > 2 | Adaptive DPR (#8) |
Step 5: Apply Fixes
For each issue, apply the corresponding pattern from references/patterns.md.
Step 6: Output Summary
## Performance Optimization: [GameName]
### Issues Found
1. [Issue] - Line XX
...
### Fixes Applied
1. [Fix description]
...
### Expected Improvements
| Metric | Before | After |
|--------|--------|-------|
| Gradient calls/frame | X | 0 |
| Re-renders/frame | X | 0 |
| Object allocations/frame | X | 0 |
Performance Targets
| Metric | Target |
|---|---|
| Frame time | <16.67ms |
| Gradient calls/frame | 0 |
| Object allocations/frame | 0 |
| React re-renders/frame | 0 |
| AudioContext instances | 1 |
Related Files
references/patterns.md- All 8 optimization patterns with full codedocs/MOBILE-PERFORMANCE-AUDIT-PROMPT.md- Extended documentationdocs/games/orange-tree-performance.md- Tree caching example
スコア
総合スコア
リポジトリの品質指標に基づく評価
SKILL.mdファイルが含まれている
ライセンスが設定されている
100文字以上の説明がある
GitHub Stars 100以上
3ヶ月以内に更新がある
10回以上フォークされている
オープンIssueが50未満
プログラミング言語が設定されている
1つ以上のタグが設定されている
レビュー
レビュー機能は近日公開予定です