reviewing-component-architecture
Review component architecture for React 19 best practices including size, composition, Server/Client boundaries, and anti-patterns. Use when reviewing component design.
Packaged view
This page reorganizes the original catalog entry around fit, installability, and workflow context first. The original raw source lives below.
Install command
npx @skill-hub/cli install djankies-claude-configs-reviewing-component-architecture
Repository
Skill path: react-19/skills/reviewing-component-architecture
Review component architecture for React 19 best practices including size, composition, Server/Client boundaries, and anti-patterns. Use when reviewing component design.
Open repositoryBest for
Primary workflow: Ship Full Stack.
Technical facets: Full Stack, Frontend, Backend, Designer.
Target audience: everyone.
License: Unknown.
Original source
Catalog source: SkillHub Club.
Repository owner: djankies.
This is still a mirrored public skill entry. Review the repository before installing into production workflows.
What it helps with
- Install reviewing-component-architecture into Claude Code, Codex CLI, Gemini CLI, or OpenCode workflows
- Review https://github.com/djankies/claude-configs before adding reviewing-component-architecture to shared team environments
- Use reviewing-component-architecture for development workflows
Works across
Favorites: 0.
Sub-skills: 0.
Aggregator: No.
Original source / Raw SKILL.md
--- name: reviewing-component-architecture description: Review component architecture for React 19 best practices including size, composition, Server/Client boundaries, and anti-patterns. Use when reviewing component design. review: true allowed-tools: Read, Grep, Glob version: 1.0.0 --- # Review: Component Architecture ## Review Checklist ### Component Size - [ ] Components under 300 lines (break into smaller pieces) - [ ] Single responsibility per component - [ ] No "god components" handling multiple concerns ### Server vs Client Boundaries - [ ] `'use client'` only where needed (hooks, events, browser APIs) - [ ] Most components are Server Components (smaller bundle) - [ ] Data fetching in Server Components - [ ] No Server Components imported in Client Components ### Composition Patterns - [ ] Using children prop appropriately - [ ] Compound components for coordinated behavior - [ ] No excessive prop drilling (use Context) - [ ] Composition preferred over complex prop APIs ### Custom Elements - [ ] Web Components used correctly (no ref workarounds in React 19) - [ ] Custom events use `on + EventName` convention - [ ] Properties vs attributes handled by React ### Anti-Patterns to Flag - [ ] ❌ God components (> 300 lines, multiple responsibilities) - [ ] ❌ Unnecessary `'use client'` (no hooks/events/browser APIs) - [ ] ❌ Deep prop drilling (3+ levels without Context) - [ ] ❌ Server Components in Client Components - [ ] ❌ Complex component hierarchies (hard to follow) For comprehensive component patterns, see: `research/react-19-comprehensive.md`.