+
+ )
+}
+
+// components/products/ProductList.tsx - Server Component
+async function getProducts(filters: ProductFilters) {
+ const res = await fetch(
+ `${process.env.API_URL}/products?${new URLSearchParams(filters)}`,
+ { next: { tags: ['products'] } }
+ )
+ if (!res.ok) throw new Error('Failed to fetch products')
+ return res.json()
+}
+
+export async function ProductList({ category, sort, page }: ProductFilters) {
+ const { products, totalPages } = await getProducts({ category, sort, page })
+
+ return (
+
+
+ )
+}
+```
+
+### Pattern 2: Client Components with 'use client'
+
+```typescript
+// components/products/AddToCartButton.tsx
+'use client'
+
+import { useState, useTransition } from 'react'
+import { addToCart } from '@/app/actions/cart'
+
+export function AddToCartButton({ productId }: { productId: string }) {
+ const [isPending, startTransition] = useTransition()
+ const [error, setError] = useState
+ {products.map((product) => (
+
+
+
+ {error &&
+ )
+}
+```
+
+### Pattern 3: Server Actions
+
+```typescript
+// app/actions/cart.ts
+"use server";
+
+import { revalidateTag } from "next/cache";
+import { cookies } from "next/headers";
+import { redirect } from "next/navigation";
+
+export async function addToCart(productId: string) {
+ const cookieStore = await cookies();
+ const sessionId = cookieStore.get("session")?.value;
+
+ if (!sessionId) {
+ redirect("/login");
+ }
+
+ try {
+ await db.cart.upsert({
+ where: { sessionId_productId: { sessionId, productId } },
+ update: { quantity: { increment: 1 } },
+ create: { sessionId, productId, quantity: 1 },
+ });
+
+ revalidateTag("cart");
+ return { success: true };
+ } catch (error) {
+ return { error: "Failed to add item to cart" };
+ }
+}
+
+export async function checkout(formData: FormData) {
+ const address = formData.get("address") as string;
+ const payment = formData.get("payment") as string;
+
+ // Validate
+ if (!address || !payment) {
+ return { error: "Missing required fields" };
+ }
+
+ // Process order
+ const order = await processOrder({ address, payment });
+
+ // Redirect to confirmation
+ redirect(`/orders/${order.id}/confirmation`);
+}
+```
+
+### Pattern 4: Parallel Routes
+
+```typescript
+// app/dashboard/layout.tsx
+export default function DashboardLayout({
+ children,
+ analytics,
+ team,
+}: {
+ children: React.ReactNode
+ analytics: React.ReactNode
+ team: React.ReactNode
+}) {
+ return (
+ {error}
} +
+ {children}
+
+
+
+ )
+}
+
+// app/dashboard/@analytics/page.tsx
+export default async function AnalyticsSlot() {
+ const stats = await getAnalytics()
+ return
+
+ )
+}
+
+// app/layout.tsx
+export default function RootLayout({
+ children,
+ modal,
+}: {
+ children: React.ReactNode
+ modal: React.ReactNode
+}) {
+ return (
+
+
+ {children}
+ {modal}
+
+
+ )
+}
+```
+
+### Pattern 6: Streaming with Suspense
+
+```typescript
+// app/product/[id]/page.tsx
+import { Suspense } from 'react'
+
+export default async function ProductPage({
+ params,
+}: {
+ params: Promise<{ id: string }>
+}) {
+ const { id } = await params
+
+ // This data loads first (blocking)
+ const product = await getProduct(id)
+
+ return (
+
+ {/* Immediate render */}
+
+ )
+}
+
+// These components fetch their own data
+async function Reviews({ productId }: { productId: string }) {
+ const reviews = await getReviews(productId) // Slow API
+ return
+
+
+ {error && {error.message}}
+
+ )
+}
+
+// Usage
+function MyForm() {
+ const { control, handleSubmit } = useForm({
+ resolver: zodResolver(schema),
+ })
+
+ return (
+
+ )
+}
+```
+
+---
+
+## Error Handling
+
+### Displaying Errors
+
+```typescript
+function FormWithErrors() {
+ const { register, handleSubmit, formState: { errors } } = useForm{JSON.stringify(values)}
+}
+
+// GOOD: Only re-render when specific field changes
+function GoodForm() {
+ const { watch } = useForm()
+ const email = watch('email') // Watches only email field
+
+ return {email}
+}
+```
+
+### shouldUnregister Flag
+
+```typescript
+const form = useForm({
+ resolver: zodResolver(schema),
+ shouldUnregister: true, // Remove field data when unmounted
+})
+```
+
+**When to use**:
+- ✅ Multi-step forms where steps have different fields
+- ✅ Conditional fields that should not persist
+- ✅ Want to clear data when component unmounts
+
+**When NOT to use**:
+- ❌ Want to preserve form data when toggling visibility
+- ❌ Navigating between form sections (tabs, accordions)
+
+---
+
+## Accessibility Best Practices
+
+### ARIA Attributes
+
+```typescript
+function AccessibleForm() {
+ const { register, handleSubmit, formState: { errors } } = useForm({
+ resolver: zodResolver(schema),
+ })
+
+ return (
+
+ )
+}
+```
+
+### Error Announcements
+
+```typescript
+import { useEffect } from 'react'
+
+function FormWithAnnouncements() {
+ const { formState: { errors, isSubmitted } } = useForm()
+
+ // Announce errors to screen readers
+ useEffect(() => {
+ if (isSubmitted && Object.keys(errors).length > 0) {
+ const errorCount = Object.keys(errors).length
+ const announcement = `Form submission failed with ${errorCount} error${errorCount > 1 ? 's' : ''}`
+
+ // Create live region for announcement
+ const liveRegion = document.createElement('div')
+ liveRegion.setAttribute('role', 'alert')
+ liveRegion.setAttribute('aria-live', 'assertive')
+ liveRegion.textContent = announcement
+ document.body.appendChild(liveRegion)
+
+ setTimeout(() => {
+ document.body.removeChild(liveRegion)
+ }, 1000)
+ }
+ }, [errors, isSubmitted])
+
+ return (
+
+ )
+}
+```
+
+### Focus Management
+
+```typescript
+import { useRef, useEffect } from 'react'
+
+function FormWithFocus() {
+ const { handleSubmit, formState: { errors } } = useForm()
+ const firstErrorRef = useRef{/* ... */}
)}
+```
+
+✅ **Debounce async validation**
+```typescript
+const debouncedValidation = useDebouncedCallback(() => trigger('username'), 500)
+```
+
+### Never Do
+
+❌ **Skip server-side validation** (security vulnerability!)
+```typescript
+// BAD: Only client validation
+const form = useForm({ resolver: zodResolver(schema) })
+// API endpoint has no validation
+
+// GOOD: Validate on both client and server
+const form = useForm({ resolver: zodResolver(schema) })
+// API: schema.parse(data) on server too
+```
+
+❌ **Use Zod v4 without checking type inference**
+```typescript
+// Issue #13109: Zod v4 has type inference changes
+// Test your types carefully when upgrading
+```
+
+❌ **Forget to spread {...field} in Controller**
+```typescript
+// BAD
+{/* ... */}
)}
+
+// GOOD
+{fields.map((field) => {/* ... */}
)}
+```
+
+❌ **Forget defaultValues for all fields**
+```typescript
+// BAD: Missing defaults causes warnings
+const form = useForm({
+ resolver: zodResolver(schema),
+})
+
+// GOOD: Set defaults for all fields
+const form = useForm({
+ resolver: zodResolver(schema),
+ defaultValues: { email: '', password: '', remember: false },
+})
+```
+
+---
+
+## Known Issues Prevention
+
+This skill prevents **12** documented issues:
+
+### Issue #1: Zod v4 Type Inference Errors
+**Error**: Type inference doesn't work correctly with Zod v4
+**Source**: [GitHub Issue #13109](https://github.com/react-hook-form/react-hook-form/issues/13109) (Closed 2025-11-01)
+**Why It Happens**: Zod v4 changed how types are inferred
+**Prevention**: Use correct type patterns: `type FormData = z.infer
+ Form has {Object.keys(errors).length} errors. Please review.
+
+)}
+```
+
+---
+
+## Focus Management
+
+### Focus First Error
+
+```typescript
+import { useEffect, useRef } from 'react'
+
+const firstErrorRef = useRefBilling Address
+ +Street +``` + +--- + +## Required Fields + +### Visual Indicator + +```typescript + + +``` + +### Legend for Required Fields + +```typescript ++ * Required field +
+``` + +--- + +## Error Messaging + +### Accessible Error Pattern + +```typescript +
+
+
+
+
+ Must be at least 8 characters
+
+
+ {errors.password && (
+
+ {errors.password.message}
+
+ )}
+
+```
+
+---
+
+## Fieldsets and Legends
+
+### Grouping Related Fields
+
+```typescript
+
+```
+
+### Radio Groups
+
+```typescript
+
+```
+
+---
+
+## Keyboard Navigation
+
+### Tab Order
+
+```typescript
+// Ensure logical tab order with tabindex (use sparingly)
+
+
+
+```
+
+### Skip Links
+
+```typescript
+
+ Skip to form
+
+
+
+```
+
+---
+
+## Button Accessibility
+
+### Submit Button States
+
+```typescript
+
+```
+
+### Icon Buttons
+
+```typescript
+
+```
+
+---
+
+## Screen Reader Announcements
+
+### Status Messages
+
+```typescript
+{isSubmitSuccessful && (
+
+ Form submitted successfully!
+
+)}
+```
+
+### Loading States
+
+```typescript
+{isSubmitting && (
+
+ Submitting form, please wait...
+
+)}
+```
+
+---
+
+## Color Contrast
+
+### WCAG AA Standards
+
+- Normal text: 4.5:1 minimum
+- Large text: 3:1 minimum
+- UI components: 3:1 minimum
+
+```css
+/* Good contrast examples */
+.error {
+ color: #c41e3a; /* Red */
+ background: #ffffff; /* White */
+ /* Contrast ratio: 5.77:1 ✓ */
+}
+
+.button {
+ color: #ffffff;
+ background: #0066cc;
+ /* Contrast ratio: 7.33:1 ✓ */
+}
+```
+
+---
+
+## Testing
+
+### Automated Testing Tools
+
+- **axe DevTools** - Browser extension
+- **Lighthouse** - Chrome DevTools
+- **WAVE** - Web accessibility evaluation tool
+
+### Manual Testing
+
+1. **Keyboard Navigation** - Tab through entire form
+2. **Screen Reader** - Test with NVDA (Windows) or VoiceOver (Mac)
+3. **Zoom** - Test at 200% zoom
+4. **High Contrast** - Test in high contrast mode
+
+---
+
+## Accessibility Checklist
+
+- [ ] All inputs have associated labels
+- [ ] Required fields are marked with aria-required
+- [ ] Error messages use role="alert"
+- [ ] Errors have aria-describedby linking to error text
+- [ ] Form has clear heading structure
+- [ ] Keyboard navigation works completely
+- [ ] Focus is managed appropriately
+- [ ] Color is not the only indicator of errors
+- [ ] Contrast ratios meet WCAG AA standards
+- [ ] Screen reader testing completed
+
+---
+
+**Resources**:
+- WCAG Guidelines: https://www.w3.org/WAI/WCAG21/quickref/
+- React Hook Form a11y: https://react-hook-form.com/advanced-usage#AccessibilityA11y
diff --git a/.agents/skills/react-hook-form-zod/references/error-handling.md b/.agents/skills/react-hook-form-zod/references/error-handling.md
new file mode 100644
index 0000000..50ded6f
--- /dev/null
+++ b/.agents/skills/react-hook-form-zod/references/error-handling.md
@@ -0,0 +1,255 @@
+# Error Handling Guide
+
+Complete guide for handling and displaying form errors.
+
+---
+
+## Error Display Patterns
+
+### 1. Inline Errors (Recommended)
+
+```typescript
+
+{errors.email && (
+
+ {errors.email.message}
+
+)}
+```
+
+### 2. Error Summary (Accessibility Best Practice)
+
+```typescript
+{Object.keys(errors).length > 0 && (
+
+
+)}
+```
+
+### 3. Toast Notifications
+
+```typescript
+const onError = (errors) => {
+ toast.error(`Please fix ${Object.keys(errors).length} errors`)
+}
+
+
+ )
+}
+
+/**
+ * Multiple Field Types Example
+ */
+const settingsFormSchema = z.object({
+ name: z.string().min(1, 'Name is required'),
+ language: z.string(),
+ theme: z.enum(['light', 'dark', 'system']),
+ emailPreferences: z.object({
+ marketing: z.boolean().default(false),
+ updates: z.boolean().default(true),
+ security: z.boolean().default(true),
+ }),
+})
+
+type SettingsFormValues = z.inferPlease fix the following errors:
+-
+ {Object.entries(errors).map(([field, error]) => (
+
- + {field}: {error.message} + + ))} +
+ Content
+
+
+
+
+
+
+
+
+
+
+```
+
+## Instructions
+
+1. **Start Mobile-First**: Write base styles for mobile, add responsive prefixes (`sm:`, `md:`, `lg:`) for larger screens
+2. **Use Design Tokens**: Leverage Tailwind's spacing, color, and typography scales
+3. **Compose Utilities**: Combine multiple utilities for complex styles
+4. **Extract Components**: Create reusable component classes for repeated patterns
+5. **Configure Theme**: Customize design tokens in `tailwind.config.js` or using `@theme`
+6. **Verify Changes**: Test at each breakpoint using DevTools responsive mode. Check for visual regressions and accessibility issues before committing.
+
+## Examples
+
+### Responsive Card Component
+
+```tsx
+function ProductCard({ product }: { product: Product }) {
+ return (
+ Title
+Description
+
+ 
+
+ );
+}
+```
+
+### Dark Mode Toggle
+
+```html
+
+
+ {product.name}
+ +
+
+```
+
+### Form Input
+
+```html
+
+```
+
+## Best Practices
+
+1. **Consistent Spacing**: Use Tailwind's spacing scale (4, 8, 12, 16, etc.)
+2. **Color Palette**: Stick to Tailwind's color system for consistency
+3. **Component Extraction**: Extract repeated patterns into reusable components
+4. **Utility Composition**: Prefer utility classes over `@apply` for maintainability
+5. **Semantic HTML**: Use proper HTML elements with Tailwind classes
+6. **Performance**: Ensure content paths include all template files for optimal purging
+7. **Accessibility**: Include focus styles, ARIA labels, and respect user preferences (reduced-motion)
+
+## Troubleshooting
+
+### Classes Not Applying
+- **Check content paths**: Ensure all template files are included in `content: []` in config
+- **Verify build**: Run `npm run build` to regenerate purged CSS
+- **Dev mode**: Use `npx tailwindcss -o` with `--watch` flag for live updates
+
+### Responsive Styles Not Working
+- **Order matters**: Responsive prefixes must come before non-responsive (e.g., `md:flex` not `flex md:flex`)
+- **Check breakpoint values**: Verify breakpoints match your design requirements
+- **DevTools**: Use browser DevTools responsive mode to test at each breakpoint
+
+### Dark Mode Issues
+- **Verify config**: Ensure `darkMode: 'class'` or `'media'` is set correctly
+- **Toggle implementation**: Use `document.documentElement.classList.toggle('dark')` for class strategy
+- **Initial flash**: Add `dark` class to `` before body renders
+
+## Constraints and Warnings
+
+- **Class Proliferation**: Long class strings reduce readability; extract into components
+- **Content Paths**: Misconfigured paths cause classes to be purged in production
+- **Arbitrary Values**: Use sparingly; prefer design tokens for consistency
+- **Specificity Issues**: Avoid `@apply` with complex selectors
+- **Dark Mode**: Requires correct configuration (`class` or `media` strategy)
+- **Browser Support**: Check Tailwind docs for compatibility notes
+
+## References
+
+- **[references/layout-patterns.md](references/layout-patterns.md)** — Flexbox, grid, spacing, typography, colors
+- **[references/component-patterns.md](references/component-patterns.md)** — Cards, navigation, forms, modals, React patterns
+- **[references/responsive-design.md](references/responsive-design.md)** — Responsive patterns, dark mode, container queries
+- **[references/animations.md](references/animations.md)** — Transitions, transforms, built-in animations, motion preferences
+- **[references/performance.md](references/performance.md)** — Bundle optimization, CSS optimization, production builds
+- **[references/accessibility.md](references/accessibility.md)** — Focus management, screen readers, color contrast, ARIA
+- **[references/configuration.md](references/configuration.md)** — CSS-first config, JavaScript config, plugins, presets
+- **[references/reference.md](references/reference.md)** — Additional reference materials
+
+## External Resources
+
+- [Tailwind CSS Docs](https://tailwindcss.com/docs)
+- [Tailwind UI](https://tailwindui.com)
+- [Tailwind Play](https://play.tailwindcss.com)
diff --git a/.agents/skills/tailwind-css-patterns/references/accessibility.md b/.agents/skills/tailwind-css-patterns/references/accessibility.md
new file mode 100644
index 0000000..38f2b67
--- /dev/null
+++ b/.agents/skills/tailwind-css-patterns/references/accessibility.md
@@ -0,0 +1,167 @@
+# Tailwind CSS Accessibility Guidelines
+
+## Focus Management
+
+```html
+
+
+
+
+
+ Skip to main content
+
+```
+
+### Focus Visible vs Focus
+
+```html
+
+
+```
+
+---
+
+## Screen Reader Support
+
+```html
+
+
+
+
+
+ Documentation
+
+Title
++ Learn how to use our API and integration guides +
+ + +
+
+```
+
+### Screen Reader Only Content
+
+```html
+Opens in new window
+```
+
+---
+
+## Color Contrast
+
+```html
+
+3 new notifications
+
+ High contrast text (WCAG AAA)
+
+
+
+ Good contrast on colored backgrounds
+
+
+
+
+ Adjusts for high contrast mode
+
+```
+
+### Contrast Guidelines
+
+- **Normal text**: Minimum 4.5:1 contrast ratio
+- **Large text**: Minimum 3:1 contrast ratio
+- **UI components**: Minimum 3:1 contrast ratio
+
+---
+
+## Motion Preferences
+
+```html
+
+
+ Doesn't animate when user prefers reduced motion
+
+
+
+
+ Only animates when motion is preferred
+
+```
+
+### Reduced Motion Media Query
+
+```css
+@media (prefers-reduced-motion: reduce) {
+ *,
+ *::before,
+ *::after {
+ animation-duration: 0.01ms !important;
+ animation-iteration-count: 1 !important;
+ transition-duration: 0.01ms !important;
+ }
+}
+```
+
+---
+
+## ARIA Patterns with Tailwind
+
+### Toggle Button
+
+```html
+
+```
+
+### Alert Dialog
+
+```html
+
+
+```
+
+---
+
+## Accessibility Checklist
+
+- [ ] All interactive elements have visible focus indicators
+- [ ] Color contrast meets WCAG standards
+- [ ] Images have alt text
+- [ ] Form inputs have associated labels
+- [ ] ARIA labels used for icon-only buttons
+- [ ] Animations respect reduced motion preference
+- [ ] Skip links provided for keyboard navigation
+- [ ] Landmarks (header, main, nav, footer) used appropriately
diff --git a/.agents/skills/tailwind-css-patterns/references/animations.md b/.agents/skills/tailwind-css-patterns/references/animations.md
new file mode 100644
index 0000000..1ea79a9
--- /dev/null
+++ b/.agents/skills/tailwind-css-patterns/references/animations.md
@@ -0,0 +1,141 @@
+# Tailwind CSS Animations & Transitions
+
+## Basic Transitions
+
+```html
+
+```
+
+### Transition Properties
+
+| Class | Description |
+|-------|-------------|
+| `transition` | All properties |
+| `transition-colors` | Color properties only |
+| `transition-opacity` | Opacity only |
+| `transition-transform` | Transform only |
+| `duration-150` | 150ms duration |
+| `duration-300` | 300ms duration |
+| `ease-in` | Ease in timing |
+| `ease-out` | Ease out timing |
+| `ease-in-out` | Ease in-out timing |
+
+---
+
+## Transform Effects
+
+```html
+
+
+
++ Are you sure? +
++ This action cannot be undone. +
+
+
+
+
+
+ Scale on hover
+
+
+
+
+ Scale up and move up
+
+```
+
+---
+
+## Built-in Animations
+
+```html
+Spinning
+Pulsing
+Bouncing
+Pinging (radar effect)
+```
+
+### Common Use Cases
+
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+---
+
+## Custom Animations (v4.1+)
+
+```css
+/* In your CSS with @theme */
+@theme {
+ --animate-fade-in: fadeIn 0.5s ease-in-out;
+ --animate-slide-up: slideUp 0.3s ease-out;
+}
+
+@keyframes fadeIn {
+ from { opacity: 0; }
+ to { opacity: 1; }
+}
+
+@keyframes slideUp {
+ from {
+ opacity: 0;
+ transform: translateY(20px);
+ }
+ to {
+ opacity: 1;
+ transform: translateY(0);
+ }
+}
+```
+
+Usage:
+
+```html
+Fades in on load
+
+```
+
+---
+
+## Motion Preferences
+
+Respect user's motion preferences:
+
+```html
+
+
+ Doesn't animate when user prefers reduced motion
+
+
+
+
+ Only animates when motion is preferred
+
+```
+
+### Global Reduced Motion Support
+
+```css
+@media (prefers-reduced-motion: reduce) {
+ *,
+ *::before,
+ *::after {
+ animation-duration: 0.01ms !important;
+ animation-iteration-count: 1 !important;
+ transition-duration: 0.01ms !important;
+ }
+}
+```
diff --git a/.agents/skills/tailwind-css-patterns/references/component-patterns.md b/.agents/skills/tailwind-css-patterns/references/component-patterns.md
new file mode 100644
index 0000000..3a3951a
--- /dev/null
+++ b/.agents/skills/tailwind-css-patterns/references/component-patterns.md
@@ -0,0 +1,169 @@
+# Tailwind CSS Component Patterns
+
+## Card Component
+
+```html
+
+ 
+
+```
+
+## Responsive User Card
+
+```html
+
+
+
+Card Title
+Card description text goes here.
+ +
+ 
+
+```
+
+## Navigation Bar
+
+```html
+
+```
+
+## Form Elements
+
+```html
+
+```
+
+## Modal/Dialog
+
+```html
+
+
+
+
+ Product Engineer
+
+ + John Doe +
++ Building amazing products with modern technology. +
+ +
+
+```
+
+## React Button Component with Variants
+
+```tsx
+import { useState } from 'react';
+
+function Button({
+ variant = 'primary',
+ size = 'md',
+ children
+}: {
+ variant?: 'primary' | 'secondary';
+ size?: 'sm' | 'md' | 'lg';
+ children: React.ReactNode;
+}) {
+ const baseClasses = 'font-semibold rounded transition';
+
+ const variantClasses = {
+ primary: 'bg-blue-600 text-white hover:bg-blue-700',
+ secondary: 'bg-gray-200 text-gray-800 hover:bg-gray-300',
+ };
+
+ const sizeClasses = {
+ sm: 'px-3 py-1 text-sm',
+ md: 'px-4 py-2 text-base',
+ lg: 'px-6 py-3 text-lg',
+ };
+
+ return (
+
+ );
+}
+```
diff --git a/.agents/skills/tailwind-css-patterns/references/configuration.md b/.agents/skills/tailwind-css-patterns/references/configuration.md
new file mode 100644
index 0000000..ef65ce5
--- /dev/null
+++ b/.agents/skills/tailwind-css-patterns/references/configuration.md
@@ -0,0 +1,198 @@
+# Tailwind CSS Configuration
+
+## CSS-First Configuration (v4.1+)
+
+Use the `@theme` directive for CSS-based configuration:
+
+```css
+/* src/styles.css */
+@import "tailwindcss";
+
+@theme {
+ /* Custom colors */
+ --color-brand-50: #f0f9ff;
+ --color-brand-500: #3b82f6;
+ --color-brand-900: #1e3a8a;
+
+ /* Custom fonts */
+ --font-display: "Inter", system-ui, sans-serif;
+ --font-mono: "Fira Code", monospace;
+
+ /* Custom spacing */
+ --spacing-128: 32rem;
+
+ /* Custom animations */
+ --animate-fade-in: fadeIn 0.5s ease-in-out;
+
+ /* Custom breakpoints */
+ --breakpoint-3xl: 1920px;
+}
+
+/* Define custom animations */
+@keyframes fadeIn {
+ from { opacity: 0; }
+ to { opacity: 1; }
+}
+
+/* Custom utilities */
+@utility content-auto {
+ content-visibility: auto;
+}
+```
+
+---
+
+## JavaScript Configuration (Legacy)
+
+```javascript
+/** @type {import('tailwindcss').Config} */
+export default {
+ content: [
+ "./index.html",
+ "./src/**/*.{js,ts,jsx,tsx,vue,svelte}",
+ ],
+ theme: {
+ extend: {
+ colors: {
+ primary: {
+ 50: '#f0f9ff',
+ 500: '#3b82f6',
+ 900: '#1e3a8a',
+ },
+ },
+ fontFamily: {
+ sans: ['Inter', 'system-ui', 'sans-serif'],
+ },
+ spacing: {
+ '128': '32rem',
+ },
+ },
+ },
+ plugins: [],
+}
+```
+
+---
+
+## Vite Integration (v4.1+)
+
+```javascript
+// vite.config.ts
+import { defineConfig } from 'vite'
+import tailwindcss from '@tailwindcss/vite'
+
+export default defineConfig({
+ plugins: [
+ tailwindcss(),
+ ],
+})
+```
+
+---
+
+## Advanced v4.1 Features
+
+### Native CSS Custom Properties
+
+```html
+
+
+
+
+ Modal Title
+ ++ Modal content goes here. +
+
+
+
+
+
+ Using CSS custom properties directly
+
+```
+
+### Enhanced Arbitrary Values
+
+```html
+
+
+ Responsive grid without custom CSS
+
+
+
+
+ Bounce with custom easing
+
+```
+
+### Custom Utilities
+
+```css
+@utility content-auto {
+ content-visibility: auto;
+}
+
+@utility text-shadow {
+ text-shadow: 0 2px 4px rgba(0,0,0,0.1);
+}
+```
+
+---
+
+## Plugins
+
+### Custom Plugin Example
+
+```javascript
+// tailwind.config.js
+const plugin = require('tailwindcss/plugin')
+
+module.exports = {
+ plugins: [
+ plugin(function({ addUtilities, addComponents, e, config }) {
+ // Add custom utilities
+ addUtilities({
+ '.content-auto': {
+ contentVisibility: 'auto',
+ },
+ })
+
+ // Add custom components
+ addComponents({
+ '.btn': {
+ padding: '.5rem 1rem',
+ borderRadius: '.25rem',
+ fontWeight: '600',
+ },
+ })
+ }),
+ ],
+}
+```
+
+---
+
+## Presets
+
+### Creating a Reusable Preset
+
+```javascript
+// tailwind-preset.js
+module.exports = {
+ theme: {
+ extend: {
+ colors: {
+ brand: {
+ DEFAULT: '#3b82f6',
+ light: '#60a5fa',
+ dark: '#1d4ed8',
+ },
+ },
+ },
+ },
+ plugins: [
+ require('@tailwindcss/forms'),
+ require('@tailwindcss/typography'),
+ ],
+}
+```
+
+### Using a Preset
+
+```javascript
+// tailwind.config.js
+module.exports = {
+ presets: [
+ require('./tailwind-preset.js'),
+ ],
+}
+```
diff --git a/.agents/skills/tailwind-css-patterns/references/layout-patterns.md b/.agents/skills/tailwind-css-patterns/references/layout-patterns.md
new file mode 100644
index 0000000..22a31ae
--- /dev/null
+++ b/.agents/skills/tailwind-css-patterns/references/layout-patterns.md
@@ -0,0 +1,222 @@
+# Tailwind CSS Layout Patterns
+
+## Layout Utilities
+
+### Flexbox Layouts
+
+Basic flex container:
+
+```html
+
+
+```
+
+Responsive flex direction:
+
+```html
+Left
+ Center
+ Right
+
+
+```
+
+Common flex patterns:
+
+```html
+
+Item 1
+ Item 2
+ Item 3
+
+
+
+
+Centered Content
+
+ Left
+ Right
+
+
+
+
+
+```
+
+### Grid Layouts
+
+Basic grid:
+
+```html
+Item 1
+ Item 2
+
+
+```
+
+Responsive grid:
+
+```html
+Column 1
+ Column 2
+ Column 3
+
+
+
+```
+
+Auto-fit columns:
+
+```html
+Item 1
+ Item 2
+ Item 3
+ Item 4
+
+
+
+```
+
+### Container & Max Width
+
+Centered container with max width:
+
+```html
+
+
+
+```
+
+Responsive max width:
+
+```html
+
+
+
+```
+
+---
+
+## Spacing
+
+### Padding & Margin
+
+Uniform spacing:
+
+```html
+Padding all sides
+Margin all sides
+```
+
+Individual sides:
+
+```html
+
+
+
+```
+
+Axis-based spacing:
+
+```html
+
+
+
+```
+
+Responsive spacing:
+
+```html
+
+
+
+```
+
+Space between children:
+
+```html
+
+
+```
+
+---
+
+## Typography
+
+### Font Size & Weight
+
+```html
+Item 1
+ Item 2
+ Item 3
+Large Heading
+Subheading
+Body text
+Small text +``` + +Responsive typography: + +```html ++ Responsive Heading +
+``` + +### Line Height & Letter Spacing + +```html ++ Text with relaxed line height and wide letter spacing +
+``` + +### Text Alignment + +```html ++ Left aligned on mobile, centered on tablet+ +
+``` + +--- + +## Colors + +### Background Colors + +```html +Blue background
+Light gray background
+
+ Gradient background
+
+```
+
+### Text Colors
+
+```html
+Dark text
+Blue text
+Error text
+``` + +### Opacity + +```html +
+ Semi-transparent blue
+
+```
+
+---
+
+## Responsive Breakpoints Reference
+
+| Prefix | Min Width | CSS Equivalent |
+|--------|-----------|----------------|
+| `sm:` | 640px | `@media (min-width: 640px)` |
+| `md:` | 768px | `@media (min-width: 768px)` |
+| `lg:` | 1024px | `@media (min-width: 1024px)` |
+| `xl:` | 1280px | `@media (min-width: 1280px)` |
+| `2xl:` | 1536px | `@media (min-width: 1536px)` |
diff --git a/.agents/skills/tailwind-css-patterns/references/performance.md b/.agents/skills/tailwind-css-patterns/references/performance.md
new file mode 100644
index 0000000..8f91846
--- /dev/null
+++ b/.agents/skills/tailwind-css-patterns/references/performance.md
@@ -0,0 +1,119 @@
+# Tailwind CSS Performance Optimization
+
+## Bundle Size Optimization
+
+Configure content sources for optimal purging:
+
+```javascript
+// tailwind.config.js
+export default {
+ content: [
+ "./index.html",
+ "./src/**/*.{js,ts,jsx,tsx,vue,svelte}",
+ "./node_modules/@mycompany/ui-lib/**/*.{js,ts,jsx,tsx}",
+ ],
+ // Enable JIT for faster builds
+ jit: true,
+}
+```
+
+### Content Path Best Practices
+
+1. **Be specific**: Don't use `"./**/*"` - it scans too many files
+2. **Include UI libraries**: Add paths to component libraries
+3. **Exclude tests**: Don't include test files in content paths
+
+---
+
+## CSS Optimization Techniques
+
+```html
+
+
+
+
+
+Heavy content that's initially offscreen
+
+
+
+
+ Complex layout that doesn't affect outside elements
+
+```
+
+---
+
+## Development Performance (v4.1+)
+
+```css
+/* Enable CSS-first configuration in v4.1 */
+@import "tailwindcss";
+
+@theme {
+ /* Define once, use everywhere */
+ --color-brand: #3b82f6;
+ --font-mono: "Fira Code", monospace;
+}
+
+/* Critical CSS for above-the-fold content */
+@layer critical {
+ .hero-title {
+ @apply text-4xl md:text-6xl font-bold;
+ }
+}
+```
+
+---
+
+## Production Build Optimization
+
+### PurgeCSS Configuration
+
+```javascript
+// tailwind.config.js
+module.exports = {
+ purge: {
+ enabled: process.env.NODE_ENV === 'production',
+ content: [
+ './src/**/*.html',
+ './src/**/*.jsx',
+ './src/**/*.tsx',
+ ],
+ options: {
+ safelist: [
+ 'bg-red-500',
+ 'text-center',
+ // Classes that shouldn't be purged
+ ],
+ },
+ },
+}
+```
+
+### Minification
+
+```bash
+# Use cssnano for minification
+npm install -D cssnano
+
+# In postcss.config.js
+module.exports = {
+ plugins: [
+ require('tailwindcss'),
+ require('autoprefixer'),
+ ...(process.env.NODE_ENV === 'production' ? [require('cssnano')] : []),
+ ],
+}
+```
+
+---
+
+## Best Practices for Performance
+
+1. **Use the JIT engine**: Faster builds, smaller output
+2. **Configure content correctly**: Only include files that use Tailwind
+3. **Minimize custom CSS**: Use Tailwind utilities over custom CSS
+4. **Enable purging in production**: Removes unused styles
+5. **Use `@layer` for custom styles**: Helps with organization and purging
+6. **Avoid `@apply` in components**: Prefer composing utilities in markup
diff --git a/.agents/skills/tailwind-css-patterns/references/reference.md b/.agents/skills/tailwind-css-patterns/references/reference.md
new file mode 100644
index 0000000..001c64b
--- /dev/null
+++ b/.agents/skills/tailwind-css-patterns/references/reference.md
@@ -0,0 +1,508 @@
+# Tailwind CSS Documentation
+
+Tailwind CSS is a utility-first CSS framework that generates styles by scanning HTML, JavaScript, and template files for class names. It provides a comprehensive design system through CSS utility classes, enabling rapid UI development without writing custom CSS. The framework operates at build-time, analyzing source files and generating only the CSS classes actually used in the project, resulting in optimized production bundles with zero runtime overhead.
+
+The framework includes an extensive default color palette (18 colors with 11 shades each), responsive breakpoint system, customizable design tokens via CSS custom properties, and support for dark mode, pseudo-classes, pseudo-elements, and media queries through variant prefixes. Tailwind CSS v4.1 introduces CSS-first configuration using the `@theme` directive, native support for custom utilities via `@utility`, seamless integration with modern build tools through Vite, PostCSS, and framework-specific plugins, and enhanced arbitrary value syntax for maximum flexibility.
+
+## Installation with Vite
+
+Installing Tailwind CSS using the Vite plugin for modern JavaScript frameworks.
+
+```bash
+# Create a new Vite project
+npm create vite@latest my-project
+cd my-project
+
+# Install Tailwind CSS and Vite plugin
+npm install tailwindcss @tailwindcss/vite
+```
+
+```javascript
+// vite.config.ts
+import { defineConfig } from 'vite'
+import tailwindcss from '@tailwindcss/vite'
+
+export default defineConfig({
+ plugins: [
+ tailwindcss(),
+ ],
+})
+```
+
+```css
+/* src/style.css */
+@import "tailwindcss";
+```
+
+```html
+
+
+
+# Hello world!
+
+```
+
+## Utility Classes with Variants
+
+Applying conditional styles using variant prefixes for hover, focus, and responsive breakpoints.
+
+```html
+
+ Save changes
+
+Content adapts to color scheme preference
+
+ Submit
+
+```
+
+## Custom Theme Configuration
+
+Defining custom design tokens using the `@theme` directive in CSS.
+
+```css
+/* app.css */
+@import "tailwindcss";
+
+@theme {
+ /* Custom fonts */
+ --font-display: "Satoshi", "sans-serif";
+ --font-body: "Inter", system-ui, sans-serif;
+
+ /* Custom colors */
+ --color-brand-50: oklch(0.98 0.02 264);
+ --color-brand-100: oklch(0.95 0.05 264);
+ --color-brand-500: oklch(0.55 0.22 264);
+ --color-brand-900: oklch(0.25 0.12 264);
+
+ /* Custom breakpoints */
+ --breakpoint-3xl: 120rem;
+ --breakpoint-4xl: 160rem;
+
+ /* Custom spacing */
+ --spacing-18: calc(var(--spacing) * 18);
+
+ /* Custom animations */
+ --ease-fluid: cubic-bezier(0.3, 0, 0, 1);
+ --ease-snappy: cubic-bezier(0.2, 0, 0, 1);
+}
+```
+
+```html
+
+Custom design system
+
+```
+
+## Arbitrary Values
+
+Using square bracket notation for one-off custom values without leaving HTML.
+
+```html
+
+Pixel-perfect positioning
+
+Custom hex colors, font sizes, and content
+
+Any CSS property
+
+Reference custom properties
+
+Complex grid layouts
+
+Font size from CSS variable
+
+Color from CSS variable
+
+```
+
+## Color System
+
+Working with Tailwind's comprehensive color palette and opacity modifiers.
+
+```html
+
+Color utilities across all properties
+
+Alpha channel with percentage
+
+Arbitrary opacity values
+
+Opacity from CSS variable
+
+Adapts to color scheme
+
+
+```
+
+## Dark Mode
+
+Implementing dark mode with CSS media queries or manual toggle.
+
+```html
+
+Content automatically adapts
+
+
+```
+
+```css
+/* Manual dark mode toggle with class selector */
+@import "tailwindcss";
+
+@custom-variant dark (&:where(.dark, .dark *));
+```
+
+```html
+
+Controlled by .dark class
+
+
+
+
+```
+
+```javascript
+// Dark mode toggle logic
+// On page load or theme change
+document.documentElement.classList.toggle(
+ "dark",
+ localStorage.theme === "dark" ||
+ (!("theme" in localStorage) && window.matchMedia("(prefers-color-scheme: dark)").matches)
+);
+
+// User chooses light mode
+localStorage.theme = "light";
+
+// User chooses dark mode
+localStorage.theme = "dark";
+
+// User chooses system preference
+localStorage.removeItem("theme");
+```
+
+## State Variants
+
+Styling elements based on pseudo-classes and parent/sibling state.
+
+```html
+
+- Item content
+
+
+**Title**
+Description
+
+Please provide a valid email address.
+
+
+ Option
+
+```
+
+## Responsive Design
+
+Building mobile-first responsive layouts with breakpoint variants.
+
+```html
+
+# Responsive heading
+
+Text scales with viewport
+
+
+Desktop only
+
+Mobile only
+
+Custom breakpoint
+
+Below medium
+
+```
+
+## Custom Utilities
+
+Creating reusable custom utility classes with variant support.
+
+```css
+/* Simple custom utility */
+@utility content-auto {
+ content-visibility: auto;
+}
+
+/* Complex utility with nesting */
+@utility scrollbar-hidden {
+ &::-webkit-scrollbar {
+ display: none;
+ }
+}
+
+/* Functional utility with theme values */
+@theme {
+ --tab-size-2: 2;
+ --tab-size-4: 4;
+ --tab-size-github: 8;
+}
+
+@utility tab-* {
+ tab-size: --value(--tab-size-*);
+}
+
+/* Supporting arbitrary, bare, and theme values */
+@utility opacity-* {
+ opacity: --value([percentage]);
+ opacity: calc(--value(integer) * 1%);
+ opacity: --value(--opacity-*);
+}
+
+/* Utility with modifiers */
+@utility text-* {
+ font-size: --value(--text-*, [length]);
+ line-height: --modifier(--leading-*, [length], [*]);
+}
+
+/* Negative value support */
+@utility inset-* {
+ inset: --spacing(--value(integer));
+ inset: --value([percentage], [length]);
+}
+
+@utility -inset-* {
+ inset: --spacing(--value(integer) * -1);
+ inset: calc(--value([percentage], [length]) * -1);
+}
+```
+
+```html
+
+Custom utilities work with variants
+
+Variants and arbitrary values supported
+
+Utility with modifier (font-size/line-height)
+
+```
+
+## Custom Variants
+
+Registering custom conditional styles with the `@custom-variant` directive.
+
+```css
+/* Simple custom variant */
+@custom-variant theme-midnight (&:where([data-theme="midnight"] *));
+
+/* Variant with media query */
+@custom-variant any-hover {
+ @media (any-hover: hover) {
+ &:hover {
+ @slot;
+ }
+ }
+}
+
+/* ARIA state variant */
+@custom-variant aria-asc (&[aria-sort="ascending"]);
+@custom-variant aria-desc (&[aria-sort="descending"]);
+
+/* Data attribute variant */
+@custom-variant data-checked (&[data-ui~="checked"]);
+```
+
+```html
+
+ Midnight theme button
+
+
+ Sortable column
+
+Checked state
+
+One-off custom selectors
+
+```
+
+## Applying Variants in CSS
+
+Using the `@variant` directive to apply variants within custom CSS.
+
+```css
+/* Single variant */
+.my-element {
+ background: white;
+
+ @variant dark {
+ background: black;
+ }
+}
+
+/* Nested variants */
+.my-button {
+ background: white;
+
+ @variant dark {
+ background: gray;
+
+ @variant hover {
+ background: black;
+ }
+ }
+}
+
+/* Compiled output */
+.my-element {
+ background: white;
+}
+
+@media (prefers-color-scheme: dark) {
+ .my-element {
+ background: black;
+ }
+}
+```
+
+## Layer Organization
+
+Organizing custom styles into Tailwind's cascade layers.
+
+```css
+@import "tailwindcss";
+
+/* Base styles for HTML elements */
+@layer base {
+ h1 {
+ font-size: var(--text-2xl);
+ font-weight: bold;
+ }
+
+ h2 {
+ font-size: var(--text-xl);
+ font-weight: 600;
+ }
+
+ body {
+ font-family: var(--font-body);
+ }
+}
+
+/* Reusable component classes */
+@layer components {
+ .btn {
+ padding: --spacing(2) --spacing(4);
+ border-radius: var(--radius);
+ font-weight: 600;
+ transition: all 150ms;
+ }
+
+ .btn-primary {
+ background-color: var(--color-blue-500);
+ color: white;
+ }
+
+ .card {
+ background-color: var(--color-white);
+ border-radius: var(--radius-lg);
+ padding: --spacing(6);
+ box-shadow: var(--shadow-xl);
+ }
+
+ /* Third-party component overrides */
+ .select2-dropdown {
+ border-radius: var(--radius);
+ box-shadow: var(--shadow-lg);
+ }
+}
+```
+
+```html
+
+Square corners despite card class
+
+ Component with utility overrides
+
+```
+
+## Functions and Directives
+
+Using Tailwind's CSS functions for dynamic values and opacity adjustments.
+
+```css
+/* Alpha function for opacity */
+.my-element {
+ color: --alpha(var(--color-lime-300) / 50%);
+ background: --alpha(var(--color-blue-500) / 25%);
+}
+
+/* Spacing function */
+.my-element {
+ margin: --spacing(4);
+ padding: calc(--spacing(6) - 1px);
+}
+
+/* In arbitrary values */
+
+/* Source directive for additional content */
+@source "../node_modules/@my-company/ui-lib";
+
+/* Apply directive for inline utilities */
+.select2-dropdown {
+ @apply rounded-b-lg shadow-md;
+}
+
+.select2-search {
+ @apply rounded border border-gray-300;
+}
+
+.select2-results__group {
+ @apply text-lg font-bold text-gray-900;
+}
+```
+
+## Pseudo-elements
+
+Styling ::before, ::after, ::placeholder, and other pseudo-elements.
+
+```html
+
+ Email
+
+
+- First item
+- Second item
+
+Select this text to see custom colors
+
+Typography with pseudo-elements
+
+```
+
+## Media Queries
+
+Conditional styling based on user preferences and device capabilities.
+
+```html
+
+ Respects user preference
+
+ Only animates if motion allowed
+
+ Adjusts for contrast needs
+
+
+Hidden in portrait mode
+
+Layout adapts to orientation
+
+ Not shown when printing
+
+Only visible in print
+
+Progressive enhancement
+
+```
+
+## Summary
+
+Tailwind CSS provides a complete utility-first design system that eliminates the need for writing custom CSS in most cases. The framework's primary use cases include rapid prototyping, building production applications with consistent design systems, creating responsive layouts, implementing dark mode, and maintaining design consistency across large teams. By using utility classes directly in markup, developers can iterate quickly, avoid naming conventions, and prevent CSS bloat since only used styles are generated.
+
+The v4.1 release enhances the developer experience with CSS-first configuration, eliminating JavaScript configuration files for most projects. Integration patterns include using the Vite plugin for modern frameworks, PostCSS for custom build pipelines, the Tailwind CLI for simple projects, and CDN scripts for rapid prototyping. The framework excels at component-driven development when combined with React, Vue, Svelte, or other modern frameworks, where utility classes are co-located with component logic. Custom design systems can be fully defined in CSS using `@theme`, with project-specific utilities and variants extending the framework's capabilities without writing JavaScript plugins.
\ No newline at end of file
diff --git a/.agents/skills/tailwind-css-patterns/references/responsive-design.md b/.agents/skills/tailwind-css-patterns/references/responsive-design.md
new file mode 100644
index 0000000..3fad506
--- /dev/null
+++ b/.agents/skills/tailwind-css-patterns/references/responsive-design.md
@@ -0,0 +1,159 @@
+# Tailwind CSS Responsive Design & Dark Mode
+
+## Responsive Design Patterns
+
+### Mobile-First Responsive Layout
+
+```html
+
+
+
+```
+
+### Responsive Grid Gallery
+
+```html
+
+
+
+
+ + Welcome to Our Site +
++ Build amazing things with Tailwind CSS +
+ +
+ 
+
+
+
+
+```
+
+### Responsive Card Component
+
+```tsx
+function ProductCard({ product }: { product: Product }) {
+ return (
+
+ 
+
+
+
+ 
+
+
+
+
+
+
+ );
+}
+```
+
+---
+
+## Dark Mode
+
+### Basic Dark Mode Support
+
+```html
+
+
+ + {product.name} +
++ {product.description} +
+ +
+
+```
+
+Enable dark mode in tailwind.config.js:
+
+```javascript
+module.exports = {
+ darkMode: 'class', // or 'media'
+ // ...
+}
+```
+
+### Dark Mode Toggle (React)
+
+```tsx
+function ThemeToggle() {
+ const [darkMode, setDarkMode] = useState(false);
+
+ useEffect(() => {
+ if (darkMode) {
+ document.documentElement.classList.add('dark');
+ } else {
+ document.documentElement.classList.remove('dark');
+ }
+ }, [darkMode]);
+
+ return (
+
+ );
+}
+```
+
+### Dark Mode Best Practices
+
+1. **Use semantic color names**: Instead of `bg-white` use `bg-surface` custom color
+2. **Test with real content**: Some colors look good in light but not in dark
+3. **Respect system preference**: Use `darkMode: 'media'` for OS-level preference
+4. **Smooth transitions**: Add transition utilities for theme changes
+
+```css
+/* Global transition for theme changes */
+* {
+ @apply transition-colors duration-200;
+}
+```
+
+---
+
+## Container Queries (v4.1+)
+
+Component that responds to its container size, not viewport:
+
+```html
+Title
+Description
+
+
+```
+
+Usage in a card component:
+
+```html
+
+ Text size based on container, not viewport
+
+
+
+```
diff --git a/.agents/skills/tanstack-query/SKILL.md b/.agents/skills/tanstack-query/SKILL.md
new file mode 100644
index 0000000..1538eb4
--- /dev/null
+++ b/.agents/skills/tanstack-query/SKILL.md
@@ -0,0 +1,849 @@
+---
+name: tanstack-query
+description: Powerful asynchronous state management, server-state utilities, and data fetching for TS/JS, React, Vue, Solid, Svelte & Angular.
+---
+
+
+## Overview
+
+TanStack Query (formerly React Query) manages server state - data that lives on the server and needs to be fetched, cached, synchronized, and updated. It provides automatic caching, background refetching, stale-while-revalidate patterns, pagination, infinite scrolling, and optimistic updates out of the box.
+
+**Package:** `@tanstack/react-query`
+**Devtools:** `@tanstack/react-query-devtools`
+**Current Version:** v5
+
+## Installation
+
+```bash
+npm install @tanstack/react-query
+npm install -D @tanstack/react-query-devtools # Optional
+```
+
+## Setup
+
+```tsx
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
+
+const queryClient = new QueryClient({
+ defaultOptions: {
+ queries: {
+ staleTime: 1000 * 60, // 1 minute
+ gcTime: 1000 * 60 * 5, // 5 minutes (garbage collection)
+ retry: 3,
+ refetchOnWindowFocus: true,
+ refetchOnReconnect: true,
+ },
+ },
+})
+
+function App() {
+ return (
+
+
+
+
+
+
+ Title
+Description
+
+ {data.pages.map((page) =>
+ page.items.map((item) =>
+ )
+}
+```
+
+## Parallel Queries
+
+```tsx
+// Multiple independent queries run in parallel automatically
+function Dashboard() {
+ const usersQuery = useQuery({ queryKey: ['users'], queryFn: fetchUsers })
+ const projectsQuery = useQuery({ queryKey: ['projects'], queryFn: fetchProjects })
+
+ // Both fetch simultaneously
+}
+
+// Dynamic parallel queries with useQueries
+function UserProjects({ userIds }) {
+ const queries = useQueries({
+ queries: userIds.map((id) => ({
+ queryKey: ['user', id],
+ queryFn: () => fetchUser(id),
+ })),
+ combine: (results) => ({
+ data: results.map(r => r.data),
+ pending: results.some(r => r.isPending),
+ }),
+ })
+}
+```
+
+## Dependent Queries
+
+```tsx
+// Sequential queries using enabled
+function UserPosts({ userId }) {
+ const userQuery = useQuery({
+ queryKey: ['user', userId],
+ queryFn: () => fetchUser(userId),
+ })
+
+ const postsQuery = useQuery({
+ queryKey: ['posts', userId],
+ queryFn: () => fetchPostsByUser(userId),
+ enabled: !!userQuery.data, // Only run when user is loaded
+ })
+}
+```
+
+## Paginated Queries
+
+```tsx
+function PaginatedList() {
+ const [page, setPage] = useState(1)
+
+ const { data, isPlaceholderData } = useQuery({
+ queryKey: ['todos', page],
+ queryFn: () => fetchTodos(page),
+ placeholderData: (previousData) => previousData, // Keep showing old data
+ })
+
+ return (
+
+ {data.items.map(item =>
+ )
+}
+```
+
+## Suspense Integration
+
+```tsx
+import { useSuspenseQuery, useSuspenseInfiniteQuery } from '@tanstack/react-query'
+
+// Component will suspend until data is loaded
+function TodoList() {
+ const { data } = useSuspenseQuery({
+ queryKey: ['todos'],
+ queryFn: fetchTodos,
+ })
+ // data is guaranteed to be defined here
+ return - {data.map(todo =>
- {todo.title} )}
{message}
;
+};
+
+// ✅ PREFERRED
+const App = ({ message }: AppProps) => {
+ return {message}
;
+};
+```
+
+**Why:** `React.FC` has issues with generics, defaultProps, and previously included implicit `children`.
+
+### 3. Optional Props Creating Invalid States
+
+```typescript
+// ❌ ANTI-PATTERN: Can have value without onChange
+interface InputProps {
+ value?: string;
+ onChange?: (value: string) => void;
+}
+
+// ✅ CORRECT: Discriminated union
+type ControlledProps = { value: string; onChange: (v: string) => void };
+type UncontrolledProps = { value?: never; onChange?: never; defaultValue?: string };
+type InputProps = { label: string } & (ControlledProps | UncontrolledProps);
+```
+
+### 4. Array Access Without Undefined Check
+
+```typescript
+// ❌ ANTI-PATTERN (without noUncheckedIndexedAccess)
+const arr: string[] = ['a', 'b'];
+console.log(arr[10].toUpperCase()); // Runtime error!
+
+// ✅ CORRECT
+const item = arr[10];
+if (item) {
+ console.log(item.toUpperCase());
+}
+```
+
+Enable `noUncheckedIndexedAccess: true` in tsconfig.
+
+## Component Anti-Patterns
+
+### 1. Component Defined Inside Another Component
+
+```typescript
+// ❌ ANTI-PATTERN: Inner remounts every render
+function Parent() {
+ function Child() { // New component identity each render!
+ return Child
;
+ }
+ return Child
;
+}
+
+function Parent() {
+ return