Example Workflow

1. The developer describes a screen

"A service status dashboard: a row of stat cards for latency, error rate, and uptime; a sortable table of services with a status badge column; and an alert panel for anything critical."

2. The agent finds and reads the components

With the instructions in place, it already has one line per component. It confirms its choices and reads each one:

pnpm exec operator-ds search "headline metric with trend"
pnpm exec operator-ds component StatCard DataTable Alert --dense

It selects StatCard, DataTable (with a status column rendered as: "badge"), and Alert, reading each one's props, option values and example.

3. The agent emits the composition

<div className="flex flex-col gap-4u">
  <div className="flex gap-3u">
    <StatCard label="LATENCY" value={42} unit="ms" delta={-12} deltaLabel="-12%" />
    <StatCard label="ERROR RATE" value="0.4%" trend="flat" />
    <StatCard label="UPTIME" value="99.98%" trend="up" deltaLabel="+0.01%" />
  </div>
  <DataTable
    sortable
    columns={[
      { key: "service", label: "SERVICE" },
      { key: "latency", label: "LATENCY", as: "number", highlight: true },
      { key: "status", label: "STATUS", as: "badge" },
    ]}
    data={services}
  />
  <Alert variant="error" title="LINK LOST">
    Telemetry stream dropped on node-3.
  </Alert>
</div>

4. The check closes the loop

pnpm exec operator-ds check src

An invalid value such as variant="critical" is reported with its file and line and the values allowed, along with nesting the contract forbids, missing required props and breaks of the house rules. See Check and Measure. While the app runs, the same invalid values also print structured errors in development.

Start from a recipe

Copy every patterns.AssetManagement.files entry, preserving paths. Its layout shows the local import:

import { AssetManagementDemo } from "./components/patterns/resource-management";
 
export function OverviewPage() {
  return <AssetManagementDemo />;
}

Install dependencies, keep the OPERATOR styling setup, and consult composed_of before changing props. Replace training records with application data and handlers, retaining loading, empty, error, stale and unavailable states.