Files
temetro/.agents/skills/coss/references/primitives/card.md
T
Khalid Abdi 929bec8f31 feat: AI-added records save with placeholders + "Added by AI" provenance
Stop blocking AI imports/proposals on missing non-critical fields. Records
the chat agent drafts now save with safe placeholders, auto-generated file
numbers, and a source="ai" marker that surfaces an "Added by AI" badge so a
clinician can review/edit them later.

Backend:
- add `source` (manual|ai) column to patients/appointments/prescriptions
  (migration 0014) + canonical types, services, validation schemas
- relax patient/appointment validation: empty file number allowed, demographic
  + type/provider/initials fall back to placeholders (initials derived from name)
- patients.generateFileNumber() auto-assigns an MRN when one is missing
- proposeAppointment accepts a name when no file number resolves; AI commits +
  /api/ai/import stamp source="ai"

Frontend:
- `source` on Appointment/Patient/Prescription types; AI commits send source="ai"
- reusable <AiBadge> shown on the Patients table/detail and prescriptions list

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
2026-06-14 19:27:17 +03:00

1.9 KiB

coss Card

When to use

  • Structured surface sections for grouped content.
  • Settings, dashboard, and preview layouts with header/panel/footer semantics.

Install

npx shadcn@latest add @coss/card

Manual deps from docs:

# No extra runtime dependency required for this primitive.

Canonical imports

import {
  Card,
  CardDescription,
  CardFooter,
  CardHeader,
  CardPanel,
  CardTitle,
} from "@/components/ui/card"

Minimal pattern

<Card>
  <CardHeader>
    <CardTitle>Title</CardTitle>
    <CardDescription>Description</CardDescription>
  </CardHeader>
  <CardPanel>Content</CardPanel>
  <CardFooter>Footer</CardFooter>
</Card>

Patterns from coss particles

Key patterns

Card with form content:

<Card className="w-full max-w-sm">
  <CardHeader>
    <CardTitle>Create project</CardTitle>
    <CardDescription>Deploy your new project in one click.</CardDescription>
  </CardHeader>
  <CardPanel className="flex flex-col gap-4">
    <Field>
      <FieldLabel>Name</FieldLabel>
      <Input type="text" placeholder="My project" />
    </Field>
  </CardPanel>
  <CardFooter className="flex justify-end gap-2">
    <Button variant="ghost">Cancel</Button>
    <Button>Create</Button>
  </CardFooter>
</Card>

Keep CardHeader, CardPanel, and CardFooter as direct children of Card to preserve built-in spacing and layout.

More examples

See p-card-1 through p-card-8 for various card compositions.

Common pitfalls

  • Skipping CardHeader/CardPanel/CardFooter structure in composed cards.
  • Mixing unrelated layout wrappers that break spacing between card sections.
  • Using cards as generic wrappers when Frame or plain layout would be clearer.

Useful particle references

  • core patterns: p-card-1, p-card-2, p-card-3, p-card-4, p-card-5, p-card-6, p-card-7, p-card-8