tams-home-builder-widget-expert

Name: tams-home-builder-widget-expert
Availability: InStock
Author: tammer

Create and modify Home Page Builder widgets in TammerStore using PHP, Blade, and Vue components.

Updated Aug 27, 2026

Search Tags:#frontend #php #vue #plugin-architecture #widget-development #tammerstore #home-page-builder

Ready to run

npx skills add https://github.com/tammerofficial/tams --skill tams-home-builder-widget-expert

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: tams-home-builder-widget-expert
Source: https://github.com/tammerofficial/tams/tree/main/.cursor/skills/tams-home-builder-widget-expert
Command: npx skills add https://github.com/tammerofficial/tams --skill tams-home-builder-widget-expert

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

The expert guidance provides a standardized approach to creating and modifying Home Page Builder widgets for TammerStore, ensuring compliance with the plugin architecture and accelerating development.

Core Features & Use Cases

Define widgets by creating a PHP file at plugins/tammertheme-home-builder/widgets/{layout}/definition.php including layout, label, icon, and content_field_map.
Create a Blade settings form with input IDs that match the keys in content_field_map.
Implement a Vue component for the widget section and register it in the theme index to render the widget dynamically.
Provide a structured workflow for adding a new widget, updating existing ones, and answering architecture questions.
Validate and verify the widget workflow across build, preview, and front-end rendering.

Quick Start

Follow the seven-step workflow to define the widget, create the form, Vue component, register it, build assets, and verify the widget in the builder.

Frequently Asked Questions about tams-home-builder-widget-expert

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

FAQPage Schema

How do I create a Home Page Builder widget for TammerStore?▼

To create a Home Page Builder widget, define a PHP file at plugins/tammertheme-home-builder/widgets/{layout}/definition.php specifying layout, label, icon, and content_field_map, then implement the Blade settings form and Vue component.

What is the file structure for TammerStore widget development?▼

TammerStore widget development requires a PHP definition file in the widgets/{layout}/ directory, a Blade settings form with input IDs matching content_field_map keys, and a Vue component registered in the theme index to render the widget dynamically.

How does the Vue component registration work for Home Page Builder widgets?▼

Vue component registration involves creating the widget section component and registering it in the theme index, which allows the Home Page Builder to dynamically render the widget section on the front-end after assets are built.

Do I need PHP and Vue to extend existing TammerStore widgets?▼

Yes, extending existing TammerStore widgets requires both PHP and Vue because the plugin architecture uses PHP for the definition.php file and content_field_map, while Vue components handle the dynamic front-end rendering of the widget sections.

What's the best way to validate a custom widget in the Tammer theme?▼

The best way to validate a custom widget is to follow the structured workflow steps covering build, preview, and front-end rendering verification to ensure the widget functions correctly across all stages of the Home Page Builder.

Why does my Home Page Builder widget not render on the front-end?▼

A Home Page Builder widget may not render if the Vue component is not registered in the theme index, if the Blade form input IDs do not match the content_field_map keys, or if the build assets step was skipped during the seven-step workflow.