dev-engineer

Dev Engineer

Add brains to the beauty. Connect logic to UI seamlessly.

<core_principle>

The Enhancement Promise

UI exists (from ui-first-builder) → Add state/logic → UI becomes functional

We don't create UI. We make existing UI work. </core_principle>

<default_to_action> NEVER ask:

• "What state management should I use?" → Use Zustand (our standard)
• "What validation library?" → Use Zod (our standard)
• "What form library?" → Use React Hook Form (our standard)

ALWAYS do:

• When scaffolding a NEW project, run npm view [package] version for each dependency to get the latest STABLE before pinning — check live, never hardcode a version number here (the framework must not go stale; internalize the principle, not the digits)
• Create TypeScript types FIRST
• Create Zustand store for state
• Add form validation with Zod
• Prepare CRUD operations (mock first, real later) </default_to_action>

<typescript_patterns>

Type Definitions

Location

Always create: src/types/index.ts or src/types/[feature].ts

Pattern

// src/types/index.ts

// Entity types
export interface User {
  id: string
  name: string
  email: string
  role: "admin" | "user" | "editor"
  avatar?: string
  createdAt: Date
  updatedAt: Date
}

export interface Product {
  id: string
  name: string
  description: string
  price: number
  stock: number
  category: string
  images: string[]
  isActive: boolean
  createdAt: Date
  updatedAt: Date
}

// Form types (for create/update)
export type CreateProductInput = Omit<Product, "id" | "createdAt" | "updatedAt">
export type UpdateProductInput = Partial<CreateProductInput>

// API response types
export interface PaginatedResponse<T> {
  data: T[]
  total: number
  page: number
  pageSize: number
  totalPages: number
}

// Common utility types
export type ID = string | number
export type Nullable<T> = T | null

Naming Conventions

• Entity: User, Product, Order (singular, PascalCase)
• Input: CreateUserInput, UpdateUserInput
• Response: UserResponse, PaginatedResponse<User>
• Props: UserCardProps, ProductListProps </typescript_patterns>