Getting Started

From zero to a styled page in under a minute. No npm, no bundler, no build step.

Installation

Copy agentic.css from the repository to your assets directory. That's the only file you need.

cp agentic.css /path/to/your/assets/
<link rel="stylesheet" href="/assets/agentic.css">
Size

Single file, ~70KB unminified. No external dependencies. No JavaScript required. Gzip compression brings it under 15KB.

Your First Page

A complete, styled page in 20 lines:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link rel="stylesheet" href="/assets/agentic.css">
  <title>My Page</title>
</head>
<body>
  <nav>
    <ul><li><strong>My Site</strong></li></ul>
    <ul><li><a href="/">Home</a></li></ul>
  </nav>
  <main class="container">
    <h1>Hello, World</h1>
    <p>This is a styled page. No classes. No inline styles. Just HTML.</p>
  </main>
  <footer class="container">
    <small>Built with ASW</small>
  </footer>
</body>
</html>
The only class

class="container" on <main> and <footer> is the only class in the entire framework. It centers content and constrains width. Everything else is semantic HTML.

The Agent Directive

The complete constraint for LLM agents:

Write semantic HTML. Use data- attributes for vault concepts. Never write style=. Never invent classes. If ASW can't express it, document the gap.

That's it. Put this in your agent's system prompt. Give it the vocabulary reference for the complete data-attribute list.

For agent contexts

Include the full directive in your agent's working memory:

cat docs/agent-directive.md

This gives the agent the complete vocabulary, examples, and rules in one consumable document.

Semantic HTML Primer

ASW styles these HTML elements automatically. No classes needed:

Structure

ElementPurpose
<nav>Navigation bar
<main>Primary content area
<article>Card or self-contained content
<section>Thematic grouping
<aside>Sidebar or tangential content
<header>Introductory content
<footer>Footer content

Interactive

ElementPurpose
<details> + <summary>Collapsible section
<dialog>Modal dialog
<button>Action button
<a>Navigation link

Data

ElementPurpose
<table>Tabular data
<dl> + <dt> + <dd>Definition list (key-value pairs)
<ul> / <ol>Lists
<pre><code>Code blocks

Inline

ElementRenders As
<strong>Bold text
<em>Italic text
<code>Inline code
<mark>Highlighted text
<kbd>Keyboard input
<small>Small text

Adding Data-Attributes

When semantic HTML isn't enough, data-attributes extend the vocabulary:

Tasks

<ul>
  <li data-task="done">Completed task</li>
  <li data-task="todo">Pending task</li>
  <li data-task="blocked">Blocked task</li>
</ul>

Result:

  • Completed task
  • Pending task
  • Blocked task

Callouts

<div data-callout="warning">
  <span data-callout-title>Caution</span>
  <p>This requires attention.</p>
</div>

Result:

Caution

This requires attention.

Status Indicators

<span data-status="awake">awake</span>
<span data-status="sleeping">sleeping</span>
<span data-status="blocked">blocked</span>

Result: awake sleeping blocked

Wikilinks

<span data-wikilink>Note Name</span>
<span data-wikilink data-unresolved>Missing Note</span>

Result: Note Name and Missing Note

Full vocabulary reference →

Next Steps