--- name: render_task_list description: Render the task list UI using a Next.js component with Tailwind CSS styling. Use this skill whenever list_tasks is called to display tasks with dynamic rendering handled by Claude code. license: Complete terms in LICENSE.txt --- # Render Task List Skill This skill provides a user interface for displaying a list of tasks in an organized and visually appealing way. ## Purpose Render a task list UI that displays all tasks or filtered tasks based on user criteria. This skill handles the presentation layer of task visualization. ## When to Use Use this skill whenever the `list_tasks` function is called to provide a user interface for viewing tasks. This includes: - Displaying all tasks assigned to a user - Showing tasks filtered by status, priority, or date - Providing a dashboard view of upcoming tasks - Rendering tasks in a searchable and sortable format ## Implementation Overview The task list rendering is implemented using: - Next.js component for the user interface - Tailwind CSS for responsive styling - Claude code for dynamic rendering and filtering ## Detailed Implementation ### 1. Next.js Task List Component Create a task list component in your Next.js application: ```jsx \/\/ components\/TaskList.jsx import { useState, useEffect } from 'react'; import TaskItem from '.\/TaskItem'; const TaskList = ({ tasks = [], filters = {}, onTaskUpdate, onTaskDelete }) => { const [filteredTasks, setFilteredTasks] = useState(tasks); const [sortConfig, setSortConfig] = useState({ key: 'dueDate', direction: 'asc' }); const [searchTerm, setSearchTerm] = useState(''); \/\/ Apply filters and search term when they change useEffect(() => { let result = [...tasks]; \/\/ Apply search filter if (searchTerm) { const term = searchTerm.toLowerCase(); result = result.filter(task => task.title.toLowerCase().includes(term) || task.description.toLowerCase().includes(term) || task.tags.some(tag => tag.toLowerCase().includes(term)) ); } \/\/ Apply status filter if (filters.status && filters.status !== 'all') { result = result.filter(task => task.status === filters.status); } \/\/ Apply priority filter if (filters.priority && filters.priority !== 'all') { result = result.filter(task => task.priority === filters.priority); } \/\/ Apply date range filter if (filters.startDate) { const startDate = new Date(filters.startDate); result = result.filter(task => new Date(task.dueDate) >= startDate); } if (filters.endDate) { const endDate = new Date(filters.endDate); result = result.filter(task => new Date(task.dueDate) <= endDate); } setFilteredTasks(result); }, [tasks, filters, searchTerm]); \/\/ Handle sorting const requestSort = (key) => { let direction = 'asc'; if (sortConfig.key === key && sortConfig.direction === 'asc') { direction = 'desc'; } setSortConfig({ key, direction }); }; \/\/ Apply sorting to filtered tasks useEffect(() => { const sortedTasks = [...filteredTasks].sort((a, b) => { if (a[sortConfig.key] < b[sortConfig.key]) { return sortConfig.direction === 'asc' ? -1 : 1; } if (a[sortConfig.key] > b[sortConfig.key]) { return sortConfig.direction === 'asc' ? 1 : -1; } return 0; }); setFilteredTasks(sortedTasks); }, [sortConfig]); \/\/ Calculate task statistics const taskStats = { total: tasks.length, completed: tasks.filter(t => t.status === 'completed').length, inProgress: tasks.filter(t => t.status === 'in-progress').length, overdue: tasks.filter(t => { if (t.status === 'completed') return false; return new Date(t.dueDate) < new Date(); }).length }; return (

{\/* Task Statistics *\/}

{taskStats.total}<\/p>

Total Tasks<\/p> <\/div>

{taskStats.completed}<\/p>

Completed<\/p> <\/div>

{taskStats.inProgress}<\/p>

In Progress<\/p> <\/div>

{taskStats.overdue}<\/p>

Overdue<\/p> <\/div> <\/div> {\/* Search and Filters *\/}

Search<\/label>

filters.onPriorityChange?.(e.target.value)} >