skills.rest
ayesha-aziz123
ayesha-aziz123COMMUNITY
Explore all skills by this author →
𝕏@Ayesha_Aziz43GitHub

task-management-ui

Provide reusable UI components for listing, filtering, and editing tasks.

2|Updated Dec 7, 2025
Search Tags:#frontend#react#filters#task-management#modals#ui-components
One-click install
npx skills add https://github.com/ayesha-aziz123/Hackathon_II --skill task-management-ui
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: task-management-ui
Source: https://github.com/ayesha-aziz123/Hackathon_II/tree/main/Evolution-Todo/.claude/skills/task-management-ui
Command: npx skills add https://github.com/ayesha-aziz123/Hackathon_II --skill task-management-ui

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill reduces the boilerplate and cognitive load of building task management interfaces by delivering reusable UI patterns for listing, filtering, creating, and updating tasks.

Core Features & Use Cases

  • Task List Page with search, filters, and analytics-ready counts.
  • Task Card with status toggles, tags, due dates, and quick actions.
  • Task Form Modal for creating and editing tasks in a focused workflow.
  • Task Filters panel to dynamically refine the task list by status, priority, and tag.
  • Use Case: Integrate into admin dashboards or project management apps to rapidly prototype task-centric workflows.

Quick Start

Integrate the Task List Page into your dashboard and provide an initial array of tasks to see filtering and modal creation in action.

Frequently Asked Questions about task-management-ui

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I build a task list with filtering and search in React?▼

This Skill provides ready-made React components for task lists with built-in search, status filters, priority filters, and tag refinement. Integrate the Task List Page component into your dashboard, pass an initial tasks array, and filtering logic runs immediately without additional state management code.

Can I add a modal form to create and edit tasks without building it from scratch?▼

Yes. The Task Form Modal component handles both creation and editing workflows in a focused interface. It integrates with the Task List Page and manages form state, validation, and modal lifecycle automatically.

What's the best way to implement task status toggles and quick actions in a UI?▼

Task Cards in this Skill include status toggles, tag display, due date indicators, and quick-action buttons. They compose into the Task List Page and connect to your state management layer with minimal wiring.

Does this Skill work with admin dashboards and project management apps?▼

Yes. The Skill targets admin panels and project management interfaces. Components are responsive, accessible, and designed to integrate into existing dashboards as drop-in task-centric modules.

How do I make task filters responsive and accessible?▼

The Task Filters panel component provides dynamic refinement by status, priority, and tag with accessible modal workflows built in. It responds to screen size automatically and follows accessible interaction patterns.

Can I track task counts and analytics data in the UI?▼

The Task List Page includes analytics-ready counts for filtered task states. Counts update as filters change, enabling quick insights without separate reporting components.

Related Skills

epieczkoepieczko

hook.register

Validate and register hook manifest files into the Hook Registry.

Community
Intermediate
babdulhakim2babdulhakim2

sanctions-check

Screen entities against OFAC SDN, UN, EU, and other sanctions lists.

Community
Intermediate
vincent119vincent119

ui-design-principles

Enforce UI design principles for spacing, color, typography, and WCAG 2.1 AA accessibility.

Community
Intermediate
adriaanmostert1976-labadriaanmostert1976-lab

the-approach

Design or critique system-level architectures with structured interviews and reviews.

Community
Advanced