moicle 1.0.0

package/assets/architecture/react-frontend.md

@@ -0,0 +1,268 @@
+# React Frontend Structure
+
+> MVVM (Model-View-ViewModel) architecture
+
+## Project Structure
+
+```
+{project}/
+├── src/
+│   ├── components/                 # Shared components
+│   │   └── ui/                     # Base UI (Button, Input...)
+│   ├── config/                     # App configuration
+│   │   ├── app.config.ts
+│   │   └── routes.config.ts
+│   ├── core/
+│   │   ├── mvvm/
+│   │   │   └── ViewModel.ts        # ViewModel factory
+│   │   ├── context/                # Global contexts
+│   │   ├── hooks/                  # Core hooks
+│   │   ├── interfaces/             # Core interfaces
+│   │   ├── enums/                  # Core enums
+│   │   ├── errors/                 # Error handling
+│   │   ├── utils/                  # Core utilities
+│   │   ├── HttpClient.ts           # API client
+│   │   └── bootstrap.ts            # App initialization
+│   ├── modules/
+│   │   └── {module}/
+│   │       ├── models/             # Types, interfaces, DTOs
+│   │       ├── view-models/        # Hooks (state management)
+│   │       ├── services/           # API calls
+│   │       ├── components/         # Module components
+│   │       ├── pages/              # Page components
+│   │       └── index.ts
+│   ├── lib/                        # Third-party integrations
+│   ├── services/                   # Shared services
+│   ├── utils/                      # Shared utilities
+│   ├── router.tsx                  # Route definitions
+│   ├── index.tsx                   # Entry point
+│   └── index.css                   # Global styles
+├── public/
+├── .claude/
+├── CLAUDE.md
+├── package.json
+├── tsconfig.json
+├── vite.config.ts
+└── tailwind.config.js
+```
+
+## MVVM Pattern
+
+```
+┌─────────────────────────────────────────────────┐
+│                    View                          │
+│            (Pages + Components)                  │
+├─────────────────────────────────────────────────┤
+│                 ViewModel                        │
+│          (Hooks - state & logic)                │
+├─────────────────────────────────────────────────┤
+│                   Model                          │
+│           (Types + Services)                    │
+└─────────────────────────────────────────────────┘
+```
+
+**Data flow:**
+1. View renders and uses ViewModel (hook)
+2. ViewModel manages state and calls Services
+3. Services make API calls
+4. Model defines data types
+
+## Module Structure
+
+```
+modules/{module}/
+├── models/
+│   ├── {module}.model.ts          # Types & interfaces
+│   ├── {module}.schema.ts         # Zod schemas (validation)
+│   └── index.ts
+├── view-models/
+│   ├── use-{module}-list.ts       # List ViewModel
+│   ├── use-{module}-form.ts       # Form ViewModel (optional)
+│   └── index.ts
+├── services/
+│   ├── {module}.service.ts        # API functions
+│   └── index.ts
+├── components/
+│   ├── {Module}Table.tsx
+│   ├── {Module}Modal.tsx
+│   └── index.ts
+├── pages/
+│   ├── {Module}ListPage.tsx
+│   └── index.ts
+└── index.ts
+```
+
+## Key Files
+
+### models/user.model.ts
+```tsx
+export interface User {
+  id: string;
+  name: string;
+  email: string;
+  createdAt: string;
+  updatedAt: string;
+}
+
+export interface CreateUserRequest {
+  name: string;
+  email: string;
+  password: string;
+}
+
+export interface UserListResponse {
+  data: User[];
+  meta: {
+    currentPage: number;
+    lastPage: number;
+    perPage: number;
+    total: number;
+  };
+}
+```
+
+### services/user.service.ts
+```tsx
+import Client from '@/core/HttpClient';
+import { User, CreateUserRequest } from '../models/user.model';
+
+export const createUser = async (data: CreateUserRequest): Promise<User> => {
+  return await Client.post<User>('/users', {
+    body: JSON.stringify(data),
+  });
+};
+
+export const deleteUser = async (id: string): Promise<void> => {
+  await Client.delete(`/users/${id}`);
+};
+```
+
+### view-models/use-user-list.ts
+```tsx
+import { User } from '../models/user.model';
+import { listViewModelFactory } from '@/core/mvvm/ViewModel';
+
+export const useUserList = () => {
+  const viewModel = listViewModelFactory<User>(
+    undefined,           // viewModel config
+    '/users',            // API endpoint
+    {},                  // default filters
+    { field: 'name', order: 'asc' }  // default sorter
+  );
+
+  return { ...viewModel };
+};
+```
+
+### pages/UserListPage.tsx
+```tsx
+import { useState } from 'react';
+import { User } from '../models/user.model';
+import { useUserList } from '../view-models/use-user-list';
+import { UserTable } from '../components/UserTable';
+import { UserModal } from '../components/UserModal';
+
+export const UserListPage: React.FC = () => {
+  const [modalOpen, setModalOpen] = useState(false);
+  const [selectedUser, setSelectedUser] = useState<User | null>(null);
+
+  const {
+    items,
+    isLoading,
+    pagination,
+    handleTableChange,
+    reload,
+    handleInputSearch,
+  } = useUserList();
+
+  const handleEdit = (record: User) => {
+    setSelectedUser(record);
+    setModalOpen(true);
+  };
+
+  return (
+    <div>
+      <Button onClick={() => { setSelectedUser(null); setModalOpen(true); }}>
+        Add User
+      </Button>
+
+      <UserTable
+        dataSource={items}
+        loading={isLoading}
+        pagination={pagination}
+        onChange={handleTableChange}
+        onEdit={handleEdit}
+        onReload={reload}
+      />
+
+      <UserModal
+        open={modalOpen}
+        onOpenChange={setModalOpen}
+        user={selectedUser}
+        onSuccess={reload}
+      />
+    </div>
+  );
+};
+```
+
+### core/HttpClient.ts
+```tsx
+const BASE_URL = import.meta.env.VITE_API_URL;
+
+const Client = {
+  get: async <T>(url: string): Promise<T> => {
+    const res = await fetch(`${BASE_URL}${url}`, {
+      headers: { 'Authorization': `Bearer ${getToken()}` },
+    });
+    if (!res.ok) throw new Error(res.statusText);
+    return res.json();
+  },
+
+  post: async <T>(url: string, options?: RequestInit): Promise<T> => {
+    const res = await fetch(`${BASE_URL}${url}`, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        'Authorization': `Bearer ${getToken()}`,
+      },
+      ...options,
+    });
+    if (!res.ok) throw new Error(res.statusText);
+    return res.json();
+  },
+
+  delete: async (url: string): Promise<void> => {
+    await fetch(`${BASE_URL}${url}`, {
+      method: 'DELETE',
+      headers: { 'Authorization': `Bearer ${getToken()}` },
+    });
+  },
+};
+
+export default Client;
+```
+
+## Conventions
+
+| Item | Convention | Example |
+|------|------------|---------|
+| Module folder | kebab-case | `spam-slug/` |
+| Model file | kebab-case.model.ts | `spam-slug.model.ts` |
+| Service file | kebab-case.service.ts | `spam-slug.service.ts` |
+| ViewModel | use-kebab-case.ts | `use-spam-slug-list.ts` |
+| Component | PascalCase.tsx | `SpamSlugTable.tsx` |
+| Page | PascalCasePage.tsx | `SpamSlugListPage.tsx` |
+
+## ViewModel Factory Returns
+
+```tsx
+listViewModelFactory<T>() returns {
+  items: T[],
+  isLoading: boolean,
+  pagination: { current, pageSize, total },
+  handleTableChange: (pagination, filters, sorter) => void,
+  handleInputSearch: (field, value) => void,
+  reload: () => void,
+}
+```

