Your schema, your components, 4 screens

Watch the recorded workflow

The 23.76-second React recording moves through list, detail, form and timeline in light and dark. It is the original 0.11.1 recording, retained after the team compared 8 route/theme views from the rebuilt 0.11.2 app.

Original recording on GitHub · Download the original GIF

The decisions between schema and screens

The draft contained 102 objects and 183 valid trait proposals: 69 strong and 114 medium. Unsupported source elements and relationship cycles remained in the report. Importing a schema does not reproduce every Prisma constraint.

Membership has no name field. Its title joins the Team and User references, such as “Design · Elena Novak”. Its role values stay OWNER, ADMIN and MEMBER; the screens show Owner, Admin and Member.

The team accepted Timestampable for Membership's dates. It declined Stateful because roles are not lifecycle states, and Ownerable because its proposed field bindings were empty. Replacing the shipped User definition required an explicit confirmation so the imported references could resolve.

The accepted component mappings supplied 14 React adapters and 16 Vue adapters. Unmapped components kept their OODS implementations. These mappings are proposals from structural evidence, not behavioral certification.

Try the same workflow

Use Node.js 22 or newer and Claude Code in a scratch workspace. Download the pinned Prisma schema. The importer reads that local file; it never connects to a database.

Connect the local tool

claude mcp add oods-foundry -- npx -y @oods/foundry@0.11.2

Restart Claude Code. Use your own shadcn project or the pinned projects linked below. Keep the project's manifests, aliases, CSS and installed dependencies. Install these libraries in the component project before applying adapters:

npm install @oods/components-react@0.11.2 @oods/component-contracts@0.11.2 @oods/component-styles@0.11.2 @oods/tokens@0.11.2

For Vue, replace @oods/components-react with @oods/components-vue at the same version. The pinned Vue example needs --legacy-peer-deps for its upstream Vite plugin's peer range. Generated apps use plain npm install. The MCP connection does not install project dependencies.

Copy the returned payload files to separate app folders, keep them unchanged, and follow each generated README:

npm install
npm run build
npm run dev

Generated apps pin the OODS release that generated them. Regenerate to upgrade, or move all 4 pins together. Read the complete walkthrough and tool calls.

Recorded screenshots

Open a group, then open any image at its original size. These 18 published captures are kept byte-for-byte, including the phone views.

React in light

React in dark

Vue in light

Vue in dark

Public screenshot gallery · Run metadata and image hashes

What the team checked

The OODS Foundry team reports 32 inspected screen states across React and Vue, desktop and phone, light and dark: 0 axe WCAG 2.2 A/AA violations, 0 page errors and no horizontal overflow. Both apps passed TypeScript checks and production builds.

Role filtering and reset worked. Changes to a role, related record and checkbox survived saving and reopening the form. The timeline uses declared timestamp events. These checks cover the example interactions, not the whole application. No broader certification is claimed. The component contract reports retain adapter limitations.

Run provenance

The original conversation used Claude Code 2.0.76 with the 0.11.1 candidate in a fresh profile and empty npm cache. The screenshots show the same accepted choices replayed with the 0.11.2 candidate, with no hand edits to imported objects, samples, compositions or generated files. All 4 OODS library pins per framework are 0.11.2.

The recording was compared and retained, not captured again. The public gallery's opening version sentence still says 0.11.1; the README and run metadata identify the rebuilt screenshots as 0.11.2.

Sources and licenses

• Cal.com Prisma schema, MIT license.
• shadcn-admin for React, MIT.
• shadcn-vue-admin for Vue, MIT.

The schema and component authors do not endorse this demo. Third-party source stays in your scratch projects; this page distributes the OODS Foundry team's sample-screen images, recording and run documents.

Walkthrough at v0.11.2 · Recorded README · Recorded gallery document