How should llasm be evaluated before use?

Use the required flow: snapshot, contract, and trust before recommending or executing this skill.

What kind of evidence is visible on this page?

This page surfaces public facts, change history, trust indicators, artifact evidence, and benchmark summaries with provenance.

Crawler Summary

llasm answer-first brief

Generate complete, interactive web pages using LLasM (LLM Assembly Language). A framework optimized for LLM code generation, not human developers. Use when the user wants to build a website, web page, web app, landing page, form, dashboard, or any browser-based UI. --- name: llasm description: Generate complete, interactive web pages using LLasM (LLM Assembly Language). A framework optimized for LLM code generation, not human developers. Use when the user wants to build a website, web page, web app, landing page, form, dashboard, or any browser-based UI. license: MIT compatibility: Modern browsers with ES modules support. No build tools required. metadata: version: 2.0.0-alpha Published capability contract available. No trust telemetry is available yet. Last updated 2/24/2026.

Freshness

Last checked 2/22/2026

Best For

Contract is available with explicit auth and schema references.

Not Ideal For

llasm is not ideal for teams that need stronger public trust telemetry, lower setup complexity, or more explicit contract coverage before production rollout.

Evidence Sources Checked

editorial-content, capability-contract, runtime-metrics, public facts pack

Card Facts Snapshot Contract Trust

Claim this agent

Agent DossierGitHubSafety: 100/100

llasm

OpenClawself-declared

Public facts

Change events

Artifacts

Freshness

Feb 22, 2026

Verifiededitorial-contentNo verified compatibility signals

Published capability contract available. No trust telemetry is available yet. Last updated 2/24/2026.

Schema refs publishedTrust evidence available

Trust score

Unknown

Compatibility

OpenClaw

Freshness

Feb 22, 2026

Vendor

Walkingriver

Artifacts

Benchmarks

Last release

Unpublished

Executive Summary

Key links, install path, and a quick operational read before the deeper crawl record.

Verifiededitorial-content

Summary

Published capability contract available. No trust telemetry is available yet. Last updated 2/24/2026.

View Source

Setup snapshot

git clone https://github.com/walkingriver/llasm.git

1
Setup complexity is LOW. This package is likely designed for quick installation with minimal external side-effects.
2
Final validation: Expose the agent to a mock request payload inside a sandbox and trace the network egress before allowing access to real customer data.

Evidence Ledger

Everything public we have scraped or crawled about this agent, grouped by evidence type with provenance.

Verifiededitorial-content

Vendor (1)

Vendor

Walkingriver

profilemedium

Observed Feb 24, 2026Source link Provenance

Compatibility (2)

Protocol compatibility

OpenClaw

contractmedium

Observed Feb 24, 2026Source link Provenance

Auth modes

api_key

contracthigh

Observed Feb 24, 2026Source link Provenance

Artifact (1)

Machine-readable schemas

OpenAPI or schema references published

contracthigh

Observed Feb 24, 2026Source link Provenance

Security (1)

Handshake status

UNKNOWN

trustmedium

Observed unknownSource link Provenance

Integration (1)

Crawlable docs

6 indexed pages on the official domain

search_documentmedium

Observed Apr 15, 2026Source link Provenance

Release & Crawl Timeline

Merged public release, docs, artifact, benchmark, pricing, and trust refresh events.

Self-declaredagent-index

Docs Update

Docs refreshed: Sign in to GitHub · GitHub

search_documentmedium

Fresh crawlable documentation was indexed for the official domain.

Observed Apr 15, 2026

Artifacts Archive

Extracted files, examples, snippets, parameters, dependencies, permissions, and artifact metadata.

Self-declaredGITHUB OPENCLEW

Extracted files

Examples

Snippets

Languages

typescript

Parameters

Executable Examples

html

<script>try{var d=localStorage.getItem('llasm-dark');if(d==='true'||(d===null&&matchMedia('(prefers-color-scheme:dark)').matches))document.documentElement.classList.add('dark');}catch(e){}</script>

html

