Menú
Use when working on the React chat frontend. Covers architecture, components, styling, and state management.
Instalar con Codex o Claude Copia este prompt, pégalo en Codex, Claude u otro asistente, y deja que revise la página de la skill y la instale por ti.
Basado en la clasificación ocupacional SOC
| 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.
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.