What problem does it solve?
This skill provides a clear frontend engineering blueprint for building secure, multi-tenant React applications for omnichannel AI platforms, eliminating inconsistent API usage, credential exposure, and fragile UI patterns. It centralizes best practices like a universal useApi hook, strict TypeScript interfaces, Tailwind CSS conventions, masked credential handling, RAG document management, and SSE onboarding streams so teams can deliver production-ready interfaces with consistent security and performance.
Core Features & Use Cases
- Universal API integration: useApi hook pattern that auto-injects authentication headers, manages loading and error states, and enforces multi-tenant isolation.
- Strict TypeScript contracts: recommended interfaces for Agent, AgentConfig, and AgentCreate to avoid any usage of any and ensure predictable data shapes.
- Credential Vault UI: patterns for masked display, secure create/update flows, and category scoping (tenant/global) for secrets management.
- Knowledge (RAG) management: guided upload and hard-delete flows for document ingestion and collection scoping.
- Onboarding streaming (SSE): example pattern for Server-Sent Events to implement stepwise onboarding wizards.
- UI & performance patterns: Tailwind glassmorphism, responsive grids, React.memo, useMemo/useCallback, and checklist-driven pre-commit standards.
- Use Case: Implement an Agents management dashboard that lists agents via authenticated API, allows creation/editing with strict typing, masks credentials in the vault, and supports document uploads to a RAG collection.
Quick Start
Create a responsive Agents list view in React + TypeScript that uses the useApi hook to GET /admin/agents, renders AgentCards with Tailwind styling, and displays masked credentials in the Vault UI.
