React

Instructions

This project uses React 19 with TypeScript and the React Compiler enabled via

babel-plugin-react-compiler

Component Structure

Pages live in
```
resources/js/pages/
```
and are rendered via Inertia
Shared components live in
```
resources/js/components/
```
UI primitives (shadcn/ui) live in
```
resources/js/components/ui/
```
Custom hooks live in
```
resources/js/hooks/
```

Page Props from Controllers

Always receive page data as props from the Laravel controller via Inertia. Do NOT fetch data client-side or use

useEffect

to load page data.

<code-snippet name="Controller Passing Props" lang="php"> // In Laravel controller public function edit(Project $project): Response { return Inertia::render('projects/edit', [ 'project' => $project->load('client'), 'clients' => Client::orderBy('name')->get(), ]); } </code-snippet> <code-snippet name="Page Receiving Props" lang="tsx"> // In React page component import { Project, Client } from '@/types';

interface EditProjectProps { project: Project; clients: Client[]; }

export default function EditProject({ project, clients }: EditProjectProps) { return ( <Form action={update({ project: project.id }).url} method="patch"> {/* Form fields using project and clients data */} </Form> ); } </code-snippet>

This pattern ensures:

State consistency - The server is the single source of truth; no client-side caching or stale data issues
Data is loaded server-side before the page renders
No loading states needed for initial page data
SEO-friendly server-rendered content
Type-safe props matching controller output

TypeScript Conventions

All component props should be typed explicitly
Use interfaces for object shapes, defined in
```
resources/js/types/index.d.ts
```
Prefer
```
React.ComponentProps<"element">
```
for extending native element props
Use path aliases:
```
@/components
```
,
```
@/hooks
```
,
```
@/lib
```
,
```
@/types
```

<code-snippet name="Typed Component Example" lang="tsx"> import { cn } from '@/lib/utils';

interface CardProps { title: string; description?: string; className?: string; children: React.ReactNode; }

export function Card({ title, description, className, children }: CardProps) { return ( <div className={cn('rounded-lg border p-4', className)}> <h3 className="font-semibold">{title}</h3> {description && <p className="text-muted-foreground">{description}</p>} {children} </div> ); } </code-snippet>

React 19 + React Compiler

The React Compiler automatically memoizes components and hooks
Do NOT manually add
```
useMemo
```
,
```
useCallback
```
, or
```
React.memo
```
unless profiling shows a specific need
Write straightforward code and let the compiler optimize

State Management

Use React's built-in
```
useState
```
and
```
useReducer
```
for local state
Use Inertia's shared data for server-provided state (accessed via
```
usePage()
```
)
For form state, use the Inertia
```
<Form>
```
component (see inertia skill)

<code-snippet name="Accessing Shared Data" lang="tsx"> import { usePage } from '@inertiajs/react'; import { SharedData } from '@/types';

export function UserGreeting() { const { auth } = usePage<SharedData>().props;

return <span>Hello, {auth.user.name}</span>;

} </code-snippet>

Event Handlers

Use inline arrow functions for simple handlers
Extract to named functions only when logic is complex or reused

Conditional Rendering

Use early returns for guard clauses
Prefer
```
&&
```
for simple conditionals, ternaries for if/else
Use separate components for complex conditional logic

<code-snippet name="Conditional Rendering Patterns" lang="tsx"> // Early return for loading state function DataDisplay({ data, isLoading }: Props) { if (isLoading) { return <Skeleton />; }

return (
    <div>
        {data.items.length > 0 && <ItemList items={data.items} />}
        {data.error ? <ErrorMessage error={data.error} /> : <SuccessIndicator />}
    </div>
);

} </code-snippet>

File Naming

Components: PascalCase (
```
UserCard.tsx
```
)
Hooks: camelCase with
```
use
```
prefix (
```
useClipboard.ts
```
)
Utilities: camelCase (
```
formatDate.ts
```
)
Pages: kebab-case matching the route (
```
edit.tsx
```
,
```
create.tsx
```
,
```
index.tsx
```
)

react

NPX Install

Tags

SKILL.md Content