fiftyone-voodo-design
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
With your agent
Install OMGSkills skill "voxel51/fiftyone-skills:skills/fiftyone-voodo-design" into this agent's normal skills directory: call the OMGSkills MCP get_install_plan tool for your agent and run the script it returns (it installs only the pinned commit and verifies SKILL.md), and stop if MCP or the pin is unavailable. Do not overwrite or change existing skills without asking me.
Manual command
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.
More from this repo
fiftyone-app-playwright
Used when driving the FiftyOne App via the Playwright MCP — plugin/operator verification, demo or screencast recording,...
fiftyone-code-style
Writes Python code following FiftyOne's official conventions.
fiftyone-dataset-curation
End-to-end dataset curation for FiftyOne: inspect schema and quality, audit annotations, analyze class distributions,...
