Skills
.Work. You
Rest

implement_tasks_page

Community

Elegant frontend Tasks page with mock API.

Software Engineering#typescript#ui#frontend#nextjs#tasks#tailwind#mock-api
AuthorHezziCode
Version1.0.0
Installs0

System Documentation

What problem does it solve?

The Previous Tasks page for Phase II Todo app is cluttered and inconsistent; this skill delivers a focused frontend-only solution with a clean, responsive Tasks page, keeping the homepage theme while simplifying layout and interactions.

Core Features & Use Cases

  • Curved heading under the page title that matches the home page style.
  • AddTaskForm at the top for quick task creation with a compact, accessible UI.
  • TaskList rendering compact rows showing title, truncated description, due date, and a Complete action with optimistic UI removal.
  • Optional mock API toggle to simulate backend interactions; ready for real API integration via a simple wrapper layer.

Quick Start

Patch the frontend by adding CurvedHeading, AddTaskForm, TaskList, and a mock API scaffold, then replace the Tasks page layout as described.

Dependency Matrix

Required Modules

None required

Components

Standard package

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: implement_tasks_page
Download link: https://github.com/HezziCode/spec-driven-devlopment-hackathone/archive/main.zip#implement-tasks-page

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 223,000+ vetted skills library on demand.