webflow-module-creation

Create Webflow JavaScript modules mounted via data-module attributes.

25|2|Updated Jan 18, 2025

Search Tags:#typescript #lifecycle hooks #webflow #data attributes #javascript modules #component mounting

Ready to run

npx skills add https://github.com/vallafederico/webflow-dev-setup --skill webflow-module-creation-vallafederico

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: webflow-module-creation
Source: https://github.com/vallafederico/webflow-dev-setup/tree/main/.cursor/skills/webflow-module-creation
Command: npx skills add https://github.com/vallafederico/webflow-dev-setup --skill webflow-module-creation-vallafederico

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill solves the problem of building and organizing custom Webflow JavaScript behavior without manually wiring up component bootstrapping for every page and element.

Core Features & Use Cases

Automated module mounting: Initializes modules based on matching DOM data-module attributes.
Clean module structure: Enforces a consistent location and export signature so modules are easy to maintain and scale.
Lifecycle management: Integrates onMount and onDestroy hooks for predictable setup and cleanup, useful for pages with dynamic navigation and reused components.

Quick Start

Add a new file under src/modules/ whose filename exactly matches the data-module value you will use in Webflow, then export a default function that receives (element, dataset) and register mount/cleanup logic using onMount and onDestroy.

Frequently Asked Questions about webflow-module-creation

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I mount JavaScript modules automatically in Webflow using data attributes?▼

You mount JavaScript modules automatically by matching the filename in `src/modules/` to the target `data-module` attribute value and exporting a default function receiving `element` and `dataset` for per-element logic.

How do I manage component lifecycle and cleanup for dynamically navigated Webflow pages?▼

You manage component lifecycle and cleanup for dynamically navigated Webflow pages by integrating `onMount` and `onDestroy` hooks within the module's default export function, ensuring predictable setup and teardown for reused components.

What is the required file structure for adding custom JavaScript behavior to Webflow components?▼

The required file structure for adding custom JavaScript behavior to Webflow components places modules in the `src/modules/` directory, enforcing a consistent location and export signature so modules are maintainable and scalable.

Do I need to manually wire component bootstrapping for every Webflow page element?▼

No, you do not need to manually wire component bootstrapping for every Webflow page element. Automated module mounting initializes behavior based on matching DOM `data-module` attributes without manual setup.

How does the module function receive DOM data attributes in Webflow?▼

The module function receives DOM data attributes in Webflow through the default export function signature `(element: HTMLElement, dataset: DOMStringMap)`, passing the element and its dataset directly to the logic.

What happens if my module filename does not match the data-module attribute value in Webflow?▼

If your module filename does not match the `data-module` attribute value in Webflow, the automated mounting mechanism will not initialize the component, as it requires exact filename matching to target the attribute value.