skills.rest
ouzayr
ouzayrCOMMUNITY
Explore all skills by this author →
GitHub

fullstack-js

Build full-stack JavaScript apps with drizzle-zod, wouter, react-hook-form, react-query, and Tailwind CSS.

Updated Jun 19, 2018
Search Tags:#typescript#web development#frontend#drizzle#javascript#backend#fullstack
One-click install
npx skills add https://github.com/ouzayr/Utilities --skill fullstack-js
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: fullstack-js
Source: https://github.com/ouzayr/Utilities/tree/main/DailyPlanner/.local/skills/fullstack-js
Command: npx skills add https://github.com/ouzayr/Utilities --skill fullstack-js

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill provides comprehensive guidelines and best practices for developing modern, efficient, and maintainable full-stack JavaScript applications, ensuring consistency and quality across the entire development lifecycle.

Core Features & Use Cases

  • Architecture Guidance: Follows modern web patterns, prioritizing frontend logic and minimizing backend responsibilities.
  • Data Modeling: Enforces strong typing and consistency with drizzle-zod for seamless frontend-backend data flow.
  • Frontend Development: Leverages wouter for routing, react-hook-form (via shadcn) for forms, and @tanstack/react-query for data fetching.
  • Styling & Theming: Integrates Tailwind CSS with specific rules for dark mode, visual style, and component theming.
  • Use Case: Develop a new feature for an e-commerce platform, ensuring all data is validated, forms are user-friendly, and the UI is responsive and accessible across different themes.

Quick Start

Use the fullstack-js skill to create a new data model in shared/schema.ts for a 'product' entity with 'name' and 'price' fields.

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 TypeScript and Drizzle ORM?▼

Use a standardized framework that integrates drizzle-zod for data modeling, wouter for routing, and react-query for fetching. This approach enforces strong typing and modern web patterns across the full-stack JavaScript application lifecycle.

What is the best way to manage frontend-backend data validation in a TypeScript web app?▼

Use drizzle-zod for data validation to enforce strong typing and consistency. This enables seamless data flow between backend APIs and frontend components without manual schema duplication across your JavaScript application.

Can I use wouter and react-hook-form together for frontend routing and forms?▼

Yes, wouter and react-hook-form work together. The framework leverages wouter for lightweight frontend routing and react-hook-form via shadcn for accessible, user-friendly form handling in full-stack JavaScript applications.

How do I set up Tailwind CSS dark mode and component theming for a web application?▼

Set up Tailwind CSS dark mode and component theming by applying specific styling rules integrated into the framework. This ensures your application UI remains responsive and accessible across different visual themes.

Does this full-stack JavaScript framework minimize backend API responsibilities?▼

Yes, the framework minimizes backend API responsibilities by prioritizing frontend logic. It follows modern web patterns to ensure consistency and quality while reducing backend overhead in full-stack JavaScript development.

How do I create a new data model for a product entity using drizzle-zod?▼

Define your schema in shared/schema.ts to create a data model. For a product entity, add name and price fields using drizzle-zod to enforce strong typing and validation consistency across the full-stack JavaScript application.

Related Skills

Explore More Software Engineering Skills→
julianromlijulianromli
141

javascript-typescript

Guide TypeScript configuration and patterns for scalable JavaScript applications.

Community
Advanced
djnsty23djnsty23
2

deploy

Deploy and configure CI/CD workflows for Vercel, Supabase, and GitHub Actions.

Community
Advanced
tenequmtenequm
32

styling-with-tailwind

Apply Tailwind CSS utility classes and shadcn/ui patterns to style React interfaces.

Community
Intermediate
flaviogragnolatiflaviogragnolati

nextjs-app-router

Automates tRPC stack setup for Next.js App Router applications with Prisma and NextAuth.js integration.

Community
Advanced