VOODO Design System for FiftyOne Skill

VOODO Design System for FiftyOne

VOODO is the official React component library for FiftyOne applications.

Documentation is fetched dynamically - always get current components from llms.txt before writing code.

Key Directive

ALWAYS fetch llms.txt BEFORE writing any UI code:

WebFetch(
    url="https://voodo.dev.fiftyone.ai/llms.txt",
    prompt="List all available VOODO components with their variants and use cases"
)

This gives you:

All current components (buttons, inputs, toasts, etc.)
Available variants for each component
Design token categories (colors, spacing, typography)
Links to interactive Storybook docs

Workflow

1. Fetch component list

WebFetch(
    url="https://voodo.dev.fiftyone.ai/llms.txt",
    prompt="What VOODO components are available for building forms?"
)

2. Use components from the fetched list

// Import only components that exist in llms.txt
import { Button, Input, Select } from "@voxel51/voodo";

3. For detailed props, direct user to Storybook

The llms.txt includes Storybook links for each component. For detailed prop documentation:

"For Button props and examples, see: https://voodo.dev.fiftyone.ai/?path=/docs/components-button--docs"

Note: Storybook is a JavaScript app - WebFetch cannot extract its content. Direct users to browse interactively.

Installation

{
  "dependencies": {
    "@voxel51/voodo": "latest"
  }
}

FiftyOne Patterns

Dark theme: FiftyOne App uses dark mode by default
Semantic variants: Use success/danger/warning for actions (verify names from llms.txt)
Design tokens: Use spacing/color tokens instead of arbitrary values

Integration with FiftyOne SDK

import { useRecoilValue } from "recoil";
import * as fos from "@fiftyone/state";  // Standard FiftyOne alias
import { Button, Text, Stack } from "@voxel51/voodo";

const MyPanel: React.FC = () => {
  const dataset = useRecoilValue(fos.dataset);
  return (
    <Stack>
      <Text>{dataset?.name}</Text>
      <Button>Process</Button>
    </Stack>
  );
};

Resources

| Resource | URL | |----------|-----| | llms.txt (fetch first) | https://voodo.dev.fiftyone.ai/llms.txt | | Interactive Storybook | https://voodo.dev.fiftyone.ai/ | | npm package | @voxel51/voodo |

Related: Use fiftyone-develop-plugin skill for full plugin setup.

Troubleshooting

| Problem | Solution | |---------|----------| | Component not found | Fetch llms.txt to verify current name | | Props not working | Direct user to Storybook for current API | | Styles not applying | Test in dark mode, use design tokens |

Agent Skills: VOODO Design System for FiftyOne

Install this agent skill to your local

Skill Files