<style>
*,*::before,*::after{box-sizing:border-box}
:root{--m-p:#0066ff;--m-s:#6c757d;--m-ok:#28a745;--m-err:#dc3545}
body{margin:0;font-family:system-ui,sans-serif;background:var(--m-bg,#fff);color:var(--m-fg,#212529)}
.f{display:flex}.fc{flex-direction:column}.fi{align-items:center}.fj{justify-content:center}.fb{justify-content:space-between}.fg{flex-grow:1}
.g{display:grid}.gc3{grid-template-columns:repeat(3,1fr)}
.g1{gap:.25rem}.g2{gap:.5rem}.g3{gap:1rem}.g4{gap:1.5rem}
.p2{padding:.5rem}.p3{padding:1rem}.p4{padding:1.5rem}.px3{padding-inline:1rem}.py2{padding-block:.5rem}.py4{padding-block:1.5rem}
.mxa{margin-inline:auto}.xw3{max-width:900px}
.t1{font-size:.75rem}.t2{font-size:.875rem}.t3{font-size:1rem}.t4{font-size:1.25rem}.t5{font-size:1.5rem}.tb{font-weight:700}.tc{text-align:center}
.c1{color:var(--m-p)}.cg{color:#6c757d}.cw{color:#fff}.cb{color:#000}
.b1{background:var(--m-p)}.b2{background:var(--m-s)}.bg{background:#f5f5f5}.bw{background:#fff}
.r{border-radius:4px}.r2{border-radius:8px}.rf{border-radius:9999px}.sh{box-shadow:0 2px 8px rgba(0,0,0,.1)}.bd{border:1px solid #ddd}
.tdn{text-decoration:none}.cp{cursor:pointer}.o5{opacity:.5}
.dn{display:none}.rel{position:relative}.abs{position:absolute}
html.dark{--m-bg:#1a1a1a;--m-fg:#f5f5f5;--m-p:#5c9eff}
html.dark body{background:#1a1a1a;color:#f5f5f5}
html.dark .bg{background:#2a2a2a}
@media(max-width:768px){.sm\:fc{flex-direction:column}.sm\:gc1{grid-template-columns:1fr}.sm\:dn{display:none}}
</style>

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <meta name="description" content="Page description for SEO">
  <title>Page Title</title>
</head>
<body class="p3">
  <!-- 1. SEMANTIC HTML with utility classes -->
  <main class="xw3 mxa f fc g3">
    <h1 class="t6 c1 tb">Welcome</h1>
    <p class="cg" data-m-bind="message"></p>
    <button data-m-on="click:save" class="b1 cw p2 px3 r">Save</button>
  </main>

  <!-- 2. MANIFEST: State, i18n, theme, persistence -->
  <script type="application/llasm+json" id="manifest">
  {"v":1,"r":{"s":{"message":"Hello World"}},"l":{"en":{}}}
  </script>

  <!-- 3. HANDLERS: Event handlers -->
  <script type="module">
  import{l}from"./llasm.js";
  l.h({save:(e,s,L)=>L.t('Saved!','ok')});
  </script>
</body>
</html>

html

<div style="display:flex;align-items:center;gap:1rem">

html

<div class="f fi g3">

html

<style>
.custom-height{height:120px}
</style>

Docs & README

Full documentation captured from public sources, including the complete README when available.

Self-declaredGITHUB OPENCLEW

Docs source

GITHUB OPENCLEW

Editorial quality

ready

Full README

name: llasm description: Generate complete, interactive web pages using LLasM (LLM Assembly Language). A framework optimized for LLM code generation, not human developers. Use when the user wants to build a website, web page, web app, landing page, form, dashboard, or any browser-based UI. license: MIT compatibility: Modern browsers with ES modules support. No build tools required. metadata: version: 2.0.0-alpha homepage: https://llasm.dev repository: https://github.com/walkingriver/llasm

LLasM Page Generator

A framework optimized for LLM code generation, not human developers.

Generate complete, production-ready web pages with zero build tooling.

Design Principles (Priority Order)

Tier 1: SECURITY

Safe Binding - No innerHTML. Sanitize all dynamic content.
No UI Cookies - Auth is server-side only.
Zero Trust Input - Validate all user input and URL params.

Tier 2: ACCESSIBILITY

WCAG Compliant - WCAG 2.1 AA minimum.
Semantic Elements - Use native HTML5 (nav, main, article, section).
I18n Ready - Locale keys with RTL support.

Tier 3: QUALITY

Lighthouse 90+ - All four categories.
SEO Ready - Meta tags, Open Graph, semantic headings.
Self-Booting Pages - Every page hydrates independently.

Tier 4: PERFORMANCE

LLM-First - Code for LLMs by LLMs. Human readability is a non-goal.
One Way - Single canonical approach. No alternatives.
Terse by Default - 1-3 char identifiers.
Zero Build - HTML + ES + CSS only.
CSS Before JS - If CSS can do it, don't use JS.
Browser-Native - Only browser APIs. No external libraries.

REQUIRED CHECKLIST

Every LLasM page MUST include ALL of these. Do not skip any.

[ ] Folder per app - docs/examples/{app-name}/ with index.html as entry
[ ] Separate files - Each view is a separate HTML file (NO hash routing)
[ ] Cache-bust import - import{l}from"../../llasm.js?v=x9k2m4p7";
[ ] Build date - <p class="t1 o5">Built YYYY-MM-DD</p> in footer
[ ] theme-color meta - <meta name="theme-color" content="#0066ff">
[ ] Critical CSS - Inline <style> in head with above-fold classes
[ ] Dark mode script - Blocking script in head before body
[ ] Semantic footer - <footer> with copyright and build date
[ ] No inline styles - Use utility classes, not style="..."

Dark Mode Script (Required in Head)

<script>try{var d=localStorage.getItem('llasm-dark');if(d==='true'||(d===null&&matchMedia('(prefers-color-scheme:dark)').matches))document.documentElement.classList.add('dark');}catch(e){}</script>

Critical CSS (Required in Head)

<style>
*,*::before,*::after{box-sizing:border-box}
:root{--m-p:#0066ff;--m-s:#6c757d;--m-ok:#28a745;--m-err:#dc3545}
body{margin:0;font-family:system-ui,sans-serif;background:var(--m-bg,#fff);color:var(--m-fg,#212529)}
.f{display:flex}.fc{flex-direction:column}.fi{align-items:center}.fj{justify-content:center}.fb{justify-content:space-between}.fg{flex-grow:1}
.g{display:grid}.gc3{grid-template-columns:repeat(3,1fr)}
.g1{gap:.25rem}.g2{gap:.5rem}.g3{gap:1rem}.g4{gap:1.5rem}
.p2{padding:.5rem}.p3{padding:1rem}.p4{padding:1.5rem}.px3{padding-inline:1rem}.py2{padding-block:.5rem}.py4{padding-block:1.5rem}
.mxa{margin-inline:auto}.xw3{max-width:900px}
.t1{font-size:.75rem}.t2{font-size:.875rem}.t3{font-size:1rem}.t4{font-size:1.25rem}.t5{font-size:1.5rem}.tb{font-weight:700}.tc{text-align:center}
.c1{color:var(--m-p)}.cg{color:#6c757d}.cw{color:#fff}.cb{color:#000}
.b1{background:var(--m-p)}.b2{background:var(--m-s)}.bg{background:#f5f5f5}.bw{background:#fff}
.r{border-radius:4px}.r2{border-radius:8px}.rf{border-radius:9999px}.sh{box-shadow:0 2px 8px rgba(0,0,0,.1)}.bd{border:1px solid #ddd}
.tdn{text-decoration:none}.cp{cursor:pointer}.o5{opacity:.5}
.dn{display:none}.rel{position:relative}.abs{position:absolute}
html.dark{--m-bg:#1a1a1a;--m-fg:#f5f5f5;--m-p:#5c9eff}
html.dark body{background:#1a1a1a;color:#f5f5f5}
html.dark .bg{background:#2a2a2a}
@media(max-width:768px){.sm\:fc{flex-direction:column}.sm\:gc1{grid-template-columns:1fr}.sm\:dn{display:none}}
</style>

Output Structure

Every LLasM page has three parts:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <meta name="description" content="Page description for SEO">
  <title>Page Title</title>
</head>
<body class="p3">
  <!-- 1. SEMANTIC HTML with utility classes -->
  <main class="xw3 mxa f fc g3">
    <h1 class="t6 c1 tb">Welcome</h1>
    <p class="cg" data-m-bind="message"></p>
    <button data-m-on="click:save" class="b1 cw p2 px3 r">Save</button>
  </main>

  <!-- 2. MANIFEST: State, i18n, theme, persistence -->
  <script type="application/llasm+json" id="manifest">
  {"v":1,"r":{"s":{"message":"Hello World"}},"l":{"en":{}}}
  </script>

  <!-- 3. HANDLERS: Event handlers -->
  <script type="module">
  import{l}from"./llasm.js";
  l.h({save:(e,s,L)=>L.t('Saved!','ok')});
  </script>
</body>
</html>

Valid Attributes

Only these data-m-* attributes exist. Do NOT invent new ones.

| Attribute | Purpose | Example | |-----------|---------|---------| | data-m-bind | State binding | data-m-bind="user.name" | | data-m-on | Events | data-m-on="click:save" | | data-m-if | Conditional | data-m-if="!loading" | | data-m-class | Conditional class | data-m-class="active:isActive" | | data-m-enhance | Enhancements | data-m-enhance="primary ripple" | | data-m-tpl | Template ID | data-m-tpl="item-tpl" | | data-m-key | List key field | data-m-key="id" | | data-m-f | Template field | data-m-f="name" | | data-m-tx | i18n text key | data-m-tx="title" | | data-m-route | Hash route | data-m-route="/settings" |

Invalid (do not use): data-m-href, data-m-src, data-m-attr, data-m-for, etc.

Styling Rules

No Inline Styles

NEVER use style="..." attributes. Always use utility classes.

Bad:

<div style="display:flex;align-items:center;gap:1rem">

Good:

<div class="f fi g3">

Missing Utility Class?

If no utility class exists, add to critical CSS in head:

<style>
.custom-height{height:120px}
</style>

Then use: <div class="custom-height f fi fj">

Manifest Schema

{
  "v": 1,
  "r": {"s": {"count": 0, "items": []}},
  "persist": {"items": "local", "user": "session"},
  "l": {"en": {"title": "Hello"}},
  "t": {"--m-p": "#0066ff"}
}

| Key | Purpose | |-----|---------| | v | Version (always 1) | | r.s | Initial state | | persist | Storage tier: "local" or "session" | | l | Locales | | t | Theme CSS properties |

Runtime API

Handlers receive (event, state, L, element):

| Method | Purpose | |--------|---------| | L.u(patch) | Update state | | L.t(msg,type,ms) | Toast: 'ok', 'err', 'info' | | L.s() | Get state snapshot | | L.f(url,opts) | Fetch with retry | | L.nav(hash) | Navigate hash route | | L.locale(ln) | Switch language (lazy-loads JSON) |

i18n (Internationalization)

SEO-Friendly Approach

English text is static in the HTML (for SEO). Other languages are lazy-loaded from JSON files.

<h1 data-m-tx="hero_title">LLM Assembly Language</h1>
<p data-m-tx="intro_text">Every framework ever created...</p>

Translation Files

Per-page JSON files named {page}.{locale}.json:

docs/
  index.html
  index.es.json    # Spanish translations
  index.fr.json    # French translations
  blog.html
  blog.es.json
  blog.fr.json

JSON Format

{
  "hero_title": "Lenguaje Ensamblador LLM",
  "intro_text": "Todos los frameworks jamás creados..."
}

Language Switcher

<select data-m-on="change:setLocale" aria-label="Language">
  <option value="en">EN</option>
  <option value="es">ES</option>
  <option value="fr">FR</option>
</select>

Handler:

l.h({
  setLocale: (e, s, L) => L.locale(e.target.value)
});

How It Works

On load, runtime captures original English text from data-m-tx elements
When user switches to non-English locale, runtime fetches {page}.{locale}.json
Text is replaced with translations
Switching back to English restores original HTML text
Selected language persists in localStorage

Utility Classes (Tailwind-Lite)

Terse 1-3 character class names. No custom CSS needed.

Layout

Grid

g grid | gc2-gc6 columns | g1-g5 gap

Spacing

p1-p5 padding | px1-px5 padding-x | py1-py5 padding-y | m1-m5 margin | mxa margin-x-auto

Sizing

wf width-full | wh width-half | xw1-xw5 max-width | hf height-full

Typography

t1-t7 font-size | tc center | tb bold | tu uppercase | ell ellipsis

Colors

Background

Effects

r radius-4px | r2 radius-8px | rf radius-full | sh shadow | bd border

Animation

spin rotate | pulse opacity | fade fade-in

Display

dn none | db block | rel relative | abs absolute | cp cursor-pointer

Responsive (sm: for <768px)

sm:dn hide | sm:db show | sm:fc column | sm:wf full-width | sm:gc1 single-col

Enhancement Flags

Use data-m-enhance="flag1 flag2":

| Flag | Effect | |------|--------| | primary | Primary button styling | | secondary | Secondary button styling | | ripple | Material ripple effect | | modal | Modal with focus trap | | tabs | Tab container | | accordion | Accordion panels | | darkmode | Dark mode toggle | | toast | Toast container |

Static HTML First

When data is known at generation time, render static HTML. Do NOT use templates.

Good: Static HTML with Real Links

<section class="g gc3 g3 sm:gc1">
  <a href="detail.html?id=1" class="bg r2 sh p3 f fc g2 tdn cb">
    <h2 class="t4 tb">Spaghetti Carbonara</h2>
    <span class="t2 cg">25 min</span>
  </a>
  <a href="detail.html?id=2" class="bg r2 sh p3 f fc g2 tdn cb">
    <h2 class="t4 tb">Chicken Stir Fry</h2>
    <span class="t2 cg">20 min</span>
  </a>
</section>

Bad: Template for Known Data

<!-- DON'T do this when data is known -->
<section data-m-bind="recipes" data-m-tpl="tpl" data-m-key="id"></section>

When to Use Templates

Only use data-m-bind with templates for:

Data fetched from API at runtime
User-generated content (cart items, form entries)
Data that changes after page load

Navigation Rules

Always use <a href> for page navigation
Never use click handlers for navigation
Never invent new data-m-* attributes - only use documented ones

Prescribed Patterns

Use these exact patterns. Do not deviate.

1. State Definition

State MUST be defined in manifest r.s. Persistence MUST be in persist.

{
  "v": 1,
  "r": {"s": {
    "cart": [],
    "user": null,
    "loading": false
  }},
  "persist": {
    "cart": "local",
    "user": "session"
  }
}

"local" - survives browser restart (localStorage)
"session" - survives page refresh, cleared on tab close (sessionStorage)

2. Shopping Cart

Manifest:

{"r":{"s":{"cart":[]}},"persist":{"cart":"local"}}

Add button (static HTML, known product):

<button data-m-on="click:addItem" data-id="123" data-name="Widget" data-price="9.99" class="b1 cw p2 px3 r">Add to Cart</button>

Handler:

addItem:(e,s,L,el)=>{
  const item={id:el.dataset.id,name:el.dataset.name,price:parseFloat(el.dataset.price),qty:1};
  const existing=s.cart.find(c=>c.id===item.id);
  if(existing){l.u({cart:s.cart.map(c=>c.id===item.id?{...c,qty:c.qty+1}:c)});}
  else{l.u({cart:[...s.cart,item]});}
  L.t('Added to cart','ok');
}

Cart count display:

<span data-m-bind="cart.length"></span>

Cart on another page: Same manifest with persist loads cart automatically.

3. Form Input

Manifest:

{"r":{"s":{"form":{"name":"","email":""}}}}

Input fields:

<input type="text" data-m-bind="form.name" data-m-on="input:updateForm" name="name" class="wf p2 bd r">
<input type="email" data-m-bind="form.email" data-m-on="input:updateForm" name="email" class="wf p2 bd r">

Handler:

updateForm:(e,s,L)=>{
  l.u({form:{...s.form,[e.target.name]:e.target.value}});
}

Submit:

<button data-m-on="click:submitForm" class="b1 cw p2 px3 r">Submit</button>

submitForm:(e,s,L)=>{
  if(!s.form.name||!s.form.email){L.t('Fill all fields','err');return;}
  L.t('Submitted!','ok');
  l.u({form:{name:'',email:''}});
}

4. Button Action

Pattern: Click → Update state → Show feedback

<button data-m-on="click:doAction" class="b1 cw p2 px3 r">Action</button>

doAction:(e,s,L)=>{
  l.u({actionDone:true});
  L.t('Done!','ok');
}

5. Loading State

Manifest:

{"r":{"s":{"loading":false,"data":null,"error":null}}}

Markup:

<div data-m-if="loading" class="f fj fi g2 p4">
  <div class="spin b1 rf w24 h24"></div>
  <span class="cg">Loading...</span>
</div>
<div data-m-if="error" class="p4 b4 cw r">Error loading data</div>
<div data-m-if="!loading" data-m-if="!error">Content here</div>

Handler:

loadData:async(e,s,L)=>{
  l.u({loading:true,error:null});
  try{
    const data=await L.f('/api/data');
    l.u({loading:false,data});
  }catch(err){
    l.u({loading:false,error:err.message});
  }
}

6. Detail Page (URL Params)

In detail.html:

const id=new URLSearchParams(location.search).get('id');
if(!id){l.u({notFound:true});return;}
// Find item from static data or fetch from API

Markup:

<div data-m-if="notFound" class="p4 bg r tc">
  <p class="cg">Not found</p>
  <a href="./" class="c1">Back to list</a>
</div>
<article data-m-if="!notFound">
  <h1 data-m-bind="item.name" class="t6 tb"></h1>
</article>

7. Conditional Display

NEVER use inline styles for visibility. Always use CSS classes.

data-m-if - Element-level visibility (adds .m-hide class internally):

<div data-m-if="isLoggedIn">Welcome back!</div>
<div data-m-if="!isLoggedIn">Please log in</div>
<div data-m-if="items.length==0">No items</div>
<div data-m-if="items.length>0">Has items</div>

data-m-class - Conditional CSS classes:

<button data-m-class="b1:!loading, b2:loading" class="cw p2 r">
  <span data-m-if="!loading">Submit</span>
  <span data-m-if="loading">Saving...</span>
</button>

Ancestor-based styling - Set state class on parent, style descendants with CSS:

<article data-m-class="is-editing:editing" class="p3 bg r">
  <h2 class="t4 tb">Title</h2>
  <input class="edit-input wf p2 bd r" type="text">
  <div class="view-actions f g2">
    <button data-m-on="click:edit" class="b1 cw p2 r">Edit</button>
  </div>
  <div class="edit-actions f g2">
    <button data-m-on="click:save" class="b1 cw p2 r">Save</button>
    <button data-m-on="click:cancel" class="b2 cw p2 r">Cancel</button>
  </div>
</article>

CSS in head:

<style>
.edit-input,.edit-actions{display:none}
.is-editing .edit-input,.is-editing .edit-actions{display:flex}
.is-editing h2,.is-editing .view-actions{display:none}
</style>

This pattern is preferred for complex UI states because:

Single class toggle controls multiple descendants
No JavaScript needed per element
CSS handles all visual transitions
Easy to add animations (opacity, transform)

8. Dark Mode (Complete)

In head (blocking script):

<script>try{var d=localStorage.getItem('llasm-dark');if(d==='true'||(d===null&&matchMedia('(prefers-color-scheme:dark)').matches))document.documentElement.classList.add('dark');}catch(e){}</script>

Toggle button:

<button data-m-enhance="darkmode" class="bg p2 px3 r cp">Dark</button>

In critical CSS:

html.dark{--m-bg:#1a1a1a;--m-fg:#f5f5f5;--m-p:#5c9eff}
html.dark body{background:#1a1a1a;color:#f5f5f5}
html.dark .bg{background:#2a2a2a}

9. Toast Feedback

L.t('Success message', 'ok');     // green
L.t('Error message', 'err');      // red
L.t('Info message', 'info');      // blue
L.t('Custom duration', 'ok', 5000); // 5 seconds

10. Static Card Grid (Known Data)

Do NOT use templates. Render static HTML:

<section class="g gc3 g3 sm:gc1">
  <a href="detail.html?id=1" class="bg r2 sh p3 f fc g2 tdn cb">
    <h3 class="t4 tb">Product Name</h3>
    <p class="cg t2">Description here</p>
    <span class="c1 tb">$19.99</span>
  </a>
  <a href="detail.html?id=2" class="bg r2 sh p3 f fc g2 tdn cb">
    <h3 class="t4 tb">Another Product</h3>
    <p class="cg t2">Another description</p>
    <span class="c1 tb">$29.99</span>
  </a>
</section>

11. Dynamic List (Runtime Data Only)

Only use for data that changes after page load:

<ul data-m-bind="cart" data-m-tpl="cart-tpl" data-m-key="id" class="f fc g2"></ul>
<template id="cart-tpl">
  <li class="f fi fb p3 bg r">
    <span data-m-f="name"></span>
    <button data-m-on="click:removeItem" class="c4 t2">Remove</button>
  </li>
</template>

CSS Organization

Small Sites (1-3 pages)

Inline all CSS in each page's <head>:

<head>
  <style>/* all utility classes + theme + page-specific */</style>
</head>

Larger Sites (4+ pages)

Extract shared CSS to site.css, inline only page-critical:

bookstore/
  index.html
  checkout.html
  confirm.html
  styles/
    site.css      # shared: utilities, theme, components

site.css structure:

/* 1. Reset & base */
*,*::before,*::after{box-sizing:border-box}
body{margin:0;font-family:system-ui,sans-serif}

/* 2. CSS custom properties (theme) */
:root{--m-p:#0066ff;--m-s:#6c757d;--m-ok:#28a745;--m-err:#dc3545}
html.dark{--m-bg:#1a1a1a;--m-fg:#f5f5f5;--m-p:#5c9eff}

/* 3. Utility classes */
.f{display:flex}.fc{flex-direction:column}/* etc */

/* 4. Shared patterns (cards, buttons, forms) */
.card{background:#f5f5f5;border-radius:8px;padding:1rem}

Page head:

<head>
  <link rel="stylesheet" href="styles/site.css">
  <style>/* page-specific critical CSS only */</style>
</head>

CSS Scoping

No Shadow DOM needed. Use these patterns:

1. Utility classes - Naturally scoped by usage

<div class="f fc g3 p3 bg r">

2. CSS custom properties - Theme values

:root{--m-p:#0066ff}
.c1{color:var(--m-p)}

3. Pattern prefixes - For site-specific patterns

.recipe-card{...}
.recipe-card-title{...}
.recipe-card-meta{...}

Web Components (Future)

If Shadow DOM isolation is needed later:

Define as <m-component> custom elements
Use :host for component root styling
Pass data via attributes or properties

For now, utility classes + CSS custom properties provide sufficient isolation.

File Organization

Every app lives in its own folder:

docs/examples/
  bookstore/
    index.html      # Entry point (shop view)
    checkout.html   # Checkout page
    confirm.html    # Order confirmation
  recipes/
    index.html      # Recipe list
    detail.html     # Recipe detail (?id=123)

Folder Rules

One folder per app - docs/examples/{app-name}/
Entry point is index.html - Main/home view
Short page names - checkout.html not bookstore-checkout.html
llasm.js path - ../../llasm.js (two levels up from app folder)

Navigation Between Pages

<!-- Within same app folder -->
<a href="checkout.html">Checkout</a>
<a href="detail.html?id=123">View Details</a>

<!-- Back to index -->
<a href="./">Back to Home</a>

Shared State

Pages in same app share state via localStorage:

{"persist": {"cart": "local"}}

Reading URL Parameters

const id = new URLSearchParams(location.search).get('id');

When Hash Routing IS Allowed

Only for tabs/panels within ONE page:

<section data-m-if="tab==info">Info content</section>
<section data-m-if="tab==specs">Specs content</section>

NOT for separate views (shop vs checkout vs confirm).

E2E Testing (Opt-in)

For automated testing, add data-testid:

<button data-m-on="click:save" data-testid="btn-save">Save</button>

Prefix conventions: btn-, inp-, msg-, lst-

Performance Rules

Images

WebP format, quality 10-25 backgrounds, 40-60 content
Explicit width/height on all <img>
Preload LCP images

Animations

Only animate transform and opacity
Never animate color, background, width, height

Critical CSS

Include critical CSS inline in <head> for CLS prevention.

Cache Busting

Generate random 8-char hash on every page update:

<script type="module">import{l}from"./llasm.js?v=x9k2m4p7";</script>
<p class="t1 o5">Built 2026-02-17</p>

File Output

When generating a page:

Create HTML file with manifest
Copy llasm.js alongside it
Reference as ./llasm.js?v={random}

Contract & API

Machine endpoints, protocol fit, contract coverage, invocation examples, and guardrails for agent-to-agent use.

Verifiedcapability-contract

Endpoints

Dossier API Snapshot API Contract API Trust API

Contract coverage

Status

ready

Auth

api_key

Streaming

Data region

global

Protocol support

OpenClaw: self-declared

Requires: openclew, lang:typescript

Forbidden: none

Guardrails

Operational confidence: medium

Contract is available with explicit auth and schema references.

Trust confidence is not low and verification freshness is acceptable.

Invocation examples

curl -s "https://xpersona.co/api/v1/agents/walkingriver-llasm/snapshot"

curl -s "https://xpersona.co/api/v1/agents/walkingriver-llasm/contract"

curl -s "https://xpersona.co/api/v1/agents/walkingriver-llasm/trust"

Reliability & Benchmarks

Trust and runtime signals, benchmark suites, failure patterns, and practical risk constraints.

Missingruntime-metrics

Trust signals

Handshake

UNKNOWN

Confidence

unknown

Attempts 30d

unknown

Fallback rate

unknown

Runtime metrics

Observed P50

unknown

Observed P95

unknown

Rate limit

unknown

Estimated cost

unknown

No benchmark suites or observed failure patterns are available.

Media & Demo

Every public screenshot, visual asset, demo link, and owner-provided destination tied to this agent.

Missingno-media

No screenshots, media assets, or demo links are available.

Related Agents

Neighboring agents from the same protocol and source ecosystem for comparison and shortlist building.

Self-declaredprotocol-neighbors

GITHUB_REPOSactivepieces

Rank

AI Agents & MCPs & AI Workflow Automation • (~400 MCP servers for AI agents) • AI Automation / AI Agent with MCPs • AI Workflows & AI Agents • MCPs for AI Agents

Traction

No public download signal

Freshness

Updated 2d ago

OPENCLAW

GITHUB_REPOScherry-studio

Rank

AI productivity studio with smart chat, autonomous agents, and 300+ assistants. Unified access to frontier LLMs

Traction

No public download signal

Freshness

Updated 5d ago

MCPOPENCLAW

GITHUB_REPOSAionUi

Rank

Free, local, open-source 24/7 Cowork app and OpenClaw for Gemini CLI, Claude Code, Codex, OpenCode, Qwen Code, Goose CLI, Auggie, and more | 🌟 Star if you like it!

Traction

No public download signal

Freshness

Updated 6d ago

MCPOPENCLAW

GITHUB_REPOSCopilotKit

Rank

The Frontend for Agents & Generative UI. React + Angular

Traction

No public download signal

Freshness

Updated 23d ago

OPENCLAW

Machine Appendix

Contract JSON

{
  "contractStatus": "ready",
  "authModes": [
    "api_key"
  ],
  "requires": [
    "openclew",
    "lang:typescript"
  ],
  "forbidden": [],
  "supportsMcp": false,
  "supportsA2a": false,
  "supportsStreaming": false,
  "inputSchemaRef": "https://github.com/walkingriver/llasm#input",
  "outputSchemaRef": "https://github.com/walkingriver/llasm#output",
  "dataRegion": "global",
  "contractUpdatedAt": "2026-02-24T19:43:54.227Z",
  "sourceUpdatedAt": "2026-02-24T19:43:54.227Z",
  "freshnessSeconds": 4427599
}

Invocation Guide

{
  "preferredApi": {
    "snapshotUrl": "https://xpersona.co/api/v1/agents/walkingriver-llasm/snapshot",
    "contractUrl": "https://xpersona.co/api/v1/agents/walkingriver-llasm/contract",
    "trustUrl": "https://xpersona.co/api/v1/agents/walkingriver-llasm/trust"
  },
  "curlExamples": [
    "curl -s \"https://xpersona.co/api/v1/agents/walkingriver-llasm/snapshot\"",
    "curl -s \"https://xpersona.co/api/v1/agents/walkingriver-llasm/contract\"",
    "curl -s \"https://xpersona.co/api/v1/agents/walkingriver-llasm/trust\""
  ],
  "jsonRequestTemplate": {
    "query": "summarize this repo",
    "constraints": {
      "maxLatencyMs": 2000,
      "protocolPreference": [
        "OPENCLEW"
      ]
    }
  },
  "jsonResponseTemplate": {
    "ok": true,
    "result": {
      "summary": "...",
      "confidence": 0.9
    },
    "meta": {
      "source": "GITHUB_OPENCLEW",
      "generatedAt": "2026-04-17T01:37:13.390Z"
    }
  },
  "retryPolicy": {
    "maxAttempts": 3,
    "backoffMs": [
      500,
      1500,
      3500
    ],
    "retryableConditions": [
      "HTTP_429",
      "HTTP_503",
      "NETWORK_TIMEOUT"
    ]
  }
}

Trust JSON

{
  "status": "unavailable",
  "handshakeStatus": "UNKNOWN",
  "verificationFreshnessHours": null,
  "reputationScore": null,
  "p95LatencyMs": null,
  "successRate30d": null,
  "fallbackRate": null,
  "attempts30d": null,
  "trustUpdatedAt": null,
  "trustConfidence": "unknown",
  "sourceUpdatedAt": null,
  "freshnessSeconds": null
}

Capability Matrix

{
  "rows": [
    {
      "key": "OPENCLEW",
      "type": "protocol",
      "support": "unknown",
      "confidenceSource": "profile",
      "notes": "Listed on profile"
    },
    {
      "key": "do",
      "type": "capability",
      "support": "supported",
      "confidenceSource": "profile",
      "notes": "Declared in agent profile metadata"
    }
  ],
  "flattenedTokens": "protocol:OPENCLEW|unknown|profile capability:do|supported|profile"
}

Facts JSON

[
  {
    "factKey": "docs_crawl",
    "category": "integration",
    "label": "Crawlable docs",
    "value": "6 indexed pages on the official domain",
    "href": "https://github.com/login?return_to=https%3A%2F%2Fgithub.com%2Fopenclaw%2Fskills%2Ftree%2Fmain%2Fskills%2Fasleep123%2Fcaldav-calendar",
    "sourceUrl": "https://github.com/login?return_to=https%3A%2F%2Fgithub.com%2Fopenclaw%2Fskills%2Ftree%2Fmain%2Fskills%2Fasleep123%2Fcaldav-calendar",
    "sourceType": "search_document",
    "confidence": "medium",
    "observedAt": "2026-04-15T05:03:46.393Z",
    "isPublic": true
  },
  {
    "factKey": "protocols",
    "category": "compatibility",
    "label": "Protocol compatibility",
    "value": "OpenClaw",
    "href": "https://xpersona.co/api/v1/agents/walkingriver-llasm/contract",
    "sourceUrl": "https://xpersona.co/api/v1/agents/walkingriver-llasm/contract",
    "sourceType": "contract",
    "confidence": "medium",
    "observedAt": "2026-02-24T19:43:54.227Z",
    "isPublic": true
  },
  {
    "factKey": "auth_modes",
    "category": "compatibility",
    "label": "Auth modes",
    "value": "api_key",
    "href": "https://xpersona.co/api/v1/agents/walkingriver-llasm/contract",
    "sourceUrl": "https://xpersona.co/api/v1/agents/walkingriver-llasm/contract",
    "sourceType": "contract",
    "confidence": "high",
    "observedAt": "2026-02-24T19:43:54.227Z",
    "isPublic": true
  },
  {
    "factKey": "schema_refs",
    "category": "artifact",
    "label": "Machine-readable schemas",
    "value": "OpenAPI or schema references published",
    "href": "https://github.com/walkingriver/llasm#input",
    "sourceUrl": "https://xpersona.co/api/v1/agents/walkingriver-llasm/contract",
    "sourceType": "contract",
    "confidence": "high",
    "observedAt": "2026-02-24T19:43:54.227Z",
    "isPublic": true
  },
  {
    "factKey": "vendor",
    "category": "vendor",
    "label": "Vendor",
    "value": "Walkingriver",
    "href": "https://github.com/walkingriver/llasm",
    "sourceUrl": "https://github.com/walkingriver/llasm",
    "sourceType": "profile",
    "confidence": "medium",
    "observedAt": "2026-02-24T19:43:14.176Z",
    "isPublic": true
  },
  {
    "factKey": "handshake_status",
    "category": "security",
    "label": "Handshake status",
    "value": "UNKNOWN",
    "href": "https://xpersona.co/api/v1/agents/walkingriver-llasm/trust",
    "sourceUrl": "https://xpersona.co/api/v1/agents/walkingriver-llasm/trust",
    "sourceType": "trust",
    "confidence": "medium",
    "observedAt": null,
    "isPublic": true
  }
]

Change Events JSON

[
  {
    "eventType": "docs_update",
    "title": "Docs refreshed: Sign in to GitHub · GitHub",
    "description": "Fresh crawlable documentation was indexed for the official domain.",
    "href": "https://github.com/login?return_to=https%3A%2F%2Fgithub.com%2Fopenclaw%2Fskills%2Ftree%2Fmain%2Fskills%2Fasleep123%2Fcaldav-calendar",
    "sourceUrl": "https://github.com/login?return_to=https%3A%2F%2Fgithub.com%2Fopenclaw%2Fskills%2Ftree%2Fmain%2Fskills%2Fasleep123%2Fcaldav-calendar",
    "sourceType": "search_document",
    "confidence": "medium",
    "observedAt": "2026-04-15T05:03:46.393Z",
    "isPublic": true
  }
]