| name | frontend-code-quality |
| description | Provides code quality standards for frontend applications. This skill should be used when configuring linting rules, organizing file structures, or ensuring consistency across React applications. |
Frontend Code Quality
Quality standards for frontend applications. See references/code-quality-details.md for detailed patterns and code examples.
Linting & Testing
- ESLint 9 with
@eridu/eslint-config: pnpm lint
- Vitest with
happy-dom + @testing-library/react: pnpm test
- No
any types. React Hooks rules enforced.
Absolute Imports
Always use @/* imports (configured in tsconfig.json), never deep relative paths.
Naming Conventions
| Type | Convention | Example |
|---|
| Components | PascalCase | UserProfile.tsx |
| Hooks | camelCase with use prefix | useAuth.ts |
| Utilities | camelCase | formatDate.ts |
| Routes | TanStack Router file conventions | posts/$postId.tsx |
| Folders | kebab-case | user-profile/ |
Key Rules
- Colocation: Keep components/hooks/state close to usage. Only share when used across features.
- No nested render functions: Extract to separate components.
- Form Display Fields: Model read-only values as render-only fields, not fake schema names.
- Conditional rendering: Always use ternary (
condition ? <A /> : null), not && with numeric/nullable.
- Limit props: Split components, use composition, or group related props.
- No repeated magic limits: Centralize pagination/fetch limits in named constants.
Large Route Decomposition
Trigger: Route >200 LOC or mixes 3+ concerns → split into container + hooks + presentation.
Pattern: route container + useFeatureViewModel() hook + presentation components.
Paginated Route Consistency
useTableUrlState owns URL pagination state
- Feature hook updates
setPageCount from real API metadata
- Paginated queries use
placeholderData: keepPreviousData
- Shared
DataTablePagination renders footer
Route Access Pattern
- Central access map in
src/lib/constants/studio-route-access.ts
- Shared
StudioRouteGuard + useStudioAccess — no duplicated role checks
- Sidebar visibility from same policy map
- Studio sidebar groups are purpose-based:
Planning for schedules/shows/assignment setup, Operations for task setup, task review, show run review, and task reports, People for member/creator rosters, and Studio Settings for configuration surfaces.
- Keep
Creator Mapping with Planning, not People; it assigns creators to shows rather than managing creator records.
- Consistent wrappers:
AdminLayout for /system/*, PageLayout for studio pages
- Shared views across access tiers: when one presentation component (e.g.
MemberCompensationsView) is rendered from routes with different routeKey guards (admin/manager /members/$memberId/compensations and member self-view /my-compensations), gate any cross-route navigation by an opt-in prop (default off). Never render a link whose destination is protected by a stricter guard than the current route — it ships members into a guaranteed access-denied page. The opting route turns it on; the lower-trust route leaves it off.
Checklist
Related Skills