Setting Up Frontend Project Standards

YAML
---
name: setting-up-frontend-project-standards
description: Establishes production-grade frontend project tooling and architecture following strict TypeScript, linting, formatting, commit, and dynamic/brand-driven UI conventions used by a Senior Frontend Lead at an International IT Consultancy. Use when scaffolding a new frontend/React project, auditing an existing codebase for best practices, configuring ESLint/Prettier/Husky/commitlint, or reviewing PRs for performance, stability, UX/DX, and reusability concerns.
---

# Setting Up Frontend Project Standards

.prettierrc

JSON
{
	"singleAttributePerLine": true,
	"trailingComma": "none",
	"singleQuote": true,
	"endOfLine": "auto",
	"useTabs": true,
	"semi": false,
	"tabWidth": 2
}

eslint.config.ts — flat config built on typescript-eslint, @eslint/js, with plugins: unused-imports, unicorn (recommended + custom class-member-order/filename-case/no-null rules), perfectionist (recommended-line-length), react-hooks (flat recommended, React projects only), sonarjs (applied to scripts/**/*.mjs), and prettier as the final formatting authority (eslint-config-prettier + eslint-plugin-prettier/recommended). Always globalIgnores build artifacts, lockfiles, and AI-agent tool directories (.claude, .cursor, .gemini, .codex, .opencode, .agents, .github, .nx).

Key enforced rules: unused-imports/no-unused-vars (ignore _-prefixed), no-console (allow table/info/error/warn only), eqeqeq: always, prefer-const, no-debugger, no-alert, no-var, kebab/snake filename casing, no native null (prefer undefined, exceptions for arguments).

commitlint.config.js

JavaScript
module.exports = { extends: ['@commitlint/config-conventional'] }

.husky/pre-commit

Bash
pnpm lint-staged

.husky/commit-msg

Bash
pnpm commitlint --edit "$1"

lint-staged config (package.json)

JSON
{
	"lint-staged": {
		"*.{ts,tsx,js,jsx}": ["eslint --fix", "prettier --write"]
	}
}

• TypeScript is non-negotiable: no .js source files, no any without explicit justification comment.
• Dynamic/backend-driven first: UI structure, copy, and feature flags should be data-driven, never hardcoded, so backend/CMS changes don't require redeploys.
• Brand-driven theming: all colors, logos, fonts resolved via tokens/config, never inlined.
• Shareable & reusable: build components/hooks as headless/presentational-agnostic; push side effects to the edges (hooks, API layer).
• DX matters: lint/format/commit-hygiene enforced automatically via Husky + lint-staged + commitlint — never rely on manual discipline.
• Performance: prefer @tanstack/react-query caching over manual fetch/state; code-split by route/feature; memoize only when profiling justifies it.
• Stability: eqeqeq, prefer-const, strict TS, SonarJS rules (for scripts) to catch bugs/code smells early.
• Naming: kebab-case or snake_case filenames only (enforced by unicorn/filename-case).
• Imports: no unused imports/vars (auto-fixed), no duplicate imports except type-only.

• Don't skip the optional React deps check — eslint-plugin-react-hooks and @types/react are React-only, don't add to non-React (e.g., Node/CLI) projects.
• Don't hardcode brand colors, logos, or copy directly in components — breaks white-labeling/i18n.
• Don't use null directly — prefer undefined per unicorn/no-null (function arguments are exempted).
• Don't bypass commit hooks (--no-verify) — commit message format and lint-staged checks exist to protect CI.
• Don't introduce alternative formatters/linters (e.g., Biome) that conflict with the established Prettier+ESLint flat-config pipeline.
• Don't manage server state with local useState/useEffect fetch patterns — always route through @tanstack/react-query.
• Don't allow console.log — only table, info, error, warn are permitted by lint rules.