skills.rest
yw662
yw662COMMUNITY
Explore all skills by this author →
WebsiteGitHub

dom-creation

Create real DOM elements with rikka-dom tag helpers and TypeScript inference.

6|1|Updated May 31, 2026
Search Tags:#html#svg#elements#typeScript#dom#template literals
One-click install
npx skills add https://github.com/yw662/rikka --skill dom-creation
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: dom-creation
Source: https://github.com/yw662/rikka/tree/main/skills/dom-creation
Command: npx skills add https://github.com/yw662/rikka --skill dom-creation

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill removes the overhead of manual DOM assembly by letting you create real Element objects directly with rikka-dom, so you can build interfaces without virtual DOM abstractions or extra mounting steps.

Core Features & Use Cases

  • Real Element Creation: Use h() and 200+ tag helpers to generate actual HTML, SVG, and MathML nodes with strong TypeScript inference.
  • Template Literal Rendering: Build reactive markup with hhtml, including fine-grained signal interpolation for text and attributes.
  • Mounting and Namespace Handling: Append elements with standard DOM APIs, handle SVG namespace collisions, and create components that behave correctly in the browser.
  • Use Case: Create a reusable dashboard card, render it into the page, and keep its text and styles synchronized with reactive state.

Quick Start

Ask for a rikka-dom example that creates a small UI with h() and tag helpers, mounts it into document.body, and uses the correct namespace for any SVG content.

Frequently Asked Questions about dom-creation

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

FAQPage Schema
How do I create real DOM elements without a virtual DOM?▼

You can create real DOM elements without a virtual DOM by using the h() function and tag helpers to generate actual HTML and SVG nodes directly, removing the need for extra mounting steps or virtual DOM abstractions.

Does rikka-dom support type-safe UI assembly with TypeScript?▼

Yes, rikka-dom supports type-safe UI assembly by providing strong TypeScript inference across 200-plus tag helpers, ensuring real Element objects are correctly typed during HTML and SVG node construction.

How do I render reactive markup using template literals?▼

You render reactive markup using template literals with the h`html` syntax, enabling fine-grained signal interpolation to keep text and attributes synchronized with reactive state automatically.

What is the best way to handle SVG namespace collisions when mounting elements?▼

The best way to handle SVG namespace collisions is to use the provided namespace handling capabilities during element construction, ensuring components append correctly and behave as expected in the browser.

Can I use tag helpers to build and mount a dashboard card into document.body?▼

Yes, you can use 200-plus tag helpers to build a reusable dashboard card and mount it into document.body using standard DOM APIs, keeping its text and styles synchronized with reactive state.

Related Skills

Explore More Software Engineering Skills→
corey-alixcorey-alix

DOM Utilities Assistant

Query DOM elements and manage event listeners with TypeScript generics.

Official
Intermediate
mikemylmikemyl
1

front-end-testing

Automate React UI component tests with Vitest Browser Mode and DOM Testing Library.

Community
Intermediate
yw662yw662
6

signal-binding

Bind reactive signal values into DOM text, attributes, and template slots.

Community
Intermediate
encounterplusencounterplus
16

pixijs-scene-dom-container

Synchronize HTML element overlays with PixiJS scene graph transforms via DOMPipe.

Official
Intermediate