Will this affect my site's performance?

No, it uses lightweight detection logic that only executes once to conditionally apply styles or scripts based on the user's environment.

Does this require external libraries?

Yes, it leverages the standard @webflow/detect-editor package for reliable environment detection within the Webflow ecosystem.

Why should I use this skill for Webflow projects?

It prevents custom JavaScript or CSS from breaking the Webflow Designer interface, making it easier for designers to edit content without code interference.

How does this skill detect the Webflow Designer?

It utilizes the @webflow/detect-editor utility to identify if the current environment is the visual editor or the live site.

Can I use this for non-Webflow sites?

This specific skill is tailored for Webflow environments, though the concept of environment detection is a standard frontend best practice.

Webflow Editor Integration

Name: Webflow Editor Integration
Author: vallafederico

byvallafederico

•

Design Tools

Manages custom code behavior between Webflow's Designer mode and the published site to ensure a seamless editing experience.

This skill provides specialized guidance for Webflow developers to handle environment-specific logic, preventing custom scripts and animations from interfering with the Webflow Designer or Editor interfaces. By implementing environment detection, developers can disable intrusive interactions in the design view while maintaining full functionality on the live site, resulting in a cleaner workflow and more robust production-ready code for hybrid Webflow projects.

Key Features

0115 GitHub stars

02Integration with @webflow/detect-editor package

03Automatic environment detection (Designer vs. Published)

04Safe disabling of custom animations in edit mode

05Best practices for custom Webflow component lifecycle

06Interaction management for the Webflow Canvas

Use Cases

01Optimizing developer workflow when building hybrid Webflow sites with custom code

02Resetting layout transformations for easier editing in the Webflow CMS

03Preventing custom hover effects from breaking elements in the Webflow Designer

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add vallafederico/webflow-dev-setup webflow-editor-integration

For use in Claude.ai and ChatGPT

Download Skill