Agent skill · software engineering · jeremylongshore
framer-reference-architecture
Implement Framer reference architecture with best-practice project layout.
Why this skill is useful
Provides specific integration patterns and project structure for Framer applications that the AI wouldn't reliably generate on its own.
What it needs
Requires framer installed locally. About 2k tokens when loaded. Last updated 2026-08-07. 2,604 stars on the source repository.
What this skill does
Framer Reference Architecture Prerequisites Documented site owners, publishing/domain access policy, approved integrations, visitor-data boundaries, synthetic staging site, and rollback owner. Instructions Separate editing, publishing, domain/DNS, forms, analytics, and downstream integrations by least privilege. Validate changes in staging, use redacted telemetry, promote a canary, and retain a tested rollback path. Output Maintain an architecture record with trust boundaries, approved destinations, access/retention controls, owners, canary result, and rollback mechanism. Exclude credentials and visitor submissions. Error Handling Quarantine unknown integration destinations and stop publishing on domain, access, or privacy-policy failures. Restore the prior configuration before retrying. Examples Publish a fictional staging page, deny an unapproved analytics consumer, and verify rollback restores the prior site without leaking form data. Overview Production architecture for Framer integrations covering plugins, Server API CMS sync, code components, and automated publishing pipelines. Architecture Diagram Project Structure Integration Patterns Pattern When How --------- ------ ----- Plugin CMS Sync User-initiated sync Plugin UI → managed collection Server API Sync Automated/scheduled Node.js → Server API WebSocket CI/CD Publish On content change GitHub Actions → Server API → publish Webhook Bridge External CMS events Webhook → your API → Server API Decision Matrix Need Solution ------ ---------- Custom UI in editor Framer Plugin Headless CMS sync Server API Custom interactive elements Code Components Modify existing animations Code Overrides Automated publishing Server API + CI/CD Resources Framer Developers Server API CMS API Plugin Introduction Next Steps Start with framer-install-auth to set up your development environment.
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills jeremylongshore/framer-reference-architecture