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".
Best use case
framer-ci-integration is best used when you need a repeatable AI agent workflow instead of a one-off prompt.
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".
Teams using framer-ci-integration should expect a more consistent output, faster repeated execution, less prompt rewriting.
When to use this skill
- You want a reusable workflow that can be run more than once with consistent structure.
When not to use this skill
- You only need a quick one-off answer and do not need a reusable workflow.
- You cannot install or maintain the underlying files, dependencies, or repository context.
Installation
Claude Code / Cursor / Codex
Manual Installation
- Download SKILL.md from GitHub
- Place it in
.claude/skills/framer-ci-integration/SKILL.mdinside your project - Restart your AI agent — it will auto-discover the skill
How framer-ci-integration Compares
| Feature / Agent | framer-ci-integration | Standard Approach |
|---|---|---|
| Platform Support | Not specified | Limited / Varies |
| Context Awareness | High | Baseline |
| Installation Complexity | Unknown | N/A |
Frequently Asked Questions
What does this skill do?
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".
Where can I find the source code?
You can find the source code on GitHub using the link provided at the top of the page.
Related Guides
AI Agents for Coding
Browse AI agent skills for coding, debugging, testing, refactoring, code review, and developer workflows across Claude, Cursor, and Codex.
Best AI Skills for Claude
Explore the best AI skills for Claude and Claude Code across coding, research, workflow automation, documentation, and agent operations.
ChatGPT vs Claude for Agent Skills
Compare ChatGPT and Claude for AI agent skills across coding, writing, research, and reusable workflow execution.
SKILL.md Source
# 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
```yaml
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
```typescript
// 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
```bash
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
- [GitHub Actions](https://docs.github.com/en/actions)
- [Framer Server API](https://www.framer.com/developers/server-api-introduction)
## Next Steps
For deployment, see `framer-deploy-integration`.Related Skills
running-integration-tests
Execute integration tests validating component interactions and system integration. Use when performing specialized testing. Trigger with phrases like "run integration tests", "test integration", or "validate component interactions".
workhuman-deploy-integration
Workhuman deploy integration for employee recognition and rewards API. Use when integrating Workhuman Social Recognition, or building recognition workflows with HRIS systems. Trigger: "workhuman deploy integration".
workhuman-ci-integration
Workhuman ci integration for employee recognition and rewards API. Use when integrating Workhuman Social Recognition, or building recognition workflows with HRIS systems. Trigger: "workhuman ci integration".
wispr-deploy-integration
Wispr Flow deploy integration for voice-to-text API integration. Use when integrating Wispr Flow dictation, WebSocket streaming, or building voice-powered applications. Trigger: "wispr deploy integration".
wispr-ci-integration
Wispr Flow ci integration for voice-to-text API integration. Use when integrating Wispr Flow dictation, WebSocket streaming, or building voice-powered applications. Trigger: "wispr ci integration".
windsurf-ci-integration
Integrate Windsurf Cascade workflows into CI/CD pipelines and team automation. Use when automating Cascade tasks in GitHub Actions, enforcing AI code quality gates, or setting up Windsurf config validation in CI. Trigger with phrases like "windsurf CI", "windsurf GitHub Actions", "windsurf automation", "cascade CI", "windsurf pipeline".
webflow-deploy-integration
Deploy Webflow-powered applications to Vercel, Fly.io, and Google Cloud Run with proper secrets management and Webflow-specific health checks. Trigger with phrases like "deploy webflow", "webflow Vercel", "webflow production deploy", "webflow Cloud Run", "webflow Fly.io".
webflow-ci-integration
Configure Webflow CI/CD with GitHub Actions — automated CMS validation, integration tests with test tokens, and publish-on-merge workflows. Use when setting up automated testing or CI pipelines for Webflow integrations. Trigger with phrases like "webflow CI", "webflow GitHub Actions", "webflow automated tests", "CI webflow", "webflow pipeline".
vercel-deploy-integration
Deploy and manage Vercel production deployments with promotion, rollback, and multi-region strategies. Use when deploying to production, configuring deployment regions, or setting up blue-green deployment patterns on Vercel. Trigger with phrases like "deploy vercel", "vercel production deploy", "vercel promote", "vercel rollback", "vercel regions".
veeva-deploy-integration
Veeva Vault deploy integration for REST API and clinical operations. Use when working with Veeva Vault document management and CRM. Trigger: "veeva deploy integration".
veeva-ci-integration
Veeva Vault ci integration for REST API and clinical operations. Use when working with Veeva Vault document management and CRM. Trigger: "veeva ci integration".
vastai-deploy-integration
Deploy ML training jobs and inference services on Vast.ai GPU cloud. Use when deploying GPU workloads, configuring Docker images, or setting up automated deployment scripts. Trigger with phrases like "deploy vastai", "vastai deployment", "vastai docker", "vastai production deploy".