universal

Name: universal
Availability: InStock
Author: Chemical

Diagnose and fix SSR and hydration mismatches across React, Preact, and Solid components.

28|2|Updated Dec 24, 2023

Search Tags:#macros #compiler #ssr #hydration #universal #web-components #server-rendering

Ready to run

npx skills add https://github.com/chemicallang/chemical --skill universal

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: universal
Source: https://github.com/chemicallang/chemical/tree/main/.agents/skills/universal
Command: npx skills add https://github.com/chemicallang/chemical --skill universal

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Diagnose, fix, and implement features in the Chemical universal component pipeline. Use when working on the universal components, universal_cbi, generated SSR/hydration output, HtmlPage runtime behavior, or bugs where compiled HTML/CSS/JS disagree with source components.

Core Features & Use Cases

Universal library enables server side rendering plus hydration, and works with React, Preact, and Solid components.
It uses a macro-based approach to compose components across SSR and hydration, ensuring output remains consistent between server-rendered HTML and client hydration.
The library relies on the compiler interface and page utilities to generate server functions and hydrate on the client.

Quick Start

Install and wire up the universal library to enable SSR + hydration for your server-rendered pages.

Frequently Asked Questions about universal

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

FAQPage Schema

How do I fix server-side rendering hydration mismatches in universal components?▼

Fix server-side rendering hydration mismatches by diagnosing compiled SSR output that disagrees with source components. The universal pipeline uses macros and the compiler interface to ensure consistent server-rendered HTML and client hydration across React, Preact, and Solid.

Does the universal pipeline support SSR and hydration for Solid and Preact components?▼

Yes, SSR and hydration in the universal pipeline support Solid and Preact components. The macro-based approach composes components across server-side rendering and client hydration, ensuring output remains consistent across multiple UI runtimes.

How do I implement universal macros for server-side rendering and client hydration?▼

Implement universal macros by leveraging the compiler interface and page utilities to generate server functions. These macros integrate SSR output with client hydration flows, ensuring the compiled HTML, CSS, and JS agree with the original source components.

Why does my compiled HTML disagree with my source components during server-side rendering?▼

Compiled HTML disagrees with source components during server-side rendering due to hydration workflow inconsistencies. The universal pipeline diagnoses these mismatches by inspecting the generated SSR output and HtmlPage runtime behavior against the original component logic.

What is the best way to debug SSR output when working with universal web components?▼

The best way to debug SSR output for universal web components is to trace the macro-based composition pipeline. Diagnose the generated server functions and hydration flow to identify where the compiled HTML or CSS diverges from the expected source component behavior.

Do I need a compiler interface to enable server-side rendering and hydration?▼

Yes, a compiler interface is required to enable server-side rendering and hydration. The universal library relies on this compiler interface alongside page utilities to generate the necessary server functions and execute client hydration correctly.