Sia: Instructions file for Kiro

Frontend Development Guidelines (apps/web)

Technology Stack

• Framework: Next.js with App Router
• Styling: Tailwind CSS
• Component Library: shadcn/ui (use the shadcn MCP server for component details and examples)
• Icons: Lucide React (lucide-react)
• Data Fetching: TanStack Query (React Query) for API caching
• Language: TypeScript with strict typing

Component Library - shadcn/ui

• Use shadcn/ui as the primary component library
• When you need details about a specific shadcn component, use the shadcn MCP server tools
• Install new components using: npx shadcn@latest add <component-name>
• Components are located in apps/web/components/ui/

API Calls - TanStack Query Pattern

Always use TanStack Query for backend API calls. Follow this pattern:

// hooks/use-jobs.ts
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
import { api } from '@/lib/api';

// Query for fetching data
export function useJobs(orgId: string) {
  return useQuery({
    queryKey: ['jobs', orgId],
    queryFn: () => api.getJobs(orgId),
    enabled: !!orgId,
  });
}

// Mutation for creating/updating data
export function useCreateJob() {
  const queryClient = useQueryClient();

  return useMutation({
    mutationFn: (data: CreateJobInput) => api.createJob(data),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ['jobs'] });
    },
  });
}

Icons - Lucide React

import { Plus, Trash2, Settings, ChevronRight } from 'lucide-react';

// Usage
<Plus className="h-4 w-4" />
<Trash2 className="h-4 w-4 text-destructive" />

TypeScript Guidelines

• Always use explicit types - avoid any and unknown as much as possible
• Define interfaces for all props, API responses, and state
• Use type inference where TypeScript can reliably infer types
• Export types from dedicated type files when shared across components

// ✅ Good
interface JobCardProps {
  job: Job;
  onSelect: (id: string) => void;
}

// ❌ Avoid
const handleData = (data: any) => { ... }