erne-perf
ERNE — Performance profiling and optimization using the performance-profiler agent
About this skill
The `/erne-perf` skill guides an AI agent through diagnosing and fixing performance issues in React Native Expo projects. It outlines six specific diagnostic areas: Rendering Performance (FPS, unnecessary re-renders), Time to Interactive (app startup, heavy `useEffect`s), Bundle Size (visualizer, large dependencies, tree-shaking), Memory (listener cleanup, large objects), Animations (Reanimated usage, JS thread bottlenecks), and Hermes Engine (verification, profiling). This skill is designed to be invoked when a React Native Expo application is experiencing slowdowns, high memory usage, slow startup times, or janky animations. The agent uses tools like React DevTools Profiler, `react-native-bundle-visualizer`, and the Hermes profiler to gather data and identify bottlenecks across these critical performance vectors. Utilizing `/erne-perf` empowers an AI agent to systematically identify and suggest actionable solutions for performance bottlenecks. This structured approach ensures common performance pitfalls are checked and addressed, ultimately saving developer time and significantly improving the end-user experience by delivering more efficient and responsive applications.
Best use case
The primary use case for `/erne-perf` is to diagnose and resolve performance bottlenecks in React Native Expo applications. Developers or teams working on mobile apps that suffer from slow rendering, long startup times, large bundle sizes, or memory leaks would benefit most. It allows for an automated initial pass at performance auditing and provides clear, actionable insights for improvement, streamlining the optimization process.
ERNE — Performance profiling and optimization using the performance-profiler agent
The user should expect a structured report detailing performance metrics, critical issues, and actionable optimization opportunities for their React Native Expo application.
Practical example
Example input
Analyze the performance of my React Native Expo app and provide optimization suggestions, focusing on TTI and bundle size.
Example output
## Performance Metrics | Metric | Current | Target | Status | |--------|---------|--------|--------| | JS FPS | 45 | 60 | ⚠️ | | UI FPS | 58 | 60 | ✅ | | TTI | 3.2s | <2s | ❌ | | Bundle | 8.2MB | <5MB | ❌ | ## Critical Issues - Excessive re-renders in `HomeScreen` due to inline function creation. - Large `lodash` dependency, consider `lodash.omit`. ## Optimization Opportunities - Implement `React.memo` for `ProductCard` component. - Lazy load unnecessary modules on app startup.
When to use this skill
- When a React Native Expo app is performing slowly or experiencing UI jank.
- To audit the performance of a new or existing React Native Expo project.
- Before deploying a React Native Expo application to production.
- To systematically identify areas for performance optimization across various metrics.
When not to use this skill
- For performance issues in non-React Native Expo applications (e.g., native iOS/Android, web apps).
- When a manual, deep dive into very specific, obscure performance issues is required beyond the outlined diagnostic areas.
- If you lack access to the specified profiling tools (e.g., React DevTools Profiler, bundle visualizer).
Installation
Claude Code / Cursor / Codex
Manual Installation
- Download SKILL.md from GitHub
- Place it in
.claude/skills/erne-perf/SKILL.mdinside your project - Restart your AI agent — it will auto-discover the skill
How erne-perf Compares
| Feature / Agent | erne-perf | Standard Approach |
|---|---|---|
| Platform Support | Claude | Limited / Varies |
| Context Awareness | High | Baseline |
| Installation Complexity | easy | N/A |
Frequently Asked Questions
What does this skill do?
ERNE — Performance profiling and optimization using the performance-profiler agent
Which AI agents support this skill?
This skill is designed for Claude.
How difficult is it to install?
The installation complexity is rated as easy. You can find the installation instructions above.
Where can I find the source code?
You can find the source code on GitHub using the link provided at the top of the page.
Related Guides
AI Agents for Coding
Browse AI agent skills for coding, debugging, testing, refactoring, code review, and developer workflows across Claude, Cursor, and Codex.
Best AI Skills for Claude
Explore the best AI skills for Claude and Claude Code across coding, research, workflow automation, documentation, and agent operations.
AI Agents for Startups
Explore AI agent skills for startup validation, product research, growth experiments, documentation, and fast execution with small teams.
SKILL.md Source
# /erne-perf — Performance Profiling You are executing the `/erne-perf` command. Use the **performance-profiler** agent to diagnose and fix performance issues. ## Diagnostic Areas ### 1. Rendering Performance (FPS) - Check for unnecessary re-renders with React DevTools Profiler - Identify components re-rendering without prop changes - Look for missing `React.memo`, `useCallback`, `useMemo` - Detect inline function/object creation in render ### 2. Time to Interactive (TTI) - Analyze app startup sequence - Check for heavy `useEffect` chains on mount - Identify blocking operations on main thread - Verify Hermes bytecode compilation ### 3. Bundle Size - Run `npx react-native-bundle-visualizer` - Identify large dependencies - Check for unused imports and dead code - Verify tree-shaking is working ### 4. Memory - Check for listener/subscription cleanup in `useEffect` - Identify large objects retained in closures - Look for image caching issues - Detect circular references ### 5. Animations - Verify all animations use Reanimated (not Animated API) - Check for JS thread bottlenecks in animation callbacks - Identify layout thrashing during animations - Measure actual FPS during animations ### 6. Hermes Engine - Verify Hermes is enabled - Check for unsupported JS features - Profile with Hermes sampling profiler - Analyze bytecode compilation output ## Output Format ``` ## Performance Metrics | Metric | Current | Target | Status | |--------|---------|--------|--------| | JS FPS | 45 | 60 | ⚠️ | | UI FPS | 58 | 60 | ✅ | | TTI | 3.2s | <2s | ❌ | | Bundle | 8.2MB | <5MB | ❌ | ## Critical Issues [Issues that must be fixed] ## Optimization Opportunities [Improvements ranked by impact] ``` ## Notes - If agent-device is available, measure actual FPS on device - Reference `rules/common/performance.md` for optimization patterns - Profile on real devices, not simulator/emulator
Related Skills
erne-code
ERNE — Implement features using the senior-developer agent
code
Implement features using the senior-developer agent
plan
This skill guides an AI agent to design detailed feature architectures for React Native and Expo applications, leveraging an `architect` agent for core design tasks.
laravel-expert
Senior Laravel Engineer role for production-grade, maintainable, and idiomatic Laravel solutions. Focuses on clean architecture, security, performance, and modern standards (Laravel 10/11+).
webmcp
This skill guides AI agents in implementing WebMCP within web projects, enabling browser-native structured tools for AI interaction using JavaScript or HTML APIs.
Prompt Coach
Analyze your Claude Code session logs to improve prompt quality, optimize tool usage, and enhance your skills as an AI-native engineer.
nextjs
Provides comprehensive Next.js routing capabilities, including typed routes, helpers for `PageProps` and `LayoutProps`, and `nuqs` for managing URL state.
react
This AI agent skill guides the generation of modern React components, incorporating best practices such as destructured props, leveraging compiler optimizations, and proper use of React Effects. It also ensures compatibility and utilizes Tailwind CSS v4 syntax.
just
Use `just` to save and run project-specific commands. Use when the user mentions `justfile`, `recipe`, or needs a simple alternative to `make` for task automation.
chrome-debug
This skill empowers AI agents to debug web applications and inspect browser behavior using the Chrome DevTools Protocol (CDP), offering both collaborative (headful) and automated (headless) modes.
worktree-manager
Create, manage, and cleanup git worktrees with Claude Code agents across all projects. USE THIS SKILL when user says "create worktree", "spin up worktrees", "new worktree for X", "worktree status", "cleanup worktrees", "sync worktrees", or wants parallel development branches. Also use when creating PRs from a worktree branch (to update registry with PR number). Handles worktree creation, dependency installation, validation, agent launching in Ghostty, and global registry management.
clearshot
Structured screenshot analysis for UI implementation and critique. Analyzes every UI screenshot with a 5×5 spatial grid, full element inventory, and design system extraction — facts and taste together, every time. Escalates to full implementation blueprint when building. Trigger on any digital interface image file (png, jpg, gif, webp — websites, apps, dashboards, mockups, wireframes) or commands like 'analyse this screenshot,' 'rebuild this,' 'match this design,' 'clone this.' Skip for non-UI images (photos, memes, charts) unless the user explicitly wants to build a UI from them. Does NOT trigger on HTML source code, CSS, SVGs, or any code pasted as text.