Agent skill

Remix

by remix-run in remix-run/remix

Builds, reviews, and refactors Remix 3 apps using the remix package and remix/ imports.

MITAuto-check passedDevelopment

Install Remix

skills CLI
$ npx skills add remix-run/remix --skill remix -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install remix-run/remix remix --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/remix-run/remix.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.agents/skills/remix .claude/skills/remix && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
remix
GitHub stars
33k
Token cost
~1.3k tokens
SKILL.md length
580 words
Files
1
Skills in repo
19
Repo updated
First seen
Licence
MIT

At a glance

Builds, reviews, and refactors Remix 3 apps using the remix package and remix/ imports.

  • Works in 3 steps: Read the app's AGENTS.md, package.json,… → Search node_modules/remix/INDEX.md by… → Follow the index to the relevant guide…
  • Application structure
  • SKILL.md covers Find Context and Documentation, Remix Mental Model, Work Within the App and Verify the Behavior
  • Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md

What it does

Remix is an agent skill from remix-run/remix. Builds, reviews, and refactors Remix 3 apps using the remix package and remix/ imports. Use for application structure, routing, middleware, data, auth, UI, browser interaction, and tests; not for implementing Remix framework packages.

Its SKILL.md is about 1.3k tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.

It sits in Development, covering Refactoring. It works with Remix. The repository describes itself as: The fully-stacked web framework. The licence is MIT.

When your agent uses it

  • Application structure
  • Browser interaction
  • Not for implementing Remix framework packages

Example prompts

  • “/remix”

Workflow steps

3 steps, taken from the first numbered list in SKILL.md.

  1. Read the app's AGENTS.md, package.json, and tsconfig.json, then inspect the code that owns the behavior being changed.
  2. Search node_modules/remix/INDEX.md by task, export, or keyword, for example grep -i 'session' node_modules/remix/INDEX.md.
  3. Follow the index to the relevant guide for the workflow, then the package README for exact imports, options, behavior, and examples. If…

What it can do on your machine

Read from SKILL.md and the folder at commit ef2c594. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    No scripts in the folder and no shell commands in SKILL.md (its code samples are typescript).

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md.

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Remix loads about 1.3k tokens when it runs. Until then it costs about 60 tokens; SKILL.md has 580 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~60
When it runs · the whole SKILL.md, loaded when a task matches
~1.3k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from remix-run/remix at commit ef2c594, republished under its MIT licence (© remix-run). 580 words, ~1,333 tokens.

