Skill

framer-security-basics

Apply Framer security best practices for secrets and access control. Use when securing API keys, implementing least privilege access, or auditing Framer security configuration. Trigger with phrases like "framer security", "framer secrets", "secure framer", "framer API key security".

npx claudepluginhub flight505/skill-forge --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.3k

Guides Next.js Cache Components and Partial Prerendering (PPR): 'use cache' directives, cacheLife(), cacheTag(), revalidateTag() for caching, invalidation, static/dynamic optimization. Auto-activates on cacheComponents: true.

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

Stats

Parent Repo Stars0

Parent Repo Forks0

Last CommitApr 30, 2026

Actions

View Source View Plugin View on GitHub View README

Help us improve

Share bugs, ideas, or general feedback.

framer-security-basics

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.