skills.rest
binary16labs
binary16labsCOMMUNITY
Explore all skills by this author →
GitHub

Extensions And Components

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

5|Updated May 6, 2026
Search Tags:#components#extensions#runtime context#module layering#html seams#js hooks#loader overrides
One-click install
npx skills add https://github.com/binary16labs/prime-silo --skill extensions-and-components-binary16labs
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: Extensions And Components
Source: https://github.com/binary16labs/prime-silo/tree/main/app/L0/_all/mod/_core/skillset/ext/skills/development/extensions-components
Command: npx skills add https://github.com/binary16labs/prime-silo --skill extensions-and-components-binary16labs

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill prevents broken or inconsistent UI behavior by teaching you how to wire HTML extensions, JS hook seams, and component loading through Prime-Silo’s layered module system.

Core Features & Use Cases

  • HTML extension seams and component resolution: Define <x-extension id="..."> seams and mount real content via <x-component path="...">, letting the runtime resolve ext/html/ automatically with correct layering/overrides.
  • JS hook seams and lifecycle wrapping: Implement behavioral seams using space.extend(import.meta, async function ...) and rely on /start and /end hook resolution around the wrapped function.
  • Context tagging for skill discovery: Use <x-context data-runtime=...> and data-tags so shared skill discovery can accurately catalog and load skill contexts.
  • Layered override semantics: Understand how L0 → L1 → L2 inheritance works, including identical-path overrides, composition rules, maxLayer constraints, and extension load batching behavior.

Quick Start

Add a new extension seam with <x-extension id="some/path"> in the owning module’s HTML and mount your feature with <x-component path="/mod/..."> so the runtime can discover and hydrate it with proper layered overrides.

Frequently Asked Questions about Extensions And Components

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

FAQPage Schema
How do I add an HTML extension seam to a modular UI layer?▼

To add an HTML extension seam, define `<x-extension id="some/path">` in the owning module's HTML and mount your feature with `<x-component path="/mod/...">` so the runtime discovers and hydrates it with proper layered overrides.

How do JS hook seams handle lifecycle wrapping for UI components?▼

JS hook seams handle lifecycle wrapping by implementing behavioral seams using `space.extend(import.meta, async function ...)` and relying on `/start` and `/end` hook resolution around the wrapped function for deterministic execution.

How does module layering work when overriding HTML extensions and JS hooks?▼

Module layering uses an L0 → L1 → L2 inheritance chain where identical-path overrides apply, composition rules determine merging, `maxLayer` constraints limit depth, and extension load batching controls runtime hydration behavior.

Why are my component mounting and UI overrides not loading correctly in a layered module system?▼

Component mounting and UI overrides fail when seam naming and path conventions are not followed, preventing the runtime from resolving `ext/html/` and `ext/js/` integrations with correct layer priority across the L0→L1→L2 chain.

Does context tagging help with runtime skill discovery in modular applications?▼

Context tagging helps runtime skill discovery by using `<x-context data-runtime=...>` and `data-tags` so shared skill discovery can accurately catalog and load skill contexts during the extension loading process.

Can I batch extension loads when adding multiple UI components across different modules?▼

Extension load batching is supported during the L0 → L1 → L2 resolution chain, allowing multiple on-screen menu contributions and head/broadcast bootstrap integrations to load together while maintaining deterministic lifecycle wrapping.

Related Skills

Explore More Software Engineering Skills→
shiroinockshiroinock

dartboard-rendering

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

Community
Advanced
zephyrwang6zephyrwang6
333

mem-weekly

Analyze weekly L1 memory records to extract recurring patterns into L2 behaviors.

Community
Basic
agent0aiagent0ai
1.4k

Extensions And Components

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

Official
Advanced
agent0aiagent0ai
1.4k

Development

Structure browser modules in the layered Space Agent runtime.

Official
Intermediate