Compose rikka UI from function components and custom elements.
npx skills add https://github.com/yw662/rikka --skill composition-yw662
Please help me install this Agent Skill. Skill: composition Source: https://github.com/yw662/rikka/tree/main/skills/composition Command: npx skills add https://github.com/yw662/rikka --skill composition-yw662
This Skill helps you structure rikka user interfaces into reusable pieces without forcing every part of the app into one component style. It is useful when you need to decide between lightweight function-based composition and registered custom elements, or when you want both to work together cleanly.
Use this Skill when you want to compose a rikka interface by combining function components and custom elements in the same view.
High-intent search queries and answers about installing and using this skill.
Composing web components and function components in the same UI view involves combining plain functions returning Elements with registered custom elements, using a generated .h helper to bridge them as tag-like helpers.
The best way to split an interface into reusable custom elements and nested layouts is by defining Web Components with Shadow DOM and DOM-level identity, then composing them with lightweight function components.
Yes, the composition approach fully supports type-safe attribute and event passing, ensuring custom elements and function components exchange data with strict type safety during UI composition.
Shadow DOM support applies to registered custom elements to provide DOM-level identity and encapsulation, while function components provide a lightweight, zero-ceremony alternative for fast reuse.
Choose function components for lightweight, zero-ceremony reuse via plain functions returning Elements; choose custom elements when you need DOM-level identity, attributes, events, and Shadow DOM encapsulation.
You embed a registered custom element inside a function component layout by using the generated MyElement.h bridge helper, which allows registered elements to function as tag-like helpers within compositions.
ewei068Create Deact UI elements for Discord bot interfaces with state management and event handling.
silentbalanceyhGenerate Vue/React + TypeScript dashboards and widgets from R2MO specifications.
djankiesEnable Web Components support in React 19 with property and event handling.
danielsoglCreate reusable attribute, structural, and host directives for Angular v20+ DOM manipulation.
