Guidance for creating reusable, schema-driven React widgets for the ObjectStack design system. It groups simple controls, fields, layouts, and large third-party widgets into appropriate packages.

Use it to build buttons and icons, text or date fields, page layouts, routing-aware components, or heavy widgets such as maps, code editors, and data grids.

It prevents every component from becoming its own package and keeps business logic, dependencies, and shared interface primitives in the right layers.

component — Command for GitHub Copilot by objectstack-ai/objectstack

Install

Getting it into your agent

One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.

Clone the repo

git clone --depth 1 https://github.com/objectstack-ai/objectstack

Made for: GitHub Copilot.

Wrote this? Show the measurements

A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.

README.md

[![agentmods](https://agentmods.dev/badge/commands/objectstack-ai/objectstack/component/github.svg)](https://agentmods.dev/commands/objectstack-ai/objectstack/component)

Your own site

<a href="https://agentmods.dev/commands/objectstack-ai/objectstack/component"><img src="https://agentmods.dev/badge/commands/objectstack-ai/objectstack/component/github.svg" alt="Measured on agentmods" height="20"></a>

Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.

Your own site · 80×15

<a href="https://agentmods.dev/commands/objectstack-ai/objectstack/component"><img src="https://agentmods.dev/badge/commands/objectstack-ai/objectstack/component.svg" alt="Reviewed on agentmods" width="80" height="20"></a>

Per session 0 Only the description is in the session, so the agent can decide to use it. The body loads when it is invoked.

When invoked 4,266 The whole file, excluding the scripts and references it only reads on demand.

Security scan A 0 findings. A grade says what 26 rules found in the file — not that it is safe.

Origin original No closer match found in the catalogue.

Token cost

What it costs to keep this loaded

Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.

Model	Per session	Once invoked
Fable 5.1	$0.00000	$0.04266
Opus 5.5	$0.00000	$0.01706
Sonnet 5.5	$0.00000	$0.00853
Haiku 4.5	$0.00000	$0.00427

Measured today against content hash 385e27e04a81, method: parsed. Prices are Anthropic first-party input rates as of 2026-10-07, from the pricing page.

Security

Grade A, and why

component scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured today.

A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.

Nothing flagged

None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.

ui/.github/prompts/component.prompt.md · 331 lines

How it starts

The opening of the file, as written. The whole thing — 331 lines — stays where its author put it; the contents beside it link to each section on GitHub.

Role: You are the Frontend Systems Engineer for ObjectUI. Task: Create reusable, schema-driven UI widgets for the ObjectStack Design System. Environment: You are working in an Application or Plugin codebase. You consume @objectstack/spec types to build compatible components.

0. Architectural Strategy (Strict)

❌ Do NOT create a package for every component. ✅ Group by Dependency Weight:

Atoms (@object-ui/components):
- Shadcn Primitives, Icons, Buttons.
- Zero business logic.
- Zero heavy 3rd-party deps.
Fields (@object-ui/fields):
- Standard Input/Display widgets (Text, Number, Date, Select).
- Must implement FieldWidgetComponentProps (the package's own generic React interface — not the spec's non-generic FieldWidgetProps alias; see §2.A).
Layouts & Patterns (@object-ui/layout):
- Page structures (Sidebar, Header, AppLauncher).
- Routing-aware components.
Plugins (@object-ui/plugin-*):
- Heavy Widgets Only.
- If it adds >50KB bundle size, it's a plugin.
- Examples: plugin-map (Leaflet), plugin-code (Monaco), plugin-grid (AgGrid/TanStack).

1. Component Categories

You will be asked to build components in the standard slots below. Refer to packages/spec for the complete Zod definitions.

⚠️ Read the LABEL before you copy a token out of this file — the labels below are three different vocabularies, and only two of them are things you may write as a type. objectui#9098 landed the ruling per section, and pnpm check:prompt-keys enforces it:

Keys: and Standard Components Library: and Required Components: — REGISTRY KEYS a real renderer answers. Safe to write as a type. Gated: the check reds if one of them stops rendering.

Protocol Placeholders: — keys registered ONLY by the opt-in placeholder module. They validate and then paint a blank/OBJUI-001 panel. Gated the other way round: the check reds if one of them gains a real renderer, or loses its registration.

Required Types (Ref: ...): — spec type VALUES inside a config object, ⛔ not registry keys, and ⛔ deliberately outside the check. See the note in §B for why the two vocabularies diverged.

Anything in prose, in a blockquote, or in trailing text on a bullet is NOT a vocabulary — including every ⛔ tombstone in this file, which names a key precisely so you do not write it.

Read the full file on GitHub · 331 lines

Changes

What this file has done since we first saw it

Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.

today First seen · 331 lines · 0 tokens per session scan A 385e27e04a81

Subscribe to this mod's changes

component is a command published in the GitHub repository objectstack-ai/objectstack (75 stars, last pushed today), licensed Apache-2.0. It costs nothing until one of its globs matches a file; then it loads 4,266 tokens. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-10-26.

Design and UX Frontend React fde fde-enablement metadata-driven ontology ontology-driven-development ontology-engineering

design-import

Scaffolds React components from a Claude Design handoff bundle and stops at files on disk: no stories, no tests, no pull request. Use when handed a claude.ai/design URL or a local bundle file; when that same scaffold should carry on through test generation, browser verification and an opened PR, run /ork:design-ship…

yonatangross/orchestkit · 74 tokens

component

Getting it into your agent

Wrote this? Show the measurements

What it costs to keep this loaded

Grade A, and why

Nothing flagged

How it starts

🧩 ObjectStack Component (Widget) Development Context

0. Architectural Strategy (Strict)

1. Component Categories

What this file has done since we first saw it

Other commands, from other repositories

design-import

gen-video

design-review

color-palette

icon-set-generator

ux-extract