git:20261013.a711814 to git:20261014.2f5aeb6

1 added, 1 removed. Audit A to A.

# Pinto Notes apps (for AGENTS.md)

- Paste this into a project's AGENTS.md (Codex, Cursor and other agents read it) when you use the Pinto Notes MCP server (https://mcp.ambernotes.app) there. The server already teaches all of this through its instructions and every new app's README.md; this keeps it in front of agents that skim server instructions.

+ Paste this into a project's AGENTS.md (Codex, Cursor and other agents read it) when you use the Pinto Notes MCP server (https://mcp.pintonotes.com) there. The server already teaches all of this through its instructions and every new app's README.md; this keeps it in front of agents that skim server instructions.

A folder ending in .app is the note's app, a small React project with its data in data.json; read its README.md first (an older app can be a single index.html: change it the same way). Its docs/ folder is that app's memory: read docs/ first, and keep it current (data shape, decisions and why, known gaps) whenever you change the app. Every feature you add gets a test in tests/ like the starter's (do what the person does, check what they see and what was saved); never weaken, skip or delete a test to make it pass: fix the app instead. Tests run on every save, and a version that fails isn't shown to the person. The person stays in control inside the app, as in any real app, not only through their AI: whatever the app keeps, they can add, edit, rename, reorder and remove themselves (a habit tracker lets them manage its habits), settings are changed in the app, deletes can be undone, and everything is saved in data.json.

The default look every app starts with, amber-base.css (the real file; override any rule, or opt out with `<meta name="amber-base" content="none">`):

```css

/* amber-base.css, version 1 (Amber Notes). The default stylesheet every note's app gets.

It is loaded before the app's own styles, inside the cascade layer "amber-base", so any style the

app writes wins over it, whatever its specificity. There is nothing else: no other styles are

added to an app, and no rule here is marked important.

The colours and sizes are variables from amber-tokens.css (loaded first, layer "amber-tokens"),

already switched for light and dark. To style everything yourself:

@layer amber-tokens, amber-base;

@layer amber-base {

/* Page: the note's background, the system font at the reader's text size (iPhone: Dynamic Type,

so rem follows it; Mac: 14px). */

html { font: var(--amber-root-font); -webkit-text-size-adjust: 100%; color-scheme: light dark; }

body { margin: 0; font-size: 1rem; line-height: 1.35; background: var(--amber-bg); color: var(--amber-text); font-family: var(--amber-font); }

/* Never wider than the note: something too wide is clipped, not panned to. */

html, body { overflow-x: clip; }

:where(img, video, canvas, svg, iframe, pre) { max-width: 100%; }

/* Fields: every input visible as a field, in both themes. */

:where(input:not([type=checkbox], [type=radio], [type=range], [type=color], [type=file], [type=hidden]), select, textarea) {

background: var(--amber-field); color: var(--amber-text); border: 1px solid var(--amber-field-border);

border-radius: var(--amber-radius-small); font: inherit; padding: 6px 10px;

}

:where(input, select, textarea, button, a):focus-visible { outline: 2px solid var(--amber-accent); outline-offset: 1px; }

:where(input[type=checkbox], input[type=radio], input[type=range], progress) { accent-color: var(--amber-accent); }

/* Buttons: the app's font; the rest is up to the app. */

:where(button) { font: inherit; color: inherit; }

/* Links and lines. */

:where(a) { color: var(--amber-accent-text); }

:where(hr) { border: 0; border-top: 1px solid var(--amber-separator); margin: 16px 0; }

}

```