fiftyone-voodo-design

Build FiftyOne plugin panels using the VOODO React component library.

37|8|Updated Dec 18, 2025
One-click install
npx skills add https://github.com/voxel51/fiftyone-skills --skill fiftyone-voodo-design
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: fiftyone-voodo-design
Source: https://github.com/voxel51/fiftyone-skills/tree/main/skills/fiftyone-voodo-design
Command: npx skills add https://github.com/voxel51/fiftyone-skills --skill fiftyone-voodo-design

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Designers and developers spend time wiring UI components from scratch. VOODO accelerates FiftyOne UI development by providing a centralized React component library with design tokens and ready-to-use components.

Core Features & Use Cases

  • VOODO provides a catalog of reusable components (buttons, inputs, toasts) with design tokens.
  • Use it to build plugin panels, dashboards, and interactive UI for FiftyOne apps.
  • It ensures consistency across FiftyOne UIs and aligns with current documentation references.

Quick Start

Install the VOODO package in your project and start importing components to build a panel.

Frequently Asked Questions about fiftyone-voodo-design

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

FAQPage Schema
How do I build FiftyOne plugin panels with a consistent React design system?

Build FiftyOne plugin panels by leveraging the VOODO design system, which provides a centralized React component library with design tokens. Import ready-to-use components like buttons and inputs to ensure UI consistency across FiftyOne apps.

Do I need to install any packages to use the VOODO design system for FiftyOne UIs?

Yes, you need to install the @voxel51/voodo package in your project to use the VOODO design system. Once installed, you can import components and start building interactive UI for FiftyOne apps.

What is the VOODO design system and how does it accelerate React UI development?

VOODO is a React component library that accelerates UI development by providing reusable components with design tokens. It solves the problem of wiring UI components from scratch by offering a catalog of ready-to-use elements for FiftyOne apps.

Can I access up-to-date documentation and component props for FiftyOne UI components?

Yes, VOODO fetches up-to-date documentation from llms.txt to ensure design-token consistency. It also provides optional Storybook links for detailed component props, allowing you to reference the VOODO component catalog easily.

What's the best way to ensure design-token consistency across FiftyOne dashboards and interactive UIs?

Ensure design-token consistency by using the VOODO design system to build FiftyOne dashboards and interactive UIs. VOODO centralizes design tokens and reusable components, aligning your panels with current documentation references automatically.

Are there limitations when using the VOODO component catalog for FiftyOne apps?

The VOODO component catalog targets plugin panels and interactive UI components specifically for FiftyOne apps. While it provides buttons, inputs, and toasts with design tokens, it focuses on this scope and requires the @voxel51/voodo package for implementation.