Polish & Features

Drag-and-Drop Kanban

This is the feature that transforms the app from a task list into a real kanban board. We're using @dnd-kit — it's the modern React DnD library with the best TypeScript support and accessibility built in.

The prompt is specific about the position calculation and optimistic updates — these are the two areas where AI needs the most guidance. Here's the core logic:

function calculatePosition(
  tasks: Task[],
  overIndex: number
): number {
  // Dropping at the end of column
  if (overIndex >= tasks.length) {
    const last = tasks[tasks.length - 1];
    return last ? last.position + 1 : 1;
  }

  // Dropping at the beginning
  if (overIndex === 0) {
    return tasks[0].position / 2;
  }

  // Dropping between two tasks
  const before = tasks[overIndex - 1];
  const after = tasks[overIndex];
  return (before.position + after.position) / 2;
}

And the optimistic update pattern in the drag end handler:

function handleDragEnd(event: DragEndEvent) {
  const { active, over } = event;
  if (!over) return;

  const taskId = active.id as string;
  const newStatus = over.data.current?.status as TaskStatus;
  const overIndex = over.data.current?.index as number;

  // Get tasks in the target column
  const columnTasks = tasks
    .filter((t) => t.status === newStatus && t.id !== taskId)
    .sort((a, b) => a.position - b.position);

  const newPosition = calculatePosition(columnTasks, overIndex);

  // Optimistic update: move immediately in local state
  useProjectStore.getState().optimisticMoveTask(taskId, newStatus, newPosition);

  // Then sync with API (revert on failure)
  useProjectStore.getState().moveTask(taskId, newStatus, newPosition)
    .catch(() => {
      // Revert: re-fetch tasks from server
      useProjectStore.getState().fetchTasks(activeProjectId!);
    });
}

Filtering & Search

// FilterBar passes this to KanbanBoard
const filterTasks = useCallback(
  (tasks: Task[]) => {
    return tasks.filter((task) => {
      // Text search
      if (searchQuery && !task.title.toLowerCase().includes(searchQuery.toLowerCase())) {
        return false;
      }

      // Priority filter
      if (priorityFilter && task.priority !== priorityFilter) {
        return false;
      }

      // Assignee filter
      if (assigneeFilter && task.assignee?.toLowerCase() !== assigneeFilter.toLowerCase()) {
        return false;
      }

      return true;
    });
  },
  [searchQuery, priorityFilter, assigneeFilter]
);

// KanbanBoard applies it before distributing to columns
const filteredTasks = filterFn ? filterFn(tasks) : tasks;

Toast Notifications

Every successful action and every error needs feedback. Without toasts, the user creates a task and has no confirmation it worked. Without error toasts, API failures are silent.

import { create } from 'zustand';

interface Toast {
  id: string;
  message: string;
  type: 'success' | 'error';
}

interface ToastState {
  toasts: Toast[];
  success: (message: string) => void;
  error: (message: string) => void;
  dismiss: (id: string) => void;
}

export const useToast = create<ToastState>((set) => ({
  toasts: [],

  success: (message) => {
    const id = crypto.randomUUID();
    set((s) => ({ toasts: [...s.toasts, { id, message, type: 'success' }] }));
    setTimeout(() => set((s) => ({ toasts: s.toasts.filter((t) => t.id !== id) })), 3000);
  },

  error: (message) => {
    const id = crypto.randomUUID();
    set((s) => ({ toasts: [...s.toasts, { id, message, type: 'error' }] }));
    setTimeout(() => set((s) => ({ toasts: s.toasts.filter((t) => t.id !== id) })), 5000);
  },

  dismiss: (id) => set((s) => ({ toasts: s.toasts.filter((t) => t.id !== id) })),
}));

Then add toast.success('Task created') after every successful store action and toast.error(err.message) in every catch block. One pass through the codebase, five minutes of work.

Responsive Design

The responsive prompt is detailed because AI tends to be lazy with mobile layouts — it'll add one md: class and call it done. By specifying the exact layout per breakpoint, you get a genuinely usable mobile experience.

// KanbanBoard responsive layout
<div className={`
  grid gap-4 p-4 h-full
  grid-cols-1 overflow-y-auto
  md:grid-cols-2 md:overflow-y-auto
  lg:grid-cols-4 lg:overflow-x-auto lg:overflow-y-hidden
`}>
  {COLUMNS.map((col) => (
    <Column key={col.status} {...col} tasks={columnTasks} />
  ))}
</div>

Quick Wins

With the core features done, spend 15 minutes on quick wins that make the app feel polished. Each of these is a single focused prompt:

• Empty states — "No tasks yet" message in empty columns with a subtle illustration and a "Create your first task" CTA button
• Loading skeletons — Pulse animations on task cards while data loads, instead of a spinner
• Keyboard shortcuts — N to create task, Esc to close modal (modal already has this), / to focus search
• Due date highlighting — Red text if overdue, amber if due today, muted if future
• Confirm dialogs — "Are you sure?" before archiving a project or deleting a task

Each quick win is a 2-minute prompt and a 1-minute review. Five quick wins = 15 minutes total. The cumulative effect is significant — the app goes from "functional prototype" to "something I'd actually use."

The Refactor Pause

We're now 7-8 hours into the build with a lot of code accumulated. Before moving to testing and deployment, it's time for the refactor step from the manual.

"Fix top 5, leave the rest" is the disciplined constraint. You could spend 2 hours refactoring, but you'd miss your deployment window. Fix what matters, ship the rest, improve later.

Jump to Any Part