Build with AI

Give your agent this starting point

Before changing Postede UI, read AGENTS.md and docs/lab-design-system.md.
Read /design/llms.txt (or src/features/design/design-docs.ts locally).
Find the matching component in /design/manifest.json.
Inspect its source in src/components/ui and follow its local API.
Preserve existing behavior. Verify with npm run ui:audit and real-browser checks.

Implementation workflow

1. 01

   Inspect

   Find the matching component and read its installed source. Check existing product usage before creating a new abstraction.

2. 02

   Compose

   Start from the documented import and example. Use named variants, semantic tokens and the correct compound structure.

3. 03

   Preserve

   Keep form, focus, state, cancellation and responsive contracts intact. Use compatibility adapters only where those contracts require them.

4. 04

   Verify

   Exercise keyboard, Escape, disabled/pending/error states and narrow layouts. Run the UI audit and relevant tests, then update the reference.

Rules to preserve

• Read AGENTS.md, docs/lab-design-system.md and the relevant /design component page before changing UI. Installed source in src/components/ui is the API authority.
• Use source-owned shadcn/Radix components from @/components/ui. Prefer named variants and semantic theme tokens; preserve Postede’s existing palette, typography, spacing and responsive behavior.
• Compose Field, FieldLabel, a control, FieldDescription and FieldError for forms. Preserve names, values, validation, refs, submit types and pending/error behavior.
• Give dialogs a title, avatars a fallback and icon buttons an accessible name. Keep SelectItem in SelectGroup, menu items in DropdownMenuGroup and TabsTrigger in TabsList.
• Use the shared toast API from @/features/ui/toast. It preserves async actions, retries and native-modal placement through Sonner.
• Use NativeDialog, NativeCheckbox, NativeSwitch and inline surface adapters only when preserving an existing host contract. Prefer declarative primitives for new independent controls; do not spread unstyled as a default.
• Keep Tiptap, drag-and-drop scheduling, charts, provider previews and Posty as product compositions. Reuse their shared controls rather than replacing their interaction engines.
• Add missing official components with the shadcn CLI, inspect generated files, and preserve local adaptations. Never reinitialize or overwrite customized primitives to add a component.
• Update the component reference, example and agent reference together when a primitive API changes. Run npm run ui:audit, appropriate checks, and real-browser desktop/mobile verification; distinguish tested behavior from inference.

Where the truth lives

src/components/ui/

Installed APIs and primitive behavior.

src/features/design/design-docs.ts

Rules, recipes and grouped navigation. Generates the Markdown and JSON endpoints.

src/features/design/component-reference.ts

Purpose, supported API and accessibility contracts.

docs/lab-design-system.md

Product layout, sizing and visual conventions.