Build FiftyOne UIs using VOODO (Voxel Official Design Ontology), the official React component library. Use when building plugin panels, creating interactive UIs, or styling FiftyOne applications. Fetches current documentation dynamically from llms.txt.
Builds FiftyOne UIs using the official VOODO React component library with dynamically fetched documentation.
npx claudepluginhub voxel51/fiftyone-skillsThis skill inherits all available tools. When active, it can use any tool Claude has access to.
VOODO is the official React component library for FiftyOne applications.
Documentation is fetched dynamically - always get current components from llms.txt before writing code.
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:
WebFetch(
url="https://voodo.dev.fiftyone.ai/llms.txt",
prompt="What VOODO components are available for building forms?"
)
// Import only components that exist in llms.txt
import { Button, Input, Select } from "@voxel51/voodo";
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.
{
"dependencies": {
"@voxel51/voodo": "latest"
}
}
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>
);
};
| 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.
| 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 |
Activates when the user asks about AI prompts, needs prompt templates, wants to search for prompts, or mentions prompts.chat. Use for discovering, retrieving, and improving prompts.
Search, retrieve, and install Agent Skills from the prompts.chat registry using MCP tools. Use when the user asks to find skills, browse skill catalogs, install a skill for Claude, or extend Claude's capabilities with reusable AI agent components.
This skill should be used when the user asks to "create an agent", "add an agent", "write a subagent", "agent frontmatter", "when to use description", "agent examples", "agent tools", "agent colors", "autonomous agent", or needs guidance on agent structure, system prompts, triggering conditions, or agent development best practices for Claude Code plugins.