package/assets/architecture/remix-fullstack.md

@@ -0,0 +1,272 @@
+# Remix Fullstack Structure
+
+> Module-based Architecture
+
+## Project Structure
+
+Research the latest doc of version Remix before writing this structure.
+
+```
+{project}/
+├── app/
+│   ├── modules/                    # Feature modules
+│   │   ├── auth/
+│   │   │   ├── components/         # Module-specific components
+│   │   │   │   └── LoginForm.tsx
+│   │   │   ├── services/           # Business logic & DB access
+│   │   │   │   └── auth.server.ts
+│   │   │   └── types.ts
+│   │   └── users/
+│   │       ├── components/
+│   │       │   └── UserList.tsx
+│   │       ├── services/
+│   │       │   └── user.server.ts
+│   │       └── types.ts
+│   ├── routes/                     # Remix routes (Thin layer)
+│   │   ├── _index.tsx              # / (home)
+│   │   ├── _auth.tsx               # Auth layout
+│   │   ├── _auth.login.tsx         # /login
+│   │   ├── _app.tsx                # App layout
+│   │   ├── _app.users._index.tsx   # /users (list)
+│   │   └── _app.users.$id.tsx      # /users/:id (detail)
+│   ├── components/                 # Shared/Global components
+│   │   ├── ui/                     # Base UI (Button, Input, etc.)
+│   │   └── shared/                 # Shared app components (Layouts, etc.)
+│   ├── utils/                      # Shared utilities
+│   │   ├── db.server.ts            # Database client
+│   │   └── session.server.ts       # Session handling
+│   ├── styles/
+│   │   └── tailwind.css
+│   ├── entry.client.tsx
+│   ├── entry.server.tsx
+│   └── root.tsx
+├── public/
+├── .claude/
+├── CLAUDE.md
+├── package.json
+├── remix.config.js
+└── tailwind.config.js
+```
+
+## Architecture Pattern
+
+```
+Route (Loader/Action)
+    ↓
+Module Service (Business Logic + DB)
+    ↓
+Database Client
+    ↓
+Database
+```
+
+**Flow:**
+1.  **Route**: Handles HTTP request, validation, and response. Calls Module Service.
+2.  **Module Service**: Contains business logic, calls Database.
+3.  **Module Component**: UI specific to the feature.
+4.  **Shared Component**: Generic UI used across modules.
+
+## Route Naming
+
+```
+routes/
+├── _index.tsx                      # /
+├── _auth.tsx                       # Auth layout wrapper
+├── _auth.login.tsx                 # /login
+├── _auth.register.tsx              # /register
+├── _app.tsx                        # App layout wrapper (protected)
+├── _app.dashboard.tsx              # /dashboard
+├── _app.users._index.tsx           # /users
+├── _app.users.$id.tsx              # /users/:id
+└── _app.users.new.tsx              # /users/new
+```
+
+## Key Files
+
+### modules/users/services/user.server.ts
+```tsx
+import { db } from '~/utils/db.server';
+import type { CreateUserDTO, UpdateUserDTO } from '../types';
+
+export async function getUsers() {
+  // Example using a generic query builder or ORM
+  return db.user.findMany({
+    orderBy: { createdAt: 'desc' },
+    select: { id: true, name: true, email: true },
+  });
+}
+
+export async function getUserById(id: string) {
+  return db.user.findUnique({ where: { id } });
+}
+
+export async function createUser(data: CreateUserDTO) {
+  return db.user.create({ data });
+}
+
+export async function updateUser(id: string, data: UpdateUserDTO) {
+  return db.user.update({ where: { id }, data });
+}
+
+export async function deleteUser(id: string) {
+  return db.user.delete({ where: { id } });
+}
+```
+
+### modules/users/components/UserList.tsx
+```tsx
+import { Link } from '@remix-run/react';
+import type { User } from '../types';
+
+interface UserListProps {
+  users: Pick<User, 'id' | 'name'>[];
+}
+
+export function UserList({ users }: UserListProps) {
+  return (
+    <ul className="space-y-2">
+      {users.map((user) => (
+        <li key={user.id} className="p-4 border rounded hover:bg-gray-50">
+          <Link to={user.id} className="text-blue-600 hover:underline">
+            {user.name}
+          </Link>
+        </li>
+      ))}
+    </ul>
+  );
+}
+```
+
+### routes/_app.users._index.tsx
+```tsx
+import { json } from '@remix-run/node';
+import { useLoaderData, Link } from '@remix-run/react';
+import { getUsers } from '~/modules/users/services/user.server';
+import { UserList } from '~/modules/users/components/UserList';
+
+export async function loader() {
+  const users = await getUsers();
+  return json({ users });
+}
+
+export default function UsersPage() {
+  const { users } = useLoaderData<typeof loader>();
+
+  return (
+    <div className="p-6">
+      <div className="flex justify-between items-center mb-6">
+        <h1 className="text-2xl font-bold">Users</h1>
+        <Link 
+          to="new" 
+          className="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700"
+        >
+          Add User
+        </Link>
+      </div>
+      <UserList users={users} />
+    </div>
+  );
+}
+```
+
+### routes/_app.users.new.tsx
+```tsx
+import { redirect, type ActionFunctionArgs } from '@remix-run/node';
+import { Form } from '@remix-run/react';
+import { createUser } from '~/modules/users/services/user.server';
+
+export async function action({ request }: ActionFunctionArgs) {
+  const formData = await request.formData();
+  const name = formData.get('name') as string;
+  const email = formData.get('email') as string;
+
+  // Basic validation could go here or in service
+  if (!email || !name) {
+    return json({ error: 'Missing fields' }, { status: 400 });
+  }
+
+  await createUser({ name, email });
+  return redirect('/users');
+}
+
+export default function NewUserPage() {
+  return (
+    <div className="max-w-md mx-auto mt-10">
+      <h1 className="text-xl font-bold mb-4">Create User</h1>
+      <Form method="post" className="space-y-4">
+        <div>
+          <label className="block text-sm font-medium text-gray-700">Name</label>
+          <input 
+            name="name" 
+            className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500" 
+            required 
+          />
+        </div>
+        <div>
+          <label className="block text-sm font-medium text-gray-700">Email</label>
+          <input 
+            name="email" 
+            type="email" 
+            className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500" 
+            required 
+          />
+        </div>
+        <button 
+          type="submit"
+          className="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700"
+        >
+          Create
+        </button>
+      </Form>
+    </div>
+  );
+}
+```
+
+### utils/db.server.ts
+```tsx
+// Database client setup (e.g., Prisma, Drizzle, Kysely)
+// This file should export the shared database instance
+
+let db: any;
+
+declare global {
+  var __db__: any;
+}
+
+if (process.env.NODE_ENV === 'production') {
+  // db = new DatabaseClient();
+} else {
+  if (!global.__db__) {
+    // global.__db__ = new DatabaseClient();
+  }
+  db = global.__db__;
+}
+
+export { db };
+```
+
+## Conventions
+
+| Item | Convention | Example |
+|------|------------|---------|
+| Module Directory | `app/modules/{feature}` | `app/modules/users` |
+| Service File | `xxx.server.ts` | `user.server.ts` |
+| Component | PascalCase | `UserList.tsx` |
+| Route File | lowercase.tsx | `_app.users.tsx` |
+| Loader | `loader` export | `export async function loader()` |
+| Action | `action` export | `export async function action()` |
+
+## When to use this structure
+
+**Recommended for:**
+- Medium to Large applications
+- Teams working on different features
+- Applications with complex business logic
+- When you want to keep related code (UI + Logic) together
+
+**Benefits:**
+- **Co-location**: Everything related to a feature is in one place.
+- **Scalability**: Easy to add new features without cluttering global folders.
+- **Maintainability**: Clear boundaries between features.
+

