frontend_cards
OfficialAuto-generate a polished card-grid page.
Software Engineering#typescript#frontend#react#ui-components#framer-motion#infinite-scroll#card-grid
Authortonehq
Version1.0.0
Installs0
System Documentation
What problem does it solve?
This Skill automates the creation of a card-grid listing page for the Tone frontend, enabling teams to represent entities as cards with concise previews and consistent UI patterns.
Core Features & Use Cases
- Card-grid listing page generation for Tone frontend with a split-component structure (card, grid, skeleton, and form modal).
- Supports infinite scroll, search, status filtering, and a create/edit modal for rapid data management.
- Reference implementation pattern based on existing frontend components and patterns to ensure consistency across pages.
Quick Start
Generate a complete card-grid listing page for the Tone frontend following the split-component pattern.
Dependency Matrix
Required Modules
None requiredComponents
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: frontend_cards Download link: https://github.com/tonehq/tone/archive/main.zip#frontend-cards Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
Agent Skills Search Helper
Install a tiny helper to your Agent, search and equip skill from 510,000+ vetted skills library on demand.