skills.rest
reliant-labs
reliant-labsOFFICIAL
Explore all skills by this author →
WebsiteGitHub

pages

Scaffold typed CRUD pages from proto entities and RPCs into Next.js App Router.

4|1|Updated Apr 12, 2026
Search Tags:#code generation#protobuf#nextjs#zustand#crud#react query#tailwind v4
One-click install
npx skills add https://github.com/reliant-labs/forge --skill pages-reliant-labs
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: pages
Source: https://github.com/reliant-labs/forge/tree/main/internal/templates/project/skills/forge/frontend/pages
Command: npx skills add https://github.com/reliant-labs/forge --skill pages-reliant-labs

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill eliminates the repetitive, error-prone work of wiring up a complete typed CRUD page across your frontend by giving you a mechanical, end-to-end checklist from proto definition through UI route verification.

Core Features & Use Cases

  • Proto-to-UI CRUD generation: defines entities and RPCs, then runs generation to produce CRUD handler stubs and typed React Query hooks tied to your service methods.
  • Consistent frontend patterns: builds a Next.js App Router page using React Query for server state, Zustand only for client-only UI state, and a component-library-first approach for tables, inputs, cards, and buttons.
  • Production-grade verification: checks loading/error flows and validates visually using both accessibility-aware snapshots and pixel-accurate screenshots.

Quick Start

Ask the skill to scaffold a typed CRUD page for your domain’s users by generating hooks from your proto service and creating app/users/page.tsx wired to those hooks.

Frequently Asked Questions about pages

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

FAQPage Schema
How do I scaffold typed CRUD pages from protobuf definitions in Next.js?▼

Scaffolding typed CRUD pages from protobuf definitions in Next.js involves generating React Query hooks tied to your proto service RPCs, then wiring them into App Router pages. This Skill automates that end-to-end workflow, producing consistent list, create, get, update, and delete UI flows.

When should I use Zustand vs React Query for state management in a generated CRUD app?▼

Use React Query for server-state management and Zustand for client-only UI state in a generated CRUD app. This Skill enforces that boundary by wiring React Query as the source of truth for server data while restricting Zustand to local UI interactions.

How do I generate React Query hooks from proto service RPCs for an admin dashboard?▼

Generating React Query hooks from proto service RPCs for an admin dashboard requires a forge-driven workflow that reads your typed protobuf messages and produces typed CRUD handler stubs. This Skill executes that process, connecting the hooks directly to your service methods.

Can I use Tailwind v4 with Next.js App Router to build auth-gated CRUD pages?▼

Yes, you can use Tailwind v4 with Next.js App Router to build auth-gated CRUD pages. This Skill scaffolds the UI using a component-library-first approach, applying Tailwind v4 styling to tables, inputs, and buttons while enforcing auth gates and loading or error states.

What is the best way to verify loading and error states in a typed frontend CRUD flow?▼

The best way to verify loading and error states in a typed frontend CRUD flow is through accessibility-aware snapshots and pixel-accurate screenshots. This Skill performs production-grade visual validation to ensure your generated pages handle all UI states correctly.

Does this CRUD page generation approach work with create(Schema, payload) for protobuf message construction?▼

Yes, this CRUD page generation approach works with create(Schema, payload) for protobuf message construction. The Skill requires typed protobuf message construction via create(Schema, payload) to accurately scaffold the resulting React Query hooks and Next.js UI.

Related Skills

Explore More Software Engineering Skills→
ColdBoxColdBox

quick

Define Active Record-style entities and manage CRUD operations for ColdBox Quick models.

Official
Intermediate
akashp1712akashp1712
1

next-loading-skeleton

Generate loading.tsx files with shadcn/ui Skeleton components for Next.js App Router pages.

Community
Intermediate
oakossoakoss
14

frontend-builder

Build React and Next.js frontends with Next.js App Router, Tailwind CSS, and shadcn/ui.

Official
Advanced
nabinkhair42nabinkhair42

product-stack

Blueprint a scalable Next.js app architecture using a 9-layer pattern.

Community
Advanced