package/assets/commands/bootstrap.md

@@ -0,0 +1,98 @@
+---
+name: bootstrap
+description: Bootstrap a new project with Claude Code support
+---
+
+# Bootstrap New Project
+
+You are a project bootstrapping assistant. Guide the user through creating a new project with proper Claude Code support.
+
+## IMPORTANT: Architecture Reference
+
+Before creating any project structure, you MUST read the architecture reference files:
+
+- **Clean Architecture**: `~/.claude/architecture/clean-architecture.md`
+- **Go Backend**: `~/.claude/architecture/go-backend.md`
+- **Laravel Backend**: `~/.claude/architecture/laravel-backend.md`
+- **React Frontend**: `~/.claude/architecture/react-frontend.md`
+- **Remix Fullstack**: `~/.claude/architecture/remix-fullstack.md`
+- **Flutter Mobile**: `~/.claude/architecture/flutter-mobile.md`
+- **Monorepo**: `~/.claude/architecture/monorepo.md`
+
+## Step 1: Select Stack
+
+Ask the user to select their preferred stack:
+
+```
+Which stack would you like to use?
+
+1. Go + Gin (Backend API)
+2. Laravel (Backend API - PHP)
+3. React + Vite (Frontend SPA)
+4. Remix (Full-stack React)
+5. Flutter (Mobile/Desktop App)
+6. Monorepo (Frontend + Backend)
+
+Enter number (1-6):
+```
+
+## Step 2: Read Architecture Reference
+
+Based on selection, READ the corresponding architecture file:
+
+| Stack | Architecture File |
+|-------|-------------------|
+| Go + Gin | `go-backend.md` + `clean-architecture.md` |
+| Laravel | `laravel-backend.md` + `clean-architecture.md` |
+| React + Vite | `react-frontend.md` + `clean-architecture.md` |
+| Remix | `remix-fullstack.md` + `clean-architecture.md` |
+| Flutter | `flutter-mobile.md` + `clean-architecture.md` |
+| Monorepo | `monorepo.md` + relevant app architectures |
+
+## Step 3: Get Project Info
+
+```
+What is your project name?
+(Use lowercase with hyphens, e.g., my-awesome-project)
+```
+
+## Step 4: Select Features
+
+Present relevant features based on stack (see architecture file for details).
+
+## Step 5: Create Project
+
+Create project structure **exactly as defined in architecture reference file**.
+
+## Step 6: Copy Architecture Reference
+
+Copy relevant architecture files to project:
+
+```
+{project}/.claude/
+├── agents/
+└── architecture/
+    ├── clean-architecture.md
+    └── {stack}-specific.md
+```
+
+## Step 7: Setup CLAUDE.md
+
+Create CLAUDE.md that references architecture:
+
+```markdown
+# {Project Name}
+
+## Architecture
+
+This project follows Clean Architecture. See:
+- `.claude/architecture/clean-architecture.md`
+- `.claude/architecture/{stack}.md`
+
+## Quick Start
+...
+```
+
+## Step 8: Initialize & Final Output
+
+Run init commands and display success message with next steps.