From framer-pack
Sets up GitHub Actions CI/CD for Framer plugins: Vite builds, Vitest tests on PRs, CMS sync/publishing on main via Framer API, and repo secrets.
npx claudepluginhub jeremylongshore/claude-code-plugins-plus-skills --plugin framer-packThis skill is limited to using the following tools:
Set up CI/CD for Framer plugins and Server API integrations. Plugin builds are tested with Vite + vitest. Server API CMS sync can be triggered from CI for automated content publishing.
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.
Set up CI/CD for Framer plugins and Server API integrations. Plugin builds are tested with Vite + vitest. Server API CMS sync can be triggered from CI for automated content publishing.
name: Framer Plugin CI
on:
push:
branches: [main]
pull_request:
branches: [main]
jobs:
build:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
- uses: actions/setup-node@v4
with: { node-version: '20', cache: 'npm' }
- run: npm ci
- run: npm run build
- run: npm test
cms-sync:
if: github.ref == 'refs/heads/main'
needs: build
runs-on: ubuntu-latest
env:
FRAMER_API_KEY: ${{ secrets.FRAMER_API_KEY }}
FRAMER_SITE_ID: ${{ secrets.FRAMER_SITE_ID }}
steps:
- uses: actions/checkout@v4
- uses: actions/setup-node@v4
with: { node-version: '20', cache: 'npm' }
- run: npm ci
- name: Sync CMS and publish
run: node scripts/sync-and-publish.js
// scripts/sync-and-publish.ts
import { framer } from 'framer-api';
async function main() {
const client = await framer.connect({
apiKey: process.env.FRAMER_API_KEY!,
siteId: process.env.FRAMER_SITE_ID!,
});
// Fetch content from your CMS/API
const posts = await fetch('https://your-api.com/posts').then(r => r.json());
// Sync to Framer CMS
const collections = await client.getCollections();
const blogCollection = collections.find(c => c.name === 'Blog Posts');
if (blogCollection) {
await blogCollection.setItems(posts.map(p => ({ fieldData: { title: p.title, body: p.content, slug: p.slug } })));
console.log(`Synced ${posts.length} posts`);
}
// Publish site
await client.publish();
console.log('Site published');
}
main().catch(e => { console.error(e); process.exit(1); });
gh secret set FRAMER_API_KEY --body "framer_sk_..."
gh secret set FRAMER_SITE_ID --body "abc123"
For deployment, see framer-deploy-integration.