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

card_page

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

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Creates a complete backend API + frontend UI card-grid page for any entity in the Tone platform, orchestrating the backend_tables and frontend_cards skills in sequence to deliver a cohesive, card-based listing.

Core Features & Use Cases

  • Automates generation of a POST /<entity_plural>/list endpoint with search, filter, sort, and pagination.
  • Generates a Next.js card-grid page with infinite scroll, search, status filtering, create/edit modal, and framer-motion animations.
  • Orchestrates between backend_tables and frontend_cards to provide a card-based listing where a grid is preferred over a table.
  • Ideal for entities with preview-friendly data (profiles, configurations, knowledge objects) that benefit from visual previews over tabular data.

Quick Start

Ask this skill to generate a complete backend list endpoint and frontend card-grid page for a chosen entity.

Frequently Asked Questions about card_page

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

FAQPage Schema
How do I generate a full-stack card grid UI with infinite scroll in Next.js?▼

A full-stack card grid requires a backend POST list endpoint for search, filter, sort, and pagination, paired with a Next.js frontend card-grid page featuring infinite scroll and framer-motion animations. This setup automates orchestrating both backend and frontend card components.

When should I use a card grid layout instead of a table for listing data?▼

Use a card grid layout instead of a table for entities with preview-friendly data like profiles, configurations, or knowledge objects. Card grids provide visual previews and benefit from visual browsing, whereas tables are better suited for dense, strictly tabular data.

How do I create a backend list endpoint with search, filter, and sort for a card UI?▼

Creating a backend list endpoint with search, filter, and sort involves generating a POST /<entity_plural>/list endpoint. This endpoint integrates with frontend card components to support pagination and status filtering for the card-based overview.

Does the generated card grid page include create and edit modal functionality?▼

Yes, the generated Next.js card-grid page includes create and edit modal functionality. It also features search, status filtering, infinite scroll, and framer-motion animations to provide a complete interactive user experience.

Can I use framer-motion animations with an infinite scroll card grid?▼

Yes, you can use framer-motion animations with an infinite scroll card grid. The generated Next.js frontend components integrate framer-motion to animate the card-based listing as users scroll and interact with the data.

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
tonehqtonehq
11

frontend_cards

Generate a card-grid listing page with split components for the Tone frontend.

Official
Advanced
tonehqtonehq
11

table_page

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

Official
Advanced
Arnutt-NArnutt-N

table-builder

Provide client-side data-table UI components for sorting, filtering, and row actions.

Community
Advanced