Agents write it. Browsers run it. Humans read it.
A web component framework with signals, expressive templates, and an off-the-shelf UI kit. No build step from generation to execution.
<current-date>
<h3 class="header">
Welcome {getDisplayName (getUser userId) }
</h3>
{#if isAdmin userId}
<ui-buttons large>
{#each actions}
<ui-button {style}>
<ui-icon {icon}>
{text}
</ui-button>
{/each}
</ui-buttons>
{/if}
</user-panel>
{
"tagName": "ui-button",
"types": [
{
"name": "Emphasis",
"usageLevel": 1,
"options": [
{ "value": "primary",
"description": "be emphasized as
the first action" },
{ "value": "secondary" }
]
},
{
"name": "Social Site",
"usageLevel": 5,
"options": [
"instagram", "facebook", "twitter"
]
}
],
"variations": [
{ "name": "Size",
"usageLevel": 1,
"options": [
"small", "medium", "large"
] },
{ "name": "Circular", "usageLevel": 3 }
]
}
import { defineComponent } from '@semantic-ui/component';
const template = await getText('./panel.html');
const css = await getText('./panel.css');
export const UserPanel = defineComponent({
tagName: 'user-panel',
template,
css,
defaultState: {
users: [],
loading: true,
},
createComponent: ({ state, signal }) => ({
async loadUsers() {
const data = await fetch('/api/users');
state.users.set(await data.json());
state.loading.set(false);
},
}),
onCreated: ({ self }) => self.loadUsers(),
});
Use javascript or list style expressions. Surgically update values with Signals against your data.
Every component ships with a machine-readable spec. Agents read structured contracts to know exactly what's valid, what attributes compose, and what's appropriate.
usageLevel tells agents what's common vs. niche — no hallucinated <ui-button instagram> in a checkout flow
Define reactive web components with signals, Shadow DOM, and lifecycle hooks. Templates compile in the browser in under a millisecond — no bundler, no transpiler, no waiting.
toggle(), increment(), push() .primary just works, no prefixes or modules