skills.rest
rhenretta
rhenrettaCOMMUNITY
Explore all skills by this author →
GitHub

command-center-ui-patterns

Document UI development patterns for the Command Center React UI.

1|Updated Mar 6, 2026
Search Tags:#state management#react#next.js#ui development#d3 visualization#iframe sandboxing
One-click install
npx skills add https://github.com/rhenretta/ai-hivemind --skill command-center-ui-patterns
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: command-center-ui-patterns
Source: https://github.com/rhenretta/ai-hivemind/tree/main/.agent/skills/command-center-ui-patterns
Command: npx skills add https://github.com/rhenretta/ai-hivemind --skill command-center-ui-patterns

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) and assets (resource) components.

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.

Frequently Asked Questions about command-center-ui-patterns

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I manage WebSocket events and real-time state in a React UI?▼

Integrate D3 visualizations by following topology integration patterns that simplify complex representations. These guidelines help you render network graphs and spatial data with minimal setup effort while maintaining performance within your React application.

What is the best way to handle Zustand v5 selector typing in a Next.js application?▼

Handle Zustand v5 selector typing by adopting the updated subscription methods and selector patterns designed for v5 compatibility. This ensures proper TypeScript inference and prevents re-render issues when managing derived arrays in the React App Router.

How do I create secure sandboxed iframes for agent-generated UIs?▼

Create secure sandboxed iframes by applying specific sandboxing best practices that isolate agent-generated UIs. This approach restricts harmful scripts and protects the parent application while allowing controlled rendering of external or dynamic interface components.

Can I use React Query with a REST API for non-realtime data fetching in React?▼

Use React Query with your REST API through the RPC query pattern to handle non-realtime data fetching. This pattern separates standard HTTP requests from WebSocket streams, optimizing caching and reducing unnecessary real-time overhead.

Does TypeScript work properly with React Flow for node-based UI development?▼

TypeScript works with React Flow by following integration guidelines that ensure proper typing for nodes, edges, and custom components. These patterns prevent type errors and maintain code reliability when building interactive node-based interfaces.

Related Skills

Explore More Software Engineering Skills→
ZeroGravitySkin-RonZeroGravitySkin-Ron

frontend-dev-guidelines

Provide frontend development guidelines for Next.js 16 App Router applications.

Community
Intermediate
curiositechcuriositech
181

reactflow-expert

Construct DAG visualizations with ReactFlow v12, ELKjs layout, and Zustand state.

Official
Advanced
lagarcesslagarcess
1

Frontend Patterns

Define standardized React and Next.js component patterns with TypeScript, Tailwind, and state management.

Community
Intermediate
javierhbrjavierhbr

zustand-state

Create Zustand stores with selectors, persistence, and Redux DevTools integration.

Community
Intermediate