skills.rest
GolfNext
GolfNextOFFICIAL
Explore all skills by this author →
GitHub

custom-modules

Develop HubSpot CMS custom modules with HubL, CSS, and JavaScript.

Updated Aug 27, 2026
Search Tags:#frontend development#hubspot#web components#drag and drop#cms#hubl#custom module
One-click install
npx skills add https://github.com/GolfNext/golfnext-tool-kiosk-support-page --skill custom-modules
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: custom-modules
Source: https://github.com/GolfNext/golfnext-tool-kiosk-support-page/tree/main/.claude/plugins/hubspot-cms-dev/skills/custom-modules
Command: npx skills add https://github.com/GolfNext/golfnext-tool-kiosk-support-page --skill custom-modules

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill streamlines the creation and management of custom modules within the HubSpot CMS, enabling developers to build reusable, configurable components for web pages and emails efficiently.

Core Features & Use Cases

  • Module Structure: Defines the standard file structure for HubSpot custom modules (.module directory with module.html, meta.json, fields.json, module.css, module.js).
  • Field Definitions: Guides the creation of fields.json for defining editable content, styling, and advanced options for content editors. Supports various field types like text, rich text, image, color, group, and repeaters.
  • Template Development: Demonstrates how to use HubL in module.html to render module content and access field values.
  • Styling & Scripting: Explains how to scope CSS with module.css and add interactive JavaScript with module.js.
  • Drag-and-Drop: Details the implementation of drag-and-drop areas and sections within page templates for flexible content layout.
  • Use Case: A marketing team needs a new "Team Member Card" module for their blog. This Skill helps define the module's fields (name, photo, bio, social links), structure the HTML/CSS/JS, and integrate it into a page template using drag-and-drop functionality.

Quick Start

Create a new HubSpot custom module named 'hero-banner' with a headline, description, and background image field.

Frequently Asked Questions about custom-modules

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

FAQPage Schema
How do I create a custom module for HubSpot CMS?▼

To create a custom module for HubSpot CMS, you structure a `.module` directory containing `module.html`, `meta.json`, `fields.json`, `module.css`, and `module.js` to define editable content components. This framework allows you to build reusable page elements with configurable editor interfaces.

What is the file structure for a HubSpot custom module?▼

The file structure for a HubSpot custom module consists of a `.module` directory containing `meta.json`, `fields.json`, `module.html`, `module.css`, and `module.js`. These files manage module metadata, editor field definitions, HubL templating, scoped CSS styling, and JavaScript interactivity respectively.

How do I add editable fields to a HubSpot module?▼

You add editable fields to a HubSpot module by defining them in the `fields.json` file. This file specifies various field types like text, rich text, image, color, group, and repeaters, allowing content editors to configure module options and styling directly within the HubSpot CMS editor interface.

Can I use HubL templating to render custom module content?▼

Yes, you can use HubL templating in the `module.html` file to render custom module content. HubL allows you to dynamically access and display the field values defined in your `fields.json` file, enabling flexible content rendering within your HubSpot CMS components.

How do I implement drag-and-drop areas in HubSpot page templates?▼

You implement drag-and-drop areas in HubSpot page templates by configuring flexible content sections within your custom modules. This approach allows content editors to dynamically add, remove, and rearrange reusable components on a page, ensuring flexible content layout directly within the HubSpot CMS environment.

How do I scope CSS and JavaScript within a HubSpot module?▼

You scope CSS and JavaScript within a HubSpot module by isolating your styles in `module.css` and interactive scripts in `module.js`. This ensures that the styling and behavior of your custom component remain encapsulated and do not conflict with other elements on the HubSpot CMS page.

Related Skills

Explore More Software Engineering Skills→
FunnelEnvyFunnelEnvy
1

hubspot-crm

Sync contacts and lists to HubSpot CRM via REST API.

Official
Intermediate
xuantruong02052001-starxuantruong02052001-star

vercel-deployment

Deploy static HTML landing pages to Vercel with one command.

Community
Intermediate
WPdoactionWPdoaction
9

wp-block-themes

Automate WordPress block theme development and troubleshooting with theme.json and templates.

Official
Intermediate
mattolenikmattolenik

web-components

Create custom HTML elements with Shadow DOM and RxJS state management.

Community
Intermediate