ReddRadar
Agent 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".
Install this agent skill to your Project
npx add-skill https://github.com/jeremylongshore/claude-code-plugins-plus-skills/tree/main/plugins/saas-packs/framer-pack/skills/framer-security-basics
SKILL.md
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
-
.envin.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.
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
jeremylongshore/claude-code-plugins-plus-skills
dockerfile-generator
Dockerfile Generator - Auto-activating skill for DevOps Basics. Triggers on: dockerfile generator, dockerfile generator Part of the DevOps Basics skill category.
jeremylongshore/claude-code-plugins-plus-skills
branch-naming-helper
Branch Naming Helper - Auto-activating skill for DevOps Basics. Triggers on: branch naming helper, branch naming helper Part of the DevOps Basics skill category.
jeremylongshore/claude-code-plugins-plus-skills
readme-generator
Readme Generator - Auto-activating skill for DevOps Basics. Triggers on: readme generator, readme generator Part of the DevOps Basics skill category.
jeremylongshore/claude-code-plugins-plus-skills
makefile-generator
Makefile Generator - Auto-activating skill for DevOps Basics. Triggers on: makefile generator, makefile generator Part of the DevOps Basics skill category.
jeremylongshore/claude-code-plugins-plus-skills
gitignore-generator
Gitignore Generator - Auto-activating skill for DevOps Basics. Triggers on: gitignore generator, gitignore generator Part of the DevOps Basics skill category.
jeremylongshore/claude-code-plugins-plus-skills
pre-commit-hook-setup
Pre Commit Hook Setup - Auto-activating skill for DevOps Basics. Triggers on: pre commit hook setup, pre commit hook setup Part of the DevOps Basics skill category.
Didn't find tool you were looking for?