gen-entity
Generate one complete entity vertical slice (backend + frontend)
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
메뉴
Generate one complete entity vertical slice (backend + frontend)
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
Token-only design polish for landing: accent scale check, optional font / radius overrides in design.ts
Fill packages/landing/src/content/site.ts from brief.md. The landing template already ships to the venture via platform-modules in bootstrap Step 1 — this skill only populates content.
Frontend development task
Apply color palette, typography, logo, and visual branding from brief
Remove sample entities and UI not present in the brief
Generate dashboard page with Recent blocks for each entity from brief
| name | gen-entity |
| description | Generate one complete entity vertical slice (backend + frontend) |
| agent | _builder |
| argument-hint | <EntityName> |
Generates a complete backend + frontend implementation for ONE entity. Called once per entity from brief.md.
Before generating ANY code:
src/components/ui/ to understand their exact APIsrc/infrastructure/container.ts to understand current wiringsrc/infrastructure/repository/memory/index.ts for export pattern| File | Pattern Source |
|---|---|
src/domain/<entity>/model/<entity>.ts | Follow existing domain/escrow/model/escrow.ts |
src/domain/<entity>/model/<entity>-status.enum.ts | Follow escrow-status.enum.ts |
src/domain/<entity>/repository/<entity>.repository.ts | Follow escrow.repository.ts |
src/application/dto/<entity>/create-<entity>.dto.ts | Follow create-escrow.dto.ts (Zod) |
src/application/dto/<entity>/<entity>-response.dto.ts | Follow escrow-response.dto.ts |
src/application/use-case/<entity>/create-<entity>.use-case.ts | Follow create-escrow.use-case.ts |
src/application/use-case/<entity>/get-<entities>.use-case.ts | Follow get-escrows.use-case.ts |
src/application/use-case/<entity>/get-<entity>-by-id.use-case.ts | Follow get-escrow-by-id.use-case.ts |
src/infrastructure/repository/memory/memory-<entity>.repository.ts | Follow memory-escrow.repository.ts |
api/v1/<entities>/index.ts | POST + GET list handler |
api/v1/<entities>/[id].ts | GET by ID handler |
Then UPDATE:
src/infrastructure/repository/memory/index.ts — add exportsrc/infrastructure/container.ts — add repo instance| File | Pattern Source |
|---|---|
src/services/<Entity>Service.ts | Follow TransactionService.ts |
src/stores/<entity>-store.ts | Follow transaction-store.ts (Zustand) |
src/components/features/<entity>-list.tsx | Read existing list components |
src/components/features/<entity>-form.tsx | Read existing form components |
src/components/features/<entity>-detail.tsx | Read existing detail components |
src/routes/_authenticated/<entities>.tsx | Read existing routes + UI component APIs |
Then UPDATE:
src/components/layout/app-navbar.tsx — add nav link.js extensions on ALL backend imports (ESM)src/components/ui/dialog.tsx before using Dialog — use actual exported APIsrc/components/ui/badge.tsx before using Badge variants<Button asChild> with TanStack Router <Link> — Radix Slot and Router Link
are incompatible (React.Children.only error). Wrap <Button> inside <Link> instead.Every entity store MUST include an initialized flag. On first fetch, loading is set to true
so skeletons show. On subsequent fetches (re-navigation), loading stays false so existing
data remains visible while refreshing in the background.
interface EntityState {
items: Entity[];
loading: boolean;
initialized: boolean; // <-- required
fetchItems: (reset?: boolean) => Promise<void>;
}
export const useEntityStore = create<EntityState>((set, get) => ({
items: [],
loading: false,
initialized: false,
fetchItems: async (reset = false) => {
const state = get();
if (state.loading) return;
// Only show loading skeleton on first fetch, not on re-navigation
set({ loading: !state.initialized });
try {
const result = await EntityService.list(...);
set({ items: result.items, initialized: true });
} finally {
set({ loading: false });
}
},
}));
This prevents the "screen flicker" when switching between tabs — Zustand stores persist outside the React tree, so data survives component unmount/remount.
initialized flag (no flicker on tab switch)pnpm build passes in both packages