New: 98,000+ skills indexed from GitHub repos with 100+ stars · every skill safety-checkedBrowse top skillsTop skills
Esc to closeBrowse all skills
Submit a skillBrowse skills
Submit a skillBrowse skills

Agent skill

Framer Install Auth

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

Install and configure Framer SDK/CLI authentication. An agent skill from jeremylongshore/tons-of-skills-marketplace.

MITAuto-check: notesBackend & APIs

Install Framer Install Auth

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

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

GitHub CLI
$ gh skill install jeremylongshore/tons-of-skills-marketplace framer-install-auth --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-install-auth .claude/skills/framer-install-auth && 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-install-auth
GitHub stars
2.8k
Token cost
~999 tokens
SKILL.md length
296 words
Files
1
Skills in repo
3,342
Repo updated
First seen
Licence
MIT

At a glance

Install and configure Framer SDK/CLI authentication. An agent skill from jeremylongshore/tons-of-skills-marketplace.

  • Works in 5 steps: Choose Your Integration Type → Set Up a Framer Plugin → Set Up the Server API (Headless Access) → …
  • Setting up a new Framer integration
  • SKILL.md covers Examples, Overview, Prerequisites and Instructions, plus 4 more sections
  • Calls npm and npx; needs FRAMER_API_KEY

What it does

Framer Install Auth is an agent skill from jeremylongshore/tons-of-skills-marketplace. Install and configure Framer SDK/CLI authentication. Use when setting up a new Framer integration, configuring API keys, or initializing Framer in your project. Trigger with phrases like "install framer", "setup framer", "framer auth", "configure framer API key".

Its SKILL.md is about 1000 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 Backend & APIs. It works with React. 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 a new Framer integration
  • Configuring API keys
  • Initializing Framer in your project
  • With phrases like install framer

Example prompts

  • “install framer”
  • “setup framer”
  • “framer auth”
  • “/framer-install-auth”

Requirements

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

Workflow steps

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

  1. Choose Your Integration Type
  2. Set Up a Framer Plugin
  3. Set Up the Server API (Headless Access)
  4. Configure Environment Variables
  5. Verify Plugin Connection

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(npm:*)
    • Bash(npx:*)
    • Grep

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    Shell commands in SKILL.md call:

    • npm
    • npx

    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):

    • 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 Install Auth loads about 999 tokens when it runs. Until then it costs about 71 tokens; SKILL.md has 296 words of instructions outside code blocks.

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

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: notes

The automated check noted patterns worth knowing about, such as sudo or a known installer.

  • NoteMentions a .env fileSKILL.md:85
    # .env (NEVER commit)
  • NoteMentions a .env fileSKILL.md:90
    .env
  • NoteMentions a .env fileSKILL.md:91
    .env.local

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). 296 words, ~999 tokens.

