Use when a data-backed app needs a working interface — a list people can add to, edit, and delete from, with the states that make it feel finished. Pairs with data-modeling, which defines the entities; this covers the React side: optimistic updates, forms, loading / empty / error states, and delete confirmation.
Install
npx skills add microsoft/rayfin --skill crud-uinpx skills add microsoft/rayfin --skill crud-ui -a claude-code -gnpx skills add microsoft/rayfin --skill crud-ui -a codex -ggemini skills install https://github.com/microsoft/rayfin.git --path samples/universal-app/template/.agents/skills/crud-uigh skill install microsoft/rayfin crud-uigit clone --depth 1 https://github.com/microsoft/rayfin /tmp/microsoft__rayfin
mkdir -p ~/.claude/skills ~/.agents/skills
cp -R /tmp/microsoft__rayfin/samples/universal-app/template/.agents/skills/crud-ui ~/.claude/skills/crud-ui # Claude Code
cp -R /tmp/microsoft__rayfin/samples/universal-app/template/.agents/skills/crud-ui ~/.agents/skills/crud-ui # Codex, Cursor, Gemini CLI, Copilot, OpenCode