Skill UI

This skill helps users analyze and optimize their Framer usage costs. It covers selecting the appropriate plan (Mini, Basic, Pro, etc.), implementing strategies for CMS item budgeting, minimizing unnecessary publishing cycles, and understanding the difference between development and production environments to reduce API and site plan expenses.

A utility designed to collect comprehensive diagnostic evidence for Framer development issues. It automatically gathers runtime environment details, installed package versions, API connectivity status, and necessary configuration files. Use this when preparing detailed support tickets or troubleshooting persistent bugs related to Framer plugins or server-side APIs.

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.

This comprehensive 'Hello World' guide serves as a foundational tutorial for Framer development. It demonstrates key skills across the ecosystem, including building functional plugins (UI interaction), creating customizable code components with property controls, implementing dynamic code overrides for sophisticated animations, and interacting with the Framer Server API for headless site data management. Ideal for developers starting a new Framer integration or mastering core API patterns.

This guide details how to set up a robust, local development loop for Framer plugins and components. It covers hot-reloading using Vite, writing unit tests with Vitest, and integrating with the Framer Server API. This workflow enables developers to achieve fast iteration cycles, ensuring seamless development from concept to production-ready prototype within the Framer environment.

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 production-ready, robust coding patterns for Framer development. This resource covers key areas including type-safe CMS interactions, plugin state management hooks, reusable component architectures, and server API wrappers. Use this when refactoring existing SDK usage or establishing scalable coding standards for complex Framer integrations.

This guide provides comprehensive security best practices for developers building with Framer. It covers secure credential management (like API keys and Site IDs), implementing the principle of least privilege, and securing plugins and Server API connections. Use this when auditing your Framer setup or ensuring production-level security for sensitive data handling.

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.