Task Card

AI chats 1

About

One delegated task with state, timing, assigned agent, and returned result.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Task Card to your project and fits it to your theme.

Code

How Task Card is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import TaskCard from '@/components/ui/task-card'

export default function Demo() {
  return (
    <TaskCard
      agent="Research subagent"
      className="w-full max-w-lg"
      description="Compare the remaining AI-focused registries and remove overlapping patterns."
      duration="3m 42s"
      result="Found 8 distinct answer and execution-detail patterns worth implementing."
      status="complete"
      title="Audit remaining registry patterns"
    />
  )
}