Showcase

A skill file with its reference attached

A skill is instructions plus reference material, and the usual failure is drift between them. Here the instructions live in the agent record and the reference lives beside them as views — the same perspectives, switchable tabs, deep-linkable at #release-notes/example. Nothing is duplicated, so nothing drifts.

The document

Render it and switch tabs — the bundle keeps the shown view in the URL, arrow keys rove the tab bar, and with scripts off every view stacks under its name.

skill example

skill.md · authored SemText

source

      
      <sem-enhanced-document>
    
        <h1 data-kind="title">release-notes</h1>
    
        <agent>
    
          <name>release-notes skill</name>
    
          <bio>Drafts a dated work log from landed changes.</bio>
    
          <instructions>One line per landed change, newest first. Cite identifiers exactly as recorded; never invent them.</instructions>
    
        </agent>
    
        <sem-views id="release-notes">
    
          <sem-view name="Reference" active role="tabpanel">
    
            <sem-properties kind="arguments">
    
              <sem-property key="since" role="definition" aria-label="since">Date or tag to start the log from</sem-property>
    
              <sem-property key="--format" role="definition" aria-label="--format">log | announce — the output shape</sem-property>
    
            </sem-properties>
    
          </sem-view>
    
          <sem-view name="Example" role="tabpanel">
    
            <sem-code lang="markdown" filename="CHANGELOG.md" controls="copy,wrap">
    
      <pre><code>## 2026-10-14
    
      - otel meter scope fix (#73)
    
      - bump chart tag (#75)</code></pre>
    
            </sem-code>
    
          </sem-view>
    
        </sem-views>
    
        <sem-note variant="tip">The same file a model executes as the skill renders as these tabs.</sem-note>
    
      </sem-enhanced-document>

render

Render view: this block wires to the SemText runtime bundle in the full example viewer (port-reference lane) — the source beside it is the same file, byte for byte.

Why this works

sem-view name is unique per container — the tab identity is the authoring identity, in the URL too.
View switching is presentation: extraction is unchanged by which tab is shown, so the model reads the whole skill every time.
The listing keeps its source verbatim — the example output a model imitates is byte-identical to what a reader copies.

Elements used: agent, sem-views, sem-properties, sem-code. Their contracts live on the reference pages .