Accordion

Collapsible sections via native details and summary — no JavaScript

Native <details> and <summary>. No JavaScript, no classes. Keyboard accessible by default.

Basic

What is ASW?

A standalone CSS framework for agent-generated web content. Semantic HTML + data-attributes. Zero classes. One file.

Who is it for?

LLMs and agents generating HTML. Also humans who prefer writing semantic markup over wrestling with class names.

Open by default

Add the open attribute to show a section expanded on load. The user can still collapse it.

Grouped accordion

Adjacent <details> elements render as a group. Each operates independently — all can be open simultaneously.

Installation

Add one <link> tag to your document head. No npm, no build step.

<link rel="stylesheet" href="/agentic.css">
Usage

Write semantic HTML. ASW styles it. Use data-* attributes for layout patterns and variants. No classes required.

Customisation

Override CSS custom properties to change colours, spacing, and typography.

With nested content

Content inside <details> can be rich — code blocks, lists, tables.

Build commands 
./build.sh css     # CSS layers → agentic.css
./build.sh site    # content/**/*.md → built HTML
./build.sh all     # both
Keyboard shortcuts