ワンクリックで
create-modus-wrapper-component
// Scaffold a new Modus wrapper component following established SolidJS patterns with proper TypeScript interfaces, event handling, and cleanup
// Scaffold a new Modus wrapper component following established SolidJS patterns with proper TypeScript interfaces, event handling, and cleanup
Scaffold form components with proper Modus input integration, event handling, validation, and checkbox bug handling
Debug and fix common event handling problems with Modus web components
Apply the critical checkbox value inversion workaround when working with ModusCheckbox components
Create Modus modals using the callback ref pattern for programmatic control
Help with correct Modus icon usage patterns including naming conventions, sizing, and accessibility
Build production-grade frontend interfaces using the Modus 2.0 Design System with Tailwind CSS. Use this skill when the user asks to build web components, pages, dashboards, or application screens. Enforces the 9-color semantic system, Modus Web Components, Modus Icons, and design system compliance. Framework-agnostic (works with SolidJS, React, Angular, or any framework).
| name | create-modus-wrapper-component |
| description | Scaffold a new Modus wrapper component following established SolidJS patterns with proper TypeScript interfaces, event handling, and cleanup |
Scaffold a new Modus wrapper component following established SolidJS patterns from the codebase.
Use this skill when:
All Modus wrapper components in SolidJS follow this structure:
<modus-wc-[component]>) from @trimble-oss/moduswebcomponentslet ref for component reference (callback ref pattern)createEffect for event listeners with proper cleanupsrc/components/ModusButton.tsx - No event listeners neededsrc/components/ModusCheckbox.tsx - Shows event handling patternsrc/components/ModusDropdownMenu.tsx - Shows menu event handlingimport { createEffect } from "solid-js";
import type { Component } from "solid-js";
export interface Modus[ComponentName]Props {
/** Description of prop */
propName?: string;
/** A callback function to handle events. */
onEventName?: (event: CustomEvent<EventDetailType>) => void;
/** A custom CSS class to apply to the component. */
customClass?: string;
/** The ARIA label for accessibility. */
"aria-label"?: string;
}
/**
* Renders a Modus [component name] component.
*
* @example
* // Basic usage
* <Modus[ComponentName] propName="value" />
*
* @example
* // With event handler
* <Modus[ComponentName]
* propName="value"
* onEventName={(event) => console.log(event.detail)}
* />
*/
const Modus[ComponentName]: Component<Modus[ComponentName]Props> = (props) => {
let componentEl: HTMLModusWc[ComponentName]Element | undefined;
createEffect(() => {
const component = componentEl;
if (!component) return;
const handleEventName = (event: Event) => {
props.onEventName?.(event as CustomEvent<EventDetailType>);
};
if (props.onEventName) {
component.addEventListener("eventName", handleEventName);
}
return () => {
if (props.onEventName) {
component.removeEventListener("eventName", handleEventName);
}
};
});
return (
<modus-wc-[component-name]
ref={(el) => (componentEl = el)}
prop-name={props.propName}
custom-class={props.customClass}
aria-label={props["aria-label"]}
/>
);
};
export default Modus[ComponentName];
For optional props that shouldn't be passed when undefined:
// ✅ CORRECT: Conditional spreading
<modus-wc-component
{...(props.color && { color: props.color })}
{...(props.variant && { variant: props.variant })}
size={props.size}
/>
Always use createEffect with cleanup:
createEffect(() => {
const component = componentEl;
if (!component) return;
const handleEvent = (event: Event) => {
props.onEvent?.(event as CustomEvent<EventDetailType>);
};
if (props.onEvent) {
component.addEventListener("eventName", handleEvent);
}
return () => {
if (props.onEvent) {
component.removeEventListener("eventName", handleEvent);
}
};
});
Use proper types for web component elements:
// ✅ CORRECT: Proper element type
let componentEl: HTMLModusWcButtonElement | undefined;
let componentEl: HTMLModusWcCheckboxElement | undefined;
let componentEl: HTMLModusWcDropdownMenuElement | undefined;
// Pattern: HTMLModusWc[ComponentName]Element
Web components use kebab-case for props:
// SolidJS prop: customClass
// Web component prop: custom-class
<modus-wc-component custom-class={props.customClass} />
// SolidJS prop: modalId
// Web component prop: modal-id
<modus-wc-modal modal-id={props.modalId} />
<modus-wc-component ref={(el) => (componentEl = el)} />
Modus components use these common event names:
inputChange - For input value changesinputFocus - For focus eventsinputBlur - For blur eventsbuttonClick - For button clicksitemSelect - For menu/dropdown item selectionmenuVisibilityChange - For dropdown menu visibilityexpandedChange - For accordion/collapse stateCheck the Modus documentation for component-specific events.
Always include:
aria-label prop for icon-only or non-text componentscreateEffectcomponentEl before use