Hidamari Development Assistant

This skill configures Claude Code to work with the Hidamari project, a positive SNS application that uses Google's Gemini AI to analyze post content for positivity.

Project Context

Hidamari is a **greenfield project** following a separate frontend/backend architecture. Implementation follows the detailed plan in `docs/tasks.md`.

Communication Policy

**CRITICAL**: Think and reason in English internally, but **always respond to users in Japanese**.

Technology Stack

Architecture

```

Frontend (React + Vite) :5173

↓ HTTP API

Backend (Express.js) :3001

↓ API Calls

Gemini API (Google AI)

↓ Database

PostgreSQL (Docker) :5432

```

Project Structure

```

Hidamari/

├── docs/ # Project documentation

├── frontend/ # React + Vite frontend

├── backend/ # Express.js backend

├── shared/ # Common types and utilities

└── scripts/ # Development scripts

```

Development Commands

Initial Setup

```bash

1. Start PostgreSQL

docker-compose up -d

2. Backend setup

cd backend

npm install

npx prisma migrate dev

npx prisma generate

npm run dev

3. Frontend setup (separate terminal)

cd frontend

npm install

npm run dev

```

Daily Development

```bash

npm run dev # Start development server

npm run build # Build for production

npm test # Run tests

npm run lint # Run ESLint

npm run type-check # Run TypeScript checks

```

Testing

```bash

Frontend tests (Vitest + React Testing Library)

cd frontend && npm test

cd frontend && npm run test:watch

Backend tests (Jest + Supertest)

cd backend && npm test

cd backend && npm run test:unit

cd backend && npm run test:integration

```

Key Implementation Areas

Backend API Endpoints (Express.js)

Frontend Components (React + Vite)

Backend Services

Data Models

```typescript

interface AnalysisResult {

isPositive: boolean;

score: number; // 0-100

suggestion?: string;

reason: string;

}

interface Post {

id: string;

content: string;

positivityScore: number;

author: User;

createdAt: Date;

}

```

Environment Configuration

Backend (.env)

```bash

DATABASE_URL="postgresql://postgres:password@localhost:5432/positive_sns"

AUTH_SECRET="your-auth-secret"

GOOGLE_CLIENT_ID="your-google-client-id"

GOOGLE_CLIENT_SECRET="your-google-client-secret"

GITHUB_CLIENT_ID="your-github-client-id"

GITHUB_CLIENT_SECRET="your-github-client-secret"

GEMINI_API_KEY="your-gemini-key"

```

Frontend (.env)

```bash

VITE_API_URL="http://localhost:3001"

```

Key Constraints

Instructions for Claude Code

When working on this project:

1. **Language**: Always respond to users in Japanese, regardless of the language they use

2. **Code References**: Use `file_path:line_number` format when referencing code

3. **Architecture**: Respect the separate frontend/backend structure

4. **Testing**: Write tests alongside implementation (target 80%+ coverage)

5. **Type Safety**: Use TypeScript strictly; validate with Zod on backend

6. **Components**: Use shadcn/ui components for UI consistency

7. **API Integration**: Frontend communicates with backend via REST API at `VITE_API_URL`

8. **Database**: Use Prisma ORM for all database operations

9. **AI Analysis**: Route all Gemini API calls through GeminiService

10. **Authentication**: Verify sessions through Auth.js middleware

11. **Task Tracking**: Refer to `docs/tasks.md` for implementation roadmap

12. **Error Handling**: Implement proper error boundaries and validation

Common Development Patterns

Creating a New Feature

1. Check `docs/tasks.md` for task details

2. Define shared TypeScript interfaces in `shared/types/`

3. Implement backend API endpoint with middleware

4. Write backend unit tests

5. Create frontend React components

6. Write frontend component tests

7. Update documentation

Adding API Endpoint

1. Define route in `backend/src/routes/`

2. Create service method in appropriate service file

3. Add validation middleware with Zod

4. Add authentication middleware if needed

5. Write integration tests with Supertest

6. Update frontend API client

Adding UI Component

1. Create component in `frontend/src/components/`

2. Use shadcn/ui primitives where possible

3. Implement TypeScript interfaces for props

4. Write Vitest tests with React Testing Library

5. Add to appropriate feature directory

Debugging Tips

Important Notes