framer-sdk-patterns

name	framer-sdk-patterns
description	Apply production-ready Framer SDK patterns for TypeScript and Python. Use when implementing Framer integrations, refactoring SDK usage, or establishing team coding standards for Framer. Trigger with phrases like "framer SDK patterns", "framer best practices", "framer code patterns", "idiomatic framer".
allowed-tools	Read, Write, Edit
version	1.5.0
license	MIT
author	Jeremy Longshore <[e-mail]>
tags	["saas","framer"]
compatibility	Designed for Claude Code

Framer SDK Patterns

Overview

Production-ready patterns for Framer plugins, Server API, code components, and CMS integrations. Covers plugin architecture, type-safe CMS operations, and reusable component patterns.

Prerequisites

• Completed framer-install-auth setup
• Familiarity with React and TypeScript

Instructions

Step 1: Type-Safe CMS Operations

// src/cms/types.ts — type-safe field definitions
interface BlogPost {
  title: string;
  body: string;
  author: string;
  publishDate: string;
  featured: boolean;
  slug: string;
}

const BLOG_FIELDS = [
  { id: 'title' as const, name: 'Title', type: 'string' as const },
  { id: 'body' as const, name: 'Body', type: 'formattedText' as const },
  { id: 'author' as const, name: 'Author', type: 'string' as  },
  { :   , : , :    },
  { :   , : , :    },
  { :   , : , :   , :  },
]  ;

 () {
   { : { ...post } };
}