skills.rest
agent0ai
agent0aiOFFICIAL
Explore all skills by this author →
Website𝕏@Agent0aiGitHub

Extensions And Components

Implement HTML extension seams, JS hook seams, and component loading with layered override semantics.

1.4k|316|Updated Mar 27, 2026
Search Tags:#modularity#skill discovery#component loading#js hooks#html extensions#layered modules#runtime injection
One-click install
npx skills add https://github.com/agent0ai/space-agent --skill extensions-and-components-agent0ai
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: Extensions And Components
Source: https://github.com/agent0ai/space-agent/tree/main/app/L0/_all/mod/_core/skillset/ext/skills/development/extensions-components
Command: npx skills add https://github.com/agent0ai/space-agent --skill extensions-and-components-agent0ai

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill prevents broken extension loading, mis-mounted components, and layered override conflicts when building a modular, runtime-resolved UI.

Core Features & Use Cases

  • HTML extension seams: Define structural insertion points with <x-extension id="..."> and have matching files resolved via ext/html/<path>/....
  • JS hook seams: Create deterministic behavioral seams with space.extend(import.meta, async function name(...) { ... }) and use /start and /end hook wrapping correctly.
  • Component loading + context tagging: Mount UI using <x-component path="..."> with recursive resolution, and control runtime discovery using <x-context> tags and the framework context helpers.

Use case: When you need a feature module to contribute a route-owned overlay seam and a behavior hook, this Skill helps you place the HTML/JS in the correct extension-point paths, ensure the loader hydrates them in the right lifecycle, and avoid unintentionally overriding lower layers.

Quick Start

Ask an AI to design an ext/html seam plus an ext/js hook that safely plugs into the layered module system for a new route overlay.

Frequently Asked Questions about Extensions And Components

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

FAQPage Schema
How do I correctly load HTML extension seams and JS hooks in a modular UI?▼

To load HTML extension seams and JS hooks correctly, define structural insertion points using `<x-extension>` and create deterministic behavioral seams with `space.extend`, ensuring files resolve via `ext/html` and `ext/js` paths for proper runtime hydration.

Why does my layered module override conflict during dynamic runtime injection?▼

Layered module override conflicts occur when `L0 -> L1 -> L2` batching semantics are not followed, causing mis-mounted components; adhering to `space.extend` hook placement and predictable override resolution prevents unintentional lower-layer overrides.

What is the best way to mount UI components with recursive path resolution?▼

The best way to mount UI components with recursive resolution is using `<x-component path="...">`, which hydrates fragments dynamically while leveraging `<x-context>` tags and framework context helpers to control runtime discovery.

How does context tagging work for feature module skill discovery?▼

Context tagging for skill discovery works by applying `<x-context>` tags and framework context helpers to control runtime discovery, ensuring feature modules add or override UI fragments and route-level shell integrations predictably.

When do I need to use /start and /end hook wrapping for JS behavioral seams?▼

You need `/start` and `/end` hook wrapping when creating JS behavioral seams with `space.extend(import.meta, async function name(...) { ... })` to ensure deterministic execution and correct lifecycle hydration of route-level integrations.

Related Skills

Explore More Software Engineering Skills→
bkywksjbkywksj
309

ui-frontend

Define standardized React UI patterns for Tauri desktop apps.

Community
Intermediate
agent0aiagent0ai
1.4k

Development

Structure browser modules in the layered Space Agent runtime.

Official
Intermediate
binary16labsbinary16labs
5

Extensions And Components

Define HTML extension seams and JS hook seams for Prime-Silo modular UI.

Community
Intermediate
shiroinockshiroinock

dartboard-rendering

Render correctly layered dartboard visuals in p5.js with coordinate transforms.

Community
Advanced