custom-code-management

작성자: webflow

Webflow 사이트에 인라인 사용자 정의 스크립트를 추가, 검토 또는 제거합니다(최대 10,000자). 분석, 추적 픽셀, 채팅 위젯 또는 기타 사용자 정의에 사용합니다.

npx skills add https://github.com/webflow/webflow-skills --skill custom-code-management

Custom Code Management

Add, review, and manage inline custom scripts on a Webflow site — analytics, tracking pixels, chat widgets, or any custom JavaScript.

Important Note

ALWAYS use Webflow MCP tools for all operations:

  • Use Webflow MCP's webflow_guide_tool to get best practices before any other tool call
  • Use Webflow MCP's data_sites_tool with action list_sites to identify available sites
  • Use Webflow MCP's data_scripts_tool with action list_registered_scripts to list all registered scripts
  • Use Webflow MCP's data_scripts_tool with action list_applied_scripts to list scripts applied to pages
  • Use Webflow MCP's data_scripts_tool with action add_inline_site_script to register a new inline script
  • Use Webflow MCP's data_scripts_tool with action delete_all_site_scripts to remove ALL site scripts (no selective delete)
  • Use Webflow MCP's data_scripts_tool with action get_page_script to get custom code for a specific page
  • Use Webflow MCP's data_scripts_tool with action upsert_page_script to add or update page-level custom code
  • Use Webflow MCP's data_scripts_tool with action delete_all_page_scripts to remove all custom code from a page
  • All tool calls must include the required context parameter (15-25 words, third-person perspective)

Instructions

Phase 1: Discovery

  1. Call webflow_guide_tool first — always the first MCP tool call
  2. Get the site: Use data_sites_tool with action list_sites. If only one site, use it automatically.

Phase 2: Analysis

  1. List scripts: Call list_registered_scripts and list_applied_scripts in parallel
  2. Check page-level scripts (if relevant): Use get_page_script for specific pages
  3. Present findings: Name, version, location (header/footer), registration vs application status

Phase 3: Planning & Confirmation

Before any mutation, present the plan and require explicit confirmation:

  • Adding scripts: user must type "add"
  • Removing ALL site scripts: user must type "delete all" (warn: no selective delete)
  • Page-level changes: user must type "update"

Phase 4: Execution

  1. Add site script: add_inline_site_script with displayName, sourceCode, version, location, canCopy
  2. Remove all site scripts: delete_all_site_scripts
  3. Add/update page script: upsert_page_script
  4. Remove page scripts: delete_all_page_scripts

Phase 5: Verification

  1. Re-list scripts to confirm success
  2. Report what changed (name, location, version, char count)
  3. Remind user to publish — suggest using safe-publish skill

Examples

Example 1: View scripts

User: "What scripts are on my site?"

  1. webflow_guide_tooldata_sites_toollist_registered_scripts + list_applied_scripts in parallel
  2. Present summary of all scripts

Example 2: Add Google Tag Manager

User: "Add GTM to my site"

  1. webflow_guide_tooldata_sites_tool → ask for GTM container ID
  2. Preview script, require "add" → add_inline_site_script (header, version "1.0.0")
  3. Verify and remind to publish

Example 3: Remove all scripts

User: "Remove all scripts"

  1. webflow_guide_tooldata_sites_tool → list current scripts
  2. Warn: removes ALL scripts. Require "delete all" → delete_all_site_scripts
  3. Verify and remind to publish

Example 4: Page-specific tracking

User: "Add conversion tracking to my thank-you page"

  1. webflow_guide_tooldata_sites_toolget_page_script to check existing
  2. Preview, require "update" → upsert_page_script
  3. Verify and remind to publish

Guidelines

  • webflow_guide_tool always first — before any other MCP tool
  • No <script> tags — Webflow adds them automatically
  • Max 10,000 characters per script; displayName + version must be unique
  • Site-level scripts (add_inline_site_script) apply to all pages; page-level scripts (upsert_page_script) apply to one page
  • No selective deletedelete_all_site_scripts removes everything; always list scripts first so user knows what will be lost
  • Hosted/external scripts not available via MCP — inline only
  • Recommend header for analytics (GA, GTM); footer for chat widgets and non-critical scripts
  • If displayName + version exists, suggest incrementing the version
  • Always remind users to publish after changes

webflow의 다른 스킬

cms-collection-setup
webflow
Webflow에서 지정된 필드와 관계를 사용하여 새 CMS 컬렉션을 생성합니다. 블로그 게시물, 제품, 팀원, 포트폴리오 등을 설정할 때 사용합니다.
official
bulk-cms-update
webflow
Webflow 컬렉션에서 여러 CMS 항목을 생성하거나 업데이트하며, 유효성 검사 및 차이점 미리보기를 제공합니다. 여러 블로그 게시물이나 제품을 추가하거나 필드를 업데이트할 때 사용하세요.
official
cms-collection-setup
webflow
Webflow에서 지정된 필드와 관계를 사용하여 새 CMS 컬렉션을 생성합니다. 블로그 게시물, 제품, 팀 구성원, 포트폴리오 등을 설정할 때 사용합니다.
official
link-checker
webflow
전체 사이트에서 CMS 콘텐츠를 포함하여 끊어지거나 안전하지 않은 링크를 찾아 수정하여 SEO와 사용자 경험을 개선합니다. HTTP/HTTPS 문제를 감사하고 검증합니다…
official
custom-code-management
webflow
Webflow 사이트에 인라인 사용자 지정 스크립트를 추가, 검토 또는 제거합니다(최대 10,000자). 분석, 추적 픽셀, 채팅 위젯 또는 기타 사용자 지정 용도로 사용할 수 있습니다.
official
accessibility-audit
webflow
Webflow 페이지에서 포괄적인 접근성 감사(WCAG 2.1) 실행 - 버튼, 양식, 링크, 포커스 상태, 제목, 키보드 탐색을 확인하고 생성합니다…
official
asset-audit
webflow
Webflow 사이트의 자산을 SEO 최적화를 위해 분석합니다. alt 텍스트가 누락된 자산과 SEO에 적합하지 않은 이름의 자산을 식별한 후, 이를 생성하고 적용합니다…
official
bulk-cms-update
webflow
Webflow 컬렉션에서 검증 및 diff 미리보기와 함께 여러 CMS 항목을 생성하거나 업데이트합니다. 여러 블로그 게시물이나 제품을 추가하거나 필드를 업데이트할 때 사용하세요…
official