skills.rest
BamoJ
BamoJCOMMUNITY
Explore all skills by this author →
Website𝕏@bamojkGitHub

webflow-module-creation

Create DOM attribute-driven JavaScript modules for Webflow pages.

Updated Apr 12, 2026
Search Tags:#frontend architecture#lifecycle hooks#dataset#webflow#javascript modules#dom attributes#component mounting
One-click install
npx skills add https://github.com/BamoJ/wf-starter-fed-v1 --skill webflow-module-creation
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: webflow-module-creation
Source: https://github.com/BamoJ/wf-starter-fed-v1/tree/main/.cursor/skills/webflow-module-creation
Command: npx skills add https://github.com/BamoJ/wf-starter-fed-v1 --skill webflow-module-creation

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill removes the friction of wiring custom JavaScript behavior into Webflow pages by standardizing how modules are created and automatically mounted from DOM attributes.

Core Features & Use Cases

  • Attribute-driven module mounting: Create modules that are discovered and mounted based on matching data-module values.
  • Consistent lifecycle management: Initialize behavior and clean it up reliably using the provided onMount and onDestroy hooks.
  • Structured data access: Read configuration from the element’s dataset to power component logic (e.g., behavior toggles, selectors, or content wiring).

Quick Start

Create a new file in src/modules named after your data-module value, export a default function that accepts (element: HTMLElement, dataset: DOMStringMap), and then use data-module="your-name" on the target Webflow element.

Frequently Asked Questions about webflow-module-creation

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

FAQPage Schema
How do I auto-mount JavaScript modules in Webflow using DOM attributes?▼

To auto-mount JavaScript modules in Webflow, add a data-module attribute to your target element and create a matching file in src/modules. The system discovers and mounts the module automatically based on the matching data-module value.

What is attribute-driven module mounting and how does it work in Webflow?▼

Attribute-driven module mounting discovers JavaScript components by matching data-module attribute values on Webflow elements. It standardizes custom behavior wiring by mapping DOM attributes directly to module files for automatic initialization.

How do I structure maintainable JavaScript component logic in Webflow?▼

Structure maintainable component logic by exporting a default function accepting element and dataset, then managing initialization and teardown via onMount and onDestroy lifecycle hooks for reliable behavior setup and cleanup.

Can I pass configuration data to Webflow modules from HTML?▼

You can pass configuration data to Webflow modules directly from HTML using the element's dataset. The module's default function receives this DOMStringMap as a parameter, allowing you to read behavior toggles, selectors, and content wiring.

Do I need external dependencies to create data modules for Webflow?▼

You do not need external dependencies to create data modules for Webflow. The system operates independently, requiring only JavaScript module files placed in src/modules with filenames matching the data-module attribute values.

Why use lifecycle hooks for JavaScript behavior in Webflow?▼

Lifecycle hooks provide reliable initialization and cleanup for JavaScript behavior in Webflow. Using onMount and onDestroy ensures component behavior is set up correctly when mounted and safely torn down when destroyed, preventing memory leaks.

Related Skills

Explore More Software Engineering Skills→
vallafedericovallafederico
25

webflow-module-creation

Create Webflow JavaScript modules mounted via data-module attributes.

Community
Basic
vallafedericovallafederico
25

webflow-lifecycle-management

Manage Webflow module lifecycles with onMount, onDestroy, onPageIn, and onPageOut hooks.

Community
Intermediate
quantruong158quantruong158

angular-directives

Develop custom Angular directives for DOM manipulation and component behavior.

Community
Intermediate
legoutlegout
3

panel-custom-components

Generate ReactComponent boilerplate for Panel custom components with Python-JavaScript state synchronization.

Community
Advanced