Back to the catalog

react-router-framework-mode

remix-run/agent-skills · skills.sh

Open source Repository Open in the app JSON README (API)

About

Skill publicada por remix-run/agent-skills no skills.sh. Instale com: npx skills add remix-run/agent-skills@react-router-framework-mode

Details

Kind
Agent skills
Topic
No topic detected
Publisher
remix-run
Origin
skillssh
Category
ferramentas
Stars
137
Forks
4
Open pull requests
1
Last push
2026-06-18T13:30:14Z
Repository state
arquivado
License
MIT
Added
2026-08-30 15:21:45
Updated
2026-09-08 15:03:26
Origin id
remix-run/agent-skills/react-router-framework-mode

README

> [!WARNING]
> This skills repo has been archived in favor of:
> 1. Putting the React Router Agent Skill directly in the [remix-run/react-router repo](https://github.com/remix-run/react-router/tree/main/.agents/skills/react-router).
> 2. Publishing our official docs in `node_modules`.
> 3. Making the Skill much leaner and encouraging Agents to use those docs in `node_modules` directly.
>
> To learn more, check out [this discussion](https://github.com/remix-run/react-router/discussions/15099) or watch [this explainer video](https://www.youtube.com/watch?v=KA9_vhZpOtk))
> 
> To add the new skill to your project, simply run:
> 
> `npx skills add https://github.com/remix-run/react-router --skill react-router`
> 
> Moving forward, adding the Agent Skill will be part of React Router's CLI when initiating a new project.


# Agent Skills

[Agent Skills](https://agentskills.io) for building web applications.

These skills teach AI coding agents how to use frameworks and libraries correctly. Instead of relying on potentially outdated training data, agents can reference these skills for accurate, up-to-date patterns.

## Installation

```sh
npx skills add remix-run/agent-skills
```

This installs the skills into your project so your AI agent can reference them.

## Available Skills

### [`react-router-framework-mode`](./skills/react-router-framework-mode/)

Full-stack React apps using [React Router's](https://reactrouter.com) framework mode. Covers routing, loaders, actions, forms, sessions, middleware, error handling, and rendering strategies.

```sh
npx skills add remix-run/agent-skills --skill react-router-framework-mode
```

### [`react-router-data-mode`](./skills/react-router-data-mode/)

React apps using React Router's data mode with `createBrowserRouter` and `RouterProvider`. Covers route objects, loaders, actions, forms, pending UI, and optimistic updates without the Vite plugin.

```sh
npx skills add remix-run/agent-skills --skill react-router-data-mode
```

### [`react-router-declarative-mode`](./skills/react-router-declarative-mode/)

React apps using React Router's declarative mode with `BrowserRouter`. Covers JSX-based routing, navigation with Link/NavLink, and reading URL params without data loading features.

```sh
npx skills add remix-run/agent-skills --skill react-router-declarative-mode
```

## How It Works

Each skill contains:

- **`SKILL.md`** - Main entry point with quick patterns and a reference table
- **`references/`** - Detailed documentation for specific topics

When your AI agent encounters a relevant task, it loads the skill and references to generate accurate code using current APIs and best practices.

## License

MIT

More