AgentSkillsCN

webflow-editor-integration

区分 Webflow 设计器/编辑器模式与已发布站点的行为差异。适用于检测编辑器状态、在设计器中禁用自定义动画，或根据运行环境动态调整功能。

SKILL.md
--- frontmatter
name: webflow-editor-integration
description: Handle Webflow Designer/Editor mode vs Published site behavior. Use when detecting the editor, disabling custom animations in the designer, or managing features based on the environment.

Webflow Editor Integration

Ensures custom code behaves correctly in the Webflow Designer.

Pattern

typescript
import { handleEditor } from "@webflow/detect-editor";

export default function(element: HTMLElement) {
  handleEditor((isEditor) => {
    if (isEditor) {
      // Disable JS interactivity, reset styles
      element.style.pointerEvents = "none";
    } else {
      // Enable full functionality
    }
  });
}