Conventions

Conventions — One-Time Project Setup

Installs ESLint rules and pre-commit hooks that enforce coding conventions deterministically. Run once per project. After that, tooling enforces the rules — AI never needs to repeat them.

Prerequisite: Run project-setup skill first (installs ESLint, Prettier, Husky, lint-staged).

---

Step 1: Install Additional ESLint Plugins

bun add -d eslint-plugin-unicorn eslint-plugin-react @eslint-react/eslint-plugin

Step 2: Add Convention Rules to eslint.config.ts

Merge these into the existing flat config:

import react from '@eslint-react/eslint-plugin'
import unicorn from 'eslint-plugin-unicorn'

// Add to tseslint.config(...):
{
	plugins: {
		'@eslint-react': react,
		unicorn,
	},
	rules: {
		// TypeScript conventions
		'@typescript-eslint/consistent-type-definitions': ['error', 'type'],
		'@typescript-eslint/no-explicit-any': 'error',
		'@typescript-eslint/consistent-type-assertions': [
			'error',
			{ assertionStyle: 'never' },
		],

		// Import restrictions
		'no-restricted-imports': [
			'error',
			{
				paths: [
					{ name: 'lodash', message: 'Use es-toolkit instead.' },
					{ name: 'date-fns', message: 'Use dayjs instead.' },
					{ name: 'react', importNames: ['default'], message: 'Use named imports from react.' },
				],
				patterns: [
					{ group: ['lodash/*'], message: 'Use es-toolkit instead.' },
					{ group: ['date-fns/*'], message: 'Use dayjs instead.' },
					{ group: ['@radix-ui/*'], message: 'Use base-ui primitives instead.' },
				],
			},
		],

		// No fetch — use axios
		'no-restricted-globals': ['error', { name: 'fetch', message: 'Use axios instead.' }],

		// No default exports + no inline styles
		'no-restricted-syntax': [
			'error',
			{
				selector: 'ExportDefaultDeclaration',
				message: 'Use named exports. Default exports allowed only in config files.',
			},
			{
				selector: 'JSXAttribute[name.name="style"]',
				message: 'No inline styles. Use Tailwind classes.',
			},
		],

		// Filenames
		'unicorn/filename-case': ['error', { case: 'kebabCase' }],
	},
},

// Config file overrides — allow default exports
{
	files: [
		'*.config.*',
		'**/app/routes/**/*',
		'**/routeTree.gen.ts',
	],
	rules: {
		'no-restricted-syntax': 'off',
	},
},