command-center-ui-patterns

What problem does it solve?

This Skill provides essential patterns and best practices for building and extending the Command Center React UI, improving development efficiency and code maintainability.

Core Features & Use Cases

• UI Architecture Patterns: Leverage Zustand store patterns for managing state and WebSocket event handling for real-time updates.
• D3 Topology Integration: Learn to create D3 visualizations for complex topology representations with minimal effort.
• Iframe Sandboxing: Understand the best practices for creating secure sandboxed iframes for agent-generated UIs.
• Component Placement Guidelines: Get guidance on organizing components into their correct directories for code reusability.
• RPC Query Pattern: Learn to use React Query with the Nerve Center REST API for non-realtime data fetching.
• Tailwind Dark Mode Implementation: Discover how to implement Tailwind's dark mode for better user experience.
• Zustand v5 Compatibility: Learn the new ways of selector typing and subscription in Zustand v5.
• Socket.io Best Practices: Implement socket.io with best practices to ensure stability and reliability.
• ESLint Configuration: Set up ESLint correctly for the Next.js application, ensuring consistent code quality.
• useShallow and Derived Arrays: Handle complex derived arrays with React App Router.
• TypeScript with React Flow: Ensure proper typing when integrating TypeScript with React Flow.

Quick Start

Use this skill to optimize the UI development of the Command Center by integrating patterns for state management, event handling, and visualization.