skills.rest
KhaledMKhaled
KhaledMKhaledCOMMUNITY
Explore all skills by this author →
GitHub

fullstack-js

Standardize full-stack JavaScript development with shared schemas, CRUD flows, and UI rules.

Updated Dec 10, 2025
Search Tags:#react query#zod validation#fullstack javascript#drizzle schema#wouter routing#shadcn forms#ui styling guidelines
One-click install
npx skills add https://github.com/KhaledMKhaled/FodaStore --skill fullstack-js-khaledmkhaled
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: fullstack-js
Source: https://github.com/KhaledMKhaled/FodaStore/tree/main/.local/skills/fullstack-js
Command: npx skills add https://github.com/KhaledMKhaled/FodaStore --skill fullstack-js-khaledmkhaled

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

It removes inconsistency and rework when building a full-stack JavaScript app by standardizing architecture, typing, routing, data fetching, form handling, and UI behavior rules.

Core Features & Use Cases

  • Shared type-safe data modeling: Define the app data model first in shared/schema.ts, then derive insert/select schemas and types to keep frontend and backend consistent.
  • Reliable backend CRUD patterns: Centralize storage operations in server/storage.ts, keep routes thin in server/routes.ts, and validate request bodies with Zod schemas generated from the Drizzle models.
  • Predictable frontend UX and styling: Use wouter for routing, @tanstack/react-query for fetching/mutations with cache invalidation, shadcn useForm/Form patterns for forms, and the established hover/elevation, sidebar, layout, and dark-mode rules to maintain visual coherence.

Quick Start

Follow the architecture and type-validation order by first implementing shared/schema.ts, then updating server/storage.ts and server/routes.ts, and finally wiring the UI with wouter, TanStack Query, and shadcn forms while applying the hover/elevation and sidebar layout rules.

Frequently Asked Questions about fullstack-js

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

FAQPage Schema
How do I keep frontend and backend types consistent in a full-stack JavaScript app?▼

To keep frontend and backend types consistent in full-stack JavaScript, define your data model first in a shared schema file, then derive insert and select schemas to maintain type safety across the stack.

How do I validate API request bodies using Zod and Drizzle schemas?▼

You can validate API request bodies by generating Zod schemas directly from your Drizzle models using drizzle-zod. This ensures your backend route validation stays perfectly aligned with your database schema.

What is the best way to structure backend CRUD routes and storage operations?▼

The best way to structure backend CRUD operations is a storage-first design: centralize database operations in a storage file and keep your routes thin, separating data access from request handling.

How do I handle data fetching and cache invalidation with TanStack Query?▼

Handle data fetching and cache invalidation by using TanStack Query for both fetching and mutations. After mutations, invalidate the relevant query keys to ensure the UI reflects the updated database state.

Can I use wouter for routing and shadcn for forms in a full-stack JavaScript project?▼

Yes, you can use wouter for lightweight client-side routing and shadcn form patterns for UI. Together they provide predictable frontend UX, routing, and accessible form handling in full-stack JavaScript.

How do I maintain consistent UI styling and dark mode across full-stack JavaScript components?▼

Maintain consistent UI styling by applying deterministic constraints for hover, elevation, sidebar, and layout rules. This enforces theme-safe visual coherence across all interactive full-stack JavaScript components.

Related Skills

Explore More Software Engineering Skills→
jupremjuprem

project-initializer

Scaffold a TanStack Start project with NeonDB, Drizzle ORM, and tooling.

Community
Intermediate
thkim2015thkim2015

moai-platform-deployment

Deploy and host applications on Vercel, Railway, and Convex platforms.

Community
Advanced
damandeep611damandeep611

agentic-jumpstart-react

Provide React 19 patterns for TanStack Start apps with shadcn/ui and TanStack Query.

Community
Advanced
fgarofalo56fgarofalo56
6

trpc-api

Create end-to-end type-safe APIs with tRPC, Zod, and React Query.

Community
Advanced