Skills
.Work. You
Rest

react-app-structure

Community

Standardize React apps, ensure consistent architecture.

Software Engineering#code quality#architecture#React#frontend#scaffolding#monorepo#app structure
Authormetasaver
Version1.0.0
Installs0

System Documentation

What problem does it solve?

Inconsistent file and folder structures in React applications lead to confusion, slower onboarding, and maintenance headaches. This Skill provides canonical guidelines for MetaSaver React portal applications.

Core Features & Use Cases

  • Complete Directory Structure Reference: Documents the standard src/ folder structure, including assets/, config/, lib/, features/ (by domain), pages/, and routes/.
  • Key Rules & Best Practices: Enforces domain grouping, barrel exports, thin pages, type safety for routes, lazy loading, no secrets, and path aliases for consistent development.
  • Templates & Audit Guide: Provides templates for common components (API client, app, routes, pages, features) and a detailed audit guide for validation and remediation.
  • Use Case: When scaffolding a new React portal application, use this skill to generate a compliant project structure and ensure adherence to MetaSaver's architectural standards.

Quick Start

Audit the React application structure in the current directory for compliance with MetaSaver standards.

Dependency Matrix

Required Modules

None required

Components

references

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: react-app-structure
Download link: https://github.com/metasaver/metasaver-marketplace/archive/main.zip#react-app-structure

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 223,000+ vetted skills library on demand.