guide: Skill for Claude Code

Scaffold a new frontend project following the 5-layer Clean Architecture (Domain, Service, Infrastructure, Presentation, Main).

For architecture details, refer to the Frontend Design section of the Architecture rule. For TypeScript standards, refer to the JavaScript rule. For testing patterns, refer to the Testing rule. For Makefile setup, refer to the CI/CD rule.

5-Layer Architecture

Domain            (most abstract -- entities and contracts)
  ^
Service           (API and external service communication)
  ^
Infrastructure    (technology-specific implementations)
  ^
Presentation      (views and UI components)
  ^
Main              (DI wiring, providers -- "dirty" layer)

Dependencies ALWAYS point towards Domain. Main is the only layer that knows about all others.

Directory Structure

src/
├── domain/
│   ├── entities/
│   │   └── user.ts
│   └── contracts/
│       └── user_repository.ts
├── service/
│   └── user_service.ts
├── infrastructure/
│   └── http_user_repository.ts
├── presentation/
│   ├── components/
│   │   └── user_list.tsx
│   ├── pages/
│   │   └── users_page.tsx
│   └── hooks/
│       └── use_users.ts
├── main/
│   ├── providers/
│   │   └── user_provider.tsx
│   ├── di/
│   │   └── container.ts
│   └── app.tsx
└── index.tsx

Step-by-Step

1. Create the Domain layer -- entities and repository contracts

// src/domain/entities/user.ts
export interface User {
  id: string;
  name: string;
  email: string;
}

// src/domain/contracts/user_repository.ts
import { User } from '../entities/user';

export interface UserRepository {
  findAll(): Promise<User[]>;
  findById(id: string): Promise<User | null>;
}

2. Create the Service layer

// src/service/user_service.ts
import { User } from '../domain/entities/user';
import { UserRepository } from '../domain/contracts/user_repository';

export class UserService {
  constructor(private readonly repository: UserRepository) {}

  async listUsers(): Promise<User[]> {
    return this.repository.findAll();
  }
}