miolo-react-patterns

Name: miolo-react-patterns
Availability: InStock
Author: afialapis

Organize React components, contexts, hooks, pages, and layouts in src/cli.

Updated Feb 4, 2022

Search Tags:#architecture #components #hooks #contexts #react-patterns #miolo

Ready to run

npx skills add https://github.com/afialapis/miolo --skill miolo-react-patterns

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: miolo-react-patterns
Source: https://github.com/afialapis/miolo/tree/main/skills/miolo-react-patterns
Command: npx skills add https://github.com/afialapis/miolo --skill miolo-react-patterns

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Fragmented React patterns across miolo client applications lead to inconsistent code structure and slower onboarding. This skill defines standard patterns to streamline development and ensure predictable, maintainable code.

Core Features & Use Cases

Component organization in src/cli with fixed subdirectories for components, contexts, hooks, layout, and pages.
Three-file context pattern (Context, Provider, and useContext hook) for reusable state management.
Best-practice guidelines for imports, file extensions, Tailwind usage, and modular page design.
Use Case: teams onboarding new miolo projects can reuse these patterns to accelerate feature development and maintain consistency across apps.

Quick Start

Organize a new feature in src/cli using the three-file context pattern and the recommended component folder structure, then switch imports to the #cli aliases.

Frequently Asked Questions about miolo-react-patterns

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

FAQPage Schema

What is the three-file context pattern for React state management?▼

The three-file context pattern separates React state management into Context, Provider, and useContext hook files to ensure reusable and predictable state architecture across client applications.

How do I organize components, hooks, and pages in a React src directory?▼

Organize a React src directory by placing components, contexts, hooks, layouts, and pages into fixed subdirectories, enforcing a consistent architecture and clear data flow for maintainable code.

Does this React architecture pattern work with Tailwind and path aliases?▼

Yes, this React architecture pattern integrates with Tailwind styling guidelines and enforces path alias best practices for imports to streamline modular page design and component usage.

What's the best way to standardize React patterns across multiple client applications?▼

Standardize React patterns across multiple client applications by enforcing a fixed component folder structure, a three-file context pattern, and clear file extensions to accelerate team onboarding and feature development.

Why does React code structure become fragmented across different projects?▼

React code structure becomes fragmented across different projects due to inconsistent component organization and varying state management approaches, leading to slower onboarding and unpredictable data flow.