api-contracts-and-zod-validation
API Contracts and Zod Validation
Generate Zod schemas with TypeScript type inference for forms, API routes, and Server Actions. Validate inputs in Server Actions or route handlers with runtime type checking.
Core Capabilities
1. Generate Zod Schemas from TypeScript Types
When creating API contracts or form validations:
- Analyze existing TypeScript interfaces or types
- Generate equivalent Zod schemas with proper validation rules
- Ensure bidirectional type compatibility (Zod -> TypeScript)
- Use
z.infer<typeof schema>for automatic type inference
2. Form Validation Schemas
To create form validation with Zod:
- Generate schemas for React Hook Form, Formik, or native forms
- Include field-level validation rules (min/max length, regex, custom validators)
- Support nested objects, arrays, and complex data structures
- Provide helpful error messages for validation failures
- Use
references/zod_patterns.mdfor common validation patterns
3. API Route and Server Action Validation
To add validation to API endpoints or Server Actions:
- Wrap handler logic with schema validation using
.parse()or.safeParse() - Return typed errors for validation failures
- Generate request/response schemas for API contracts
- Validate query parameters, body payloads, and route parameters
- Ensure type safety between client and server code
4. Schema Generation Script
Use scripts/generate_zod_schema.py to automate schema generation:
python scripts/generate_zod_schema.py --input types/entities.ts --output schemas/entities.ts
The script:
- Parses TypeScript interfaces/types
- Generates Zod schemas with appropriate validators
- Preserves JSDoc comments as descriptions
- Handles common patterns (optional fields, unions, enums)
Resource Files
scripts/generate_zod_schema.py
Automated TypeScript-to-Zod schema generator. Parses TypeScript AST and generates equivalent Zod schemas.
references/zod_patterns.md
Common Zod validation patterns including:
- String validation (email, URL, UUID, custom regex)
- Number constraints (min, max, positive, integer)
- Date validation and transformation
- Array and tuple validation
- Object shape validation
- Union and discriminated unions
- Optional and nullable fields
- Custom refinements and transforms
- Error message customization
assets/schema_templates/
Pre-built Zod schema templates:
form_schema_template.ts- Basic form validationapi_route_schema_template.ts- API route request/responseserver_action_schema_template.ts- Server Action input/outputentity_schema_template.ts- Database entity validation
Usage Workflow
For New API Routes
- Define request/response TypeScript types
- Generate Zod schemas using
scripts/generate_zod_schema.pyor templates - Add validation middleware to route handler
- Return typed validation errors on failure
For Server Actions
- Define input parameters as TypeScript types
- Create Zod schema for validation
- Use
.safeParse()at the beginning of the action - Return validation errors in action result
- Handle errors on the client side
For Forms
- Define form fields as TypeScript interface
- Generate Zod schema with field validators
- Integrate with form library (React Hook Form recommended)
- Display validation errors inline
Best Practices
- Always use
.safeParse()instead of.parse()to avoid throwing exceptions - Provide clear, user-friendly error messages
- Validate early (at API boundary or Server Action entry)
- Keep schemas colocated with routes/actions for maintainability
- Use
z.infer<typeof schema>for automatic TypeScript types - Document validation rules in schema comments
- Test edge cases (empty values, invalid formats, boundary conditions)
Integration with Worldbuilding App
Common use cases for worldbuilding applications:
- Entity creation forms: Validate character, location, faction data
- Relationship APIs: Ensure valid entity IDs and relationship types
- Timeline events: Validate dates, ordering, and event data
- Search/filter endpoints: Validate query parameters and filters
- Bulk operations: Validate arrays of entities or updates
- Import/export: Validate file formats and data structure
Consult references/zod_patterns.md for specific validation patterns applicable to worldbuilding entities.
More from hopeoverture/worldbuilding-app-skills
eslint-prettier-husky-config
This skill should be used when setting up code quality tooling with ESLint v9 flat config, Prettier formatting, Husky git hooks, lint-staged pre-commit checks, and GitHub Actions CI lint workflow. Apply when initializing linting, adding code formatting, configuring pre-commit hooks, setting up quality gates, or establishing lint CI checks for Next.js or React projects.
51testing-next-stack
Scaffolds comprehensive testing setup for Next.js applications including Vitest unit tests, React Testing Library component tests, and Playwright E2E flows with accessibility testing via axe-core. This skill should be used when setting up test infrastructure, generating test files, creating test utilities, adding accessibility checks, or configuring testing frameworks for Next.js projects. Trigger terms include setup testing, scaffold tests, vitest, RTL, playwright, e2e tests, component tests, unit tests, accessibility testing, a11y tests, axe-core, test configuration.
38markdown-editor-integrator
This skill should be used when installing and configuring markdown editor functionality using @uiw/react-md-editor. Applies when adding rich text editing, markdown support, WYSIWYG editors, content editing with preview, or text formatting features. Trigger terms include markdown editor, rich text editor, text editor, add markdown, install markdown editor, markdown component, WYSIWYG, content editor, text formatting, editor preview.
27form-generator-rhf-zod
This skill should be used when generating React forms with React Hook Form, Zod validation, and shadcn/ui components. Applies when creating entity forms, character editors, location forms, data entry forms, or any form requiring client and server validation. Trigger terms include create form, generate form, build form, React Hook Form, RHF, Zod validation, form component, entity form, character form, data entry, form schema.
23supabase-auth-ssr-setup
This skill should be used when configuring Supabase Auth for server-side rendering with Next.js App Router, including secure cookie handling, middleware protection, route guards, authentication utilities, and logout flow. Apply when setting up SSR auth, adding protected routes, implementing middleware authentication, configuring secure sessions, or building login/logout flows with Supabase.
18tailwind-shadcn-ui-setup
This skill should be used when setting up, configuring, or initializing Tailwind CSS (v3 or v4) and shadcn/ui for Next.js 16 App Router projects. Configure dark mode, design tokens, base layout with header/sidebar, accessibility defaults, and generate example components. Includes comprehensive setup automation, theme customization, and production-ready patterns. Use when the user requests "setup Tailwind", "configure shadcn/ui", "add dark mode", "initialize design system", or "setup UI framework" for Next.js projects.
17