How chronoskin works

chronoskin gives a coding agent a look to build in: a small folder of rules, tokens and an example site, drawn from one era of web design. The library has 25 eras, 178 layouts and 145958 possible styles.

How to use it

Pick. Choose an era on the Generate page, or let it surprise you. Each era is blended from several real sites of its time, so a style reads as its period and not as a copy of one site.
Tune. Step through layouts, colours, type and surfaces, keep what you like and regenerate the rest. Press the heart to save a style in your browser.
Install. Copy one command. Your agent gets a .design/ folder and follows it for every screen it builds.

What you get

A style is a folder called .design/ with five files. The agent reads them before it writes any interface.

STYLE.md: The rules in words, and what the style never does.
tokens.css: Colours, fonts, borders, radii and shadows as CSS custom properties.
components.css: Classes for navigation, buttons, forms, tables and the other parts of a page.
specimen.html: A small example site that uses every component. When in doubt, the agent does what it does.
style.json: The style's ID, era and page width.

Parts of a style

A style is put together from parts, and an era offers several of each. Any layout can wear any of its era's colours, type and surfaces.

Layout: The page skeleton and its components, shown as an example site you can click through.
Colours: The palette: page, surfaces, text, links, bars, buttons and status colours.
Type: Fonts, sizes, weights and how links are marked.
Surface: Borders, corners, shadows and fills.
Spacing: Compact, normal or roomy: the layout's gaps scaled down or up.
Your colours: Any colour of the palette set by hand in the colour editor, if you want your own.

On a style's page the arrows step one part back or forward, Keep holds a part while Regenerate changes the rest, and Any era jumps to another era. Choose several eras or page types and Regenerate picks among them. On a keyboard, R regenerates, ← and → step the layout and A is Any era.

The Style ID

Every combination has a short ID. The same ID always gives the same files, so an ID is all you need to share or reinstall a style.

v1library w9era: Desktop grey 1 1 1 1layout, colours, type, surface drspacing: dc compact, dr roomy c…colours set by hand

The last two are optional. Each part number is one character, 1 to 9 and then a to z. The long form, v1.windows-9x.app.s01.p01.t01.u01, names the era in full and works everywhere the short one does.

Install

Claude Code

Add the plugin once, then apply any style by its ID.

/plugin marketplace add https://github.com/chronoskin/chronoskin
/plugin install chronoskin@chronoskin
/chronoskin:design-apply v1-w9-1111

The plugin also brings /chronoskin:design-new, which picks a style for you, and a skill that makes the agent follow .design/ whenever it builds interface.

Any other agent

Unpack the folder into your project.

curl -s https://chrono.skin/s/v1-w9-1111.tar.gz | tar xz

Then tell the agent to read .design/STYLE.md and .design/specimen.html before it writes any interface, and to use only the pack's tokens and classes.

For tools

Address	Returns
`GET /api/generate`	Redirects to a new style. Takes `era`, `mode` (`mix` or `pure`), `from` and `lock` to regenerate, `density` and one parameter per colour set by hand, such as `--color-accent=%232b55e0`; with `format=json` it returns a description instead.
`GET /s/<id>.tar.gz`	The `.design/` folder as an archive.
`GET /s/<id>.json`	The five files as JSON.
`GET /s/<id>/specimen.html`	The example site on its own.
`POST /mcp`	An MCP server with `list_eras`, `generate_style`, `get_style` and `lint_css`.

lint_css checks a stylesheet against the installed style and lists every colour, font, size, radius and shadow that should have been a token.