From framer-pack
Optimizes Framer costs with plan selection, CMS usage monitoring in TypeScript, batch publishing, and dev/prod site strategies. For billing analysis and budget management.
npx claudepluginhub jeremylongshore/claude-code-plugins-plus-skills --plugin framer-packThis skill is limited to using the following tools:
Optimize Framer costs across plans and features. The Server API is free during beta. Main costs are Framer site plans, custom domains, and team seats.
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 costs across plans and features. The Server API is free during beta. Main costs are Framer site plans, custom domains, and team seats.
| Plan | Price | CMS Items | Custom Domain | Pages |
|---|---|---|---|---|
| Free | $0 | 100 | No | 2 |
| Mini | $5/mo | 200 | Yes | 150 |
| Basic | $15/mo | 1,000 | Yes | 300 |
| Pro | $30/mo | 10,000 | Yes | Unlimited |
| Enterprise | Custom | Unlimited | Yes | Unlimited |
// Track CMS item usage to avoid plan overages
async function checkCMSUsage(client: any) {
const collections = await client.getCollections();
let totalItems = 0;
for (const col of collections) {
const items = await col.getItems();
totalItems += items.length;
console.log(`${col.name}: ${items.length} items`);
}
console.log(`Total CMS items: ${totalItems}`);
// Pro plan: 10,000 limit
console.log(`Usage: ${((totalItems / 10000) * 100).toFixed(1)}% of Pro limit`);
}
// Batch CMS updates before publishing (each publish rebuilds the site)
async function batchUpdateAndPublish(updates: Array<{ collection: string; items: any[] }>) {
const client = await getClient();
for (const update of updates) {
const col = (await client.getCollections()).find(c => c.name === update.collection);
if (col) await col.setItems(update.items);
}
// Single publish after all updates
await client.publish();
}
Use a free plan site for development and testing. Only pay for the production site.
For architecture patterns, see framer-reference-architecture.