skills.rest
allenlin90
allenlin90COMMUNITY
Explore all skills by this author →
GitHub

frontend-tech-stack

Standardizes React frontend stacks with Vite, Tailwind, and TanStack.

1|Updated Jan 2, 2025
Search Tags:#workflow#architecture#frontend#react#vite#tailwind#tanstack-router
One-click install
npx skills add https://github.com/allenlin90/eridu-services --skill frontend-tech-stack
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-tech-stack
Source: https://github.com/allenlin90/eridu-services/tree/main/.agent/skills/frontend-tech-stack
Command: npx skills add https://github.com/allenlin90/eridu-services --skill frontend-tech-stack

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Frontend teams often suffer from inconsistent tech stacks and boilerplate, leading to onboarding friction and wasted development time.

Core Features & Use Cases

  • Standardized tech stack: Official set of technologies and versions for frontend apps (React 19, Vite 7, Tailwind 4, TanStack Router 1.x, TanStack Query 5.x, and i18n guidelines).
  • Project structure guidance: Recommended folder layout and feature-based architecture to keep code organized and scalable.
  • Configuration & best practices: Provided examples for Vite and Tailwind integration, routing and state management conventions.

Quick Start

Create a new frontend project using the prescribed stack and initialize it with the standard structure.

Frequently Asked Questions about frontend-tech-stack

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

FAQPage Schema
What is the recommended frontend tech stack for standardizing React project setups?▼

The recommended frontend tech stack standardizes React-based projects using React 19, Vite 7, Tailwind 4, TanStack Router 1.x, and TanStack Query 5.x to ensure consistent setup across teams.

How do I bootstrap a new React project with Vite and TanStack Router?▼

To bootstrap a React project with Vite and TanStack Router, initialize a new project using the prescribed stack and set it up with the standard feature-based folder structure and tool configurations.

Does this frontend architecture standardize routing and state management conventions?▼

Yes, the frontend architecture standardizes routing and state management conventions by enforcing TanStack Router and TanStack Query guidelines to keep code organized and scalable across teams.

What's the best way to structure a scalable React app using Tailwind v4 and TanStack Query?▼

The best way to structure a scalable React app is to follow the recommended folder layout and feature-based architecture guidelines provided, ensuring organized code integration with Tailwind v4 and TanStack Query.

Can I use this standardized stack for onboarding new developers to an existing React codebase?▼

Yes, you can use this standardized stack for onboarding new developers to existing React codebases, as it provides architectural guidelines and configuration examples to reduce onboarding friction.

Why do I need to standardize frontend tool versions like Vite 7 and Tailwind 4 across teams?▼

Standardizing frontend tool versions like Vite 7 and Tailwind 4 eliminates inconsistent tech stacks and boilerplate, preventing wasted development time and reducing onboarding friction across teams.

Related Skills

Explore More Software Engineering Skills→
lpjhelderlpjhelder

forge-setup

Install and configure kronon-forge with Node.js and npm.

Community
Intermediate
fyndxfyndx
1

expo-deployment

Deploy Expo applications to iOS, Android, and web via EAS.

Official
Advanced
kaiomaced0kaiomaced0

tanstack-query

Fetch, cache, and update data with TanStack Query hooks.

Community
Intermediate
VoTruongDanhVoTruongDanh

state-management-expert

Guide React state management choices across Redux, Zustand, TanStack Query, and Context API.

Community
Advanced