Use when building or modifying the app layout, creating UI components, or making any visual design decisions. Ensures consistency, accessibility, and a polished, unique app.
Install
npx skills add microsoft/rayfin --skill app-designnpx skills add microsoft/rayfin --skill app-design -a claude-code -gnpx skills add microsoft/rayfin --skill app-design -a codex -ggemini skills install https://github.com/microsoft/rayfin.git --path samples/data-app/.agents/skills/app-designgh skill install microsoft/rayfin app-designgit 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/app-design ~/.claude/skills/app-design # Claude Code
cp -R /tmp/microsoft__rayfin/samples/data-app/.agents/skills/app-design ~/.agents/skills/app-design # Codex, Cursor, Gemini CLI, Copilot, OpenCode