remix-project-layout
Describe the ideal layout of a Remix application, including canonical directories, route ownership, naming conventions, and file locations on disk. When asked to bootstrap that layout in a new directory, run the bundled TypeScript script.
Best for Remix developers starting n…Works with GitHubLow risk
⌘source
- author
@remix-run- repo
- remix-run/remix
- language
- TypeScript
★33kstars
2.8kforks
Apr 21, 2026
✦overview.md
Key Features
- ·Defines canonical Remix project directory structure
- ·Maps route ownership to specific file locations
- ·Includes bundled TypeScript script for bootstrapping new layouts
- ·Organizes code by responsibility within the app directory
- ·Specifies root directories for consistent application organization
Use Cases
- →Defining the initial structure for a new Remix application
- →Reviewing an existing Remix project's layout against conventions
- →Bootstrapping a new directory with the canonical Remix layout
Best for
- ✓Remix developers starting new projects
- ✓Teams establishing consistent project structures
Not ideal for
- !Non-Remix frameworks
- !Projects with established, divergent layouts
FAQs
name
remix-project-layout
description
Describe the ideal layout of a Remix application, including canonical directories, route ownership, naming conventions, and file locations on disk. When asked to bootstrap that layout in a new directory, run the bundled TypeScript script.
Remix Project Layout
Use this skill when defining, reviewing, or bootstrapping the on-disk layout of a Remix application.
This skill is about structure and conventions. It defines where code belongs, how route ownership maps to files on disk, and how a Remix app should be organized as it grows. When the user wants a new app scaffolded, run the bundled script instead of recreating the starter files by hand.
Root Layout
Use these root directories consistently:
app/for runtime application codedb/for database artifacts such as migrations and SQLite filespublic/for static files served as-istest/for shared test helpers, fixtures, and cross-app integration coveragetmp/for runtime scratch files such as uploads, caches, or local session files
App Layout
Inside app/, organize code by responsibility:
assets/for client entrypoints and client-owned behaviorcontrollers/for route-owned handlers and route-local UIdata/for schema, queries, persistence setup, and runtime data initializationmiddleware/for request lifecycle concerns such as auth, sessions, database injection, and uploads
$install
1-click copynpx skills add remix-run/remix --skill remix-project-layoutSafety assessment
★
Clarity score
How clear and easy to understand the SKILL.md instructions are, rated from 1 to 5.
5/ 5
excellentVery clear and well structured, with almost no room for misunderstanding.
◎
Actionability score
How directly an agent can act on the SKILL.md instructions, rated from 1 to 5.
5/ 5
very highHighly actionable with clear, concrete steps that an agent can follow directly.