ReddRadar
Agent skill
solidstart-routing
SolidStart file-based routing: routes directory structure, dynamic routes, nested layouts, route groups, app.tsx setup with FileRoutes component.
Install this agent skill to your Project
npx add-skill https://github.com/majiayu000/claude-skill-registry/tree/main/skills/data/solidstart-routing
Metadata
Additional technical details for this skill
- globs
-
[ "src/routes/**/*", "src/app.tsx", "src/entry-*.tsx" ]
SKILL.md
SolidStart File-Based Routing
Project Structure
public/ # Static assets
src/
├── routes/ # File-based routing
├── entry-client.tsx # Client entry
├── entry-server.tsx # Server entry
├── app.tsx # Root component
Basic Routes
Routes created by files in src/routes/. Each file must default export a component.
routes/index.tsx→/routes/about.tsx→/aboutroutes/blog.tsx→/blog
// routes/index.tsx
export default function Index() {
return <div>Home</div>;
}
Dynamic Routes
routes/users/[id].tsx→/users/:idroutes/posts/[[slug]].tsx→/posts/:slug?(optional)routes/docs/[...path].tsx→/docs/*(catch-all)
// routes/users/[id].tsx
import { useParams } from "@solidjs/router";
export default function UserProfile() {
const params = useParams();
return <div>User {params.id}</div>;
}
Nested Routes
Create directories for nested routes:
routes/blog/article-1.tsx→/blog/article-1
// routes/blog/article-1.tsx
export default function Article() {
return <article>Content</article>;
}
Nested Layouts
Create layout file with same name as directory:
// routes/blog.tsx - layout
import { RouteSectionProps } from "@solidjs/router";
export default function BlogLayout(props: RouteSectionProps) {
return (
<div>
<nav><h1>Blog</h1></nav>
<main>{props.children}</main>
</div>
);
}
// routes/blog/article-1.tsx - nested route
export default function Article() {
return <article>Content</article>;
}
Route Groups
Use parentheses for organization (don't affect URL):
routes/
├── (auth)/
│ ├── login.tsx → /login
│ └── signup.tsx → /signup
└── (marketing)/
├── about.tsx → /about
└── contact.tsx → /contact
Index File Naming
Rename index files with parentheses for clarity:
routes/blog/(blog).tsx→/blog(instead ofroutes/blog/index.tsx)
Escaping Nested Routes
Use parentheses to escape nested structure:
routes/
├── users.tsx # Layout
├── users/
│ ├── index.tsx # /users
│ └── projects.tsx # /users/projects
└── users(details)/
└── [id].tsx # /users/:id (separate layout)
Route Configuration
Export route object for preloading:
import type { RouteDefinition } from "@solidjs/router";
export const route = {
preload({ params }) {
return getData(params.id);
}
} satisfies RouteDefinition;
export default function Page() {
return <div>Content</div>;
}
App Setup
app.tsx
import { Suspense } from "solid-js";
import { Router } from "@solidjs/router";
import { FileRoutes } from "@solidjs/start/router";
export default function App() {
return (
<Router root={(props) => <Suspense>{props.children}</Suspense>}>
<FileRoutes />
</Router>
);
}
Critical: Always wrap router root with <Suspense> - routes are lazy-loaded.
Entry Points
entry-client.tsx:
import { mount, StartClient } from "@solidjs/start/client";
mount(() => <StartClient />, document.getElementById("app")!);
entry-server.tsx:
import { StartServer, createHandler } from "@solidjs/start/server";
export default createHandler(StartServer);
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
majiayu000/claude-skill-registry
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
majiayu000/claude-skill-registry
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
majiayu000/claude-skill-registry
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
majiayu000/claude-skill-registry
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
majiayu000/claude-skill-registry
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
majiayu000/claude-skill-registry
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
Didn't find tool you were looking for?