skills.rest
Hinten
HintenCOMMUNITY
Explore all skills by this author →
GitHub

schema-driven-crud

Builds schema-driven CRUD screens with TableView and ObjectView for Firestore collections in Next.js.

Updated May 13, 2026
Search Tags:#next.js#zod#playwright#e2e testing#crud#firestore#react-hook-form
One-click install
npx skills add https://github.com/Hinten/next_erp --skill schema-driven-crud-hinten
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: schema-driven-crud
Source: https://github.com/Hinten/next_erp/tree/main/.claude/skills/schema-driven-crud
Command: npx skills add https://github.com/Hinten/next_erp --skill schema-driven-crud-hinten

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Adding a new entity to the Delfrance ERP normally means hand-writing list, create, and edit pages plus their e2e tests and CI wiring. This Skill turns a single Zod schema into the full CRUD surface, eliminating duplicated boilerplate and the recurring test failures that come with it. ## Core Features & Use Cases - Schema-to-UI generation: Derives columns, inputs, labels, and validation for TableView (list) and ObjectView (create/edit) directly from a Zod schema with .describe() labels and enum .meta({ labels }). - Complete page recipe: Covers the collection handle via defineCollection, list/create/edit pages, sidebar navigation entry, and permission gating with BigInt permission bits. - E2e and CI conventions: Defines the spec naming pattern (<x>.cadastros.e2e.spec.ts / <x>.vendas.e2e.spec.ts), seeding helpers, UI-driver helpers, and documents that no new CI workflow is needed. - Use Case: When asked to "create the suppliers registration screen", follow the recipe to add the schema, collection, three pages, nav entry, and a seeded e2e spec modeled on the canonical clientes example. ## Quick Start Ask the assistant to create a new CRUD screen for a Firestore collection, for example: "Create the suppliers registration screen with a TableView list and ObjectView form following the schema-driven CRUD pattern."

Frequently Asked Questions about schema-driven-crud

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

FAQPage Schema
How do I create a CRUD page from a Zod schema in Next.js?▼

Define a Zod object schema where every field has a .describe() label, create a collection handle with defineCollection, then render TableView for the list page and ObjectView for create and edit pages. Columns, inputs, labels, and validation are derived automatically from the schema.

How do I add e2e tests for a Firestore CRUD screen with Playwright?▼

Create a spec named <x>.cadastros.e2e.spec.ts or <x>.vendas.e2e.spec.ts; the filename suffix selects the Playwright project and CI workflow automatically. Seed 5-10 documents with a run-scoped prefix in beforeAll and reuse the table-view and object-view helper functions for filters and form fields.

Why does Firestore reject my form data with 'Unsupported field value: undefined'?▼

The Firebase JS SDK rejects undefined values in setDoc and addDoc. Schema optional fields must use .nullable().default(null) instead of .optional() alone, so forms always produce null rather than undefined.

When should I not use TableView and ObjectView for a form?▼

Avoid the generic components when the form needs cross-field logic, sub-collections edited on the same screen, or wizard flows. For those cases, write a custom react-hook-form form using the 3-generic useForm<Input, Context, Output> pattern.

Why does a newly created row not appear in the TableView list?▼

A filtered, searched, or custom-sorted list runs a one-shot frozen query and does not re-fetch after a create. In tests, wait for the document to commit, reload the page, or click the update-monitor's Atualizar banner before asserting on the list.

Related Skills

Explore More Software Engineering Skills→
AgentientAgentient
2

zod-firestore-type-safety

Validate Firestore document reads and writes with Zod schemas via withConverter.

Official
Intermediate
xbg-solutionsxbg-solutions

firebase-app-hosting-basics

Deploy and manage Next.js and Angular apps on Firebase App Hosting.

Official
Advanced
terna-ccterna-cc

sentry-setup

Configure Sentry SDK and integrate Pino for automated log forwarding.

Official
Basic
lety-ailety-ai

fe-zod-form

Generates Zod schemas and react-hook-form setups for Lety 2.0 frontend forms.

Official
Intermediate