القائمة
Maps UI needs to simple-books primitives in src/components/ui and related layout components. Use when building pages, forms, tables, badges, or styling new features.
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
استنادا إلى تصنيف SOC المهني
Documents Docker image build, Helm chart, release-please versioning, GitHub Actions CI, and K8s deploy constraints for simple-books. Use when deploying, releasing, adding CI workflows, or configuring production infrastructure.
Documents smoke test runbook, when to add tests, and Playwright selector pitfalls for simple-books. Use when running E2E tests, debugging flakes, or writing UI tests.
Documents double-entry journal posting via postJournalSync, ACCT codes, and MVP recipes in simple-books. Use when adding business events, invoices, payments, mileage, reversals, or ledger entries.
Creates TanStack Start createServerFn RPC endpoints with requireAuthMiddleware and dynamic server imports in simple-books. Use when adding *.functions.ts files, server mutations, or fixing import-protection build errors.
Documents local and S3 attachment storage, upload API, and cleanup for simple-books. Use when working with file uploads, attachments, Garage/S3 config, or IRS retention.
Documents bootstrap sign-up, OIDC-only login when configured, and single-owner bootstrap in simple-books. Use when changing auth, login, OIDC env vars, or user access.
| name | ui-components |
| description | Maps UI needs to simple-books primitives in src/components/ui and related layout components. Use when building pages, forms, tables, badges, or styling new features. |
All primitives live in src/components/ui/index.tsx. No external UI library.
| Need | Use |
|---|---|
| Page title + subtitle + actions | <PageHeader> (stacks on compact) |
| Mobile list instead of wide table | Card rows with md:hidden / hidden md:block |
| Side-by-side fields on compact | <FormGrid> from ~/components/form-grid |
| Form submit row on compact | <FormActions> from ~/components/form-actions |
| Invoice line editor | <InvoiceLineEditor> from ~/components/invoice-line-editor |
| Bordered container with header | <Card> + <CardHeader> + <CardBody> |
| Form input | <Input>, wrapped in <Field> |
| Multi-line text | <Textarea> inside <Field> |
| Picker | <Select> (styled native) |
| Currency in a cell | <Money cents={…} tone="…" /> |
| Status pill | `<Badge tone="positive |
| Table | <Table> + <THead> + <Th> + <Tr> + <Td> |
| Empty state | <EmptyState title hint action> |
| Inline SVG icon | <Icon d="..." size={…} /> |
| Modal | <ModalDialog title onClose> (exported from routes/_app/services.tsx) |
Money or a tabular-classed span.Badge, never inline color text.PageHeader for the top; <h3> 14–15px for card titles.text-[var(--color-ink-soft)]) for prose.--color-ink* tokens._app/... route renders inside <main> capped at 1200px wide.<PageHeader /> then content blocks (cards, tables).Breakpoints and shell: responsive-layout.