Name: app-router
Rating: 80 (1 reviews)
Author: Lingjie-chen

app-router

This skill should be used when the user asks to "create a Next.js route", "add a page", "set up layouts", "implement loading states", "add error boundaries", "organize routes", "create dynamic routes", or needs guidance on Next.js App Router file conventions and routing patterns.

1.39x

Quality

71%

Does it follow best practices?

Impact

96%

1.39x

Average score across 3 eval scenarios

Securityby

Passed

No known issues

Optimize this skill with Tessl

npx tessl skill review --optimize ./.trae/skills/app-router/SKILL.md

Evaluation results

100%

45%

Developer Documentation Portal — Versioned Docs with Search

Dynamic route segments and async params

Criteria

Without context

With context

Dynamic folder naming

100%

Params awaited

100%

Params typed as Promise

100%

searchParams awaited

100%

searchParams typed as Promise

100%

Catch-all or optional catch-all

100%

generateStaticParams used

100%

generateMetadata function

50%

100%

Metadata type imported

100%

page.tsx exports default

100%

Async page component

100%

90%

18%

Product Catalog — Resilient Browsing Experience

Loading/error states and route organization

Criteria

Without context

With context

loading.tsx present

100%

error.tsx client directive

100%

error.tsx receives error prop

100%

error.tsx receives reset prop

100%

not-found.tsx present

100%

notFound() from next/navigation

100%

Route group folder naming

100%

Private folder naming

100%

Route group layout

100%

error.tsx does not catch layout errors note

Correct directory depth

100%

20%

Analytics Dashboard — Multi-Panel Layout with Activity Feed

Root layout, parallel routes, and templates

Criteria

Without context

With context

Root layout has html tag

100%

Root layout has body tag

100%

Root layout no use client

100%

Parallel slot folders

100%

Layout accepts slot props

100%

default.tsx in each slot

100%

template.tsx used

100%

No layout-to-page prop passing

100%

Shared data pattern

100%

Nested layout

100%

Slot loading states

100%

Repository: Lingjie-chen/MT5
Commit: 3069d33

Evaluated: 26 days ago
Agent: Claude Code
Model: Claude Sonnet 4.6

Table of Contents

Developer Documentation Portal — Versioned Docs with Search Product Catalog — Resilient Browsing Experience Analytics Dashboard — Multi-Panel Layout with Activity Feed

Is this your skill?

If you maintain this skill, you can claim it as your own. Once claimed, you can manage eval scenarios, bundle related skills, attach documentation or rules, and ensure cross-agent compatibility.