When should I use this skill?

Use it when starting a new Framer project, designing a custom plugin, or setting up automated content synchronization between an external backend and Framer CMS.

What is the Framer Reference Architecture skill?

It is a specialized capability for Claude Code that provides templates and guidance for structuring professional Framer integrations, including plugins and API sync.

Does this skill handle automated publishing?

Yes, it provides patterns and guidance for setting up CI/CD pipelines to automate publishing via the Framer Server API.

Can I use this for custom code components?

Absolutely; the skill includes recommended directory structures and patterns specifically for managing shared code components and interactive overrides.

Framer Reference Architecture

Name: Framer Reference Architecture
Author: jeremylongshore

byjeremylongshore

•

2,024

•

Design Tools

Implements production-grade architectural patterns and project structures for Framer integrations and CMS synchronization.

This skill provides a standardized framework for building robust Framer applications, covering everything from editor plugins and custom code components to automated CMS synchronization and CI/CD publishing pipelines. It guides developers through the complexities of the Framer Server API and helps establish a scalable project layout that separates concerns between the plugin UI, backend services, and shared interactive components, ensuring maintainable and high-performance design-to-code workflows.

Key Features

01Architectural patterns for Server API and CMS synchronization

02Guidance on implementing custom code components and overrides

03Decision matrix for choosing between plugins, APIs, and components

04Standardized project folder structure for Framer integrations

052,024 GitHub stars

06Automated publishing pipeline strategies using CI/CD

Use Cases

01Bootstrapping a new Framer-to-Backend integration project

02Refactoring existing Framer projects to meet industry best practices

03Designing automated workflows for syncing external CMS data with Framer

Key Features

01Architectural patterns for Server API and CMS synchronization

02Guidance on implementing custom code components and overrides

03Decision matrix for choosing between plugins, APIs, and components

04Standardized project folder structure for Framer integrations

052,024 GitHub stars

06Automated publishing pipeline strategies using CI/CD

Use Cases

01Bootstrapping a new Framer-to-Backend integration project

02Refactoring existing Framer projects to meet industry best practices

03Designing automated workflows for syncing external CMS data with Framer