{post.title}<\/article> ))} <\/div> ) } ``` ### Parallel Data Fetching ```typescript async function getData() { const [users, posts] = await Promise.all([ prisma.user.findMany(), prisma.post.findMany() ]) return { users, posts } } export default async function Page() { const { users, posts } = await getData() \/\/ ... } ``` ### Sequential Data Fetching ```typescript export default async function Page({ params }: { params: { id: string } }) { const user = await prisma.user.findUnique({ where: { id: params.id } }) \/\/ Waits for user before fetching posts const posts = await prisma.post.findMany({ where: { authorId: user.id } }) return

{\/* ... *\/}<\/div> } ``` ## Reference Files - `references\/worldcrafter-routes.md` - Complete WorldCrafter route tree with all API patterns - `references\/related-skills.md` - How this skill works with other WorldCrafter skills - `assets\/templates\/` - All route file templates **Key patterns in worldcrafter-routes.md:** - World management structure (`\/worlds\/[slug]\/*`) - Entity CRUD patterns (characters, locations, events, items, factions) - API routes (file upload, background jobs, MCP server, SSE, webhooks) - Auth route group patterns - Nested layouts and route groups - Dynamic route parameter handling ## Skill Orchestration This skill is best for creating simple pages and routes. For complete features with forms, use worldcrafter-feature-builder instead. ### Common Workflows **Simple Static Pages:** 1. **worldcrafter-route-creator** (this skill) - Create page structure 2. Add content and styling 3. Optionally use **worldcrafter-test-generator** to add tests **API Endpoints:** 1. **worldcrafter-route-creator** (this skill) - Create route.ts with handlers 2. Add business logic and database operations 3. Optionally use **worldcrafter-auth-guard** to protect endpoints **Protected Pages:** 1. **worldcrafter-route-creator** (this skill) - Create page structure 2. **worldcrafter-auth-guard** - Add authentication checks **Dynamic Routes:** 1. **worldcrafter-route-creator** (this skill) - Create [id]\/page.tsx structure 2. Add data fetching and rendering logic 3. Add not-found.tsx for invalid IDs ### When Claude Should Use Multiple Skills Claude will orchestrate route-creator with other skills when: - User wants a simple page that later needs protection (route-creator → auth-guard) - User wants to create API endpoints (route-creator → auth-guard for protection) - User wants static pages with comprehensive tests (route-creator → test-generator) **Example orchestration:** ``` User: "Create an about page and a contact page" Claude's workflow: 1. worldcrafter-route-creator (this skill): - Create \/about page with loading and error states - Create \/contact page with loading and error states ``` **Alternative - Complete Feature:** ``` User: "Create a contact form" Claude's workflow (DO NOT use route-creator): 1. worldcrafter-feature-builder (use instead): - Creates \/contact route with form - Adds validation schema - Creates Server Action - Includes tests ``` ### Skill Selection Guidance **Choose this skill when:** - User wants "simple page", "about page", "static content" - User mentions "API endpoint" or "route handler" - User wants layouts or route structure only - No forms or validation needed **Choose worldcrafter-feature-builder instead when:** - User mentions "form", "submit", "validation", "feature" - User wants complete functionality with database - User wants CRUD operations - User wants comprehensive implementation **Use this skill for:** - Static content pages (about, terms, privacy) - API endpoints (Route Handlers) - Layouts and route groups - Simple read-only pages - Dynamic routes without forms **Do NOT use this skill for:** - Forms with validation (use feature-builder) - Complete features (use feature-builder) - Database operations (use database-setup or feature-builder) ## Route Scaffolding Script Reference ```bash # Basic route python scaffold_route.py dashboard # With layout python scaffold_route.py dashboard --with-layout # API route python scaffold_route.py api\/users --api # Dynamic route python scaffold_route.py posts\/[id] # Protected route python scaffold_route.py dashboard --protected ``` ## Troubleshooting ### Route Not Found - Ensure `page.tsx` exists in route folder - Check file naming (lowercase, no typos) - Verify folder structure matches URL ### Layout Not Applied - Layout must be named `layout.tsx` - Layout applies to children only - Check layout is in correct folder ### Loading State Not Showing - Add `loading.tsx` in route folder - Ensure page has async operations - Check Suspense boundaries ### Error Boundary Not Catching - Error boundary must be Client Component (`'use client'`) - Only catches errors in children - Add error.tsx at appropriate level ## Best Practices 1. **Use Server Components by default** - Add `'use client'` only when needed 2. **Colocate files** - Keep components\/utilities with routes 3. **Use layouts for shared UI** - Navigation, headers, footers 4. **Add loading states** - Improve perceived performance 5. **Handle errors gracefully** - Provide reset functionality 6. **Protect sensitive routes** - Check auth in server components 7. **Optimize metadata** - Use generateMetadata for dynamic content 8. **Use route groups** - Organize routes without affecting URLs ## Success Criteria A complete route setup includes: - ✅ Page component created - ✅ Loading state added - ✅ Error boundary added - ✅ Layout (if shared UI needed) - ✅ Metadata configured - ✅ Authentication check (if protected) - ✅ Not-found page (for dynamic routes) - ✅ Route accessible at correct URL