Create factory-based UI components with CSS variable theming and destroy cleanup.
npx skills add https://github.com/Ariedam64/Gemini --skill add-component-ariedam64
Please help me install this Agent Skill. Skill: add-component Source: https://github.com/Ariedam64/Gemini/tree/main/.claude/skills/add-component Command: npx skills add https://github.com/Ariedam64/Gemini --skill add-component-ariedam64
This skill helps teams create a reusable, well-structured UI component using a factory pattern, ensuring theme compatibility and proper cleanup. It reduces duplication and enforces a consistent API across components.
Create a new component by using the factory function with a name and options, wire it into your UI, and ensure destroy cleans up resources when removed.
High-intent search queries and answers about installing and using this skill.
To build reusable UI components with a factory pattern, use a standardized factory function that returns a handle with a root HTMLElement and a destroy method for safe cleanup. This enforces consistent APIs and lifecycle management across your frontend project.
The best way to prevent memory leaks when creating frontend components is implementing lifecycle management via a destroy() function. This cleanup method removes event listeners and releases resources when the component is removed from the DOM.
To ensure custom UI components stay aligned with the app theme, design them to consume CSS variables for colors and design tokens. This theme-friendly approach maintains visual consistency without hardcoding styles inside the component logic.
Yes, you can compose a new factory-based component with existing UI elements like a Modal. The factory pattern supports optional subcomponents and safe composition, allowing you to integrate new components seamlessly alongside existing ArcadeButton or Progress indicators.
No, a factory-based component creation workflow does not require external UI libraries. It relies on native TypeScript and standard HTMLElement handles, enabling you to enforce reusability and design-system consistency without adding heavy dependencies to your project.
SonarSourceLocates Echoes component interfaces and CSS token mappings in reference files.
julianoczkowskiSet up and clean up Modus web component event listeners in React.
zaid-khan-codeGuide shadcn/ui component setup, theming, and registry authoring for React applications.
u9401066Implement React component design patterns with TypeScript typings and usage guidelines.
