How it worksStated · compiled · checked

A rule nobody can check
is only a preference.

Written guidance drifts. The model reads it, agrees with it, and violates it on the fourth screen. So the rules are held three different ways — and the strongest of them do not depend on the model’s judgement at all.

Stated
141516
Compiled
1–25 of 128total=…
Checked
Figures tracedStates drawnUnknown status
Layer 01StatedRead before it draws

The conventions the model loads with the project: how a figure earns its place on a screen, what a status value is, which states have to exist before a screen counts as finished. This is the layer that shapes the first draft, and the layer that can drift.

Every figure names the data it comes from. No literals, anywhere.
Status is data; derived state is computation. Overdue is calculated, never stored.
An action is read from the record, not from the row it happens to sit in.
Every shell names three expressive choices and gives a reason for each.
↓ Shapes the first pass
Layer 02CompiledEnforced, not described

Where a rule can be built into a component instead of written in a file, it is. The rule stops being advice the model can agree with and forget, and becomes something the output has no way to express. These are the rules that survive a model that disagrees.

Pagination derives its own range and total from the array it was given.
A count cannot be passed in. There is no prop for it.
Empty is a rendered state, not the absence of rows.
Overlays portal out of scroll regions and flip when they would leave the viewport.
↓ Cannot be violated
Layer 03CheckedRead, not trusted

What is left gets audited before anything is handed over. Figures are traced back to named data, status values are confirmed as a closed set with defined transitions, and layouts are verified from phone width to wide desktop. And where the answer is genuinely unclear, it stops and asks.

Every aggregate traced to the array it summarises.
Every enum value rendered somewhere in the product.
Routes resolve; breadcrumbs land on pages that exist.
An unknown status is never absorbed. It is raised, and you decide.
↓ Caught before handoff
The three layersWhat each one actually looks like

Written, built in, and read back.

A file the model loads, a component that will not accept a wrong value, and a pass that reads the result before anybody else has to.

01One figure, all three →
AGENTS.mdstated
12## Derivation
13
14Every figure names the
15data it comes from.
16
17Status is data. Derived
18state is computed.
19
20## Expression
21
22Every shell names three
23choices, with reasons.
ListFootercompiled
<ListFooter
  source={invoices}
  page={page}
  total=— no such prop
/>
Showing 1–25 of 128derived
Auditchecked
Figures traced to named dataok
Status values a closed setok
Every enum value renderedok
Phone width to wide desktopok
Unknown status partially_settledasks
One figureThrough all three layers

What that means for a single number.

A list footer on an invoices screen. Nothing about it is interesting, which is exactly why it is usually wrong.

02Straight answers →
Showing 1–25 of 128 invoices
Stated

The rules say a figure names the data it comes from, so the footer must be able to point at an array rather than a number.

Compiled

The component takes source and derives its own range and total. There is no total prop to pass, so there is nowhere to type one.

Checked

The audit confirms the total matches the filtered set, and that an empty result renders its own state rather than 0 of 0.

The stated layer would have got this right most of the time. The compiled layer gets it right every time, which is a different kind of claim.
QuestionsAnswered plainly

Straight answers.

The questions a sceptical lead asks before they will put an unfamiliar file in front of their team.

03What goes wrong without it →
Answer 01

No.

It ships components and tokens, but that is not what you are buying. The product is the rules layer that decides what gets computed, what gets shown and what gets refused — plus the machinery that makes those rules checkable.

Answer 02

If it reads a rules file, yes.

It is built for Claude Design users generating business UI. Because the layer is plain markdown loaded as project instructions, anything else that reads a rules file will use it too. There is nothing proprietary to integrate.

Answer 03

No. The judgement, yes.

The tokens are yours to set and brand fit is a config change. The judgement rules are not configurable, because that is the product. If you want a different opinion about derivation, you want a different product.

Answer 04

Nothing breaks.

The rules are written against behaviour rather than internals, so upstream releases move underneath them. Where a rule does need to change, it changes in one file you can read in an afternoon.

Answer 05

Once. Then faster.

Marginally slower on the first generation. Considerably faster by the fourth, because you are not re-prompting it to fix a total that never tied.

Reckon

Judgement, not
a component library.

The components are the easy part. What you are missing is the layer that decides what gets computed, what gets shown, and what gets refused.

Built for Claude Design · plain markdown · nothing to run