lcbp3/.agents/rules/07-frontend-patterns.md

trigger, globs

trigger	globs
glob	frontend/**/*.tsx frontend/**/*.ts frontend/**/*.css

Frontend Patterns (Next.js)

Form Handling

• RHF (React Hook Form) for form management
• Zod for validation schema
• TanStack Query for server state

UUID Handling

// ✅ CORRECT - Use publicId only
interface ProjectOption {
  publicId?: string;
  projectName?: string;
}

// Select options
const options = contracts.map(c => ({
  label: `${c.contractName} (${c.contractCode})`,
  value: c.publicId!, // Use publicId, no fallback to id
}));

// ❌ WRONG - Never use these patterns
const value = c.publicId ?? c.id ?? ''; // Wrong!
const id = parseInt(projectId); // Wrong - parseInt on UUID!

API Client Pattern

// Use publicId directly in API calls
const contract = await contractService.getById(publicId);

// Form submission with UUID
const onSubmit = async (data: FormData) => {
  await correspondenceService.create({
    contractUuid: selectedContract.publicId!, // UUID string
    // ... other fields
  });
};

Full Guidelines

specs/05-Engineering-Guidelines/05-03-frontend-guidelines.md