---

name: frontend-tech-stack description: Provides standards for the frontend application technology stack. This skill should be used when setting up new frontend projects or upgrading existing ones with React 19, Vite, and Tailwind v4.

Frontend Tech Stack

This skill defines the standard technology stack for all frontend applications (erify_creators, erify_studios, etc.) in the project.

Core Core Technologies

Project Structure

Frontend apps should follow this structure:

Copysrc/
├── routes/             # TanStack Router file-based routes
│   ├── __root.tsx      # Root layout
│   ├── index.tsx       # Homepage
│   └── feature.tsx     # Feature route
├── components/         # App-specific components
├── hooks/              # App-specific hooks
├── lib/                # Utilities and API clients
├── main.tsx            # Entry point
└── index.css           # Global styles (Tailwind imports)

Configuration

Vite Config ("vite.config.ts")

Ensures Tailwind v4 and TanStack Router integration:

Copyimport tailwindcss from '@tailwindcss/vite';
import { tanstackRouter } from '@tanstack/router-plugin/vite';
import react from '@vitejs/plugin-react';
import { defineConfig } from 'vite';

export default defineConfig({
  plugins: [
    tanstackRouter(),
    react(),
    tailwindcss(),
  ],
});

Tailwind Config (v4)

Tailwind v4 uses CSS-first configuration. Your index.css should look like:

Copy@import "tailwindcss";

@theme {
  --font-sans: "Inter", sans-serif;
  /* Define custom tokens here */
}

Checklist

• Project is initialized with Vite + React + TypeScript.
• Uses Tailwind CSS v4 plugin.
• Uses TanStack Router for navigation.
• Depends on workspace packages (@eridu/ui, @eridu/api-types) where appropriate.