Download SKILL.mdSave it as .claude/skills/framer-install-auth/SKILL.md (or your agent's skills folder).
name
framer-install-auth
description
Install and configure Framer SDK/CLI authentication. Use when setting up a new Framer integration, configuring API keys, or initializing Framer in your project. Trigger with phrases like "install framer", "setup framer", "framer auth", "configure framer API key".
allowed-tools
Read, Write, Edit, Bash(npm:*), Bash(npx:*), Grep
compatibility
Designed for Claude Code
version
1.5.0
license
MIT
author
Jeremy Longshore <jeremy@intentsolutions.io>
tags
saas, framer

Framer Install & Auth

Examples

Use a scoped staging credential to confirm a read-only project check, record only the scope and redacted outcome, then revoke the test credential and verify access is denied.

Overview

Set up the Framer Plugin SDK for building editor plugins, or the framer-api package for Server API access. Framer has two developer surfaces: Plugins (run inside the Framer editor UI) and Server API (run from any Node.js server via WebSocket).

Prerequisites

  • Node.js 18+
  • Framer account (free or paid)
  • For Server API: API key from site settings

Instructions

Step 1: Choose Your Integration Type
TypePackageUse Case
Pluginframer-pluginUI that runs inside Framer editor
Server APIframer-apiHeadless CMS sync, CI/CD publishing
Code ComponentsReact in FramerCustom components on the canvas
Code OverridesReact in FramerModify existing component behavior
Step 2: Set Up a Framer Plugin
bash
# Scaffold a new plugin project
npx create-framer-plugin@latest my-plugin
cd my-plugin
npm install
npm run dev

This creates a Vite + React project with the framer-plugin package pre-configured. The plugin runs inside Framer's editor iframe.

Step 3: Set Up the Server API (Headless Access)
bash
npm install framer-api
typescript
// server.ts — Server API connection
import { framer } from 'framer-api';

const client = await framer.connect({
  apiKey: process.env.FRAMER_API_KEY!, // From site settings
  siteId: process.env.FRAMER_SITE_ID!,
});

// List all CMS collections
const collections = await client.getCollections();
console.log('Collections:', collections.map(c => c.name));
Step 4: Configure Environment Variables
bash
# .env (NEVER commit)
FRAMER_API_KEY=framer_sk_abc123...
FRAMER_SITE_ID=abc123def456

# .gitignore
.env
.env.local
Step 5: Verify Plugin Connection

Open Framer, go to your project, click Plugins > Development > select your local plugin. The dev server hot-reloads into the editor.

typescript
// Plugin verification — runs inside Framer editor
import { framer } from 'framer-plugin';

export function App() {
  const handleTest = async () => {
    const selection = await framer.getSelection();
    console.log('Selected layers:', selection.length);
    framer.notify(`Found ${selection.length} selected layers`);
  };

  return <button onClick={handleTest}>Test Connection</button>;
}

Output

  • Plugin project scaffolded with Vite + React
  • Server API client connected via WebSocket
  • Environment variables configured
  • Verified connection to Framer editor or API

Error Handling

ErrorCauseSolution
Plugin not showingDev server not runningRun npm run dev and reload Framer
Invalid API keyWrong key or site IDGenerate new key in site settings
WebSocket connection failedNetwork/firewallAllow outbound WSS connections
framer-plugin not foundMissing dependencyRun npm install framer-plugin

Resources

Next Steps

After setup, proceed to framer-hello-world for your first plugin or component.

© 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-install-auth of jeremylongshore/tons-of-skills-marketplace.

Open the folder on GitHubat commit cfae287

Compare with similar skills

Framer Install Auth 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 Install Auth compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Framer Install Auth this skilljeremylongshore/tons-of-skills-marketplace2.8k—~999Automated safety check: NotesMIT
Supabasecurvenote/curvenote1705 repos~2.2kAutomated safety check: PassCustom licence
Twenty Syncable Entity Cache and Transformtwentyhq/twenty58k—~2.4kAutomated safety check: PassCustom licence
Livewire Developmentcoollabsio/coolify63k—~964Automated safety check: PassMIT
Stripe Appsfossasia/eventyay1.7k1 repos~3.6kAutomated safety check: PassApache-2.0
Trigger.dev Realtimepapermark/papermark9.2k—~1.7kAutomated safety check: PassCustom licence

Similar skills

  • Supabase

    curvenote/curvenote

    A skill your agent uses when doing ANY task involving Supabase.

    170 GitHub starsUsed in 5 repos~2.2k tokens
    Backend & APIsAuto-check passed

  • Twenty Syncable Entity Cache and Transform

    twentyhq/twenty

    Walks through step 2 of adding a syncable entity to the Twenty server: a cache service for flat entity maps and utilities that transform entities and DTOs into universal flat entities.

    58k GitHub stars~2.4k tokensUpdated today
    Backend & APIsAuto-check passed

  • Livewire Development

    coollabsio/coolify

    A skill your agent uses for any task or question involving Livewire.

    63k GitHub stars~964 tokensUpdated yesterday
    Backend & APIsAuto-check passed

  • Stripe Apps

    fossasia/eventyay

    A skill your agent uses when building, modifying, or reviewing a Stripe App — or when the user describes something that implies one (e.g.

    1.7k GitHub starsUsed in 1 repo~3.6k tokens
    Backend & APIsAuto-check passed

  • Trigger.dev Realtime

    papermark/papermark

    Shows how to subscribe to Trigger.dev task runs from the backend and from React for progress indicators, live dashboards, AI response streams and approval waits.

    9.2k GitHub stars~1.7k tokensUpdated 1 mo ago
    Backend & APIsAuto-check passed

  • Livewire Development

    yungifez/skuul

    A skill your agent uses for any task or question involving Livewire.

    409 GitHub starsUsed in 1 repo~1.9k tokens
    Backend & APIsAuto-check passed

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 Install Auth

What does Framer Install Auth do?

Install and configure Framer SDK/CLI authentication. An agent skill from jeremylongshore/tons-of-skills-marketplace. Framer Install Auth is an agent skill from jeremylongshore/tons-of-skills-marketplace. Install and configure Framer SDK/CLI authentication.

When should I use Framer Install Auth?

Framer Install Auth fits situations like: setting up a new Framer integration; configuring API keys; initializing Framer in your project; with phrases like install framer.

How do I install Framer Install Auth in Claude Code?

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

How do I install Framer Install Auth in Codex?

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

Can I use Framer Install Auth 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-install-auth -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-install-auth, .gemini/skills/framer-install-auth, .github/skills/framer-install-auth and .opencode/skills/framer-install-auth in your project.

What does Framer Install Auth need to run?

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

Does Framer Install Auth access the network?

SKILL.md names 1 domain. As links in the text: framer.com. This is read from the text; nothing was executed.

Is Framer Install Auth safe to install?

Our automated static check of SKILL.md found notes only (mentions a .env file), nothing it rates as a warning. It is not a guarantee. Review the folder before installing.

What licence does Framer Install Auth use?

Framer Install Auth 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 Install Auth use?

About 999 tokens (SKILL.md is roughly 4k 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 Install Auth?

Skills that share tags, products or a category with Framer Install Auth: Supabase (curvenote/curvenote, 170 stars), Twenty Syncable Entity Cache and Transform (twentyhq/twenty, 58k stars), Livewire Development (coollabsio/coolify, 63k stars) and Stripe Apps (fossasia/eventyay, 1.7k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Framer Install Auth?

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.