claude-git-hooks/templates/presets/fullstack/CONSISTENCY_CHECKS.md

Git hooks with Claude CLI for code analysis and automatic commit messages

# Full-Stack Consistency Checks

This template provides specific checks for cross-layer consistency in full-stack applications.

## API Contract Consistency

### DTO ↔ TypeScript Interface Matching

**Backend DTO Example:**
```java
public class UserDTO {
    private Long id;
    private String email;
    private String firstName;
    private String lastName;
}
```

**Frontend Interface Should Match:**
```typescript
interface User {
    id: number;
    email: string;
    firstName: string;
    lastName: string;
}
```

**Check for:**
- ✅ All fields present in both
- ✅ Same field names (exact match, including casing)
- ✅ Compatible types (Long↔number, String↔string, etc.)
- ✅ Optional fields marked consistently

## Error Response Consistency

**Backend Error Response:**
```java
{
    "timestamp": "2024-01-01T12:00:00",
    "status": 400,
    "error": "Bad Request",
    "message": "Validation failed",
    "path": "/api/users"
}
```

**Frontend Should Handle:**
```javascript
catch (error) {
    if (error.response.status === 400) {
        // Handle validation error
    } else if (error.response.status === 401) {
        // Handle unauthorized
    }
    // etc.
}
```

**Check for:**
- ✅ Frontend handles all status codes backend returns
- ✅ Error messages displayed to user are user-friendly
- ✅ No sensitive info exposed in errors

## Authentication Flow Consistency

**Check for:**
- ✅ Token format matches between backend generation and frontend consumption
- ✅ Token expiration handled on both sides
- ✅ Refresh token logic works end-to-end
- ✅ Secure token storage (httpOnly cookies > localStorage)
- ✅ Authorization headers formatted correctly

## Validation Consistency

**Backend:**
```java
@NotNull
@Email
private String email;

@Size(min = 8, max = 100)
private String password;
```

**Frontend Should Match:**
```javascript
const validationSchema = {
    email: yup.string().email().required(),
    password: yup.string().min(8).max(100).required()
};
```

**Check for:**
- ✅ Same validation rules on both sides
- ✅ Clear error messages match
- ✅ Required fields consistent
- ✅ Length/format constraints match

## Data Flow Checks

**When Backend Changes:**
- ✅ Check if frontend needs updates
- ✅ Verify API contract compatibility
- ✅ Check for breaking changes

**When Frontend Changes:**
- ✅ Verify API calls still match backend
- ✅ Check error handling is complete
- ✅ Ensure all backend responses handled

## Common Consistency Issues

### Type Mismatches
❌ Backend: `Long`, Frontend: `string` (should be `number`)
❌ Backend: `LocalDateTime`, Frontend: not parsing as Date
❌ Backend: enum values, Frontend: magic strings

### Naming Mismatches
❌ Backend: `user_id`, Frontend: `userId`
❌ Backend: `firstName`, Frontend: `first_name`
❌ Inconsistent pluralization

### Missing Fields
❌ Backend returns field frontend doesn't expect
❌ Frontend expects field backend doesn't send
❌ Optional fields treated as required

### Status Code Issues
❌ Backend returns 500, frontend only handles 4xx
❌ Backend returns 204, frontend expects JSON
❌ Backend changes status code, frontend not updated

## Verification Checklist

When analyzing commits that touch both backend and frontend:

- [ ] API endpoint paths match
- [ ] HTTP methods correct
- [ ] Request/response DTOs match TypeScript types
- [ ] All status codes handled
- [ ] Error responses properly handled
- [ ] Authentication/authorization consistent
- [ ] Validation rules match
- [ ] Data transformations are inverse operations
- [ ] Breaking changes documented
- [ ] Tests cover the integration