Architecture patterns for React-based webviews in the Rayfin VS Code extension (packages/tools/vscode). Use when creating new webview components, working with state management (Context API), integrating Fluent UI components, solving stale closure bugs with refs, or debugging webview rendering issues. Does NOT cover tRPC messaging (see vscode-webview-trpc-messaging skill).
Install
npx skills add microsoft/rayfin --skill vscode-react-webview-architecturenpx skills add microsoft/rayfin --skill vscode-react-webview-architecture -a claude-code -gnpx skills add microsoft/rayfin --skill vscode-react-webview-architecture -a codex -ggemini skills install https://github.com/microsoft/rayfin.git --path .github/skills/vscode-react-webview-architecturegh skill install microsoft/rayfin vscode-react-webview-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/vscode-react-webview-architecture ~/.claude/skills/vscode-react-webview-architecture # Claude Code
cp -R /tmp/microsoft__rayfin/.github/skills/vscode-react-webview-architecture ~/.agents/skills/vscode-react-webview-architecture # Codex, Cursor, Gemini CLI, Copilot, OpenCode