reaviz

reaviz/skills

Skill Claude CodeCodex

Form field wrapper with label, hint text, error state, required indicator, and horizontal/vertical layout. Use to wrap any form input.

reaviz/skills

Skill Claude CodeCodex

Structured list display with items, headers, adornments, and interactive states. Composed of List, ListItem, and ListHeader.

reaviz/skills

Skill Claude CodeCodex

Animation wrapper components using Framer Motion for staggered group animations. Provides MotionGroup (parent) and MotionItem (child) with pre-configured variants.

reaviz/skills

Skill Claude CodeCodex

Multi-step progress indicator with dot or numbered markers, optional labels, and animated appearance. Composed of Stepper and Step.

reaviz/skills

Skill Claude CodeCodex

Tabbed content navigation with animated selection indicator. Composed of Tabs, TabList, Tab, and TabPanel. Supports controlled and uncontrolled modes.

reaviz/skills

Skill Claude CodeCodex

Hierarchical tree view with expandable/collapsible nodes, custom icons, and animated transitions. Composed of Tree and TreeNode. Uses Collapse for expand/collapse animation.

reaviz/skills

Skill Claude CodeCodex

Themed text components for headings, paragraphs, and semantic text styles. All share a single TypographyTheme and follow the same pattern: thin forwardRef wrappers that render a semantic HTML element with themed classes merged via cn().

reaviz/skills

Skill Claude CodeCodex

Use when the user asks to set up, install, or migrate to the Unify Theme for reablocks — a production-ready theme pack built on a three-level design-token system (primitives → semantic → Tailwind utilities) synced with the Unify Figma library. Covers the single-file themeUnify.ts TypeScript download, the Reablocks…

reaviz/skills

Skill Claude CodeCodex

Use when building chat / LLM UIs in React with the reachat component library (Chat, ChatInput, SessionsList, SessionMessages, ChatBubble, AppBar, Markdown rendering with code highlighting, RichTextInput with @mentions and /commands, MessageStatus, ComponentCatalog for LLM-driven dynamic components, useAgUi for ag-ui…

reaviz/skills

Skill Claude CodeCodex

React hook that connects an AG-UI protocol agent endpoint to reachat. Returns the props needed by plus session helpers, and streams responses via SSE (text/event-stream).

reaviz/skills

Skill Claude CodeCodex

Top header bar for the chat. Reads the theme.appbar class string and renders arbitrary content.

reaviz/skills

Skill Claude CodeCodex

System for letting an LLM render custom React components by emitting fenced code blocks with JSON specs. The catalog ships a remark plugin, a override, and a system-prompt generator — all wired through .

reaviz/skills

Skill Claude CodeCodex

Floating chat bubble launcher — renders a clickable trigger and toggles a popover containing the chat UI. Built on reablocks ConnectedOverlay (Floating UI under the hood).

reaviz/skills

Skill Claude CodeCodex

Markdown renderer used inside MessageQuestion / MessageResponse, plus syntax highlighting, tables, charts, redaction matchers, and remark/rehype plugins. Also exported standalone for custom use.

reaviz/skills

Skill Claude CodeCodex

Components that render the active session: panel layout, header, messages list, individual message, plus the per-message slots (question, response, files, sources, action footer). All read state from ChatContext, so they only function inside .

reaviz/skills

Skill Claude CodeCodex

Sessions sidebar — the list of past chats, the new-session trigger, and group-by-date helpers. All read state from ChatContext.

reaviz/skills

Skill Claude CodeCodex

Status banner with optional sub-steps — typically used to show tool / agent progress inside a streaming response (similar to "Searching the web…" / "Reading file…" patterns). Reads theme.status from ChatContext (or falls back to default).

reaviz/skills

Skill Claude CodeCodex

Clickable suggestion chips (typically rendered above or below ChatInput to surface starter prompts). Reads theme.suggestions and disabled / isLoading from ChatContext.

reaviz/skills

Skill Claude CodeCodex

Use when building interactive 2D or 3D graph or network visualizations in React with the reagraph library (GraphCanvas, node-link diagrams, force-directed layouts). Covers data shapes (GraphNode, GraphEdge), 16 layout algorithms, selection, lasso, camera controls, sizing strategies, and theming.

reaviz/skills

Skill Claude CodeCodex

Core components for rendering the graph: the main canvas, node symbols, edge rendering, labels, and clusters.

reaviz/skills

Skill Claude CodeCodex

Group nodes into visual clusters by a shared attribute. Clusters render as rings around grouped nodes with optional labels and custom rendering.

reaviz/skills

Skill Claude CodeCodex

Edge rendering configuration: arrows, dashed lines, curved paths, self-loops, labels, and edge aggregation.

reaviz/skills

Skill Claude CodeCodex

Main entry point for reagraph. Wraps the Three.js canvas, scene, camera controls, and lasso selection into a single component. Pass nodes and edges data along with layout, theme, and interaction configuration.

reaviz/skills

Skill Claude CodeCodex

Label visibility, styling, and font configuration for nodes and edges. Labels auto-show/hide based on zoom level or can be forced visible.