routing

Name: routing
Author: github/replica

$npx mdskill add github/replica/routing

Paths below are relative to this app's directory.

SKILL.md

---
name: routing
description: 'React Router v7 routing conventions for this SPA. USE WHEN: editing `app/routes.ts`, adding/removing a route, or changing navigation.'
---

# Routing

Paths below are relative to this app's directory.

- This app disables runtime SSR (`ssr: false`) and renders routes client-side. React Router still generates the SPA HTML shell during the build.
- Routes are defined in `app/routes.ts` using React Router v7 config (the "framework" style).

## General Structure

- Main navigation structure:
  - Home: `index("routes/home.tsx")` at `/`
  - Discover section: `/discover/models`, `/discover/tools`
  - Build section: `/build/agents`, `/build/tools`
  - Operate section: `/operate/dashboard`, `/operate/agents`
  - Docs: `/docs`
- Layout wrapper: `app/components/shell/NavLayout.tsx` provides top/left nav
- Export `topNavRoutes` and `getLeftNavRoutes(pathname)` from `app/routes.ts` for navigation components
- Type-safe routes via auto-generated types in `.react-router/types/`

## Adding a Route

1. Create the file in `app/routes/`
2. Add it to `app/routes.ts` config array
3. Use type-safe route imports: `import type { Route } from "./+types/routeName"`
4. Run `npm run type-check` from this app's directory to regenerate route types and check TypeScript.

More from github/replica

Skill	Description
accessibility-audit	Audits actual components and routes against applicable WCAG 2.2 A/AA criteria using consumer-owned design-system evidence and repository tools. Use when asked for an accessibility audit, a11y check, keyboard or focus review, contrast check, or screen-reader verification.
add-seed-data	Creates or updates believable deterministic raw fixture scenarios without breaking an existing prototype. Use when asked to add or change fixtures, seed data, sample data, scenarios, or cross-record relationships. Not for UI redesign, live-data infrastructure, or unrelated commands.
agent-browser	Use for explicit agent-browser CLI checks or a named browser capability neither the Copilot canvas nor configured Playwright MCP can supply. Ordinary rendered checks and browser selection belong to browser-canvas-validation.
browser-canvas-validation	Use the Copilot browser canvas first for rendered route checks, interaction tests, screenshots and visual, responsive or accessibility evidence. Use configured isolated Playwright MCP only when the canvas is unavailable for a required check.
component-design-system-review	Reviews existing UI components for design-system consistency, states, responsiveness and accessibility using consumer-owned context. Use when asked to review component quality, check design-system adherence or audit component consistency.
context-templates	Shared context template library for setup-skills. Read when discovering context documents or their ownership. This library supplies research inputs, not active product context or a separate authoring workflow.
coreai-ds-fluentui-react	Find and apply CoreAI design-system documentation. Use when choosing or reviewing @coreai-ds/react-components components, props, tokens, themes, templates, or UI patterns.
create-prototype	Builds new UI prototypes and makes targeted changes to existing prototypes using consumer-owned context. Use when asked to build a prototype, mock up a UI, or add, change, refine or recreate part of an existing prototype. Do not use for unrelated tasks, routine commands, Git lifecycle actions, acknowledgements or infrastructure work.
css-styling	CSS Modules conventions, design tokens, container queries, and CSS-vs-component boundaries. USE WHEN: editing any `.css` / `.module.css` file in this repo, or writing styles for a new component.
developer-handoff	Writes a lightweight Markdown concept handoff from existing decisions and evidence. Use when explicitly asked for a developer handoff, to transfer a prototype or concept to another team, or to prepare a brief for implementation. Not for ordinary prototype completion, building, reviewing or publishing.