nextjs-import-enforcerlisted
Install: claude install-skill smicolon/ai-kit
# Import Convention Enforcer (Next.js/React)
Auto-enforces consistent import patterns using Next.js path aliases for clean, maintainable code.
## Activation Triggers
This skill activates when:
- Writing or modifying TypeScript/JavaScript files
- Creating new components, hooks, utilities
- Importing from other files
- Organizing project structure
- Mentioning "import", "add", "create"
## Required Import Pattern (MANDATORY)
Use path aliases for internal imports:
```tsx
// ✅ CORRECT - Path aliases
import { Button } from '@/components/ui'
import { useAuth } from '@/hooks'
import { formatDate } from '@/lib/utils'
import { User } from '@/types'
// ❌ WRONG - Relative paths
import { Button } from '../../components/ui/Button'
import { useAuth } from '../../../hooks/useAuth'
```
## Path Alias Configuration
**tsconfig.json:**
```json
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@/*": ["./src/*"],
"@/components/*": ["./src/components/*"],
"@/lib/*": ["./src/lib/*"],
"@/hooks/*": ["./src/hooks/*"],
"@/types/*": ["./src/types/*"],
"@/app/*": ["./src/app/*"]
}
}
}
```
## Auto-Fix Process
### Step 1: Detect Relative Imports
```tsx
// ❌ User writes
import { Button } from '../../../components/ui/Button'
import { Card } from '../../components/ui/Card'
import { useUser } from '../hooks/useUser'
```
### Step 2: Convert to Path Aliases
```tsx
// ✅ Auto-fixed to
import { Button } from '@/components/ui'
import { Card } from '@/c