skills.rest
naopensedoit2-design
naopensedoit2-designCOMMUNITY
Explore all skills by this author →
GitHub

fullstack-js

Guide full-stack JavaScript development with Drizzle schemas, Zod validation, and TanStack Query.

Updated Apr 25, 2026
Search Tags:#tanstack-query#drizzle-orm#zod-validation#wouter-routing#shadcn-forms#fullstack-architecture#tailwind-theming
One-click install
npx skills add https://github.com/naopensedoit2-design/Claramente-nao-sou-um-Escritor --skill fullstack-js-naopensedoit2-design
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: fullstack-js
Source: https://github.com/naopensedoit2-design/Claramente-nao-sou-um-Escritor/tree/main/.local/skills/fullstack-js
Command: npx skills add https://github.com/naopensedoit2-design/Claramente-nao-sou-um-Escritor --skill fullstack-js-naopensedoit2-design

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This skill removes ambiguity when building full-stack JavaScript apps by providing concrete, consistent rules for architecture, shared types, API validation, frontend patterns, and UI behavior.

Core Features & Use Cases

  • End-to-end structure: guide you to place the data model in shared/schema.ts, keep routes thin, and drive CRUD through a storage interface.
  • Type-safe data flow: require Drizzle + Zod insert schemas (createInsertSchema) to validate requests and strongly type frontend queries/mutations.
  • Predictable UI + UX constraints: enforce routing with wouter, form handling with shadcn useForm, TanStack Query v5 conventions, deterministic elevation/hover behavior, dark mode rules, and accessible stable data-testids.

Quick Start

Build your full-stack JavaScript feature by first defining the data model and insert schemas in shared/schema.ts, then updating server/storage.ts and server/routes.ts, and finally implementing the frontend page using wouter, shadcn useForm with zodResolver, and TanStack Query for fetching plus apiRequest for mutations.

Frequently Asked Questions about fullstack-js

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

FAQPage Schema
How do I build a full-stack JavaScript app with shared types between frontend and backend?▼

Full-stack JavaScript architecture uses a shared Drizzle schema in `shared/schema.ts` with Zod insert schemas to validate requests and strongly type frontend queries and mutations across the stack.

What is the best way to validate API requests using Drizzle ORM and Zod?▼

API request validation uses `createInsertSchema` from drizzle-zod to enforce typed schemas, keeping backend routes thin while driving CRUD operations through a typed storage interface.

How do I manage API data fetching and mutations with TanStack Query v5 in a full-stack app?▼

TanStack Query v5 conventions standardize frontend data fetching and mutations by using an `apiRequest` helper for mutations and applying standardized query invalidation to maintain state consistency.

Can I use wouter routing with shadcn forms and Zod validation?▼

Yes, frontend workflows combine wouter for routing with shadcn `useForm` integrated via `zodResolver` for Zod validation, ensuring predictable UI behavior across interactive states.

How do I enforce dark mode and hover elevation rules with Tailwind theming?▼

Tailwind theming constraints enforce deterministic elevation and hover behavior along with dark mode rules, requiring accessible stable `data-testid`s without forbidden file changes.

Do I need a storage interface for CRUD operations in a full-stack JavaScript architecture?▼

Yes, a typed storage interface in `server/storage.ts` is required to drive CRUD operations consistently, ensuring data modeling aligns with the shared Drizzle schema and validated routes.

Related Skills

Explore More Software Engineering Skills→
Chenm4Chenm4

drizzle

Design PostgreSQL schemas and migrations with Drizzle ORM for Node.js.

Community
Intermediate
minh1609minh1609

firebase-app-hosting-basics

Deploy and manage web apps on Firebase App Hosting with apphosting.yaml.

Community
Intermediate
locnbk2002locnbk2002
1

ui-styling

Style React interfaces with shadcn/ui components and Tailwind CSS.

Community
Intermediate
ehtbantonehtbanton

trpc-router-generator

Generate tRPC router files with Zod validation and CRUD procedures.

Community
Intermediate