Composition layer specification

Skirbi’s composition layer

@skirbi/dibuho development

Dibuho provides ready-made compositions built from @skirbi/semtic and styled via @skirbi/pinta.

• semtic → structure
• pinta → look
• dibuho → composition

What it is

Dibuho is a small set of prebuilt UI patterns:

• headers
• topbars
• article layouts
• hero blocks
• content sections

These are not new primitives.

They are combinations of semtic elements arranged in a sensible, reusable way.

What it is not

Dibuho is not:

• a CSS framework
• a replacement for semtic
• a theme engine
• a new primitive layer

Dibuho is the component layer.

Semtic gives you structure.
Pinta gives you the visual system.
Dibuho gives you reusable patterns built from both.

If you need a section → use semtic
If you need spacing or tones → use pinta
If you need a terminal, article card, topbar, or layout → use dibuho

Example

A simple header composition:

<dibuho-header>
  <semtic-nav>
    <semtic-nav-item href="/">Home</semtic-nav-item>
    <semtic-nav-item href="/docs">Docs</semtic-nav-item>
  </semtic-nav>
</dibuho-header>

An article layout:

<dibuho-article>
  <semtic-article title="Hello world">
    <p>Content…</p>
  </semtic-article>
</dibuho-article>

Relationship to other packages

Scope (v1)

Dibuho intentionally starts small:

• header
• topbar
• hero
• article layout
• related content block

That’s it.

If something feels like it belongs here:

• it probably doesn’t
• until you’ve written it 3 times