skills.rest
afialapis
afialapisCOMMUNITY
Explore all skills by this author →
Website𝕏@_afialapis_GitHub

miolo-react-patterns

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

Updated Feb 4, 2022
Search Tags:#architecture#components#hooks#contexts#react-patterns#miolo
One-click install
npx skills add https://github.com/afialapis/miolo --skill miolo-react-patterns
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Software Engineering Skills→
RenyEnnosRenyEnnos
1

shadcn-ui

Integrate and configure shadcn/ui components in React projects.

Community
Advanced
JohannesKoningsJohannesKonings
9

codebase-design

Design deep modular software components with minimal interfaces and ports.

Community
Advanced
redaantarredaantar
15

ui-conventions

Standardize React UI patterns and styling for the Ckourse desktop app.

Community
Intermediate
afialapisafialapis

miolo-app-arch

Enforces standard architecture patterns for miolo applications.

Community
Intermediate