Agent skill

Framer CI Integration

by jeremylongshore in jeremylongshore/tons-of-skills-marketplace

Configure Framer CI/CD integration with GitHub Actions and testing.

MITAuto-check passedDevOps & Cloud

Install Framer CI Integration

skills CLI
$ npx skills add jeremylongshore/tons-of-skills-marketplace --skill framer-ci-integration -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install jeremylongshore/tons-of-skills-marketplace framer-ci-integration --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/jeremylongshore/tons-of-skills-marketplace.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/.curated/framer-ci-integration .claude/skills/framer-ci-integration && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
framer-ci-integration
GitHub stars
2.8k
Token cost
~886 tokens
SKILL.md length
162 words
Files
1
Skills in repo
3,342
Repo updated
First seen
Licence
MIT

At a glance

Configure Framer CI/CD integration with GitHub Actions and testing.

  • Works in 3 steps: GitHub Actions for Plugin Build → CMS Sync Script for CI → Configure Secrets
  • Setting up automated testing
  • SKILL.md covers Prerequisites, Error Handling, Examples and Overview, plus 4 more sections
  • Calls gh; needs FRAMER_API_KEY

What it does

Framer CI Integration is an agent skill from jeremylongshore/tons-of-skills-marketplace. 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".

Its SKILL.md is about 890 tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts. Compatibility notes: Designed for Claude Code

It sits in DevOps & Cloud, covering CI/CD. It works with GitHub Actions. The repository describes itself as: Model-agnostic agent-skills platform with a harness-free canonical layer, verified adapters, and the ccpi package manager. Explore at tonsofskills.com. The licence is MIT.

When your agent uses it

  • Setting up automated testing
  • Configuring CI pipelines
  • Integrating Framer tests into your build process
  • With phrases like framer CI

Example prompts

  • “framer CI”
  • “framer GitHub Actions”
  • “framer automated tests”
  • “/framer-ci-integration”

Requirements

  • A credential in FRAMER_API_KEY
  • Compatibility (from SKILL.md): Designed for Claude Code
  • Pre-approved tools (allowed-tools): Read, Write, Edit, Bash(gh:*)

Workflow steps

3 steps, taken from the step headings in SKILL.md.

  1. GitHub Actions for Plugin Build
  2. CMS Sync Script for CI
  3. Configure Secrets

What it can do on your machine

Read from SKILL.md and the folder at commit cfae287. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves these tools, so the agent can use them without asking each time:

    • Read
    • Write
    • Edit
    • Bash(gh:*)

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    Shell commands in SKILL.md call:

    • gh

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    Links to these hosts (documentation or services it may open):

    • docs.github.com
    • framer.com

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names these keys or tokens, usually read from environment variables:

    • FRAMER_API_KEY

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

  • Compatibility

    Designed for Claude Code

    From compatibility in the SKILL.md frontmatter.

Context cost

Framer CI Integration loads about 886 tokens when it runs. Until then it costs about 78 tokens; SKILL.md has 162 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~78
When it runs · the whole SKILL.md, loaded when a task matches
~886

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from jeremylongshore/tons-of-skills-marketplace at commit cfae287, republished under its MIT licence (© jeremylongshore). 162 words, ~886 tokens.

