skills.rest
asmortongpt
asmortongptCOMMUNITY
Explore all skills by this author →
GitHub

frontend-development

Bootstrap React 18+ frontend projects with Vite, Tailwind, and TypeScript.

Updated Aug 23, 2026
Search Tags:#typescript#frontend#react#vite#tailwind#zustand#tanstack-query
One-click install
npx skills add https://github.com/asmortongpt/Fleet-AzureDevOps --skill frontend-development-asmortongpt
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-development
Source: https://github.com/asmortongpt/Fleet-AzureDevOps/tree/main/.claude/skills/frontend-development
Command: npx skills add https://github.com/asmortongpt/Fleet-AzureDevOps --skill frontend-development-asmortongpt

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve?

Modern frontend projects are complex to bootstrap, standardize, and maintain, leading to inconsistent architectures and long setup times.

Core Features & Use Cases

  • Patterns for React 18+ with TypeScript, Vite, and Tailwind CSS.
  • State management and data fetching with Zustand and TanStack Query.
  • Testing, accessibility, and performance best practices, plus deployment-ready configurations.

Quick Start

Create a new React + TypeScript project with Vite, then apply the recommended tooling and patterns to start building scalable, accessible UIs.

Frequently Asked Questions about frontend-development

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

FAQPage Schema
How do I bootstrap a React project with Vite, TypeScript, and Tailwind CSS?▼

React state management with Zustand provides lightweight global stores, while Tanstack Query handles server state and data fetching, together creating scalable architectures that separate client and server state for fast iterations.

What is the best way to structure a scalable frontend architecture with TypeScript?▼

A scalable frontend architecture uses TypeScript typings, best-practice templates, and pattern definitions to standardize projects, ensuring React 18+ compatibility and consistent tooling across Vite, Tailwind, and state management libraries.

Does this frontend development approach work for React 18+ and Vite?▼

Yes, this approach explicitly supports React 18+ compatibility and Vite tooling, providing starter configurations and performance optimizations tailored for modern TypeScript projects requiring fast iterations and deployment-ready defaults.

How do I set up testing and accessibility best practices for a Vite and React application?▼

Testing and accessibility best practices are applied through predefined templates and configurations, ensuring your Vite and React application meets performance optimizations and deployment-ready standards without manual setup complexity.

Can I use Zustand and Tanstack Query together for state management in React?▼

Using Zustand and Tanstack Query together is a recommended pattern, where Zustand manages client state and Tanstack Query handles server data fetching, ensuring scalable architectures and fast iterations in TypeScript projects.

Related Skills

Explore More Software Engineering Skills→
GemachDAOGemachDAO
4

gdex-ui-install-setup

Scaffold a React or Next.js project with a GDEX SDK provider.

Official
Intermediate
Marcus-Mok-GHMarcus-Mok-GH

optimization-phase

Validate production readiness through performance, accessibility, security, and code quality checks.

Community
Advanced
OpenAEC-FoundationOpenAEC-Foundation
6

react-agents-project-scaffolder

Scaffold a React project with Vite, TypeScript, routing, linting, and testing.

Official
Advanced
ggombeeggombee
13

react-nextjs-app

Implement a convention-based file structure for Next.js applications.

Community
Intermediate