Building with AI

Install the skill that teaches Claude Code and other coding agents to write Adanotch extensions.

You can have a coding agent (Claude Code, Codex, Cursor…) write Adanotch extensions for you. An agent that doesn't know AdanotchKit tends to make things up: reaching for the DOM, adding a node that doesn't exist, forgetting a permission. The Adanotch skill prevents that. It is a single SKILL.md file that tells the agent about the API, the limits, the permissions and the workflow.

The skill tells the agent:

The API's source of truth is adanotch/adanotch.d.ts in the extension folder; don't use anything that isn't there.
A view is made only of ui.* nodes; what fits in the compact area; colour is only a tone.
Which permission each API needs, the fetch rules, keeping secrets in the Keychain.
The 200 ms, memory and bundle limits; the web and Node APIs that aren't there.
To run typecheck, test, build and lint after every change, and to write a test for each behaviour it adds.

Installing

To use it in all your projects, install it as a personal skill:

mkdir -p ~/.claude/skills/adanotch-extension
curl -fsSL https://www.adanotch.com/skills/adanotch-extension/SKILL.md \
  -o ~/.claude/skills/adanotch-extension/SKILL.md

To use it in one extension only, in the extension folder:

mkdir -p .claude/skills/adanotch-extension
curl -fsSL https://www.adanotch.com/skills/adanotch-extension/SKILL.md \
  -o .claude/skills/adanotch-extension/SKILL.md

Claude Code loads the skill by itself when the folder has an adanotch/ directory or a manifest.json with adanotchVersion, or when you ask for an Adanotch extension.

To read the file first: SKILL.md.

Using it

Create an extension with adanotch init and run npm install first, then tell the agent what you want:

Change this extension to show my open GitHub pull requests. The token should be
entered in settings, show the count in the compact area, and put a clickable
list in the card. Write tests for it too.

The agent adds the permissions and the secret setting to manifest.json, writes src/index.ts, adds tests and runs the commands. To see the result in the island, run npm run watch and adanotch dev yourself.

Review what the agent wrote

The agent doesn't install the extension, but its code will run with the permissions you approve. Check the permissions and network: domains in manifest.json before installing.

Keeping it current

When you update Adanotch, download the skill again with the same command. Run adanotch init --types for the extension's adanotch/; the skill points the agent at those files, so it's best to keep both on the same version. When Adanotch updates

InstallingCopy Anchor Link

Using itCopy Anchor Link

Keeping it currentCopy Anchor Link

On this page

Installing

Using it

Keeping it current