Agent skill
framer-ci-integration
Configure Framer CI/CD integration with GitHub Actions and testing. Use when setting up automated testing, configuring CI pipelines, or integrating Framer tests into your build process. Trigger with phrases like "framer CI", "framer GitHub Actions", "framer automated tests", "CI framer".
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-ci-integration
SKILL.md
Framer CI Integration
Overview
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.
Instructions
Step 1: GitHub Actions for Plugin Build
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
Step 2: CMS Sync Script for CI
// 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); });
Step 3: Configure Secrets
gh secret set FRAMER_API_KEY --body "framer_sk_..."
gh secret set FRAMER_SITE_ID --body "abc123"
Output
- Plugin builds verified on every PR
- Automated CMS sync and publish on main push
- Secrets configured in GitHub
Resources
Next Steps
For deployment, see framer-deploy-integration.
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
dockerfile-generator
Dockerfile Generator - Auto-activating skill for DevOps Basics. Triggers on: dockerfile generator, dockerfile generator Part of the DevOps Basics skill category.
branch-naming-helper
Branch Naming Helper - Auto-activating skill for DevOps Basics. Triggers on: branch naming helper, branch naming helper Part of the DevOps Basics skill category.
readme-generator
Readme Generator - Auto-activating skill for DevOps Basics. Triggers on: readme generator, readme generator Part of the DevOps Basics skill category.
makefile-generator
Makefile Generator - Auto-activating skill for DevOps Basics. Triggers on: makefile generator, makefile generator Part of the DevOps Basics skill category.
gitignore-generator
Gitignore Generator - Auto-activating skill for DevOps Basics. Triggers on: gitignore generator, gitignore generator Part of the DevOps Basics skill category.
pre-commit-hook-setup
Pre Commit Hook Setup - Auto-activating skill for DevOps Basics. Triggers on: pre commit hook setup, pre commit hook setup Part of the DevOps Basics skill category.
Didn't find tool you were looking for?