skills.rest
WayneBanksy
WayneBanksyCOMMUNITY
Explore all skills by this author →
GitHub

staff-product-engineer

Develops typed React and Next.js components with tRPC, Zod, TanStack Query, and Zustand.

1|Updated Apr 27, 2026
Search Tags:#typescript#testing#react#drizzle#zod#nextjs#tRPC
One-click install
npx skills add https://github.com/WayneBanksy/wayneys_claude --skill staff-product-engineer-waynebanksy
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: staff-product-engineer
Source: https://github.com/WayneBanksy/wayneys_claude/tree/main/skills/staff-product-engineer
Command: npx skills add https://github.com/WayneBanksy/wayneys_claude --skill staff-product-engineer-waynebanksy

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires react, next, typescript, trpc, zod, drizzle-orm, vitest, playwright, and includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill streamlines the process of building and maintaining complex React and Next.js applications, ensuring high-quality, accessible, and maintainable web code.

Core Features & Use Cases

  • Component Development: Create typed, accessible React components for web interfaces.
  • API Integration: Design and implement type-safe API routes using tRPC and Zod schemas.
  • State Management: Manage server and client state efficiently with TanStack Query and Zustand.
  • Form Handling: Build robust forms with React Hook Form and integrated validation.
  • Database Schema: Define database models using Drizzle ORM with clear relationships.
  • Testing & Deployment: Write unit and end-to-end tests with Vitest and Playwright; deploy on Vercel.

Quick Start

Build a Next.js page with a form that submits data via tRPC, validates with Zod, and displays a success message.

Frequently Asked Questions about staff-product-engineer

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

FAQPage Schema
How do I build a type-safe full-stack React application with Next.js?▼

Build a type-safe full-stack React application by using Next.js with tRPC to connect typed API routes and Zod schemas for runtime validation. This approach ensures end-to-end type safety across server and client boundaries.

What's the best way to manage database schemas in a type-safe Next.js project?▼

Define database schemas in a type-safe Next.js project using Drizzle ORM. It allows you to create clear relational database models directly in TypeScript, ensuring your queries are fully typed.

How do I handle form validation and state in a Next.js application?▼

Handle form validation and state in a Next.js application by combining React Hook Form for form management with Zod schemas for validation. TanStack Query and Zustand can manage server and client state efficiently.

Does this full-stack TypeScript workflow support automated testing and deployment?▼

Yes, this full-stack TypeScript workflow supports automated testing and deployment. You can write unit tests with Vitest and end-to-end tests with Playwright, then deploy your Next.js application directly on Vercel.

Why should I use tRPC and Zod for API integration instead of standard REST APIs?▼

Use tRPC and Zod for API integration to create type-safe API routes without manual code generation. tRPC ensures the client and server share identical TypeScript types, while Zod validates inputs at runtime, preventing schema mismatches.

Can I create accessible React components using this TypeScript development setup?▼

Yes, you can create accessible React components using this TypeScript development setup. It provides workflows specifically designed to build typed, accessible React components for scalable web interfaces.

Related Skills

Explore More Software Engineering Skills→
januarfontijanuarfonti
10

javascript-typescript

Configure JavaScript/TypeScript projects with ES6+ standards and TypeScript compiler options.

Community
Advanced
sburlsburl
26

deploy

Deploy projects to Railway, Vercel, or GitHub Pages with automatic platform detection.

Community
Advanced
ionmidoriionmidori

modern-state-management

Implement TanStack Query and Zustand state management patterns in Next.js applications.

Community
Intermediate
ArieGoldkinArieGoldkin
10

type-safety-validation

Validate runtime data with Zod and build type-safe APIs with tRPC.

Community
Intermediate