Skip to main content
skill CX Codex

webflow-mcp:custom-code-management — Claude Code skill

Manages inline JavaScript on Webflow sites via MCP. It inserts, reviews, and wipes tracking tags or widgets across entire sites or individual pages.

Install into Claude Code · Skills CLI (Vercel) All methods and platforms ↓
npx skills add webflow/webflow-skills --skill webflow-mcp:custom-code-management -a claude-code
npx skills add webflow/webflow-skills --skill custom-code-management -a claude-code
Open on GitHub

What webflow-mcp:custom-code-management does

The skill directs an assistant to inspect and alter site code using Webflow MCP tools. It reads site IDs with data_sites_tool and checks scripts via data_scripts_tool. Code lands in the header or footer. Raw <script> tags are forbidden because Webflow adds them automatically.

A working Webflow MCP server is required. Selective script removal is not possible on the site level. The delete_all_site_scripts action clears everything, so the assistant halts until you confirm by typing delete all. Each block holds up to 10,000 characters. To push changes, increment version for the target displayName. External script tags are not supported.

What it helps with

  • insert Google Tag Manager into a Webflow site header
  • audit active custom scripts across all project pages
  • attach conversion tracking snippets to a specific landing page
  • clear legacy JavaScript blocks from a page or site

Example prompts for the agent

  • List all custom scripts active on my Webflow site
  • Add my Google Tag Manager container ID to the site header
  • Set up tracking code on the thank-you page

How to install webflow-mcp:custom-code-management

1Skills CLI (Vercel)

npx skills add webflow/webflow-skills --skill webflow-mcp:custom-code-management -a claude-code
npx skills add webflow/webflow-skills --skill custom-code-management -a claude-code

2Manually: put the files in place

~/.claude/skills/custom-code-management/SKILL.md

Copy the whole skill folder; for one project use .claude/skills/custom-code-management/

Step by step, with commands for each platform: How to install skills in Claude Code: five ways

Questions about webflow-mcp:custom-code-management

How do I install webflow-mcp:custom-code-management in Claude Code?

Run npx skills add webflow/webflow-skills --skill webflow-mcp:custom-code-management -a claude-code in your terminal.

What does webflow-mcp:custom-code-management do?

It lets an AI assistant inspect, append, and clear inline JavaScript on Webflow pages and site headers using Webflow MCP actions.

Can I delete a single site-level script?

No, the MCP interface lacks selective script removal for site-wide code. Calling delete_all_site_scripts clears all registered site scripts after you enter delete all.

Source text

SKILL.md · MIT
---
name: webflow-mcp:custom-code-management
description: Add, review, or remove inline custom scripts on a Webflow site (up to 10,000 chars). Use for analytics, tracking pixels, chat widgets, or any custom JavaScript. Also manages page-level scripts.
---

# 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
3. **List scripts**: Call `list_registered_scripts` and `list_applied_scripts` in parallel
4. **Check page-level scripts** (if relevant): Use `get_page_script` for specific pages
5. **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
6. **Add site script**: `add_inline_site_script` with displayName, sourceCode, version, location, canCopy
7. **Remove all site scripts**: `delete_all_site_scripts`
8. **Add/update page script**: `upsert_page_script`
9. **Remove page scripts**: `delete_all_page_scripts`

### Phase 5: Verification
10. Re-list scripts to confirm success
11. Report what changed (name, location, version, char count)
12. Remind user to publish — suggest using `safe-publish` skill

## Examples

### Example 1: View scripts
**User:** "What scripts are on my site?"
1. `webflow_guide_tool` → `data_sites_tool` → `list_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_tool` → `data_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_tool` → `data_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_tool` → `data_sites_tool` → `get_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 delete** — `delete_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 · MIT · webflow/webflow-skills

Similar skills

Everything for Frontend and UI →

From the same set22

webflow-code-component:troubleshoot-deploy Walks through failed Webflow Code Components deploys: reads the error, finds the root cause, hands you a specific fix. CX Codex +1 977installs webflow-mcp:accessibility-audit Audits Webflow pages against WCAG 2.1 accessibility criteria and applies fixes directly via MCP tools without opening the Webflow Designer. CX Codex +1 887installs webflow-mcp:cms-best-practices A skill that walks your agent through Webflow CMS architecture: collection planning, field types, relationships and troubleshooting. CX Codex +1 877installs webflow-mcp:site-audit This skill walks a Webflow site and builds an inventory of pages, CMS collections and fields, then returns a report with a content health score. CX Codex +1 862installs webflow-mcp:link-checker Finds and fixes broken, insecure, or redirecting links across Webflow static pages and CMS collections. Useful for pre-launch link validation and routine SEO audits. CX Codex +1 851installs webflow-mcp:bulk-cms-update This skill creates and updates many Webflow CMS items at once, validating each one against the collection schema and showing a diff before writing. CX Codex +1 839installs webflow-mcp:safe-publish Shows what changed on a Webflow site since the last publish, runs pre-publish checks, and waits until you type "publish". CX Codex +1 826installs webflow-mcp:flowkit-naming Brings CSS class names in Webflow in line with the Flowkit system: audits what exists, generates new names, applies them through MCP tools. CX Codex +1 824installs

Project sponsors

Companies that keep this analytics open
Gold sponsor

Impressions, clicks and code copies — open statistics. We keep the numbers public for the same reason NeBlask itself is public. Become a sponsor