|
| 1 | +# CLAUDE.md |
| 2 | + |
| 3 | +This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository. |
| 4 | + |
| 5 | +## Development Commands |
| 6 | + |
| 7 | +### Core Commands |
| 8 | +- `npm run dev` - Start development server |
| 9 | +- `npm run build` - Build for production |
| 10 | +- `npm run generate` - Generate static site |
| 11 | +- `npm run preview` - Preview production build locally |
| 12 | +- `npm install` - Install dependencies |
| 13 | +- `npm run postinstall` - Prepare Nuxt (runs automatically after install) |
| 14 | + |
| 15 | +### Code Quality |
| 16 | +- **Linting**: ESLint runs automatically via lint-staged on commit |
| 17 | +- **Formatting**: Prettier runs automatically via lint-staged on commit |
| 18 | +- **Pre-commit hooks**: Husky is configured with lint-staged to format and lint on commit |
| 19 | + |
| 20 | +## Project Architecture |
| 21 | + |
| 22 | +### Framework & Technology Stack |
| 23 | +- **Nuxt 3**: Vue.js framework with SSR/SSG capabilities |
| 24 | +- **Vue 3**: Frontend framework with Composition API |
| 25 | +- **TypeScript**: Type checking (nuxt.config.ts, formkit.config.ts) |
| 26 | +- **Vuetify 3**: Material Design component library |
| 27 | +- **FormKit**: Form handling with auto-import enabled |
| 28 | +- **i18n**: Internationalization (English/Japanese) with prefix strategy |
| 29 | +- **SASS/SCSS**: Styling with organized structure |
| 30 | + |
| 31 | +### API Integration |
| 32 | +- **Kuroco CMS**: Backend integration via `dev-nuxt-auth.a.kuroco.app` |
| 33 | +- **Authentication**: Custom auth composable with login/logout/profile management |
| 34 | +- **API Domain**: Dynamic sitekey-based API endpoint switching |
| 35 | + |
| 36 | +### Key Architecture Patterns |
| 37 | + |
| 38 | +#### Authentication System |
| 39 | +- **useAuth composable** (`composables/useAuth.js`): Central auth management |
| 40 | + - User state management via `useState('user')` |
| 41 | + - Profile restoration on app load |
| 42 | + - Dynamic API domain switching based on sitekey |
| 43 | + - Route protection for authenticated areas |
| 44 | + |
| 45 | +#### Component Structure |
| 46 | +- **Layouts**: `default.vue` and `preview.vue` for different page types |
| 47 | +- **Components**: Organized by feature (topics/, reusable components) |
| 48 | +- **Pages**: File-based routing with dynamic routes (`[slug].vue`) |
| 49 | + |
| 50 | +#### Styling Architecture |
| 51 | +- **Modular SCSS**: Organized in assets/ with foundation, layout, object, and partials |
| 52 | +- **Design System**: Vuetify components with custom SCSS overrides |
| 53 | +- **Variables**: Centralized in `assets/variables.scss` and `assets/partials/_var.scss` |
| 54 | + |
| 55 | +#### Internationalization |
| 56 | +- **Strategy**: `prefix_except_default` (English default, `/ja` prefix for Japanese) |
| 57 | +- **Locales**: JSON files in `locales/` directory |
| 58 | +- **HTML support**: `strictMessage: false` allows HTML in translation strings |
| 59 | + |
| 60 | +### Important Files |
| 61 | +- `nuxt.config.ts` - Main configuration with modules and runtime config |
| 62 | +- `composables/useAuth.js` - Authentication logic and user state |
| 63 | +- `public/kuroco_front.json` - Frontend routing configuration for Kuroco |
| 64 | +- `eslint.config.mjs` - ESLint configuration with custom rules |
| 65 | +- `formkit.config.ts` - Form handling configuration |
| 66 | + |
| 67 | +### Development Notes |
| 68 | +- **Auto-imports**: FormKit and Vuetify components are auto-imported |
| 69 | +- **Development server**: Uses file watching with polling enabled |
| 70 | +- **Error handling**: Custom 404 page configured in kuroco_front.json |
| 71 | +- **State management**: Uses Nuxt's built-in `useState` for global state |
0 commit comments