Frontend Ui Engineering

// Good: Composable<Card>  <CardHeader>    <CardTitle>Tasks</CardTitle>  </CardHeader>  <CardBody>    <TaskList tasks={tasks} />  </CardBody></Card>
// Avoid: Over-configured<Card  title="Tasks"  headerVariant="large"  bodyPadding="md"  content={<TaskList tasks={tasks} />}/>

// Good: Does one thingexport function TaskItem({ task, onToggle, onDelete }: TaskItemProps) {  return (    <li className="flex items-center gap-3 p-3">      <Checkbox checked={task.done} onChange={() => onToggle(task.id)} />      <span className={task.done ? 'line-through text-muted' : ''}>{task.title}</span>      <Button variant="ghost" size="sm" onClick={() => onDelete(task.id)}>        <TrashIcon />      </Button>    </li>  );}

// Container: handles dataexport function TaskListContainer() {  const { tasks, isLoading, error } = useTasks();
  if (isLoading) return <TaskListSkeleton />;  if (error) return <ErrorState message="Failed to load tasks" retry={refetch} />;  if (tasks.length === 0) return <EmptyState message="No tasks yet" />;
  return <TaskList tasks={tasks} />;}
// Presentation: handles renderingexport function TaskList({ tasks }: { tasks: Task[] }) {  return (    <ul role="list" className="divide-y">      {tasks.map(task => <TaskItem key={task.id} task={task} />)}    </ul>  );}

// Every interactive element must be keyboard accessible<button onClick={handleClick}>Click me</button>        // ✓ Focusable by default<div onClick={handleClick}>Click me</div>               // ✗ Not focusable<div role="button" tabIndex={0} onClick={handleClick}    // ✓ But prefer <button>     onKeyDown={e => {       if (e.key === 'Enter') handleClick();       if (e.key === ' ') e.preventDefault();     }}     onKeyUp={e => {       if (e.key === ' ') handleClick();     }}>  Click me</div>

// Label interactive elements that lack visible text<button aria-label="Close dialog"><XIcon /></button>
// Label form inputs<label htmlFor="email">Email</label><input id="email" type="email" />
// Or use aria-label when no visible label exists<input aria-label="Search tasks" type="search" />

// Move focus when content changesfunction Dialog({ isOpen, onClose }: DialogProps) {  const closeRef = useRef<HTMLButtonElement>(null);
  useEffect(() => {    if (isOpen) closeRef.current?.focus();  }, [isOpen]);
  // Trap focus inside dialog when open  return (    <dialog open={isOpen}>      <button ref={closeRef} onClick={onClose}>Close</button>      {/* dialog content */}    </dialog>  );}

// Don't show blank screensfunction TaskList({ tasks }: { tasks: Task[] }) {  if (tasks.length === 0) {    return (      <div role="status" className="text-center py-12">        <TasksEmptyIcon className="mx-auto h-12 w-12 text-muted" />        <h3 className="mt-2 text-sm font-medium">No tasks</h3>        <p className="mt-1 text-sm text-muted">Get started by creating a new task.</p>        <Button className="mt-4" onClick={onCreateTask}>Create Task</Button>      </div>    );  }
  return <ul role="list">...</ul>;}

// Tailwind: mobile-first responsive<div className="  grid grid-cols-1      /* Mobile: single column */  sm:grid-cols-2        /* Small: 2 columns */  lg:grid-cols-3        /* Large: 3 columns */  gap-4">

// Skeleton loading (not spinners for content)function TaskListSkeleton() {  return (    <div className="space-y-3" aria-busy="true" aria-label="Loading tasks">      {Array.from({ length: 3 }).map((_, i) => (        <div key={i} className="h-12 bg-muted animate-pulse rounded" />      ))}    </div>  );}
// Optimistic updates for perceived speedfunction useToggleTask() {  const queryClient = useQueryClient();
  return useMutation({    mutationFn: toggleTask,    onMutate: async (taskId) => {      await queryClient.cancelQueries({ queryKey: ['tasks'] });      const previous = queryClient.getQueryData(['tasks']);
      queryClient.setQueryData(['tasks'], (old: Task[]) =>        old.map(t => t.id === taskId ? { ...t, done: !t.done } : t)      );
      return { previous };    },    onError: (_err, _taskId, context) => {      queryClient.setQueryData(['tasks'], context?.previous);    },  });}