Use when user wants to incorporate charts, graphs, data grid, or other visual representations of data into their project. Use VegaVisual and DataGrid components to create these visuals, utilizing the shared data types, formatting, theme, and interactivity hooks.
Install
npx skills add microsoft/rayfin --skill visualsnpx skills add microsoft/rayfin --skill visuals -a claude-code -gnpx skills add microsoft/rayfin --skill visuals -a codex -ggemini skills install https://github.com/microsoft/rayfin.git --path samples/data-app/.agents/skills/visualsgh skill install microsoft/rayfin visualsgit clone --depth 1 https://github.com/microsoft/rayfin /tmp/microsoft__rayfin
mkdir -p ~/.claude/skills ~/.agents/skills
cp -R /tmp/microsoft__rayfin/samples/data-app/.agents/skills/visuals ~/.claude/skills/visuals # Claude Code
cp -R /tmp/microsoft__rayfin/samples/data-app/.agents/skills/visuals ~/.agents/skills/visuals # Codex, Cursor, Gemini CLI, Copilot, OpenCode