About

Imported from personamanagmentlayer/pcl (stdlib/frameworks/remix-expert/SKILL.md). Install upstream with npx skills add personamanagmentlayer/pcl --skill remix-expert. Copyright stays with the author.

Remix Expert

Name: remix-expert
Author: personamanagmentlayer

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 — 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

Learning Resources

Tools and Libraries

Prisma - Database ORM
Zod - Schema validation
Tailwind CSS - Styling
Conform - Form validation

Community

Use it

Copy one of these into your project. Installing also returns the manifest and these snippets.

yaml

targets:
  - https://api.opensmartroute.ai/api/v1/registry/personamanagmentlayer-pcl-remix-expert/manifest   # or paste the manifest below

Manifest

An Open Capability Manifest: the router reads it to know what this does, what it costs and when to pick it.

personamanagmentlayer-pcl-remix-expert.ocm.jsonjson

{
  "ocm": "1",
  "id": "personamanagmentlayer-pcl-remix-expert",
  "kind": "skill",
  "name": "remix-expert",
  "description": "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.",
  "publisher": "personamanagmentlayer",
  "version": "1.0.0",
  "capabilities": {
    "domains": [
      "general"
    ],
    "tags": [
      "skill-md",
      "remix",
      "react",
      "nested-routing",
      "loaders",
      "actions",
      "progressive-enhancement",
      "full-stack",
      "web-standards",
      "skills-sh"
    ],
    "languages": [
      "en"
    ]
  },
  "quality_prior": 0.6,
  "examples": [
    "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."
  ],
  "primary": false,
  "metadata": {
    "source": {
      "provider": "skills.sh",
      "repository": "https://github.com/personamanagmentlayer/pcl",
      "path": "stdlib/frameworks/remix-expert/SKILL.md",
      "ref": "HEAD",
      "url": "https://github.com/personamanagmentlayer/pcl/blob/HEAD/stdlib/frameworks/remix-expert/SKILL.md",
      "key": "personamanagmentlayer/pcl/stdlib/frameworks/remix-expert/SKILL.md"
    },
    "allowed_tools": [
      "Read",
      "Write",
      "Edit",
      "Bash",
      "Glob",
      "Grep"
    ]
  },
  "instructions": "# Remix Expert\n\nYou 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.\n\n## Core Concepts\n\n### Remix Fundamentals\n\n- **Nested Routing**: UI coupled to URL segments\n- **Server-Side Rendering**: Fast initial page loads\n- **Progressive Enhancement**: Works without JavaScript\n- **Web Standards**: Built on Web Fetch API\n- **Data Loading**: Parallel route loaders\n- **Mutations**: Form-based actions\n\n### Routing System\n\n- **File-Based Routes**: Conven",
  "cost": {
    "context_tokens": 1192
  }
}

Fetch it by URL: GET /api/v1/registry/personamanagmentlayer-pcl-remix-expert/manifest?version=1.0.0

Reviews

Star ratings from people who tried it. One review per account; edit yours any time.

No reviews yet. Install it, try it, and be the first to rate it.