fewlines-css — Documentation

Principles

Native first — semantic HTML and native browser behavior.
Zero runtime JS — the core package ships CSS only.
One canonical markup — a single documented structure per component.
Controlled regression — one implementation, fallbacks via @supports.

Components

Each component has one documented page with its canonical markup, variants, states and accessibility notes — grouped in the sidebar (Foundation, Forms, Overlays, Indicators, Navigation, Data). The base layer also styles semantic text elements (code, kbd, pre, mark, abbr, links, quotes, lists).

Installation

pnpm add fewlines-css

/* whole package (bundler: Vite etc.) */
@import 'fewlines-css';

/* tokens only */
@import 'fewlines-css/tokens';

Theming follows the system preference (light-dark() + color-scheme); an explicit override is data-theme="light|dark" on the root element.

Using with AI assistants

The repository ships an agent skill: skills/fewlines-css/ — a compact SKILL.md (install, theming, component index, system rules) plus per-component references with canonical markup, variants and constraints.

For OpenCode, add the raw catalog to opencode.json — the skill is fetched and cached automatically, and refreshed when the catalog version changes:

{
  "$schema": "https://opencode.ai/config.json",
  "skills": ["https://raw.githubusercontent.com/mightyskeet/fewlines-css/main/skills"]
}

For any other agent, copy the skills/fewlines-css/ folder into your skills directory (.claude/skills/, .agents/skills/, ~/.config/opencode/skills/ and similar).