Skill

framer-security-basics

Applies Framer security best practices for API keys, plugin auth, server access: credential storage, client proxies, key rotation scripts, checklists.

React

Typescript

Node

Bash

security

npx claudepluginhub jeremylongshore/claude-code-plugins-plus-skills --plugin framer-pack

Tool Access

This skill is limited to using the following tools:

ReadWriteGrep

Preview

Security best practices for Framer API keys, plugin development, and Server API access.

SKILL.md

Similar Skills

cache-components

139.2k

Guides Next.js Cache Components and Partial Prerendering (PPR) with cacheComponents enabled. Implements 'use cache', cacheLife(), cacheTag(), revalidateTag(), static/dynamic optimization, and cache debugging.

cache-components

mcp-builder

124.2k

Guides building MCP servers enabling LLMs to interact with external services via tools. Covers best practices, TypeScript/Node (MCP SDK), Python (FastMCP).

9 files

anthropics-skills-13

canvas-design

124.2k

Generates original PNG/PDF visual art via design philosophy manifestos for posters, graphics, and static designs on user request.

20 files

anthropics-skills-13

Stats

Parent Repo Stars1854

Parent Repo Forks248

Last CommitMar 22, 2026

Actions

View Source View Plugin View on GitHub View README

Framer Security Basics

Overview

Security best practices for Framer API keys, plugin development, and Server API access.

Instructions

Step 1: Credential Management

Credential	Scope	Where to Store
Server API Key (`framer_sk_*`)	Per-site	Secrets vault
Site ID	Per-site	Can be in config
Plugin auth tokens	Per-user session	Never persist

# .env (never commit)
FRAMER_API_KEY=framer_sk_abc123...
FRAMER_SITE_ID=abc123

# .gitignore
.env
.env.local

Step 2: Plugin Security

// Plugins run in Framer's iframe sandbox — limited browser APIs
// Never store secrets in plugin code (it's client-side)

// Fetch external data through your own API proxy
const data = await fetch('https://your-api.com/framer-data', {
  headers: { 'Authorization': `Bearer ${sessionToken}` },
});

Step 3: Server API Key Rotation

# 1. Generate new key in Framer site settings
# 2. Update in secrets vault
# 3. Test connection
node -e "
  const { framer } = require('framer-api');
  framer.connect({ apiKey: process.env.FRAMER_API_KEY, siteId: process.env.FRAMER_SITE_ID })
    .then(() => console.log('OK'))
    .catch(e => console.error('FAIL', e.message));
"
# 4. Revoke old key in site settings

Step 4: Security Checklist

API keys in environment variables, never in code
.env in .gitignore
Plugin never stores or exposes API keys
Server API accessed only from backend, never client
Pre-commit hook scans for framer_sk_* leaks
HTTPS-only for all API communication

Resources

Next Steps

For production deployment, see framer-prod-checklist.