Sygnal’s Webflow MCP Assistant Tools

Sygnal has three core pieces of our setup available as open source-

• A general Webflow MCP assistant skill
• A Claude Design to Webflow migration skill
• A scaffolder for quick setup of different project configurations

Here's an overview;

Using the Scaffolder

Jump into the directory you want, for your project, and run-

npm create @sygnal/webflow-stack@latest 

Instructions are here-

https://www.npmjs.com/package/@sygnal/create-webflow-stack

Notes

Skills Repo

https://github.com/sygnaltech/webflow-skills

webflow-mcp skill -- what's in it

SKILL.md (the always-loaded operating guide):

• Version stamp -- targets MCP v2.0.1; explicit warning that tool names drift but behaviors are durable, so confirm names against webflow_guide_tool.
• The two-transport model -- a table contrasting Data tools (REST, headless, stable) vs Designer tools (UI bridge, needs an open+foregrounded Designer tab, fragile).
• 8 golden operating rules -- foreground + serial Designer calls; treat timeouts as "maybe succeeded"; success ≠ applied; 204-delete parse error is fake; query settings before binding; check bindableTo; plan variables right the first time; run the guide tool at session start.
• "Is the task even possible?" -- the big absences (Forms, Ecommerce, Memberships, asset upload, interactions/animations, dynamic CMS templating, site lifecycle) so you don't burn turns on a tool that doesn't exist.
• Strongest use case -- the reliable CMS-content-automation recipe.
• Pointers into the two reference files.

reference/capabilities.md (the full coverage map):

• At-a-glance table: every capability area × Data API / Designer × works/partial/absent.
• Deep-dives on CMS (16 creatable field types, what update_collection_field can't change, staged-only items, publish-once requirement, Option/VideoLink value gotchas).
• Pages & components, scripts/webhooks/comments/enterprise, and the Designer buildable surface (elements, styles, variables, components).
• A consolidated "completely missing -- route to the UI" list.

reference/gotchas.md (your confusion log, distilled):

• Silent-success class -- batch CMS binding no-ops, type-mismatch bindings, variable delete/rename no-ops, fake switch_page success.
• Timeouts that lie -- duplicate-instance trap, link-prop-with-default hang.
• Designer bridge fragility -- foreground + serial.
• Settings/binding model -- text vs textContent, Spans have no text key, richText vs textContent props.
• WHTML builder -- dropped descendant selectors and @keyframes.
• element_builder -- div-won't-take-children, TextBlock→Block + placeholder text, rejected attributes.
• CMS template pages -- the hard "not navigable via MCP" wall.
• Delete/publish/locale mechanics -- 204 parse error, staged items, secondary-locale-only writes, add_site_script 404 bootstrap.
• Version/endpoint drift -- the concrete old→new rename list.

claude-design-to-webflow skill -- what's in it

SKILL.md (the migration process, layered on webflow-mcp):

• What the migration actually is -- rebuild as native Webflow (elements/classes/variables/components/CMS), not an HTML embed; sets expectations about the slow serial Designer reality.
• The human-vs-agent split -- what's UI-only and must be handed to the human up front (launch/foreground Designer, publish-once, open Collection Template pages, interactions/animations, asset upload).
• The 7-phase order -- Download/capture → Analyze → Variables → Build → Componentize → CMS → Polish, with the rationale for the sequence.
• Reading the source with Chrome DevTools -- read computed styles (not authored var() CSS), map source breakpoints onto Webflow's 7, snapshot the DOM to spot components; rebuild from computed values then re-tokenize in Webflow.
• Migration-specific traps -- combo-class color conflicts, dangling variables (delete is a no-op), placeholder text, div-container children.
• Pointer to the component-authoring reference + cross-links to the webflow-mcp gotchas.

reference/component-authoring.md (the programmatic component-creation process):

• The 5-phase flow -- build a temp tree at the page body root → convert with replace:true → enter the instance and wire Slots → remove the residual instance → place the user-facing instance.
• Why each step is shaped that way -- the ancestor-chain placement-rule trap (build at body root, not the user's selection), deferring Slot insertion via marker placeholders, finding the residual instance, sticky component context needing try/finally exit.
• Nested components -- build innermost-first via topological sort.
• Error resilience -- per-element try/catch, partial results over all-or-nothing.
• Pitfalls table + key-APIs-by-phase table.