메뉴
Use when working on the React chat frontend. Covers architecture, components, styling, and state management.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
Batch, validate, and consolidate open Dependabot pull requests for memory-service. Use when asked to inspect the Dependabot queue, verify dependency PRs efficiently, reproduce dependency-update CI failures, combine compatible dependency PRs, or create a validated consolidated dependency PR.
Implement or review Memory Service backend operational logging. Use for REST or gRPC boundaries, provider errors, error wrapping, background workers and task attempts, indexers and maintenance jobs, SSE or gRPC streams, request correlation, and changes under internal/operationevent.
Prepare Memory Service changes for pull request submission. Use whenever Codex is asked to create, open, submit, publish, or ready a pull request, or to perform final PR preflight. Require `task generate` before the final PR commit so generated sources and repository-wide formatting are included.
Use when writing or debugging tests for memory-service. Covers Cucumber BDD patterns and failure reporting.
Use when you need build, test, or dev commands for memory-service across Go, Java, frontend, or Python modules.
Use when writing or editing enhancement documents in docs/enhancements/. Provides format, conventions, and numbering guidance.
| name | chat-frontend |
| description | Use when working on the React chat frontend. Covers architecture, components, styling, and state management. |
Location: frontends/chat-frontend/
tailwind.config.js)src/client/src/
├── components/ # React components
│ ├── ui/ # Reusable primitives (button, card, toggle)
│ ├── sharing/ # Access control modals
│ ├── conversation.tsx # Headless chat primitives (core logic)
│ ├── conversations-ui.tsx # Styled wrappers with Tailwind
│ ├── chat-panel.tsx # Main chat interface
│ └── chat-sidebar.tsx # Conversation list
├── hooks/ # useSseStream, useSharing, useResumeCheck
├── lib/ # auth.tsx, utils.ts
└── client/ # Generated OpenAPI client (DO NOT EDIT)
Headless Pattern: conversation.tsx provides unstyled primitives (Conversation.Root, .Viewport, .Messages, .Message, .Input, .Actions) with hooks (useConversationContext, useConversationMessages, etc.).
Styled Wrappers: conversations-ui.tsx wraps headless components with Tailwind styling.
Main Components:
App.tsx - Root layout (sidebar + chat panel)chat-panel.tsx - Message display, input, fork UI, sharingchat-sidebar.tsx - Conversation list with searchCustom Tailwind Theme (tailwind.config.js):
cream (bg), ink (text), mist (secondary), stone (muted), terracotta (accent), sage (secondary accent)Utility: cn() from lib/utils.ts merges classes with Tailwind conflict resolution.
lib/auth.tsx), conversation state (conversation.tsx)useStatecd frontends/chat-frontend
npm run dev # Dev server with HMR
npm run build # Production build
npm run lint # ESLint
npm run generate # Regenerate OpenAPI client
Add/modify component styling: Edit in conversations-ui.tsx or relevant component, use Tailwind classes with cn().
Change chat behavior: Modify conversation.tsx (logic) or chat-panel.tsx (UI integration).
Fix z-index/layering issues: Check z-* classes in Tailwind. Common layers: dropdowns (z-50), modals (z-[100]).
After changes: Run npm run lint && npm run build to verify.