skills.rest
tonehq
tonehqOFFICIAL
Explore all skills by this author →
GitHub

table_page

Generate a full-stack listing page with backend API and Next.js UI.

11|3|Updated Aug 31, 2025
Search Tags:#automation#tone#full-stack#frontend#backend#generate#table-page
One-click install
npx skills add https://github.com/tonehq/tone --skill table-page
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: table_page
Source: https://github.com/tonehq/tone/tree/main/.claude/skills/table_page
Command: npx skills add https://github.com/tonehq/tone --skill table-page

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Creates a complete backend API + frontend listing page for any entity in the Tone platform, eliminating boilerplate and accelerating UI + API scaffolding.

Core Features & Use Cases

  • Auto-generates a POST /list endpoint with search, filter, sort, and pagination.
  • Generates a Next.js listing page with CustomTable, SearchBar, filters, bulk delete, and page size selector.
  • Orchestrates the frontend_tables and backend_tables patterns to deliver an end-to-end listing page for any entity.

Quick Start

Provide the entity name and route path, and let the skill scaffold both backend and frontend components for a full listing page.

Frequently Asked Questions about table_page

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

FAQPage Schema
How do I generate a full-stack listing page for an entity?▼

To generate a full-stack listing page, provide an entity name and route path. This automates scaffolding for both the backend API endpoint and the frontend Next.js UI components for that entity.

What features are included in an auto-generated admin dashboard table?▼

An auto-generated admin dashboard table includes search, filter, sort, and pagination capabilities. The frontend listing page also features bulk delete actions and a page size selector for comprehensive data management.

Can I use this to scaffold a POST list endpoint with Next.js frontend components?▼

Yes, you can scaffold a POST list endpoint alongside Next.js frontend components. It orchestrates backend endpoint patterns and frontend listing components to deliver an end-to-end listing page for any entity.

How do I eliminate boilerplate when building admin panel listing pages?▼

Eliminate boilerplate when building admin panel listing pages by automating the generation of the backend API and frontend UI. This provides a cohesive developer experience without manual endpoint and component scaffolding.

What do I need to provide to auto-generate a backend API and frontend UI table?▼

To auto-generate a backend API and frontend UI table, you only need to provide the entity name and route path. The skill handles the cross-cutting orchestration to deliver the complete full-stack listing page.

Does the generated frontend table support pagination and bulk actions?▼

Yes, the generated frontend table supports pagination and bulk actions. The Next.js listing page is scaffolded with a CustomTable, SearchBar, filters, bulk delete functionality, and a page size selector.

Related Skills

Explore More Software Engineering Skills→
tonehqtonehq
11

form_page

Generate full-stack create/edit forms with backend endpoints, Zod schemas, and UI layouts.

Official
Advanced
1k-off1k-off
1

umbraco-tree

Register hierarchical tree and treeItem nodes for Umbraco Backoffice extensions with routable workspaces.

Community
Intermediate
tonehqtonehq
11

card_page

Generate a backend list endpoint and Next.js card-grid UI for Tone platform entities.

Official
Advanced
Nhqvu2005Nhqvu2005
54

api-designer

Generate RESTful API endpoints and export them to OpenAPI specifications.

Community
Intermediate