MCPInstall

webflow-mcp:custom-code-management

by webflowAI & Agents

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.

Installs
863
Last 24h
—
Trending rank
—
Security
Not audited

Install

Works with every agent the skills CLI supports.

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

    Install

    Run the command in your project. The CLI asks which agents to install for.

  2. 02

    Describe the task

    Ask your agent for something this skill covers. It loads webflow-mcp:custom-code-management automatically when relevant.

  3. 03

    Review the result

    The agent follows the SKILL.md steps, scripts and references bundled with the skill.

SKILL.md

The instructions your agent reads when the skill is triggered.

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_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

FAQ

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

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.

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

Run npx skills add https://github.com/webflow/webflow-skills --skill webflow-mcp:custom-code-management in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/webflow-mcp:custom-code-management/ (personal) or .claude/skills/webflow-mcp:custom-code-management/ (project).

Which AI agents can use webflow-mcp:custom-code-management?

Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.

Is webflow-mcp:custom-code-management safe to install?

No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.

Who maintains webflow-mcp:custom-code-management?

It is published by webflow in webflow/webflow-skills. It has 863 recorded installs.

More from webflow/webflow-skills

View all →

webflow-cli:cloud

webflow/webflow-skills

Create, build, and deploy Webflow Cloud apps from the CLI (site-attached or project apps), and manage existing ones — apps, domains, environments, deployments, build/runtime logs, and environment variables including secrets. Use when initializing or deploying a Cloud app, importing an existing GitHub repository, setting up CI/CD (GitHub Actions or GitHub-linked deploys), setting or importing secrets, retrying or rolling back a deployment, diagnosing a failed build, or resolving app/environment/workspace IDs from webflow.json or env vars.

DevOps & Cloud1K installs

webflow-cli:code-component

webflow/webflow-skills

Create and deploy reusable React components for Webflow Designer. Configure existing React projects with webflow.json, build and bundle code, validate output, and deploy to workspace using library share. Use when building custom components for designers.

Frontend & Design1K installs

webflow-cli:designer-extension

webflow/webflow-skills

Build Designer Extensions for custom Webflow Designer functionality. Lists available templates, initializes extension projects from templates (default/react/typescript-alt), bundles extensions for upload, and serves locally for development.

Frontend & Design1K installs

webflow-code-component:component-audit

webflow/webflow-skills

Audit Webflow Code Components for architecture decisions - prop exposure, state management, slot opportunities, and Shadow DOM compatibility. Focused on Webflow-specific patterns, not generic React best practices.

Frontend & Design1K installs

webflow-cli:troubleshooter

webflow/webflow-skills

Diagnose and fix Webflow CLI issues including installation problems, authentication failures, build errors, and bundle problems. Uses CLI diagnostic flags (--version, --help, --verbose, --debug-bundler) for troubleshooting.

Code Quality & Workflow1K installs

webflow-code-component:component-scaffold

webflow/webflow-skills

Generate new Webflow Code Component boilerplate with React component, definition file, and optional styling. Automatically checks prerequisites and can set up missing config/dependencies.

Frontend & Design1K installs

Popular ai & agents skills

View category →

google-agents-cli-publish

google/agents-cli

This skill should be used when the user wants to "publish an agent", "publish my ADK agent", "register an agent with Gemini", "publish to Gemini" (formerly Gemini Enterprise), or needs guidance on the agents-cli publish gemini command. Also use when the user wants to "manage agents in Agent Registry", "list/update/delete registered agents", or "register an MCP server". Covers ADK vs A2A registration modes, programmatic and interactive usage, flag reference, auto-detection from deployment metadata, Agent Registry fleet management, and troubleshooting. Part of the agents-cli skills suite. Do NOT use for deployment (use google-agents-cli-deploy).

AI & Agents513.9K installs

google-agents-cli-eval

google/agents-cli

This skill should be used when the user wants to "run an evaluation", "evaluate my agent", "evaluate my ADK agent", "write an eval dataset", "analyze eval failures", "compare eval results", "optimize agent", or needs guidance on the Gemini platform eval methodology and the Quality Flywheel. Covers eval metrics, dataset schema, LLM-as-judge scoring, and common failure causes. Applies to any agents-cli project, whatever framework the agent is written in. Do NOT use for agent API code patterns (ADK: use google-agents-cli-adk-code), deployment (use google-agents-cli-deploy), or project scaffolding (use google-agents-cli-scaffold).

AI & Agents513.5K installs

skill-creator

anthropics/skills

Create new skills, modify and improve existing skills, and measure skill performance. Use when users want to create a skill from scratch, edit, or optimize an existing skill, run evals to test a skill, benchmark skill performance with variance analysis, or optimize a skill's description for better triggering accuracy.

OfficialAI & Agents416.4K installs

codex-pet

prime-skills/runcomfy-agent-skills

Codex Pet generator on RunComfy. Build a Codex-compatible Codex Pet spritesheet.webp + pet.json from a single reference image, drop it into ${CODEXHOME:-$HOME/.codex}/pets/ / and Codex picks it up as a custom Codex Pet next to the 8 built-ins. This skill produces the exact Codex Pet atlas Codex expects (1536x1872 PNG/WebP, 8 cols x 9 rows, 192x208 cells, 9 animation states — idle, running-right, running-left, waving, jumping, failed, waiting, running, review). Calls OpenAI GPT Image 2 edit ONCE via the local RunComfy CLI as runcomfy run openai/gpt-image-2/edit to produce a canonical Codex Pet pose, then assembles all 9 animation rows programmatically with ImageMagick micro-transforms — no Codex Pro, no $imagegen, no OPENAIAPIKEY required, only RUNCOMFYTOKEN. Triggers on "codex pet", "create codex pet", "make codex pet", "hatch codex pet", "/hatch image", "desktop pet codex", "codex pets", "spritesheet.webp", or any explicit ask to build a custom pet for OpenAI Codex.

AI & Agents402.1K installs

full-output-enforcement

leonxlnx/taste-skill

Overrides default LLM truncation behavior. Enforces complete code generation, bans placeholder patterns, and handles token-limit splits cleanly. Apply to any task requiring exhaustive, unabridged output.

AI & Agents401K installs

executing-plans

obra/superpowers

Use when executing an implementation plan in the current session as the implementer yourself — your human partner chose inline execution, or no subagent tool is available

AI & Agents245.7K installs