Download SKILL.mdSave it as .claude/skills/remix/SKILL.md (or your agent's skills folder).
name
remix
description
Builds, reviews, and refactors Remix 3 apps using the remix package and remix/* imports. Use for application structure, routing, middleware, data, auth, UI, browser interaction, and tests; not for implementing Remix framework packages.

Build and Review a Remix App

Find Context and Documentation

Read the relevant installed documentation before using unfamiliar Remix APIs:

  1. Read the app's AGENTS.md, package.json, and tsconfig.json, then inspect the code that owns the behavior being changed.
  2. Search node_modules/remix/INDEX.md by task, export, or keyword, for example grep -i 'session' node_modules/remix/INDEX.md.
  3. Follow the index to the relevant guide for the workflow, then the package README for exact imports, options, behavior, and examples. If there is no relevant guide, use the API README and existing app patterns.

Treat the installed documentation as canonical, including when it differs from this skill. Do not rely on remembered Remix 2 patterns or online APIs from a newer version. If the installation has no index, inspect its package.json exports and matching installed READMEs, source, and types.

Remix Mental Model

Remix builds on Web APIs such as Request, Response, URL, and FormData. Its APIs compose explicitly at runtime; do not assume file-based routing, generated route types, or a mandatory build step.

Routes, Router, and Controllers

Remix apps generally separate routing into three parts:

  • Routes define the URL and method contract, including typed URL generation (app/routes.ts in the starter).
  • The router connects routes, middleware, and controllers (app/router.ts).
  • Controllers implement the actions that handle matched routes (app/actions/).

This organization applies to server apps and browser apps using the SPA router. Remix's pieces are composable and replaceable; using one does not require adopting the others. Follow the existing app's choices and use the documented starter conventions when establishing a new app.

A minimal server route can return a plain Web Response:

ts
// app/routes.ts
import { get, route } from 'remix/routes'

export const routes = route({
  hello: get('/hello/:name'),
})
ts
// app/actions/controller.ts
import { createController } from 'remix/router'

import { routes } from '../routes.ts'

export default createController(routes, {
  actions: {
    hello(context) {
      return new Response(`Hello, ${context.params.name}!`)
    },
  },
})
ts
// app/router.ts
import { createRouter } from 'remix/router'

import controller from './actions/controller.ts'
import { routes } from './routes.ts'

export const router = createRouter()
router.map(routes, controller)

The runtime adapter passes requests to router.fetch(request). Generate URLs from the same route contract: routes.hello.href({ name: 'Remix' }) produces /hello/Remix.

Components

Remix components use JSX, but they are not React. A component's setup function runs once per instance and returns a render function. Local variables in setup preserve state between renders; event handlers change that state and call handle.update() to request another render:

tsx
import { on } from 'remix/component'
import type { Handle } from 'remix/component'

function Counter(handle: Handle) {
  let count = 0

  return () => (
    <button
      type="button"
      mix={on('click', () => {
        count++
        handle.update()
      })}
    >
      Count: {count}
    </button>
  )
}

Read changing props from handle.props during render, rather than capturing their initial values in setup. Do not apply React hooks or lifecycle assumptions.

Event handlers run only when the component is mounted or hydrated in the browser; server-rendered HTML alone is not interactive. Follow the installed interactivity guide and the app's existing browser-entry setup.

Show full SKILL.md (200 more words)Show less

Work Within the App

  • Preserve the app's package manager, scripts, runtime, middleware order, and import conventions unless the task requires changing them. Do not replace an existing solution merely to match the starter.
  • Change the narrowest owner of the behavior. Keep route-local code together and share it only when multiple areas need it.
  • Prefer Web APIs, native links, buttons, and forms, plus existing first-party Remix primitives, over custom abstractions.
  • Treat browser-reachable modules as public: keep secrets and trusted server logic out of them. In the starter, colocated public/ directories mark browser-reachable source.

Verify the Behavior

Use the app's scripts for relevant tests and typechecking, then verify the changed behavior directly. For UI changes, exercise the interaction in the browser, not just the rendered appearance. When enhancing a server-rendered page, check both ordinary document behavior and the enhanced path. Test rejection and failure paths for changes involving untrusted input or access control.

Use the installed testing guide for test patterns and CLI documentation for diagnostics. Run remix doctor after structural or configuration changes; review findings before applying fixes. Do not run destructive database commands or rewrite configuration merely to make a diagnostic pass. Report what was checked and what remains unverified.

© remix-run, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

Just SKILL.md in .agents/skills/remix of remix-run/remix.

Open the folder on GitHubat commit ef2c594

Compare with similar skills

Remix next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Remix compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Remix this skillremix-run/remix33k—~1.3kAutomated safety check: PassMIT
Guidelinesakash-network/node1.1k22 repos~577Automated safety check: PassMIT
Component Refactoringlangflow-ai/langflow156k—~3.5kAutomated safety check: PassMIT
Migrate Core Code to Submodulestinyhumansai/openhuman42k—~2.6kAutomated safety check: PassGPL-3.0
Systematic Code Refactoringluongnv89/claude-howto42k—~3kAutomated safety check: PassMIT
Codexskills-directory/skill-codex1.5k3 repos~1.8kAutomated safety check: PassMIT

Similar skills

  • Guidelines

    akash-network/node

    Behavioral guidelines to reduce common LLM coding mistakes. An agent skill from akash-network/node.

    1.1k GitHub starsUsed in 22 repos~577 tokens
    DevelopmentAuto-check passed
  • Component Refactoring

    langflow-ai/langflow

    Refactor high-complexity React components in Langflow frontend.

    156k GitHub stars~3.5k tokensUpdated yesterday
    DevelopmentAuto-check passed
  • Migrate Core Code to Submodules

    tinyhumansai/openhuman

    Plans and carries out moving non-host-specific code and its tests from the OpenHuman core into vendored tiny submodule libraries, then releases the submodule and re-pins the host.

    42k GitHub stars~2.6k tokensUpdated yesterday
    DevelopmentAuto-check passed
  • Systematic Code Refactoring

    luongnv89/claude-howto

    Guides refactoring in phases based on Martin Fowler's method: research, test coverage check, planning and small tested steps, with your approval at each phase.

    42k GitHub stars~3k tokensUpdated 8 days ago
    DevelopmentAuto-check passed
  • Codex

    skills-directory/skill-codex

    A skill your agent uses when the user asks to run Codex CLI (codex exec, codex resume) or references OpenAI Codex for code analysis, refactoring, or automated editing

    1.5k GitHub starsUsed in 3 repos~1.8k tokens
    DevelopmentAuto-check passed
  • Ponytail

    DavidObando/gsharp

    Forces the laziest solution that actually works, simplest, shortest, most minimal.

    565 GitHub starsUsed in 8 repos~1.7k tokens
    DevelopmentAuto-check passed

More from remix-run/remix

All 19 skills in this repo
  • Supersede PR

    remix-run/remix

    Safely replace one GitHub pull request with another. An agent skill from remix-run/remix.

    33k GitHub stars~456 tokensUpdated yesterday
    Auto-check passed
  • Add Package

    remix-run/remix

    Create or align a package in the Remix monorepo to match existing package conventions.

    33k GitHub stars~2k tokensUpdated yesterday
    Auto-check passed
  • Author UI Primitives

    remix-run/remix

    Build idiomatic headless primitives in packages/ui for Remix.

    33k GitHub stars~2.5k tokensUpdated yesterday
    Auto-check passed
  • Fix Issue

    remix-run/remix

    Fix a reported issue in Remix from a GitHub issue. An agent skill from remix-run/remix.

    33k GitHub stars~1.8k tokensUpdated yesterday
    Auto-check passed
  • Make Demo

    remix-run/remix

    Create or revise demos in the Remix repository. An agent skill from remix-run/remix.

    33k GitHub stars~2.4k tokensUpdated yesterday
    Auto-check passed
  • Make PR

    remix-run/remix

    Create GitHub pull requests with clear, reviewer-friendly descriptions.

    33k GitHub stars~847 tokensUpdated yesterday
    Auto-check passed

Works with

Categories

Questions about Remix

What does Remix do?

Builds, reviews, and refactors Remix 3 apps using the remix package and remix/ imports. Remix is an agent skill from remix-run/remix. Builds, reviews, and refactors Remix 3 apps using the remix package and remix/ imports.

When should I use Remix?

Remix fits situations like: application structure; browser interaction; not for implementing Remix framework packages.

How do I install Remix in Claude Code?

Run `npx skills add remix-run/remix --skill remix -a claude-code`. Or copy the skill folder (.agents/skills/remix in remix-run/remix) into .claude/skills/remix in your project. Claude Code loads it when a task matches its description.

How do I install Remix in Codex?

Run `npx skills add remix-run/remix --skill remix -a codex`. Or copy the skill folder (.agents/skills/remix in remix-run/remix) into .agents/skills/remix in your project. Codex loads it when a task matches its description.

Can I use Remix in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add remix-run/remix --skill remix -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/remix, .gemini/skills/remix, .github/skills/remix and .opencode/skills/remix in your project.

What does Remix need to run?

SKILL.md names no scripts, command-line tools or credentials: Remix is instructions for the agent only.

Does Remix access the network?

SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.

Is Remix safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Remix use?

Remix is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Remix use?

About 1.3k tokens (SKILL.md is roughly 5.3k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Remix?

Skills that share tags, products or a category with Remix: Guidelines (akash-network/node, 1.1k stars), Component Refactoring (langflow-ai/langflow, 156k stars), Migrate Core Code to Submodules (tinyhumansai/openhuman, 42k stars) and Systematic Code Refactoring (luongnv89/claude-howto, 42k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Remix?

remix-run (a GitHub organization) maintains it in remix-run/remix, which has 33,397 GitHub stars. The repository holds 19 skills in this directory. The repository was last updated on October 8, 2026.

Source: remix-run/remix on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.