Help us improve
Share bugs, ideas, or general feedback.
From framer-pack
Optimizes Framer API and plugin performance via batch CMS syncs, React memoization, persistent WebSocket connections, and image optimization. Use for slow responses, CMS timeouts, or render lag.
npx claudepluginhub jeremylongshore/claude-code-plugins-plus-skills --plugin framer-packHow this skill is triggered — by the user, by Claude, or both
Slash command
/framer-pack:framer-performance-tuningThis skill is limited to the following tools:
The summary Claude sees in its skill listing — used to decide when to auto-load this skill
Optimize Framer plugin, component, and Server API performance. Key areas: CMS sync speed, component render performance, and plugin responsiveness.
Implements Framer API rate limiting with batching for CMS, debouncing plugins, backoff retries for Server API/WebSocket. Use for 429 errors, retries, throughput optimization.
Expert guidance for Framer design, Framer Motion animations, interactive prototyping, production site building, and CMS/MCP integration. Activates automatically when working on Framer sites or animations.
Integrates design tokens with Framer for prototyping and production sites. Use when adding CSS custom properties to Framer projects, creating code components, or building Framer sites with design systems.
Share bugs, ideas, or general feedback.
Optimize Framer plugin, component, and Server API performance. Key areas: CMS sync speed, component render performance, and plugin responsiveness.
// Process large collections in batches to avoid timeouts
async function batchSync(collection: any, items: any[], batchSize = 50) {
const total = items.length;
for (let i = 0; i < total; i += batchSize) {
await collection.setItems(items.slice(i, i + batchSize));
const progress = Math.min(i + batchSize, total);
framer.notify(`Synced ${progress}/${total}`);
}
}
import { memo, useMemo } from 'react';
// Memoize expensive components
export default memo(function DataGrid({ data, columns }) {
const processedData = useMemo(() =>
data.map(row => columns.reduce((acc, col) => ({ ...acc, [col.key]: row[col.key] }), {})),
[data, columns]
);
return (
<div style={{ display: 'grid', gridTemplateColumns: `repeat(${columns.length}, 1fr)` }}>
{processedData.map((row, i) => columns.map(col => (
<div key={`${i}-${col.key}`} style={{ padding: 8 }}>{row[col.key]}</div>
)))}
</div>
);
});
// Reuse Server API connection instead of reconnecting each time
let clientInstance: any = null;
async function getClient() {
if (!clientInstance) {
const { framer } = await import('framer-api');
clientInstance = await framer.connect({
apiKey: process.env.FRAMER_API_KEY!,
siteId: process.env.FRAMER_SITE_ID!,
});
}
return clientInstance;
}
// Pre-optimize image URLs before syncing to CMS
function optimizeImageUrl(url: string, width = 800): string {
// Use image CDN if available
if (url.includes('cloudinary.com')) {
return url.replace('/upload/', `/upload/w_${width},q_auto,f_auto/`);
}
if (url.includes('imgix.net')) {
return `${url}?w=${width}&auto=format,compress`;
}
return url;
}
For cost optimization, see framer-cost-tuning.