# SlexKit Authoring Rules for LLMs

SlexKit's agent-readable source is Markdown with explicit `slex` fences. Do not use `.mdx`; `slex` fences are the interactive layer.

## Always Do

- Emit explicit `slex` fenced code blocks for display-oriented interactive UI.
- Use a Slex expression envelope: `slex`, `namespace`, `g`, and `layout`.
- Put mutable state and helper functions in `g`; put component structure in `layout`.
- Use `std.*` for common calculations, formatting, units, and small statistics.
- Use component keys in `type:identifier` form, such as `card:summary`.
- Use `$` read-pipes for dynamic props and `on*` write-pipes for event handlers.
- Include readable Markdown fallback text after the fence.
- Use secure runtime integration for untrusted or agent-generated source.

## Do Not

- Do not emit imports, JSX, Svelte, Vue, or project scaffolding inside `slex` fences.
- Do not ask hosts to scan plain JavaScript, JSON, or untagged code blocks.
- Do not wrap ordinary status cards or summaries in ToolHost.
- Do not bypass the sandbox for untrusted source.
- Do not use native `fetch`, `XMLHttpRequest`, `WebSocket`, `setTimeout`, or `requestAnimationFrame` in secure mode; use policy-gated `api.*` instead.
- Do not invent `.mdx` routes for SlexKit docs.

## Display UI Example

```slex
{
  slex: "0.1",
  namespace: "release_status",
  g: { done: 3, total: 4 },
  layout: {
    "card:summary": {
      title: "Release status",
      "text:count": { "$text": "g.done + '/' + g.total + ' complete'" },
      "progress:bar": { "$value": "g.done / g.total * 100" }
    }
  }
}
```

**Fallback:** Release status: 3/4 complete.

## ToolHost Boundary

Use ToolHost only when the UI must return structured user input to the host, such as confirmations, option lists, or forms. Display-only dashboards, metrics, and status blocks should stay as `slex` fences.