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-packThis skill is limited to using the following tools:
Optimize Framer plugin, component, and Server API performance. Key areas: CMS sync speed, component render performance, and plugin responsiveness.
Guides Next.js Cache Components and Partial Prerendering (PPR) with cacheComponents enabled. Implements 'use cache', cacheLife(), cacheTag(), revalidateTag(), static/dynamic optimization, and cache debugging.
Guides building MCP servers enabling LLMs to interact with external services via tools. Covers best practices, TypeScript/Node (MCP SDK), Python (FastMCP).
Generates original PNG/PDF visual art via design philosophy manifestos for posters, graphics, and static designs on user request.
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.