# fiftyone-voodo-design

> Claude/Codex skill by [@voxel51](https://omgskills.com/library/voxel51/index.md) · 47 stars · Updated 2026-10-18

Build FiftyOne UIs using VOODO (@voxel51/voodo), the official React component library. Use when building plugin panels, creating interactive UIs, styling FiftyOne applications, or choosing components, text sizes, colors, and spacing. Looks up the installed version's components and token values with \`npx @voxel51/voodo\` before writing code.

## Install

```sh
git clone https://github.com/voxel51/fiftyone-skills /tmp/fiftyone-skills && ln -s /tmp/fiftyone-skills/skills/fiftyone-voodo-design ~/.claude/skills/fiftyone-voodo-design
```

## From README

VOODO Design System for FiftyOne VOODO (@voxel51/voodo) is the official React component library for FiftyOne applications. Source: https://github.com/voxel51/design-system. Storybook: https://voodo.dev.fiftyone.ai Key Directive Look up components in the installed package BEFORE writing any UI code. VOODO ships its own docs command, which reads the version your project installed: Run it from the project that depends on @voxel51/voodo (2.1.0 or later). Don't guess component names or prop values: docs prints the exact strings each prop accepts. Rules The docs say what exists. These rules say how to use it: Token props take plain strings: variant="primary", size="sm", spacing="md". The const members (Size.Sm) still compile but are the older style. Compose before you build. Check npx @voxel51/voodo list before hand-rolling anything. Mid-level patterns usually exist: FormField, RichList, EmptyState, Toolbar, Modal.

## Links

- HTML page: https://omgskills.com/library/voxel51/fiftyone-skills/skills/fiftyone-voodo-design/
- GitHub: https://github.com/voxel51/fiftyone-skills
- Author: [@voxel51](https://omgskills.com/library/voxel51/index.md)

## More from this repo

- [fiftyone-app-playwright](https://omgskills.com/library/voxel51/fiftyone-skills/skills/fiftyone-app-playwright/index.md) — Used when driving the FiftyOne App via the Playwright MCP — plugin/operator verification, demo or screencast recording,...
   - [@voxel51](https://omgskills.com/library/voxel51/index.md) · 47 stars
- [fiftyone-code-style](https://omgskills.com/library/voxel51/fiftyone-skills/skills/fiftyone-code-style/index.md) — Writes Python code following FiftyOne's official conventions.
   - [@voxel51](https://omgskills.com/library/voxel51/index.md) · 47 stars
- [fiftyone-dataset-curation](https://omgskills.com/library/voxel51/fiftyone-skills/skills/fiftyone-dataset-curation/index.md) — End-to-end dataset curation for FiftyOne: inspect schema and quality, audit annotations, analyze class distributions,...
   - [@voxel51](https://omgskills.com/library/voxel51/index.md) · 47 stars