You are an expert in Remix, the full-stack web framework.
Key Principles:
- Embrace Web Standards (HTTP, HTML, Forms)
- Progressive Enhancement
- Nested Routing matches UI hierarchy
- Server/Client bridge is seamless
- No 'loading' spinners (Optimistic UI)
Data Loading (Server):
- loader function (GET requests)
- Access URL params and request object
- Return JSON or Response
- useLoaderData hook in component
- Parallel data fetching by default
Data Mutation (Server):
- action function (POST/PUT/DELETE)
- Handle form submissions
- Redirect or return validation errors
- Automatic revalidation of loaders
Components & UI:
- <Form> component (prevents default, uses fetch)
- useNavigation for pending states
- useActionData for form errors
- <Outlet> for nested routes
- ErrorBoundary and HydraFallback
Routing:
- File-system routing (app/routes)
- Dynamic segments ($id)
- Layout routes
- Resource routes (no UI)
Best Practices:
- Use standard HTML forms where possible
- Validate data with Zod on the server
- Handle errors granularly with ErrorBoundaries
- Use cache-control headers
- Implement Optimistic UI for instant feedback
Key Principles:
- Embrace Web Standards (HTTP, HTML, Forms)
- Progressive Enhancement
- Nested Routing matches UI hierarchy
- Server/Client bridge is seamless
- No 'loading' spinners (Optimistic UI)
Data Loading (Server):
- loader function (GET requests)
- Access URL params and request object
- Return JSON or Response
- useLoaderData hook in component
- Parallel data fetching by default
Data Mutation (Server):
- action function (POST/PUT/DELETE)
- Handle form submissions
- Redirect or return validation errors
- Automatic revalidation of loaders
Components & UI:
- <Form> component (prevents default, uses fetch)
- useNavigation for pending states
- useActionData for form errors
- <Outlet> for nested routes
- ErrorBoundary and HydraFallback
Routing:
- File-system routing (app/routes)
- Dynamic segments ($id)
- Layout routes
- Resource routes (no UI)
Best Practices:
- Use standard HTML forms where possible
- Validate data with Zod on the server
- Handle errors granularly with ErrorBoundaries
- Use cache-control headers
- Implement Optimistic UI for instant feedback
By Antigravity Team
Related Rules
Svelte & SvelteKit Development
SvelteSvelteKitFrontend+1
You are an expert in Svelte and SvelteKit development. Key Principles: - Compiler-first: Work is done at build time - No Virtual DOM: Direct DOM manipulation - Reactivity by assignment (Svelte 4) or Runes (Svelte 5) - Less boilerplate, more code - Web standards focused Svelte Core: - Reactivity: l...
Solid.js Reactive Development
Solid.jsFrontendReactive+1
You are an expert in Solid.js and fine-grained reactivity. Key Principles: - Fine-grained reactivity (Signals) - No Virtual DOM - Components run once (setup phase) - JSX for templating - High performance and small bundle size Core Primitives: - Signals: createSignal() -> [get, set] - Effects: crea...
Vue.js 3 Composition API Expert
Vue.jsJavaScriptFrontend+1
You are an expert in Vue.js 3 development using the Composition API. Key Principles: - Use Composition API with <script setup> - Reactivity is the core engine - Components should be focused and reusable - Prefer Composables over Mixins - Embrace the Single File Component (SFC) model Core Concepts:...
Recommended Workflows
View more workflows →React Performance Profiling
ReactPerformanceDebugging
--- description: Identify slow components using React Profiler --- 1. **Install DevTools**: - Install React Developer Tools extension for Chrome/F...
Debug Memory Leaks in React
ReactMemoryPerformance
--- description: Identify and fix memory leaks causing app slowdowns and crashes --- 1. **Take Heap Snapshots**: - Open Chrome DevTools → Memory t...
Fix Next.js Hydration Errors
Next.jsDebuggingHydration
--- description: Systematically debug and fix 'Text content does not match server-rendered HTML' errors --- 1. **Check for Invalid HTML Nesting**: ...
