Agent skill

framer-cost-tuning

Optimize Framer costs through tier selection, sampling, and usage monitoring. Use when analyzing Framer billing, reducing API costs, or implementing usage monitoring and budget alerts. Trigger with phrases like "framer cost", "framer billing", "reduce framer costs", "framer pricing", "framer expensive", "framer budget".

Stars 1,803
Forks 241

Install this agent skill to your Project

npx add-skill https://github.com/jeremylongshore/claude-code-plugins-plus-skills/tree/main/plugins/saas-packs/framer-pack/skills/framer-cost-tuning

SKILL.md

Framer Cost Tuning

Overview

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.

Framer Plans

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

Cost Optimization Strategies

Step 1: CMS Item Budgeting

typescript
// 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`);
}

Step 2: Minimize Publish Frequency

typescript
// 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();
}

Step 3: Development vs Production Sites

Use a free plan site for development and testing. Only pay for the production site.

Resources

Next Steps

For architecture patterns, see framer-reference-architecture.

Expand your agent's capabilities with these related and highly-rated skills.

Didn't find tool you were looking for?

Be as detailed as possible for better results