From capacitor-quality
Optimizes Capacitor app performance covering bundle size reduction, rendering improvements, memory management, native bridge efficiency, and profiling with Chrome DevTools, Xcode, Android Profiler. For slow apps or janky animations.
How this skill is triggered — by the user, by Claude, or both
Slash command
/capacitor-quality:capacitor-performanceThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Make your Capacitor apps fast and responsive.
Make your Capacitor apps fast and responsive.
// BAD - All plugins loaded at startup
import { Camera } from '@capacitor/camera';
import { Filesystem } from '@capacitor/filesystem';
import { Geolocation } from '@capacitor/geolocation';
// GOOD - Load when needed
async function takePhoto() {
const { Camera } = await import('@capacitor/camera');
return Camera.getPhoto({ quality: 90 });
}
# Analyze bundle
npx vite-bundle-visualizer
# Tree-shake imports
import { specific } from 'large-library'; // Good
import * as everything from 'large-library'; // Bad
// Use appropriate quality
const photo = await Camera.getPhoto({
quality: 80, // Not 100
width: 1024, // Limit size
resultType: CameraResultType.Uri, // Not Base64
});
// Lazy load images
<img loading="lazy" src={url} />
// BAD - Multiple bridge calls
for (const item of items) {
await Storage.set({ key: item.id, value: item.data });
}
// GOOD - Single call with batch
await Storage.set({
key: 'items',
value: JSON.stringify(items),
});
/* GPU accelerated */
.animated {
transform: translateX(100px);
will-change: transform;
}
/* Avoid - triggers layout */
.animated {
left: 100px;
}
// Use virtual list for long lists
import { VirtualScroller } from 'your-framework';
<VirtualScroller
items={items}
itemHeight={60}
renderItem={(item) => <ListItem item={item} />}
/>
import { debounce } from 'lodash-es';
const handleScroll = debounce((e) => {
// Handle scroll
}, 16); // ~60fps
import { App } from '@capacitor/app';
// Store listener handle
const handle = await App.addListener('appStateChange', callback);
// Cleanup on unmount
onUnmount(() => {
handle.remove();
});
// Clear large data when done
let largeData = await fetchLargeData();
processData(largeData);
largeData = null; // Allow GC
| Metric | Target |
|---|---|
| First Paint | < 1s |
| Time to Interactive | < 3s |
| Frame Rate | 60fps |
| Memory | Stable, no growth |
| Bundle Size | < 500KB gzipped |
npx claudepluginhub cap-go/capgo-skills --plugin capacitor-qualityGuides mobile performance optimization for iOS/Android apps: 60fps rendering, memory leak detection/management, battery efficiency, startup time reduction (cold/warm/hot), image loading (Glide, SDWebImage, Coil), profiling with Instruments, Android Profiler, Flipper. Use for frame drops, ANRs, OOMs.
Optimizes React Native apps with guidelines for FPS, TTI, bundle size, memory leaks, re-renders, and animations. Helps with Hermes, JS thread blocking, FlashList, native modules, and frame drops.
Provides React Native performance optimization guidelines for FPS, TTI, bundle size, memory leaks, re-renders, and animations. Guides Hermes optimization, JS thread blocking, bridge overhead, FlashList, native modules, and jank debugging.