Architectural principles for scalable, maintainable React applications. Use when designing component hierarchies, organizing directories, choosing state management patterns, decomposing large components, applying composition patterns (slots, compound components), enforcing colocation, creating custom hooks, setting up Feature-Sliced Design layers, reviewing component structure, or refactoring…
Install
npx skills add microsoft/rayfin --skill react-clean-architecturenpx skills add microsoft/rayfin --skill react-clean-architecture -a claude-code -gnpx skills add microsoft/rayfin --skill react-clean-architecture -a codex -ggemini skills install https://github.com/microsoft/rayfin.git --path .github/skills/react-clean-architecturegh skill install microsoft/rayfin react-clean-architecturegit clone --depth 1 https://github.com/microsoft/rayfin /tmp/microsoft__rayfin
mkdir -p ~/.claude/skills ~/.agents/skills
cp -R /tmp/microsoft__rayfin/.github/skills/react-clean-architecture ~/.claude/skills/react-clean-architecture # Claude Code
cp -R /tmp/microsoft__rayfin/.github/skills/react-clean-architecture ~/.agents/skills/react-clean-architecture # Codex, Cursor, Gemini CLI, Copilot, OpenCode