skills.rest
Aurelian1974
Aurelian1974COMMUNITY
Explore all skills by this author →
GitHub

ui-step-wizard

Implements React multi-step form wizards, printable document layouts, and audit trail timelines.

Updated Aug 18, 2026
Search Tags:#typescript#react#print layout#audit trail#erp#zod validation#multi-step form
One-click install
npx skills add https://github.com/Aurelian1974/ERPEnterprise --skill ui-step-wizard-aurelian1974
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-step-wizard
Source: https://github.com/Aurelian1974/ERPEnterprise/tree/main/.github/skills/ui-step-wizard
Command: npx skills add https://github.com/Aurelian1974/ERPEnterprise --skill ui-step-wizard-aurelian1974

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires react, react-hook-form, zod, @tanstack/react-query, date-fns, lucide-react.

What problem does it solve? Building ERP interfaces requires repetitive UI patterns: multi-step forms with per-step validation, print-ready documents like invoices, and audit history timelines. This Skill provides ready-to-use React component implementations for all three, eliminating the need to write them from scratch. ## Core Features & Use Cases - StepWizard: Multi-step form wizard with per-step Zod schema validation, react-hook-form integration, progress indicator with checkmarks, and back/next navigation with final submit. - PrintLayout: Printable document wrapper using @media print CSS that hides UI chrome, sets A4 page dimensions, prevents table page-breaks, and includes a complete invoice template example. - AuditTrail: Timeline component fetching audit log entries via TanStack Query, showing user, timestamp, and old-to-new value diffs with visual strikethrough highlighting. - Use Case: Build an ERP invoice creation flow where users fill a 3-step validated wizard, submit the invoice, view it in a print-ready layout, and inspect its modification history in a timeline. ## Quick Start Use the ui-step-wizard skill to create a multi-step invoice form with Zod validation, a printable invoice layout, and an audit trail timeline.

Frequently Asked Questions about ui-step-wizard

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

FAQPage Schema
How do I build a multi-step form with validation in React?▼

Use the StepWizard component with an array of steps, each defining a Zod schema and component. It validates only the current step's fields via safeParse before advancing, mapping errors back into react-hook-form with setError.

How to make a React page printable with CSS?▼

Wrap content in the PrintLayout component, which injects @media print styles hiding navigation and UI elements, sets A4 page size with margins, and prevents tables from breaking across pages using page-break-inside rules.

Does StepWizard work with react-hook-form and Zod?▼

Yes, StepWizard accepts a UseFormReturn instance from react-hook-form and an optional ZodSchema per step. On next, it runs safeParse against current form values and triggers field-level errors for invalid inputs.

How do I display an audit log timeline in React?▼

Use the AuditTrail component with entityType and entityId props. It fetches entries from the audit API endpoint using TanStack Query and renders a vertical timeline showing user, timestamp, action, and old-to-new value differences.

Why do tables split across pages when printing from the browser?▼

Browsers break tables at page boundaries by default. The PrintLayout styles apply page-break-inside: avoid to tables and rows, and use display: table-header-group on thead so headers repeat on every printed page.

Related Skills

Explore More Software Engineering Skills→
endorphin-aiendorphin-ai
3

react

Develop React frontend applications with TypeScript, Vite, and TanStack Query.

Official
Advanced
akkpolakkpol

pdf-agent

Generate Thai-supported PDF documents for ERP quotations, invoices, receipts, and tax invoices.

Community
Advanced
AbdullahMalik17AbdullahMalik17
9

styling-with-shadcn

Build accessible Next.js interfaces with shadcn/ui components, forms, tables, and dark mode.

Community
Intermediate
mgd34msumgd34msu
4

yup

Validate JavaScript and TypeScript data structures using Yup schemas.

Community
Intermediate