skills.rest
anicdh
anicdhCOMMUNITY
Explore all skills by this author →
GitHub

typescript-react

Standardize React 18 and TypeScript frontend development with Vite, React Query, Zustand, and Zod.

1|Updated Mar 30, 2026
Search Tags:#typescript#react#zustand#react-query#frontend-patterns#form-validation
One-click install
npx skills add https://github.com/anicdh/agstack --skill typescript-react-anicdh
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: typescript-react
Source: https://github.com/anicdh/agstack/tree/main/.claude/skills/typescript/typescript-react
Command: npx skills add https://github.com/anicdh/agstack --skill typescript-react-anicdh

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Frontend teams often struggle to maintain consistency across React 18 + TypeScript projects, leading to boilerplate, inconsistent state management, and UX gaps.

Core Features & Use Cases

  • React 18 + TypeScript + Vite patterns for scalable frontend architecture.
  • State management with React Query for data fetching, Zustand for client state, and form handling with react-hook-form + Zod.
  • Component structure guidelines and UX rules (design system, responsive layouts, routing) to accelerate feature delivery.

Quick Start

Scaffold a new React 18 + TypeScript module following these patterns and implement a sample feature using React Query, Zustand, and zod-based forms.

Frequently Asked Questions about typescript-react

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

FAQPage Schema
How do I structure React 18 and TypeScript projects to reduce boilerplate?▼

Standardize React 18 and TypeScript projects using Vite patterns for scalable architecture. This enforces strict TS usage and component structure guidelines to reduce boilerplate and ensure consistency across teams.

What's the best way to manage state in React with Zustand and React Query?▼

Use React Query for data fetching and Zustand for client state management. This pattern separates server and client state in React 18 environments, ensuring scalable and consistent data handling across your application.

How do I handle form validation in React with Zod and react-hook-form?▼

Handle form validation by integrating Zod with react-hook-form. This approach enforces robust form handling and schema validation directly within your React 18 and TypeScript components.

Can I use these frontend patterns to enforce UX guidelines and routing?▼

Yes, these frontend patterns apply UX rules from the design system, responsive layouts, and routing with React Router. They standardize component structure to accelerate feature delivery and maintain UI consistency.

Do I need Vite to scaffold a scalable React and TypeScript module?▼

Vite is used as the standard build tool to scaffold React 18 and TypeScript modules. It establishes the foundation for scalable frontend architecture and implements features using React Query, Zustand, and Zod-based forms.

Related Skills

Explore More Software Engineering Skills→
LeoTechProLeoTechPro
1

artifacts-builder

Set up React, TypeScript, Vite, Tailwind CSS, and shadcn/ui projects and bundle them into a single HTML file.

Community
Intermediate
tomas-utomas-u
1

technical

Guide full-stack architecture decisions for React, Node.js, SQL, and NoSQL systems.

Community
Advanced
rattamnoonrattamnoon

tailwind-css-patterns

Applies Tailwind CSS utility patterns to React, Vue, and Svelte components.

Community
Intermediate
voidrotvoidrot

nextjs-app-router-patterns

Provide guidelines for developing Next.js applications using the App Router.

Community
Intermediate