메뉴
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.