Skip to main content
this-project ThisProject development skill for building enterprise React applications with TanStack Router, TanStack Query, Zustand, shadcn/ui, Tailwind CSS 4.1, and Azure MSAL authentication. Use this skill when writing, reviewing, or generating code for this project to ensure consistent patterns, conventions, and best practices.
Ir para a instalação Skills Marketplace Descubra e explore skills de IA criadas pela comunidade.
Instalar com Codex ou Claude Copie este prompt, cole no Codex, Claude ou outro assistente e deixe que ele revise a página da skill e instale para você.
Mostrar detalhes do prompt Um comando direto ignora o prompt de revisão. Verifique a origem antes de executá-lo.
npx skills add https://github.com/devlinduldulao/tanstack-query-2026-demo --skill this-projectO comando permanece em uma só linha. Role horizontalmente para revisá-lo antes de copiar.
Prefere uma cópia local? Baixe os arquivos disponíveis atualmente no SkillsMP.
Baixar Zip Baixando... Ocupações relacionadas SOC
Baseado na classificação ocupacional SOC
name this-project description ThisProject development skill for building enterprise React applications with TanStack Router, TanStack Query, Zustand, shadcn/ui, Tailwind CSS 4.1, and Azure MSAL authentication. Use this skill when writing, reviewing, or generating code for this project to ensure consistent patterns, conventions, and best practices. license MIT metadata {"author":"ThisProject Team","version":"1.0.0"}
ThisProject Development Skill
Comprehensive development guide for the ThisProject enterprise React application. This skill ensures consistent code patterns, architecture best practices, and adherence to project conventions across all development tasks.
When to Apply
Reference these guidelines when:
Creating new React components, routes, or pages
Implementing data fetching with TanStack Query
Setting up routing with TanStack Router
Managing state with Zustand
Building forms with React Hook Form + Zod 4
Writing tests with Vitest
Implementing UI with shadcn/ui components
Handling authentication with Azure MSAL
Technology Stack
Category Technology Version Framework React 19.2
Data Fetching TanStack Query 5.x
State Management Zustand 5.x
UI Components shadcn/ui + Base UI Latest
Testing Vitest + Testing Library Latest
API Client Hey API (@hey-api/openapi-ts) 0.91.x
Project Structure src/
├── api/ # API client (auto-generated)
│ └── client/
│ ├── @tanstack/ # Generated TanStack Query hooks
│ ├── types.gen.ts # Generated TypeScript types
│ ├── zod.gen.ts # Generated Zod schemas
│ └── sdk.gen.ts # Generated SDK functions
├── auth/ # Azure MSAL configuration
├── components/ # Shared components
│ ├── ui/ # shadcn/ui components
│ ├── modals/ # Modal components
│ └── errors/ # Error components
├── config/ # Environment configuration
├── hooks/ # Custom React hooks
├── lib/ # Utility functions
├── models/ # TypeScript interfaces/types
├── routes/ # TanStack Router file-based routes
│ ├── app/ # Authenticated routes
│ │ ├── $applicationId/ # Dynamic route
│ │ ├── -components/ # Route-specific components
│ │ ├── -skeletons/ # Loading skeletons
│ │ └── -tests/ # Route tests
│ └── __root.tsx # Root layout
├── state/ # Zustand stores
│ ├── client/ # Client-side stores
│ └── server/ # Server-side state
└── testing/ # Test utilities
Critical Naming Conventions
✅ REQUIRED: camelCase for All Code
const userName = "John" ;
function getUserData (const handleSubmit = (const user_name = "John" ;
function get_user_data (
File Naming // ✅ Good - kebab-case for files
user-profile.tsx
data-table.tsx
use-auth.ts
// ❌ Bad - PascalCase for files
UserProfile.tsx // WRONG
Component & Type Naming
const UserProfile : React .FC <UserProfileProps > = () => {};
interface ApiResponse {}
type FormValues = z.infer <typeof schema>;
const MAX_RETRIES = 3 ;
const userProfile = (
Data Fetching Patterns
Route Loader with Prefetch Pattern Use void to prefetch data without blocking route transitions:
export const Route = createFileRoute ("/app/$applicationId/" )({
loader : ({ context: { queryClient }, params: { applicationId } } ) => {
void queryClient.ensureQueryData (applicationGetOptions ({ path : { applicationId } }));
return { crumb : "application" };
},
pendingComponent : ApplicationSkeleton ,
component : RouteComponent ,
});
Query with useSuspenseQuery
function RouteComponent (const { applicationId } = Route .useParams ();
const { data } = useSuspenseQuery (
applicationGetOptions ({ path : { applicationId } })
);
return <div > {data.name}</div >
Mutations with Cache Invalidation
const mutation = useMutation ({
...applicationUpdateMutation (queryClient),
onSuccess : () => {
toast.success ("Application updated successfully" );
},
onError : (error ) => {
toast.error (`Update failed: ${error.message} ` );
},
});
Routing Patterns
File-Based Route Structure import { createFileRoute } from "@tanstack/react-router" ;
export const Route = createFileRoute ("/app/$applicationId/" )({
loader : ({ context, params } ) => {
void context.queryClient .ensureQueryData (applicationGetOptions ({ path : params }));
return { crumb : "application" };
},
beforeLoad : ({ context } ) => {
if (!context.auth .isAuthenticated ) {
throw redirect ({ to : "/login" });
}
},
component : RouteComponent ,
pendingComponent : ApplicationSkeleton ,
errorComponent : ErrorComponent ,
});
Type-Safe Navigation import { Link } from "@tanstack/react-router" ;
<Link to ="/app/$applicationId" params ={{ applicationId: "123 " }}>
View Application
</Link > <Link to ="/users" search ={{ page: 1 , filter: "active " }}>
Users
</Link >
State Management with Zustand
Store Pattern import { create } from "zustand" ;
import { persist } from "zustand/middleware" ;
type WorkspaceState = {
selectedWorkspaceId : string | null ;
setSelectedWorkspaceId : (workspaceId : string void ;
clearSelectedWorkspace : () => void ;
};
export const useWorkspaceStore = create<WorkspaceState >()(
persist (
(set ) => ({
selectedWorkspaceId : null ,
setSelectedWorkspaceId : (workspaceId ) => set ({ selectedWorkspaceId : workspaceId }),
clearSelectedWorkspace : () => set ({ selectedWorkspaceId : null }),
}),
{ name : "workspace-storage" },
),
);
Form Handling Patterns
React Hook Form + Zod import { useForm } from "react-hook-form" ;
import { zodResolver } from "@hookform/resolvers/zod" ;
import { z } from "zod" ;
const formSchema = z.object ({
emailAddress : z.string ().email ("Invalid email" ),
userName : z.string ().min (1 , "Name is required" ),
});
type FormValues = z.infer <typeof formSchema>;
function MyForm (const form = useForm<FormValues >({
resolver : zodResolver (formSchema),
defaultValues : {
emailAddress : "" ,
userName : "" ,
},
});
return (
<Form {...form }>
<FormField
control ={form.control}
name ="emailAddress"
render ={({ field }) => (
<FormItem >
<FormLabel > Email</FormLabel >
<FormControl >
<Input {...field } type ="email" />
</FormControl >
<FormMessage />
</FormItem >
)}
/>
</Form >
UI Component Patterns
Theme-Aware Design Always use CSS theme variables:
<div className="bg-background text-foreground border-border" >
<div className ="bg-white text-black border-gray-300" >
Icon Convention Use Lucide React with Icon suffix:
import { Moon as MoonIcon , Check as CheckIcon , Plus as PlusIcon } from "lucide-react" ;
<Button >
<PlusIcon className ="mr-2 size-4" />
Add Item
</Button >
Component Composition
<Card >
<CardHeader >
<CardTitle > Title</CardTitle >
<CardDescription > Description</CardDescription >
<CardAction >
<Button variant ="ghost" size ="icon" >
<MoreVerticalIcon />
</Button >
</CardAction >
</CardHeader > <CardContent > {/* Content */}</CardContent > <CardFooter >
<Button > Action</Button >
</CardFooter > Card >
Loading States
function ApplicationSkeleton (return (
<div className ="flex gap-6 overflow-auto" >
<Skeleton className ="h-[156px] sm:h-48" />
</div >
Testing Patterns
Test Structure import { describe, it, expect, vi } from "vitest" ;
import { renderWithProviders, screen, waitFor } from "@/testing/test-utils" ;
import userEvent from "@testing-library/user-event" ;
describe ("ComponentName" , () => {
describe ("feature group" , () => {
it ("should do specific thing" , async () => {
const user = userEvent.setup ();
renderWithProviders (<MyComponent /> await user.click (screen.getByRole ("button" ));
await waitFor (() => {
expect (screen.getByText ("Expected" )).toBeInTheDocument ();
});
});
});
});
Test Location
Place tests in -tests/ folders within routes
Or alongside components: component.test.tsx
API Client Usage
Generated Client Imports
import type { Application } from "@/api/client/types.gen" ;
import { zApplication } from "@/api/client/zod.gen" ;
import { applicationGetOptions, applicationsListOptions } from "@/api/client/@tanstack/react-query.gen" ;
import { applicationUpdateMutation } from "@/api/client/@tanstack/react-query.gen" ;
Never Modify Generated Files Generated files in src/api/client/ are auto-generated from OpenAPI spec. Update swagger.json and run:
Authentication Pattern Azure MSAL v5 is configured in src/auth/config.ts:
import useAuth from "@/hooks/use-auth" ;
function ProtectedComponent (const auth = useAuth ();
if (auth.status !== "loggedIn" ) {
return <Login /> return <AuthenticatedContent />
Key Best Practices
1. Performance
Use React Compiler for automatic optimizations
Prefetch data in loaders with void pattern
Use useSuspenseQuery with route loading
Implement proper skeletons for all routes
2. Type Safety
Always use generated types from API client
Define explicit types for function parameters
Use z.infer<typeof schema> for form types
3. Code Organization
Keep route-specific code in route folders
Use -components/, -skeletons/, -tests/ prefixes
Share reusable components in src/components/
4. Error Handling
Use errorComponent in routes
Show user-friendly error messages with toast
Implement proper error boundaries
5. Styling
Use Tailwind CSS theme variables
Follow the 3-theme system (Light, Dark, Dim)
Use glass-panel for floating elements
Apply animate-enter-up with staggered delays
Quick Reference Commands
npm run dev
npm run build
npm run typecheck
npm run test
npm run test :watch
npm run test :coverage
npm run openapi-ts
npm run update-swagger-pwsh
npm run update-swagger-bash
npm run lint
Additional Resources See instruction files in .github/instructions/ for detailed patterns:
api-integration.instructions.md - API patternstanstack-router.instructions.md - Routing patternstesting.instructions.md - Testing patternstypescript-react.instructions.md - TS/React conventionsui-design-system.instructions.md - UI/styling guidelines 