← ClaudeAtlas

lexigram-uilisted

Use when building server-rendered HTML components, HTMX fragments, layouts, or configuring the UI module in a Lexigram application
dbtinoy-/lexigram-framework-skills · ★ 1 · Web & Frontend · score 72
Install: claude install-skill dbtinoy-/lexigram-framework-skills
# Lexigram UI ## Overview Lexigram-ui (experimental, at `experimental/apps/lexigram-ui`) provides htpy-backed component rendering, HTMX integration, layouts, atoms/molecules/organisms, and theming. Components subclass `Component` and implement `render()`; elements are built with `el()`. ## Component Pattern ```python from lexigram.ui import component from lexigram.ui.core.base import Component, el, render_to_string class StatCard(Component): def __init__(self, label: str, value: str): super().__init__() self.label = label self.value = value def render(self): return el("div", {"class": "stat-card"}, el("span", {"class": "stat-label"}, self.label), el("span", {"class": "stat-value"}, self.value), ) html = render_to_string(StatCard("Users", "1,204")) ``` `el(tag, *children, **attrs)` builds an element (htpy when installed, local `Element` fallback); plain-string children are auto-escaped, wrap trusted HTML in `raw(...)`. `Component` supports Streamlit-style `with` blocks, `as_child` delegation, an `on_mount` hook, and fluent `.add(...)`. The `@component(name=None, *, cacheable=False)` decorator only attaches `__component_name__` metadata for DI discovery by `UIProvider` — it does not register anything itself. ## Module Registration ```python from lexigram.di.module import Module, module from lexigram.ui import UIModule from lexigram.ui.config import UIConfig @module(imports=[UIModule.configure(UI