frontend-architecture

Frontend Architecture Skill

This skill establishes a standard architecture and a component pattern for frontend, based on Clean Architecture. Its goal is to guarantee consistency, maintainability, and separation of concerns in projects of any size.

When to use this skill?

• When starting a new frontend project with professional structure
• When the user mentions "clean architecture", "layers", "use cases"
• If the project requires screens with lists, tables, cards, subpages, and modal dialogs
• To maintain a consistent pattern across pages and components

Clean Architecture in Frontend (Summary)

The architecture is organized in concentric layers, where dependencies point inward:

presentation layer (UI)
         ↓
use cases layer (business logic)
         ↓
repositories layer (abstractions)
         ↓
entities layer (domain models)

Recommended folder structure (React example):

src/
├── domain/               # Innermost layer: entities
│   ├── entities/         # models (e.g.: Product, User)
│   └── repositories/     # repository interfaces (e.g.: IProductRepository)
├── application/          # use cases (grouped by module when many)
│   └── useCases/
│       ├── products/
│       │   ├── GetProductsUseCase.ts
│       │   ├── CreateProductUseCase.ts
│       │   └── DeleteProductUseCase.ts
│       └── users/
│           ├── GetUsersUseCase.ts
│           └── CreateUserUseCase.ts
├── infrastructure/       # concrete repository implementations
│   └── repositories/     # (e.g.: ApiProductRepository, LocalStorageRepository)
├── presentation/         # outer layer: modules organized by feature
│   ├── products/
│   │   ├── ProductsPage.tsx
│   │   └── components/
│   │       ├── ProductsTable.tsx
│   │       ├── ProductCard.tsx
│   │       └── CreateProductDialog.tsx
│   ├── users/
│   │   ├── UsersPage.tsx
│   │   └── components/
│   │       ├── UsersTable.tsx
│   │       └── CreateUserDialog.tsx
│   ├── components/       # UI library components (e.g.: shadcn/ui)
│   │   └── ui/           # shadcn generated components (button, dialog, table, ...)
│   ├── lib/              # UI library helpers (e.g.: shadcn's utils.ts -> cn())
│   │   └── utils.ts
│   ├── shared/           # shared components across modules
│   │   └── components/
│   ├── hooks/            # hooks grouped by module when many
│   │   ├── products/
│   │   │   └── useProducts.ts
│   │   └── users/
│   │       └── useUsers.ts
│   └── contexts/         # if applicable
└── config/               # global configurations