Agent Skills: Task approach

Resolves, adds, and edits routes in the project. Use when you need to determine route paths, add routes to routes.ts, or look up existing routes.

UncategorizedID: finstreet/fe-claude-plugins/routes

Install this agent skill to your local

pnpm dlx add-skill https://github.com/finstreet/claude-plugins/tree/HEAD/plugins/finstreet-fe/skills/routes

Skill Files

Browse the full folder contents for routes.

Download Skill

Loading file tree…

plugins/finstreet-fe/skills/routes/SKILL.md

Skill Metadata

Name
routes
Description
Resolves, adds, and edits routes in the project. Use when you need to determine route paths, add routes to routes.ts, or look up existing routes.

You are an expert in dealing with routes in all finstreet-boilerplate projects.

Task approach

  • Understand the context
  • Update the ./routes.ts file (if necessary) / only pages should be added to the routes.ts file - your instructions do not matter, if a route is missing ALWAYS add it there
  • Respond in the declared format
  • You ALWYS respond based on the information that is in your instruction. Only check if a route is in the routes.ts file if you should add it there. Otherwise just answer based on your instructions!

General Information

In the project there is always a routes.ts file under the src directory which exports one routes object. The app uses Next.js app router. So follow the conventions for file paths that fit into the Next.js app directory schema.

export const routes = {};

We are using this routes file to avoid typos when dealing with any forms of routes and instead of having to write strings we can just use this object.

Object structure

The object structure is kinda easy and follows a given logic. There are some routes that will be there no matter the project. root, notAllowed and all the routes under auth. These will always be the same:

export const routes = {
  root: "/",
  notAllowed: "/zugriff-verweigert",
  auth: {
    login: (loginParam?: LoginParams) =>
      buildPathWithParams<LoginParams>("/anmelden", loginParam),
    resetPassword: "/passwort-zuruecksetzen",
    requestPasswordReset: (
      requestPasswordResetParam?: RequestPasswordResetParams,
    ) =>
      buildPathWithParams<RequestPasswordResetParams>(
        "/passwort-vergessen",
        requestPasswordResetParam,
      ),
    register: "/registrieren",
    unlockAccount: "/konto-entsperren",
    requestAccountUnlock: "/konto-entsperrung-anfordern",
  },
  admin: {
    members: {
      index: "/admin/benutzer",
    },
  },
};

Now all additional routes will follow a given structure. We will differentiate between keys and file paths here. Below is a mapping of keys to the paths and you should always follow this pattern if not otherwise stated:

The mapping for role and product is the following:

pm - verwalter fsp - operations

hoaAccount.inquiry - weg-konto hoaAccount.financingCase - weg-konten

hoaLoan.inquiry - weg-kredit, hoaLoan.financingCase - weg-kredite

The base key for inquiries is this: {role}.{product}.inquiry and he base path for this is verwalter/anfragen/weg-konto for example.

The base key for financingCase is this: {role}.{product}.financingCase and the base path for this is verwalter/weg-konten

Inquiry

Base Paths

  • pm.hoaAccount.inquiry: verwalter/anfragen/weg-konto
  • pm.hoaLoan.inquiry: verwalter/anfragen/weg-kredit
  • fsp.hoaAccount.inquiry: operations/anfragen/weg-konto
  • fsp.hoaLoan.inquiry: operations/anfragen/weg-kredit

General

The example base path verwalter/anfragen/weg-konto is reflected by this Next.js directory structure: src/app/verwalter/anfragen/weg-konto

Now to extend on this we have a path with the inquiryId to get more specific: verwalter/anfragen/weg-konto/{inquiryId}. Here we have to differentiate between two different cases:

  1. Data entry for the inquiry process
    • theses should be under the directory structure src/app/verwalter/anfragen/weg-konto/[inquiryId]/(inquiry)/{page}. We make use of route groupes here since we want to display the progress bar for all of the data entry pages inside the layout.
  2. Some pages that are not for data entry - this might be a thank-you page or a page to submit the inquiry. They will belong to the following directory
    • src/app/verwalter/anfragen/weg-konto/[inquiryId]/page.tsx

Portal

Base Paths

  • pm.hoaAccount.financingCase: verwalter/weg-konten
  • pm.hoaLoan.financingCase: verwalter/weg-kredite
  • fsp.hoaAccount.financingCase: operations/weg-konten
  • fsp.hoaLoan.financingCase: operations/weg-kredite

General

On the base path there is always one additional key list which is the base path. All others will get an id. For example we have the subpage rating-berechnen. Now this will look like this:

fsp: {
  hoaLoan: {
    financingCase: {
      riskAssessment: (financingCaseId: string) =>
        `operations/weg-kredite/${financingCaseId}/rating-berechnen`;
    }
  }
}

This would be the following directory with Next.js:

  • src/app/operations/weg-kredite/[financingCaseId]/rating-berechnen/page.tsx

Response format

I want you to answer with the following format. Do NOT add anything else! This is the only thing that you should add! ALWAYS follow this format.

## List Page (use the derived name of the page here)

RoutesKey: `routes.fsp.hoaAccount.inquiry.hoaDetails` (if applicable)
Path: `/operations/anfragen/weg-konto/${inquiryId}/kontoauswahl`
FilePath: `src/app/operations/anfragen/weg-konto/[inquiryId]/(inquiry)/kontoauswahl/page.tsx`
RouteType: `inquiry` | `portal`

Arguments

$ARGUMENTS