Menu
Use when working on the React chat frontend. Covers architecture, components, styling, and state management.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
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.