skills.rest
julianoczkowski
julianoczkowskiCOMMUNITY
Explore all skills by this author →
GitHub

create-modus-wrapper-component

Scaffold TypeScript wrapper components for Modus web elements with React-like hooks and typed props.

3|2|Updated Oct 3, 2025
Search Tags:#typescript#react#angular#scaffold#web-components#wrapper#modus
One-click install
npx skills add https://github.com/julianoczkowski/create-trimble-app --skill create-modus-wrapper-component
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: create-modus-wrapper-component
Source: https://github.com/julianoczkowski/create-trimble-app/tree/main/templates/react/.cursor/skills/create-modus-wrapper-component
Command: npx skills add https://github.com/julianoczkowski/create-trimble-app --skill create-modus-wrapper-component

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Scaffolds a consistent Modus wrapper component with TypeScript interfaces, event wiring, and cleanup, reducing boilerplate and ensuring best practices are followed.

Core Features & Use Cases

  • Provides a reusable scaffold that imports the web component, defines a typed props interface, uses useRef and useEffect for event wiring and cleanup, and forwards props with kebab-case naming.
  • Includes pattern templates and reference examples (e.g., ModusButton.tsx, ModusCheckbox.tsx) to guide event handling, prop mapping, and accessibility considerations.
  • Use cases include quickly adding wrappers for new Modus components in React or Angular projects while maintaining consistent API shape and safety guarantees.

Quick Start

Run the generator to scaffold a new Modus wrapper component in your project.

Frequently Asked Questions about create-modus-wrapper-component

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

FAQPage Schema
How do I create a Modus web component wrapper in React with TypeScript?▼

To create a Modus web component wrapper in React, scaffold a TypeScript component that imports the web component, defines a typed props interface, and uses useRef and useEffect for event wiring and cleanup. This ensures consistent API shape and safe prop forwarding using kebab-case naming.

What is the best way to handle events and cleanup when wrapping Modus web components?▼

The best way to handle events and cleanup for Modus web components is using React-like patterns with useRef and useEffect. This approach ensures proper event wiring, automatic cleanup on unmount, and strong typing for events while reducing boilerplate code.

Can I use Modus web components in both React and Angular projects?▼

Yes, Modus web components can be wrapped in both React and Angular projects. The scaffolding generates TypeScript interfaces and typed props that apply to either framework, maintaining a consistent API shape and safety guarantees across different project integrations.

Do I need to manually convert props to kebab-case when wrapping Modus components?▼

No, you do not need to manually convert props to kebab-case. The scaffolded Modus wrapper templates automatically handle kebab-case prop naming and safely forward props, ensuring web component standards are followed without manual formatting effort.

Why does my Modus wrapper component lose event listeners or cause memory leaks?▼

Modus wrapper components lose event listeners or cause memory leaks when cleanup is not implemented. Using useEffect with proper cleanup returns ensures event listeners are removed on component unmount, preventing leaks and maintaining stable event handling.

Related Skills

Explore More Software Engineering Skills→
julianoczkowskijulianoczkowski
3

modus-frontend

Design Modus 2.0 compliant frontend interfaces with Tailwind CSS and web components.

Community
Advanced
julianoczkowskijulianoczkowski
3

set-up-modus-event-listeners

Set up and clean up Modus web component event listeners in React.

Community
Intermediate
przbaduprzbadu
1

react-dev

Generate typed React 18-19 components, hooks, and routing patterns.

Community
Advanced
anukkrit149anukkrit149

react-components

Generate typed React components with hooks and custom async logic.

Community
Basic