react-architecture

Automates React frontend-entity scaffolding including Types, Service, Context, Hook, and provider registration in src/ files.

1|Updated Feb 10, 2026

Search Tags:#typescript #architecture #context #react #scaffolding #hooks #provider

Ready to run

npx skills add https://github.com/landim32/awesome-ai-skills --skill react-architecture-landim32

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: react-architecture
Source: https://github.com/landim32/awesome-ai-skills/tree/main/skills/react-architecture
Command: npx skills add https://github.com/landim32/awesome-ai-skills --skill react-architecture-landim32

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Scaffolds the complete frontend architecture for a new entity in a React application, generating TypeScript types, a service class, a context, a custom hook, and provider registration in main.tsx to accelerate feature/module creation.

Core Features & Use Cases

Standardizes and automates the creation of a complete entity module (Types, Service, Context, Hook, and provider registration).
Enforces coding conventions: explicit types, no use of any, useCallback for context methods, and proper error handling.
Use Case: When adding a new feature area or domain entity to a React project, run this skill to generate all scaffolding files and register the provider.

Quick Start

Provide the entity name and required details to scaffold a complete React entity architecture (Types, Service, Context, Hook, and provider registration) in the correct src paths.

Frequently Asked Questions about react-architecture

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

FAQPage Schema

How do I scaffold a complete React entity architecture with TypeScript types, context, and hooks?▼

Scaffolding a React entity architecture involves generating TypeScript types, a service class, a context, a custom hook, and provider registration in main.tsx to structure new feature modules accurately.

What's the best way to standardize React domain module creation across src/ directories?▼

Standardizing React domain module creation requires enforcing coding conventions for file structure, explicit types, useCallback for context methods, and proper provider nesting across types, services, contexts, and hooks directories.

How does provider registration work when adding a new context to a React application?▼

Provider registration works by automatically nesting the generated context provider inside main.tsx, ensuring the new entity's service and custom hook are globally accessible without manual file edits.

Can I automate TypeScript type generation and service class creation for React features?▼

Automating TypeScript type generation and service class creation is possible by providing an entity name to scaffold files in correct src paths, ensuring typed interfaces and preventing the use of any.

Does this React scaffolding approach enforce useCallback and error handling in custom hooks?▼

This React scaffolding approach enforces best practices by applying useCallback for context methods, ensuring typed interfaces, and mandating proper error handling within the generated service and hook files.

When do I need to generate a complete frontend entity architecture for a React project?▼

Generating a complete frontend entity architecture is needed when adding a new domain area or feature module to a React project, accelerating creation by scaffolding all required files and provider registration.