Skill UI

This comprehensive workflow automates the core source-to-Lokalise process. Users can upload source translation files (JSON, XLIFF, PO, etc.), programmatically create new keys from code scans or CMS exports, update existing keys, and manage release tags. It is designed for CI/CD pipelines and bulk content synchronization.

This guide provides comprehensive instructions for setting up and authenticating Framer development environments. It covers two primary surfaces: the Plugin SDK (for UI running inside the editor) and the Server API (for headless CMS synchronization or CI/CD). Users will learn how to initialize projects, configure environment variables, and connect both client-side and server-side components.

This guide provides advanced techniques to boost Framer API performance. It covers critical optimization areas including batch CMS syncing to prevent timeouts, memoizing expensive React components for better render performance, establishing persistent WebSocket connections, and optimizing image URLs before CMS synchronization. Use this when aiming to improve overall speed and stability of Framer-integrated applications.

A comprehensive checklist designed to guide users through deploying Framer integrations to a live production environment. It covers best practices for plugins, code components, server API synchronization (CMS), and final site publishing, ensuring a thorough and reliable go-live process.

This guide details how to configure Framer's Continuous Integration/Continuous Deployment (CI/CD) pipeline using GitHub Actions. It covers automated testing for Framer plugins (using Vite/vitest), building, and synchronizing content from a CMS to the Framer site. Use this when setting up robust, automated deployment workflows for Framer projects, ensuring content and code changes are reliably published.

This plugin allows developers to build Framer components by syncing data from external data sources (such as APIs or databases) into Framer's Managed Collections. It serves as the primary integration pattern, handling both schema creation and item population. Use this when your design requires displaying dynamic content driven by external systems.

This tool facilitates the deployment of Framer Server API integrations (such as CMS sync services and webhook handlers) to various cloud platforms, including Vercel, Fly.io, and Cloud Run. It is essential for setting up production environments, configuring platform-specific secrets, and establishing automated deployment pipelines for Framer-powered applications.

Provides a comprehensive reference architecture for building production-ready Framer integrations. This guide covers optimal project layout, including plugins, server API backend, CMS synchronization patterns, and advanced code components. Use it when designing new, complex Framer applications or establishing enterprise-level development standards.

A comprehensive guide to implementing real-time data synchronization and handling event triggers with Framer's API. This skill covers subscribing to CMS changes via WebSockets, implementing secure external webhook endpoints with signature validation, and integrating Framer plugin event listeners for dynamic interaction. Use this when building complex, event-driven web applications connected to Framer.

This guide details how to implement and handle real-time webhooks from Linktree. By subscribing to events (like link creation, profile updates, or analytics milestones), developers can automate tasks such as syncing data to a CMS, updating marketing sites, or alerting teams when key metrics are hit. It covers signature verification, event types, and best practices for idempotency.