Agent skill

custom-code-management

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.

Stars 46
Forks 6

Install this agent skill to your Project

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

SKILL.md

Custom Code Management

Concepts

Webflow custom code: register (store script) → apply (attach to site). Inline scripts only via MCP (max 10,000 chars).

Important note

ALWAYS use Webflow MCP tools for all operations: Use the following tools for all operations:

  • data_scripts_tool with actions list_registered_scripts / list_applied_scripts - List scripts
  • data_scripts_tool with action add_inline_site_script - Register inline script (no <script> tags)
  • data_scripts_tool with action delete_all_site_scripts - Remove ALL scripts (no selective delete)
  • data_sites_tool with action list_sites - List available sites

Instructions

View Scripts

  1. Call data_sites_tool with action list_sites if needed, then call both list tools in parallel
  2. Display registration and application status

Add Script

  1. Gather: name, code, location (header/footer)
  2. Validate: under 10,000 chars, no <script> tags
  3. Preview with character count, require "add" to confirm
  4. Call data_scripts_tool with action add_inline_site_script with displayName, sourceCode, version, location, canCopy
  5. Remind user to publish

Remove Scripts

  1. List current scripts
  2. Warn: removes ALL scripts (no selective delete)
  3. Require "delete all" to confirm
  4. Remind user to publish

Constraints

  • Max 10,000 characters per script
  • Do NOT include <script> tags (Webflow adds them)
  • displayName + version must be unique
  • Site-level only (no page-specific via MCP)
  • Hosted scripts not available via MCP

Response Format

After adding a script, respond with the script name, location, and version. Suggest using the safe-publish skill to publish changes.

Expand your agent's capabilities with these related and highly-rated skills.

webflow/webflow-skills

flowkit-naming

Apply Flowkit CSS naming system in Webflow. Use when creating classes, auditing existing naming, or building new components following Flowkit conventions. Flowkit is Webflow's official CSS framework with utility-first approach.

46 6
Explore
webflow/webflow-skills

accessibility-audit

Run comprehensive accessibility audit (WCAG 2.1) on Webflow pages - checks buttons, forms, links, focus states, headings, keyboard navigation, and generates detailed reports with fixes. Requires Webflow Designer connection. Excludes image alt text (covered by asset-audit skill).

46 6
Explore
webflow/webflow-skills

asset-audit

Analyze assets on a Webflow site for SEO optimization. Identifies assets missing alt text and assets with non-SEO-friendly names, then generates and applies improvements.

46 6
Explore
webflow/webflow-skills

site-audit

Comprehensive audit of a Webflow site including pages, CMS collections, health scoring, and actionable insights. Use for site analysis, migration planning, or understanding site structure.

46 6
Explore
webflow/webflow-skills

link-checker

Find and fix broken or insecure links across an entire site, including CMS content, to improve SEO and user experience. Audits HTTP/HTTPS issues and validates all internal and external links.

46 6
Explore
webflow/webflow-skills

cms-best-practices

Expert guidance on Webflow CMS architecture and best practices. Use when planning collections, setting up relationships, optimizing content structure, or troubleshooting CMS issues.

46 6
Explore

Didn't find tool you were looking for?

Be as detailed as possible for better results