Claude Skills by reaviz

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

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

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

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

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()`.

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 Figma Plugin export for CSS layers, file layout (root.css / dark.css / light.css / tw.css / common.css), per-component detail tokens (e.g. `--buttons-details-height-core-icon-lg`)...

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 protocol). Covers the slot-based Chat layout, ChatContext, theme system (ChatTheme, PartialChatTheme), file uploads, multi-file support, autoScroll, and viewType (console / compan...

React hook that connects an [AG-UI](https://docs.ag-ui.com) protocol agent endpoint to reachat. Returns the props needed by `<Chat>` plus session helpers, and streams responses via SSE (`text/event-stream`).

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

System for letting an LLM render custom React components by emitting fenced code blocks with JSON specs. The catalog ships a remark plugin, a `<pre>` override, and a system-prompt generator — all wired through `<Chat components={catalog} />`.

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).

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

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 `<Chat>`.

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

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).

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

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.

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

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

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

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.

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

Node rendering components and custom node support. Default nodes are 3D spheres; variants add icons, SVGs, and badges. Use `renderNode` for fully custom rendering.

User interaction modules: selection, camera controls, context menus, and node collapsing.

Camera control, modes, centering, and viewport manipulation.

Node and edge selection with single, multi, modifier-key, lasso, and path-based modes.

16 built-in layout algorithms for positioning graph nodes in 2D and 3D space. Set via the `layoutType` prop on `GraphCanvas`.

Theme configuration and node sizing strategies.

Node sizing strategies that automatically compute node sizes based on graph metrics or custom attributes.

Light and dark themes with full customization of node, edge, arrow, ring, cluster, lasso, and canvas colors.

Use when building charts or data visualizations in React with the reaviz library (AreaChart, BarChart, LineChart, PieChart, ScatterPlot, Heatmap, Sankey, RadarChart, etc.). Covers composable chart architecture, data shapes, axes, gridlines, tooltips, color schemes, and animation.

Cartesian chart components built on linear axes and D3 scales. Each chart provides a top-level component with sensible defaults and composable sub-components for series, axes, gridlines, and interactions.

Area chart with gradient fill, line, and data points. Supports single series, grouped multi-series, stacked, and stacked-normalized variants.

Bar chart with gradient fills, labels, and range lines. Supports vertical/horizontal layout with standard, grouped, stacked, stacked-normalized, stacked-diverging, marimekko, waterfall, and histogram variants.

Horizontal bar list for ranking data. Renders semantic HTML (not SVG) with animated bars, configurable label/value positions, sorting, and percentage mode.

Packed circle chart using D3 circle-packing layout. Bubble size is proportional to data value. Supports labels, gradients, masks, and custom bubble rendering.

Funnel visualization for conversion/pipeline data. Segments taper from wide to narrow based on value. Supports default and layered variants with configurable interpolation, gradients, axis labels, and tooltips.

Two gauge components for displaying progress/metric values: **LinearGauge** (horizontal bar) and **RadialGauge** (circular arc with optional stacking).

Grid-based heatmap with color-scaled cells. Includes a calendar heatmap variant (year and month views). Supports custom symbols, cell selection, tooltips, and multi-axis layouts.

Line chart built on top of AreaChart with the area fill removed. Supports single series, grouped multi-series, and all AreaChart features (interpolation, points, markers, brush, zoom).

World map visualization using D3-Geo projections. Renders GeoJSON country features with optional coordinate-based markers and tooltips.

Segmented column strip showing a value as filled/unfilled blocks. Useful for discrete progress or threshold indicators.

Pie and donut chart using D3 pie layout. Supports exploded slices, rounded/spaced arcs, labels with connector lines, gradients, and custom label rendering.

Radar (spider) chart built on top of RadialAreaChart. Displays multi-category data as a closed polygon with points on radial axes. Supports grouped multi-series, filled areas with gradients, and configurable radial axes.

Flow diagram showing weighted connections between nodes. Built on D3-Sankey with gradient links, interactive highlighting, configurable label positioning, and node justification.

Scatter plot with configurable point size, color, custom symbols, and optional bubble sizing. Supports time, value, and category axes with brush, zoom/pan, and value markers.

Compact inline charts for embedding in dashboards and metric displays. Four variants: line, area, bar, and sonar (diverging stacked bar). All hide axes, gridlines, and labels by default for a minimal appearance.

Hierarchical radial chart displaying nested data as concentric rings of arcs. Inner rings represent parent categories, outer rings represent children. Supports gradients, tooltips, and animated transitions.

Rectangular treemap for hierarchical data. Rectangle size is proportional to value. Supports flat and nested data, text wrapping, label placement, and configurable padding.

Venn and Euler diagram showing set intersections. Three layout types: standard Venn, proportional Euler, and Star Euler. Supports selections, custom styling per state, and inner/outer labels.