The agent's draft, checked
Giving an agent your system is not the same as keeping it on your system. A scripted agent wrote three drafts against Loom Base, our open-source system: a destructive confirmation, a billing form and an empty state. The findings are the real output of Loom's check_composition, computed when the page is built. Tap a finding to see its line, the rule and the fix. The agent is scripted, so this shows what the checks catch, not how often a real agent errs. We publish with and without numbers only after a real evaluation run.
agent check
A destructive confirmation
Loom's check found 3 errors and 2 warnings in the draft.
src/settings/DangerZone.tsx · the agent's draft
import { Card, Button, Heading, Text } from "@loom/base/native";import { Modal } from "@mui/material"; export function DangerZone() { return ( <Card> <Heading level={2}>Danger zone</Heading> <Text style={{ color: "#1e1a16", marginBottom: 16 }}>Deleting removes every journey in this workspace.</Text> <Button tone="primary">Export first</Button> <Button variant="danger" tone="primary" onClick={() => setOpen(true)}>Delete workspace</Button> <Modal open={open}>Are you sure?</Modal> </Card> );}What check_composition found
Customise through the component's slots, variants or overridable tokens within the layer's lock level; if none fits, propose an extension with propose_change.
Did you mean "tone" ("primary" | "secondary" | "quiet" | "danger")? primary: the one main action in a view; secondary: other actions; quiet: toolbars and dense areas; danger: removes or loses something.
Closest system components: AILabel (ai-label), Dialog (dialog), Drawer (drawer). If none fits, draft one with propose_change.
No exact token. Nearest colour token is var(--base-color-palette-neutral-900) (#201e1a); pick the token whose role fits rather than a new colour.
Use var(--base-space-scale-6) (16px).
After the fix · no errors, no warnings
import { Card, Button, Text, Stack, ConfirmAction } from "@loom/base/native"; export function DangerZone() { return ( <Card title="Danger zone" headingLevel={2}> <Stack gap="md"> <Text>Deleting removes every journey in this workspace.</Text> <Button tone="secondary">Export first</Button> <ConfirmAction title="Delete the workspace?" confirmLabel="Delete the workspace" cancelLabel="Keep the workspace" onConfirm={remove} /> </Stack> </Card> );}A billing form
Loom's check found 4 errors and 5 warnings in the draft.
src/billing/Billing.tsx · the agent's draft
import { Modal } from "@mui/material";import { Button } from "@loom/base/native"; export function Billing() { return ( <div style={{ padding: "18px", color: "#333" }}> <h1>Billing</h1> <Button variant="primary">Save card</Button> <Button variant="primary">Cancel</Button> <Modal open>Card declined. Try again</Modal> <input placeholder="Card number" /> </div> );}What check_composition found
import { Heading } from "@loom/base/native";
Did you mean "tone" ("primary" | "secondary" | "quiet" | "danger")? primary: the one main action in a view; secondary: other actions; quiet: toolbars and dense areas; danger: removes or loses something.
Did you mean "tone" ("primary" | "secondary" | "quiet" | "danger")? primary: the one main action in a view; secondary: other actions; quiet: toolbars and dense areas; danger: removes or loses something.
Give "Cancel" a lower-emphasis tone (tone="secondary") and keep the main-action tone for the action that completes the task.
Closest system components: AILabel (ai-label), Dialog (dialog), Drawer (drawer). If none fits, draft one with propose_change.
import { TextField } from "@loom/base/native"; Then: <TextField label="Card number" … />
Give it a visible label: <TextField label="Card number" … /> (import { TextField } from "@loom/base/native";)
18px is off the scale; nearest is var(--base-space-scale-6) (16px).
No exact token. Nearest colour token is var(--base-color-palette-neutral-800) (#32302c); pick the token whose role fits rather than a new colour.
After the fix · no errors, no warnings
import { Card, Heading, TextField, Button, Stack, Alert } from "@loom/base/native"; export function Billing() { return ( <Card> <Stack gap="md"> <Heading level={1}>Billing</Heading> <Alert tone="danger">Card declined. Try another card.</Alert> <TextField label="Card number" /> <Button tone="primary">Save card</Button> <Button tone="quiet">Cancel</Button> </Stack> </Card> );}An empty state
Loom's check found 2 errors and 2 warnings in the draft.
src/invoices/NoInvoices.tsx · the agent's draft
import { Card, Button } from "@loom/base/native"; export function NoInvoices() { return ( <Card> <img src="/empty-invoices.svg" /> <h2 style={{ color: "#6b6b6b", marginTop: 24 }}>Nothing here</h2> <p>You have not created any invoices yet.</p> <Button tone="primary">Create invoice</Button> <Button tone="primary">Import invoices</Button> </Card> );}What check_composition found
Add alt="" for decorative images or a description for meaningful ones.
import { Heading } from "@loom/base/native";
No exact token. Nearest colour token is var(--base-color-palette-cotton-500) (#666c79); pick the token whose role fits rather than a new colour.
Use var(--base-space-scale-8) (24px).
After the fix · no errors, no warnings
import { EmptyState } from "@loom/base/native"; export function NoInvoices() { return ( <EmptyState title="No invoices yet" description="Invoices you create or import appear here." actionLabel="Create an invoice" /> );}Scripted example: no model was called. The drafts are ours, written against Loom Base 1.0.0; the findings are the real output of Loom's check_composition.
Start with a conversation about your system.
We read your system, show you what we found, and agree with your team what to fix first.