frontend_cards

To generate a React card-grid listing page, this Skill outputs modular TSX components including a grid with intersection observer for infinite scroll, search, status filtering, and a create/edit modal form while keeping data logic in services.

The best way to structure TypeScript UI components for profile-like card previews is a split-component pattern, separating the card, grid, skeleton loader, and form modal into modular TSX files using shared frontend components.

Yes, you can use Framer Motion in an auto-generated card-grid. The Skill produces TSX UI patterns that integrate existing shared components, supporting animated and polished key-value previews for your frontend entities.

You do not need to manually implement skeleton loaders. The Skill automatically generates skeleton loader components alongside the card and grid structure, ensuring consistent loading states during data fetching.

Infinite scrolling in a generated card-grid page works via an intersection observer integrated into the grid component, automatically triggering data fetching through services as the user scrolls near the bottom.

The best way to add a create and edit modal to a frontend card-grid is using the generated form modal component, which provides a reference implementation pattern that handles data inputs while routing logic through services and atoms.