Nexus UI Developer

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.