frontend-hooks

Analyze Drumr frontend-hooks for React and TanStack headless controller patterns.

Updated Sep 16, 2025
One-click install
npx skills add https://github.com/slingr-stack/qa-test-drumr --skill frontend-hooks
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: frontend-hooks
Source: https://github.com/slingr-stack/qa-test-drumr/tree/main/project-management-app/.agents/skills/frontend-hooks
Command: npx skills add https://github.com/slingr-stack/qa-test-drumr --skill frontend-hooks

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps you design, review, and use Drumr's headless frontend hooks without guessing how form state, table state, or action execution should be coordinated. It gives developers a clear path for building custom React interfaces that still preserve framework behavior, validation, refresh logic, and metadata-aware rendering.

Core Features & Use Cases

  • useDataForm: Manages single-model and composable multi-model forms, including fetch, submit, refresh, field errors, and array field operations.
  • useDataTable: Provides shared filtering, sorting, pagination, selection, and metadata-aware row rendering for custom table or list layouts.
  • useActionButton and useActionView: Handle object, model, and global actions with confirmation, inline parameter forms, workflow states, and refresh coordination.
  • Unified API hooks: Support raw or rich GraphQL operations for finding, creating, updating, deleting, refreshing, and executing actions.
  • Use case: A developer building a custom project dashboard can reuse one controller for a form, table, and action flow while keeping UI-specific rendering separate from framework state management.

Quick Start

Ask for help implementing or reviewing a Drumr frontend feature that uses useDataForm, useDataTable, or the unified action hooks.

Frequently Asked Questions about frontend-hooks

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

FAQPage Schema
How do I manage React form state and validation using TanStack hooks?

You can manage React form state and validation using the useDataForm hook, which handles single-model and composable multi-model forms, including fetch, submit, refresh, field errors, and array field operations.

What is the best way to build custom React tables with shared sorting and pagination?

The best way to build custom React tables with shared sorting and pagination is using the useDataTable hook, which provides shared filtering, selection, and metadata-aware row rendering for custom table layouts.

How do I handle global actions and confirmation workflows in a React frontend?

You handle global actions and confirmation workflows in a React frontend by applying useActionButton and useActionView, which manage inline parameter forms, workflow states, and refresh coordination for object and model actions.

Can I execute raw GraphQL queries for creating and updating records in React?

Yes, you can execute raw or rich GraphQL operations for creating, updating, deleting, and finding records in React by using the unified API hooks provided by the frontend-hooks system.

Does this headless controller pattern work for separating UI rendering from framework state?

Yes, this headless controller pattern works for separating UI rendering from framework state, allowing developers building custom interfaces to reuse controllers for forms, tables, and action flows while keeping rendering distinct.