skills.rest
promobase
promobaseOFFICIAL
Explore all skills by this author โ†’
GitHub

frontend

Generate React CRUD scaffolding with TypeScript components and routes.

Updated Aug 23, 2026
Search Tags:#automation#typescript#frontend#react#scaffold#crud#generator
One-click install
npx skills add https://github.com/promobase/openpromo --skill frontend-promobase
Or copy as Structured Prompt for Agentโ–ผ
Please help me install this Agent Skill.
Skill: frontend
Source: https://github.com/promobase/openpromo/tree/main/.claude/skills/frontend
Command: npx skills add https://github.com/promobase/openpromo --skill frontend-promobase

SYSTEM DOCUMENTATION & REQUIREMENTS

๐Ÿ’ก This Skill includes scripts (resource) components.

What problem does it solve?

Scaffold frontend scaffolding to quickly generate CRUD UI for a new entity, eliminating repetitive boilerplate work.

Core Features & Use Cases

  • Generates React components and wiring for CRUD operations based on an entity.
  • Integrates with an existing data_model scaffold to ensure consistent oRPC routes and project structure.
  • Use Case: when starting a new data model, run the scaffold to automatically create all UI scaffolding files and directory layout.

Quick Start

Run the scaffold script with the entity name to generate the CRUD UI scaffolding.

Frequently Asked Questions about frontend

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

FAQPage Schema
How do I generate React CRUD UI components for a new data model?โ–ผ

To generate React CRUD UI components, run the frontend scaffold script with your entity name. It outputs TypeScript files for queries hooks, routes, pages, tables, and create dialogs into predefined UI directories.

Do I need an existing data model before scaffolding frontend CRUD components?โ–ผ

Yes, scaffolding frontend CRUD components requires an existing data_model scaffold. This prerequisite ensures consistent oRPC routes and project structure for the generated React UI files.

What is frontend scaffolding for CRUD operations in TypeScript?โ–ผ

Frontend CRUD scaffolding is the automated generation of boilerplate TypeScript and React code for creating, reading, updating, and deleting data entities, reducing repetitive manual UI wiring work.

Can I use this scaffold to generate tables and create dialogs for React entities?โ–ผ

Yes, the scaffold generates complete React UI wiring for entities, specifically including data tables for display and create dialogs for input, alongside queries hooks and routes.

What's the best way to automate boilerplate UI creation for React entity CRUD?โ–ผ

The best way to automate React entity CRUD boilerplate is using a scaffolding script that reads an existing data model and generates consistent TypeScript components and routes automatically.

Related Skills

Explore More Software Engineering Skillsโ†’
clover-stormclover-storm

scaffold-endpoint

Generate backend routes, controllers, services, and TypeScript types from API specs.

Community
Intermediate
themesbergthemesberg
408

shadcn-ui

Provides reusable React components styled with Tailwind for building accessible interfaces.

Official
Advanced
xyqyearxyqyear

fullstack

Scaffold a full-stack project with a FastAPI backend and React frontend.

Community
Advanced
jhlee0409jhlee0409

create-component

Scaffold React components with TypeScript interfaces and security patterns.

Community
Basic