What gets stamped

Stamps are the data-sky-* HTML attributes that Skyelight Build adds at build time. Each host element in your JSX gets attributes for its source, and <html> gets the commit and branch the page was built from:

<html data-sky-build="9f2a1c4" data-sky-branch="feat/checkout">
  <li
    data-sky-src="components/today/today-plan.tsx:90"
    data-sky-component="DoseRow"
    data-sky-id="9dbfcb76"
    data-sky-key="1x8kq3f"
  ></li>
</html>

On each element

Attribute	What it holds
`data-sky-src`	The file and line that wrote the element, such as `components/Card.tsx:88`
`data-sky-component`	The component the element belongs to. Left off when the element is outside any component
`data-sky-id`	A stable ID for the element, built from the file, component, tag and which one of that tag it is
`data-sky-key`	A short hash of the element’s React `key`, so rows of one `.map()` can be told apart. Only on elements with a `key`

data-sky-src records where the element was written. data-sky-component records which component wrote it, and it changes less often. A line number moves when someone adds a line above it, while a component name stays the same through edits and reformatting.

The plugin takes the component name from the enclosing function, following React’s rule that a component name starts with a capital letter. It unwraps memo and forwardRef. An element outside any component gets no data-sky-component.

data-sky-id doesn’t include the line number, so edits that move lines don’t change it. It changes only when the element itself is restructured.

data-sky-key holds a hash, never the key’s value. A key can be an email address or a name, and the hash keeps that value out of your HTML. Versions before 0.14.0 copied the key’s value.

On the page

Attribute	What it holds	Next.js	Vite-based
`data-sky-build`	The commit, seven characters	yes	yes
`data-sky-branch`	The branch name, in full	yes	yes
`data-sky-commit-subject`	The first line of the commit message, up to 120 characters	yes	no
`data-sky-commit-at`	When the commit was made, in ISO 8601	yes	no
`data-sky-dirty`	Present when a local build had uncommitted `.tsx` or `.jsx` changes	yes	no

A local build with uncommitted .tsx or .jsx changes stamps no commit, because the code on the page doesn’t match any commit. The branch is still stamped. data-sky-dirty is never set on CI, which builds from a clean checkout.

When the badge is on, <html> also carries what the build reports to your project’s settings (see below):

Attribute	What it holds
`data-sky-plugin`	The plugin version
`data-sky-env`	The build environment: `preview`, `production` or `development`
`data-sky-stamping`	`1` when stamps are on, `0` when they’re off
`data-sky-production`	`excluded` or `allowed`, when the config sets `production`
`data-sky-framework`	The framework the site is built with
`data-sky-framework-version`	The installed framework version, when the plugin can read it

Paths are relative to the repository

Paths start at the git repository root, not at the directory the build ran in. In a monorepo, a build from apps/web stamps apps/web/app/page.tsx, so the path is the same for anyone with a copy of the repository. Without git, such as in a Docker build from a tarball, paths are relative to the build directory.

What is not stamped

Components. <PricingCard /> gets no attributes, because they would become props, and most components drop props they don’t expect. The elements inside PricingCard carry its file, PricingCard.tsx.
Member expressions. <motion.div /> gets no attributes, because some libraries pass unknown props to the DOM and some don’t.
Files other than .jsx and .tsx, and anything in node_modules.

In a local dev server, the commit on <html> can be out of date. The attribute is in your root layout, which your bundler caches. If you commit and then edit other files, the page shows the previous commit until the layout is processed again. Restart the dev server, or save the layout file, to update it. The file and line stamps on elements are not affected.

How stamps reach people and agents

When someone pins an element with the badge or the Chrome extension, the page context saved with the thread keeps the stamps. Page context is on by default, and a workspace admin can turn it off. See Anchoring and context.
When Skyelight shows the pin again, it finds the element by data-sky-id (and data-sky-key) before it tries the CSS selector. The pin stays on the element after a wrapper is added or siblings are reordered.
When an agent reads the thread with get_item, it gets the source file, line, component, commit and branch. It also gets the stamped files of the elements above and below, and a link to the file at that commit when the project is linked to a GitHub repository.

Written bycomponents/Card.tsx

Line: 88
Build: a1b2c3d
Branch: feat/checkout

Before an agent edits a file, find_by_source lists the threads on that file or component, or ranks stamped files by their open and deferred threads.

If someone moves a pin to another element, the thread takes the new element’s source location.

In your project settings

After a reviewer signs in through the badge, the build reports its settings. Under Project settings Review Links, the preview address shows (see Preview URLs):

Connected, and the plugin version as Build v….
The settings Stamp sources, Badge and Keep out of production, each marked on or off.
The framework the site is built with.

A production build shows In production in place of Keep out of production. If a production build includes stamps, the address shows a warning that suggests production: false. Builds report nothing for visitors who never sign in.