skills.rest
nikbrunner
nikbrunnerCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

dev-style-react

Document React component architecture with Dumb Components, Smart Containers, Partials, and Layout Components.

Updated Jun 17, 2025
Search Tags:#architecture#layout#react#containers#component-patterns#partials
One-click install
npx skills add https://github.com/nikbrunner/dots --skill dev-style-react
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: dev-style-react
Source: https://github.com/nikbrunner/dots/tree/main/common/.agents/skills/dev-style-react
Command: npx skills add https://github.com/nikbrunner/dots --skill dev-style-react

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Provides a clear, opinionated pattern for organizing React code into Dumb Components, Smart Containers, Partials, and Layout Components to improve maintainability and testability.

Core Features & Use Cases

  • Defines four roles: Dumb Component, Smart Container, Partial, and Layout Component with their responsibilities.
  • Guides folder structure and data flow to reduce prop drilling and improve reusability.
  • Offers practical examples and references to related tooling and patterns for scalable React projects.

Quick Start

Load this pattern in your React project to organize existing components into Dumb, Smart Container, Partial, and Layout components and apply consistent folder structure.

Frequently Asked Questions about dev-style-react

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I structure a React project to avoid prop drilling and improve component reusability?▼

Structure React projects by categorizing components into Dumb Components, Smart Containers, Partials, and Layout Components. This architecture defines clear roles and data flow boundaries to reduce prop drilling and maximize reusability across screens.

What is the difference between a Smart Container and a Dumb Component in React architecture?▼

A Dumb Component handles presentation logic only, while a Smart Container manages state and data fetching. This React architecture pattern separates concerns by keeping data flow and rendering logic isolated, which improves overall code maintainability and testability.

How do I organize my React folder structure for scalable application features?▼

Organize React folder structures by aligning directories with component roles like Partials and Layout Components. This pattern codifies component responsibilities and data flow, ensuring scalable feature development and consistent architectural boundaries across the codebase.

When should I use Layout Components and Partials in my React codebase?▼

Use Layout Components to structure spatial arrangements and Partials to group reusable UI sections within Smart Containers. Applying these specific React component roles isolates structural concerns and reduces redundant markup across different application screens.

Does this React component architecture pattern work with existing codebases?▼

Yes, you can load this pattern into existing React projects to audit and reorganize current components into Dumb, Smart Container, Partial, and Layout roles. It provides structured guidance and practical examples for refactoring without requiring external dependencies.

Why does my React application architecture become hard to maintain as features grow?▼

React architecture becomes hard to maintain when component roles are unclear and data flow is tangled. Applying an opinionated pattern with defined Dumb Components and Smart Containers establishes strict boundaries, solving maintainability issues as features scale.

Related Skills

Explore More Software Engineering Skills→
slussetslusset
1

angular-from-design

Convert HTML/CSS design artifacts into Angular applications with routing and modular components.

Community
Advanced
vmkteamvmkteam
6

philosophy

Codify Go idioms and architecture guidelines for development decisions.

Official
Advanced
HollowvynHollowvyn

presentational-container-pattern

Separate data fetching and state from React view rendering.

Official
Basic
grvpanchalgrvpanchal
1

ui-atomic-design

Organize UI components into a five-level atomic design hierarchy.

Community
Intermediate