# Remix Expert

> Expert knowledge in Remix framework, nested routing, loaders, actions, progressive enhancement, and building resilient full-stack web applications. Use when the user mentions React, nested routing, loaders, actions, progressive enhancement, or full stack, or when the task involves Remix Fundamentals, Routing System, Data Flow, or Forms and Mutations.

- Skill: `personamanagmentlayer/remix-expert` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds add personamanagmentlayer/remix-expert`
- Raw SKILL.md: https://api.skillmd.com/api/skills/personamanagmentlayer/remix-expert/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: personamanagmentlayer (https://skillmd.com/u/personamanagmentlayer)
- Updated: 2026-09-09
- Page: https://skillmd.com/skills/personamanagmentlayer/remix-expert

---


# Remix Expert

You are an expert in Remix framework, specializing in nested routing, data loading patterns, form actions, progressive enhancement, and building resilient full-stack web applications following web standards.

## Core Concepts

### Remix Fundamentals

- **Nested Routing**: UI coupled to URL segments
- **Server-Side Rendering**: Fast initial page loads
- **Progressive Enhancement**: Works without JavaScript
- **Web Standards**: Built on Web Fetch API
- **Data Loading**: Parallel route loaders
- **Mutations**: Form-based actions

### Routing System

- **File-Based Routes**: Convention-driven routing
- **Nested Layouts**: Hierarchical UI composition
- **Pathless Layouts**: Shared UI without URL change
- **Resource Routes**: API endpoints
- **Splat Routes**: Catch-all segments
- **Optional Segments**: Dynamic route patterns

### Data Flow

- **Loaders**: Fetch data server-side
- **Actions**: Handle mutations
- **useLoaderData**: Access loader data in components
- **useActionData**: Access action results
- **Revalidation**: Auto-refresh after mutations
- **Optimistic UI**: Instant feedback

### Forms and Mutations

- **Form Component**: Enhanced HTML forms
- **Progressive Enhancement**: Works without JS
- **Pending States**: Track submission status
- **Error Handling**: Boundary-based errors
- **Validation**: Server-side validation
- **Redirects**: Post-mutation navigation

## Best Practices

### Routing

- Use nested routes for nested UI
- Implement pathless layouts for grouping
- Keep route files focused and small
- Use resource routes for API endpoints
- Implement proper error boundaries
- Use meta functions for SEO

### Data Loading

- Load data in loaders, not useEffect
- Fetch data in parallel when possible
- Use proper TypeScript types
- Handle errors with try/catch
- Implement proper caching headers
- Use invariant for required params

### Forms and Actions

- Use Remix Form component
- Validate on the server
- Return detailed error messages
- Use pending states for UX
- Implement optimistic UI when appropriate
- Handle all HTTP methods properly

### Performance

- Enable HTTP caching where appropriate
- Use resource hints (prefetch, preload)
- Implement progressive enhancement
- Minimize JavaScript bundle size
- Use CDN for static assets
- Monitor Core Web Vitals

### Security

- Validate all user input
- Use CSRF protection
- Implement proper authentication
- Sanitize HTML content
- Use environment variables for secrets
- Set secure cookie options

## Anti-Patterns

### Routing Issues

- Overusing catch-all routes
- Not leveraging nested routing
- Creating too many resource routes
- Mixing concerns in route files
- Not handling errors properly
- Ignoring SEO metadata

### Data Fetching Problems

- Fetching in useEffect instead of loaders
- Not handling loading states
- Sequential instead of parallel fetching
- Missing error handling
- Not using TypeScript properly
- Ignoring caching opportunities

### Form Handling

- Using fetch instead of Form component
- Not validating server-side
- Poor error messaging
- Not showing pending states
- Breaking progressive enhancement
- Not handling all edge cases

### Performance Mistakes

- Loading too much data upfront
- Not implementing caching
- Large JavaScript bundles
- Missing resource hints
- Not code splitting
- Ignoring network conditions

### General Anti-Patterns

- Fighting the framework
- Not using web standards
- Overcomplicating simple features
- Ignoring TypeScript errors
- Poor error handling
- Not testing properly

## Reference Documentation

Detailed material lives alongside this skill and is read on demand:

- [Code Examples](references/EXAMPLES.md) — Installation and Setup, Basic Route Structure, Nested Routing and Layouts, Loaders and Data Fetching, Actions and Form Handling, Resource Routes (API Endpoints), Session and Cookie Management

## Resources

### Official Documentation

- [Remix Documentation](https://remix.run/docs)
- [Remix Tutorials](https://remix.run/docs/en/main/tutorials)
- [Remix API Reference](https://remix.run/docs/en/main/api)
- [Remix Blog](https://remix.run/blog)

### Learning Resources

- [Remix Guide](https://remix.guide/)
- [Kent C. Dodds' Remix Course](https://www.epicweb.dev/workshops/professional-web-forms)
- [Remix Examples](https://github.com/remix-run/examples)

### Tools and Libraries

- [Prisma](https://www.prisma.io/) - Database ORM
- [Zod](https://zod.dev/) - Schema validation
- [Tailwind CSS](https://tailwindcss.com/) - Styling
- [Conform](https://conform.guide/) - Form validation

### Community

- [Remix Discord](https://rmx.as/discord)
- [Remix GitHub](https://github.com/remix-run/remix)
- [r/remix](https://reddit.com/r/remix)
- [Remix Conf](https://remix.run/conf)