skills.rest
constructive-io
constructive-ioOFFICIAL
Explore all skills by this author →
Website𝕏@constructive_ioGitHub

constructive-crud-stack

Build CRUD Stack cards for Constructive CRMs with React and TypeScript.

1|Updated Jan 20, 2026
Search Tags:#react#ui components#crud#form development#constructive#stack cards
One-click install
npx skills add https://github.com/constructive-io/constructive-skills --skill constructive-crud-stack
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: constructive-crud-stack
Source: https://github.com/constructive-io/constructive-skills/tree/main/skills/constructive-crud-stack
Command: npx skills add https://github.com/constructive-io/constructive-skills --skill constructive-crud-stack

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill streamlines the creation of user interfaces for data manipulation (Create, Read, Update, Delete) within Constructive CRMs by leveraging an iOS-style slide-in panel (Stack card) pattern.

Core Features & Use Cases

  • Stack Card Integration: Seamlessly integrate CRUD operations into your application using Stack cards.
  • Component-Based Forms: Define reusable card components for different CRUD actions.
  • Deferred Loading: Optimize performance by loading data only after the card's enter animation is complete using useCardReady.
  • Stacked Confirmations: Implement confirmation dialogs as stacked cards for a consistent user experience.
  • Use Case: Quickly add an "Edit Contact" feature to your CRM, where clicking an "Edit" button slides in a form pre-populated with the contact's details, allowing for updates and deletions.

Quick Start

Use the constructive-crud-stack skill to build an 'Edit Contact' card by providing the contactId prop to the EditContactCard component.

Frequently Asked Questions about constructive-crud-stack

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

FAQPage Schema
How do I build CRUD forms as slide-in Stack cards in React?▼

You can build CRUD forms as Stack cards by using React and TypeScript components that implement an iOS-style slide-in panel pattern for data manipulation within Constructive CRMs. The Skill provides reusable card components for each CRUD action.

What is the best way to handle deferred data loading for React form components?▼

Deferred data loading for React form components is handled using the `useCardReady` hook, which optimizes performance by fetching data only after the Stack card's enter animation is complete.

Can I use TanStack React Query for dynamic UI generation in Constructive CRMs?▼

Yes, this Skill integrates with @tanstack/react-query to manage data fetching and dynamic UI generation for your Constructive CRM applications, ensuring efficient data updates within Stack cards.

How do I implement stacked confirmation dialogs for CRUD operations?▼

Stacked confirmation dialogs are implemented as additional Stack cards that slide in over existing CRUD forms, maintaining a consistent user experience for delete or update confirmations within the CRM.

Do I need TypeScript to create CRUD UI patterns with Stack cards?▼

TypeScript is used to facilitate the implementation of UI patterns for data forms and card stacking. It works alongside React to define reusable components and manage data within Constructive CRMs.

Why use Stack cards instead of standard modals for CRM data manipulation?▼

Stack cards provide an iOS-style slide-in panel pattern that streamlines the creation of user interfaces for data manipulation. This approach allows for layered CRUD actions and deferred loading, offering a more native feel than standard modals.

Related Skills

Explore More Software Engineering Skills→
MolcajeteAIMolcajeteAI
2

tanstack-query-setup

Configure TanStack Query with QueryClientProvider for React server state management.

Official
Intermediate
abdullahbeamabdullahbeam
2

hubspot-list-companies

Retrieve paginated company records from HubSpot CRM via API.

Community
Intermediate
greyhaven-aigreyhaven-ai
29

grey-haven-tanstack-patterns

Standardize TanStack Start, Router, and Query patterns in React 19 applications.

Community
Intermediate
tonehqtonehq
11

frontend_cards

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

Official
Advanced