Skirbi is web author system system for building web interfaces using semantic HTML, CSS tokens, and light DOM web components.

Each layer has one job.

html
<semtic-article title="Hello world">
  <p>Clean authoring. Real HTML output.</p>
</semtic-article>

Becomes:

html
<semtic-article>
  <article>
    <semtic-header>
      <header>
        <h1>Hello world</h1>
      </header>
    </semtic-header>
    <section>
      <p>Clean authoring. Real HTML output.</p>
    </section>
  </article>
</semtic-article>

No Shadow DOM. No class soup. Everything inspectable.

The layers

Layer Package Responsibility
Base @skirbi/sugar Web Component primitives
Structure @skirbi/semtic Semantic HTML components
Styling @skirbi/pinta Tokens + visual primitives
Composition @skirbi/dibuho UI patterns / layouts

Each layer depends only on what’s below it. Use as much or as little as you need.

Pick your entry point

I want to write content and build pages → start with Semtic

I want to theme and style things → start with Pinta

I want ready-made page sections → start with Dibuho

I want to build my own components → start with Sugar

I want to use it for my site! → see Integrations