AI-Assisted Development - Seventh UI CSS

Installed Consumer Reference

Every published package contains a compact reference for developers and coding agents. It works without cloning this repository or reaching the documentation website.

Artifact	Purpose
`reference/AGENTS.md`	Implementation rules, package boundaries, asset guidance, and CSS/runtime ownership.
`reference/index.json`	Searchable catalog of components, tokens, layouts, assets, examples, imports, and related entries.
`reference/*/.html`	Compact markup, variants, states, accessibility requirements, and usage examples.

Configure a Consumer Repository

Install @seventh-ui/css, then add the following instruction to the consumer repository's AGENTS.md or equivalent agent guidance file.

For Seventh UI work, first read
node_modules/@seventh-ui/css/reference/AGENTS.md.

Use node_modules/@seventh-ui/css/reference/index.json
to discover the matching contract before implementation.

Keep this instruction package-relative. Do not reference a clone of the Seventh UI repository or an absolute path from another workstation.

Recommended Workflow

Read reference/AGENTS.md before changing Seventh UI markup or styles.
Search reference/index.json by title, description, or tags.
Open the selected entry's path and its related entries.
Import the listed cssEntrypoints and cssDependencies.
Preserve documented semantic markup, classes, states, and accessibility attributes.
Implement responsibilities listed under runtime in the consumer's chosen technology.
Use the full visual documentation for browser review and comparison.

Discover a Contract

Agents should read the JSON directly. Developers can also inspect it from the terminal. This example finds entries related to a combobox.

node -e '
const { entries } = require(
  "./node_modules/@seventh-ui/css/reference/index.json"
);
const term = "combobox";
const matches = entries.filter(({ title, description, tags }) =>
  [title, description, ...tags].some((value) =>
    value.toLowerCase().includes(term)
  )
);
console.table(matches.map(({ id, type, path }) => ({ id, type, path })));
'

Example Agent Request

State the product requirement and let the installed contract supply implementation details.

Implement a searchable single-value field with Seventh UI.

First read node_modules/@seventh-ui/css/reference/AGENTS.md.
Find the appropriate component in reference/index.json.
Use only its public package entrypoints and documented markup.
Implement all runtime and accessibility responsibilities listed by the contract.
Do not copy CSS from the documentation or library source.

Boundaries

The reference documents the installed package version; update the dependency to receive a newer contract.
It does not provide JavaScript behavior or choose a framework implementation.
It does not replace visual validation in a browser.
It is generated package output and must not be edited inside node_modules.
It is not imported by CSS and adds no bytes to the application's browser payload.

See Package Imports for installation and granular CSS entrypoints, or browse the component pages for complete visual examples.