🛤️ Smart Routing Skill
name: smart-routing
description: Intelligently route files, requests, and tasks to appropriate handlers
🎯 Purpose
Automatically determine the best location, handler, or approach for files, requests, and tasks.
📋 When to Use
- Creating new files
- Organizing codebase
- Routing API requests
- Assigning tasks to agents
🗂️ File Routing
By File Type
| Extension |
Location |
Purpose |
.tsx, .jsx |
src/components/ |
React components |
.ts, .js |
src/utils/ |
Utility functions |
.css, .scss |
src/styles/ |
Stylesheets |
.test.ts |
Same dir as source |
Tests |
.md |
docs/ |
Documentation |
.json |
config/ or root |
Configuration |
By Purpose
| Purpose |
Location |
| Page component |
src/pages/ or app/ |
| Shared component |
src/components/ |
| API route |
src/api/ or app/api/ |
| Hook |
src/hooks/ |
| Context |
src/contexts/ |
| Type definitions |
src/types/ |
| Constants |
src/constants/ |
🔀 Request Routing
API Patterns
// RESTful routing
GET /api/users → List users
GET /api/users/:id → Get user
POST /api/users → Create user
PUT /api/users/:id → Update user
DELETE /api/users/:id → Delete user
Route Naming
// Naming conventions
/api/v1/resource // Versioned API
/api/resource/:id/subresource // Nested resource
/api/resource?filter=value // Query params
🤖 Task Routing
To Appropriate Skill
| Task Type |
Route To |
| Bug fix |
debugging |
| New feature |
code-generation |
| UI work |
design-mastery |
| Testing |
testing |
| Deployment |
deployment |
| Security |
security-audit |
By Complexity
| Complexity |
Approach |
| Simple |
Direct implementation |
| Medium |
Plan then implement |
| Complex |
Design doc → Review → Implement |
📁 Project Structure Templates
Web App (Vite/React)
src/
├── components/ ← UI components
├── pages/ ← Page components
├── hooks/ ← Custom hooks
├── utils/ ← Helper functions
├── services/ ← API calls
├── stores/ ← State management
├── types/ ← TypeScript types
└── assets/ ← Static assets
Next.js App Router
app/
├── (auth)/ ← Auth routes group
├── api/ ← API routes
├── dashboard/ ← Dashboard pages
├── layout.tsx ← Root layout
└── page.tsx ← Home page
🔧 Routing Logic
function routeFile(filename, purpose) {
// By extension
if (filename.endsWith('.test.ts')) {
return 'alongside source';
}
// By purpose
const routes = {
'component': 'src/components/',
'page': 'src/pages/',
'hook': 'src/hooks/',
'util': 'src/utils/',
'type': 'src/types/',
'api': 'src/api/'
};
return routes[purpose] || 'src/';
}
💡 Best Practices
- Consistent naming: Use same pattern throughout
- Group by feature: When project grows
- Flat when possible: Avoid deep nesting
- Co-locate related: Tests near source
- Clear boundaries: Separate concerns
🔗 Related Skills
project-setup - Initial structure
refactoring - Reorganize existing code
documentation - Document routing decisions