Download SKILL.mdSave it as .claude/skills/framer-ci-integration/SKILL.md (or your agent's skills folder).
name
framer-ci-integration
description
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".
allowed-tools
Read, Write, Edit, Bash(gh:*)
compatibility
Designed for Claude Code
version
1.5.0
license
MIT
author
Jeremy Longshore <jeremy@intentsolutions.io>
tags
saas, framer

Framer CI Integration

Prerequisites

Protected CI environments, scoped credentials available only to trusted jobs, synthetic site/CMS fixtures, and a deployment owner.

Error Handling

Stop promotion on failed build, publish, domain, integration, or privacy checks; roll back the canary and preserve redacted evidence for review.

Examples

Run fixture-based tests with no secrets on a pull request, then use a protected staging job to publish a fictional canary. Block production promotion when a route, integration, or access check differs from the approved result.

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

Next Steps

For deployment, see framer-deploy-integration.

© jeremylongshore, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

Just SKILL.md in skills/.curated/framer-ci-integration of jeremylongshore/tons-of-skills-marketplace.

Open the folder on GitHubat commit cfae287

Compare with similar skills

Framer CI Integration next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Framer CI Integration compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Framer CI Integration this skilljeremylongshore/tons-of-skills-marketplace2.8k—~886Automated safety check: PassMIT
Analyze GitHub Action Logswithastro/astro63k1 repos~1.3kAutomated safety check: PassCustom licence
GitHub Actions Templatesbartstc/vite-ts-react-template12214 repos~1.9kAutomated safety check: PassMIT
Nushellccusage/ccusage19k—~938Automated safety check: PassCustom licence
Repo Hygiene Scan and FixQwenLM/qwen-code28k—~1.7kAutomated safety check: PassApache-2.0
Senior DevOps Toolkitmaslennikov-ig/claude-code-orchestrator-kit2606 repos~1.1kAutomated safety check: NotesCustom licence

Similar skills

  • Official

    Analyze recent GitHub Actions workflow runs to identify patterns, mistakes, and improvements.

    63k GitHub starsUsed in 1 repo~1.3k tokens
    DevOps & CloudAuto-check passed
  • GitHub Actions Templates

    bartstc/vite-ts-react-template

    Create production-ready GitHub Actions workflows for automated testing, building, and deploying applications.

    122 GitHub starsUsed in 14 repos~1.9k tokens
    DevOps & CloudAuto-check passed
  • Nushell

    ccusage/ccusage

    Guides ccusage Nushell scripts. An agent skill from ccusage/ccusage.

    19k GitHub stars~938 tokensUpdated today
    DevOps & CloudAuto-check passed
  • Scheduled CI skill that scans a repository for small, certain docs, test and code hygiene issues and fixes them on one branch with a commit per finding.

    28k GitHub stars~1.7k tokensUpdated today
    DevOps & CloudAuto-check passed
  • Senior DevOps Toolkit

    maslennikov-ig/claude-code-orchestrator-kit

    Comprehensive DevOps skill for CI/CD, infrastructure automation, containerization, and cloud platforms (AWS, GCP, Azure). Includes pipeline setup…

    260 GitHub starsUsed in 6 repos~1.1k tokens
    DevOps & CloudAuto-check: notes
  • CI Failure Triage and Repair

    Chachamaru127/claude-code-harness

    Diagnoses failing CI pipelines and tests, deciding first whether the test or the implementation is at fault, and hands hard cases to a dedicated fixer subagent.

    3.2k GitHub starsUsed in 1 repo~1.1k tokens
    DevOps & CloudAuto-check: notes

More from jeremylongshore/tons-of-skills-marketplace

All 3,342 skills in this repo
  • Performing Security Code Review

    jeremylongshore/tons-of-skills-marketplace

    Execute this skill enables AI assistant to conduct a security-focused code review using the security-agent plugin.

    2.8k GitHub starsUsed in 2 repos~1.3k tokens
    Auto-check: notes
  • Adapting Transfer Learning Models

    jeremylongshore/tons-of-skills-marketplace

    Build this skill automates the adaptation of pre-trained machine learning models using transfer learning techniques.

    2.8k GitHub stars~1.1k tokensUpdated today
    Auto-check passed
  • Agent Context Loader

    jeremylongshore/tons-of-skills-marketplace

    Execute proactive auto-loading: automatically detects and loads agents.md files.

    2.8k GitHub stars~1.1k tokensUpdated today
    Auto-check passed
  • Aggregating Performance Metrics

    jeremylongshore/tons-of-skills-marketplace

    Aggregate and centralize performance metrics from applications, systems, databases, caches, and services.

    2.8k GitHub stars~1.2k tokensUpdated today
    Auto-check passed
  • Analyzing Capacity Planning

    jeremylongshore/tons-of-skills-marketplace

    Execute this skill enables AI assistant to analyze capacity requirements and plan for future growth.

    2.8k GitHub stars~947 tokensUpdated today
    Auto-check passed
  • Analyzing Database Indexes

    jeremylongshore/tons-of-skills-marketplace

    Process use when you need to work with database indexing. An agent skill from jeremylongshore/tons-of-skills-marketplace.

    2.8k GitHub stars~2k tokensUpdated today
    Auto-check passed

Works with

Categories

Questions about Framer CI Integration

What does Framer CI Integration do?

Configure Framer CI/CD integration with GitHub Actions and testing. Framer CI Integration is an agent skill from jeremylongshore/tons-of-skills-marketplace. Configure Framer CI/CD integration with GitHub Actions and testing.

When should I use Framer CI Integration?

Framer CI Integration fits situations like: setting up automated testing; configuring CI pipelines; integrating Framer tests into your build process; with phrases like framer CI.

How do I install Framer CI Integration in Claude Code?

Run `npx skills add jeremylongshore/tons-of-skills-marketplace --skill framer-ci-integration -a claude-code`. Or copy the skill folder (skills/.curated/framer-ci-integration in jeremylongshore/tons-of-skills-marketplace) into .claude/skills/framer-ci-integration in your project. Claude Code loads it when a task matches its description.

How do I install Framer CI Integration in Codex?

Run `npx skills add jeremylongshore/tons-of-skills-marketplace --skill framer-ci-integration -a codex`. Or copy the skill folder (skills/.curated/framer-ci-integration in jeremylongshore/tons-of-skills-marketplace) into .agents/skills/framer-ci-integration in your project. Codex loads it when a task matches its description.

Can I use Framer CI Integration in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add jeremylongshore/tons-of-skills-marketplace --skill framer-ci-integration -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/framer-ci-integration, .gemini/skills/framer-ci-integration, .github/skills/framer-ci-integration and .opencode/skills/framer-ci-integration in your project.

What does Framer CI Integration need to run?

Going by SKILL.md and its folder, Framer CI Integration needs the command-line tools its instructions call (gh) and credentials named FRAMER_API_KEY. Our summary lists: A credential in FRAMER_API_KEY. Its frontmatter pre-approves these tools: Read, Write, Edit, Bash(gh:*). Compatibility (from SKILL.md): Designed for Claude Code.

Does Framer CI Integration access the network?

SKILL.md names 2 domains. As links in the text: docs.github.com and framer.com. This is read from the text; nothing was executed.

Is Framer CI Integration safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Framer CI Integration use?

Framer CI Integration is published under the MIT licence (declared in SKILL.md). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Framer CI Integration use?

About 886 tokens (SKILL.md is roughly 3.5k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Framer CI Integration?

Skills that share tags, products or a category with Framer CI Integration: Analyze GitHub Action Logs (withastro/astro, 63k stars), GitHub Actions Templates (bartstc/vite-ts-react-template, 122 stars), Nushell (ccusage/ccusage, 19k stars) and Repo Hygiene Scan and Fix (QwenLM/qwen-code, 28k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Framer CI Integration?

jeremylongshore (a GitHub user) maintains it in jeremylongshore/tons-of-skills-marketplace, which has 2,827 GitHub stars. The repository holds 3,342 skills in this directory. The repository was last updated on October 10, 2026.

Source: jeremylongshore/tons-of-skills-marketplace on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.