skills.rest
HezziCode
HezziCodeCOMMUNITY
Explore all skills by this author →
Website𝕏@huzaifasysGitHub

implement_tasks_page

Implement a frontend Tasks page for the Next.js Todo application.

1|Updated Dec 9, 2025
Search Tags:#typescript#ui#frontend#nextjs#tasks#tailwind#mock-api
One-click install
npx skills add https://github.com/HezziCode/spec-driven-devlopment-hackathone --skill implement-tasks-page
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: implement_tasks_page
Source: https://github.com/HezziCode/spec-driven-devlopment-hackathone/tree/main/phase-2-fullstack-todo/.claude/skills/task-page
Command: npx skills add https://github.com/HezziCode/spec-driven-devlopment-hackathone --skill implement-tasks-page

SYSTEM DOCUMENTATION & REQUIREMENTS

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.

Frequently Asked Questions about implement_tasks_page

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

FAQPage Schema
How do I build a frontend tasks page in Next.js with a mock API?▼

To build a frontend tasks page in Next.js with a mock API, patch the frontend by adding CurvedHeading, AddTaskForm, TaskList, and a mock API scaffold. It delivers a responsive layout with Tailwind styling and optimistic UI for task completion.

How does optimistic UI work when completing tasks in a Next.js todo app?▼

Optimistic UI for completing tasks in a Next.js todo app instantly removes the TaskItem row upon completion without waiting for server confirmation. This frontend-only approach uses a mockApi.ts wrapper to simulate backend interactions smoothly.

Can I integrate a real backend API into this Next.js tasks page later?▼

Yes, you can integrate a real backend API later. The tasks page includes an optional api.ts wrapper layer alongside the mockApi.ts scaffold, allowing you to transition from simulated backend interactions to real API integration seamlessly.

What's the best way to structure a responsive todo list with Tailwind CSS?▼

The best way to structure a responsive todo list with Tailwind CSS is rendering compact TaskList rows showing title, truncated description, and due date. This approach includes an accessible AddTaskForm and CurvedHeading to match existing page themes.

Does this Next.js tasks page support accessibility features?▼

Yes, this Next.js tasks page supports accessibility features. The implementation includes accessibility considerations within the AddTaskForm's compact UI and the overall responsive layout, ensuring keyboard navigation and screen reader compatibility for task management.

Why use a mock API scaffold for a frontend-only todo application?▼

Using a mock API scaffold for a frontend-only todo application allows you to simulate backend interactions without a running server. The mockApi.ts wrapper handles adding, listing, and completing tasks while maintaining a clean UI layout.

Related Skills

Explore More Software Engineering Skills→
ComposioHQComposioHQ
1.9k

senior-frontend

Scaffold React or Next.js projects with TypeScript and Tailwind CSS.

Official
Intermediate
a747895159a747895159

chatkit-botbuilder

Integrate OpenAI Agents SDK with MCP tools and a JWT-secured FastAPI backend for ChatKit bots.

Community
Advanced
Hey-ViswaHey-Viswa

tesla-design-skill

Apply Tesla design-system patterns to React/Next.js UI components.

Community
Intermediate
lengo0951lengo0951

ck:web-frameworks

Set up web frameworks with Next.js, Turborepo, and RemixIcon.

Community
Advanced