skills.rest
slingr-stack
slingr-stackOFFICIAL
Explore all skills by this author →
WebsiteGitHub

frontend-components

Build Drumr frontend screens with DataForm, DataTable, and toolbar components.

Updated Sep 16, 2025
Search Tags:#frontend#react#workflows#toolbar#datatable#dataform#ant-design
One-click install
npx skills add https://github.com/slingr-stack/qa-test-drumr --skill frontend-components-slingr-stack
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-components
Source: https://github.com/slingr-stack/qa-test-drumr/tree/main/project-management-app/.agents/skills/frontend-components
Command: npx skills add https://github.com/slingr-stack/qa-test-drumr --skill frontend-components-slingr-stack

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill removes the guesswork from building Drumr frontend screens by directing you to the framework's approved UI components instead of raw implementation details.

Core Features & Use Cases

  • Form Rendering: Use DataForm and DataField to build metadata-driven forms with validation, refresh behavior, and custom layouts.
  • Data Grids and Actions: Use DataTable and the toolbar namespace to create sortable tables, filters, row actions, bulk actions, and navigation controls.
  • Display and Workflow Support: Use DataComponent for read-only field rendering, action buttons for backend execution, and workflow components for long-running process feedback.
  • Use Case: A product team can use this Skill to assemble a full CRUD screen with a form, table, action buttons, and workflow progress without importing low-level UI primitives.

Quick Start

Ask for a Drumr frontend implementation that uses DataForm, DataTable, toolbar actions, and workflow UI for the target screen while avoiding raw Ant Design components.

Frequently Asked Questions about frontend-components

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

FAQPage Schema
How do I build a Drumr frontend screen without importing raw Ant Design components?▼

To build a Drumr frontend screen without raw Ant Design, use framework-managed UI components like DataForm and DataTable. These components handle metadata-driven rendering, validation, and execution states automatically, removing the need for low-level UI primitives.

What is the best way to create a metadata-driven form with validation in a React application?▼

The best way to create a metadata-driven form is using the DataForm and DataField components. They manage form rendering, validation, and refresh behavior automatically based on metadata, eliminating manual layout and state management work.

How do I add sortable data grids with row actions and bulk operations to my frontend?▼

You can add sortable data grids with row and bulk actions by using the DataTable component alongside the toolbar namespace. They provide built-in filters, sorting, and navigation controls for managing data directly within the UI.

Can I display workflow progress and long-running process feedback in my custom views?▼

Yes, you can display workflow progress in custom views using dedicated workflow components. These components provide visual feedback for long-running backend processes and action button execution states without requiring custom status polling.

Does this approach support building a full CRUD screen with forms, tables, and action buttons together?▼

Yes, this approach supports building complete CRUD screens by combining DataForm, DataTable, and toolbar actions. You can assemble forms, tables, and action buttons cohesively while the framework handles permissions, refresh, and execution states.

Do I need to manually handle permissions and execution states when using framework components?▼

No, you do not need to manually handle permissions and execution states. Framework-managed components like DataForm and DataTable consistently integrate validation, permissions, and execution state handling directly through metadata-driven configuration.

Related Skills

Explore More Software Engineering Skills→
Quanby-IT-SolutionsQuanby-IT-Solutions
2

orpc-contracts

Define API contracts and endpoints using oRPC contracts for NestJS and Next.js.

Official
Advanced
slingr-stackslingr-stack

backend-actions

Define Drumr backend action contracts for read and write operations.

Official
Advanced
tonehqtonehq
11

frontend_tables

Generates Tone frontend table pages with CustomTable server-side filtering, sorting, and pagination using React Hook data fetching.

Official
Advanced
Lev-itLev-it

gpt-taste

Generate creative UI designs with Python randomization, AIDA structure, and GSAP animations.

Official
Advanced