code-style

name	code-style
description	Code style conventions for everything-dev projects — component file naming (kebab-case, lowercase), CSS (semantic Tailwind only, no hardcoded colors), no comments in implementation, import/export conventions, and following neighboring file patterns.
metadata	{"sources":"AGENTS.md,ui/src/components/ui/,packages/everything-dev/src/cli/init.ts"}

Code Style

Component & File Naming

• Files: lowercase, kebab-case (my-button.tsx, user-profile.tsx, data-table.tsx)
• Directories: lowercase, kebab-case (route-helpers/, api-client/, plugin-sidebar/)
• Never PascalCase for file or directory names
• Component exports: named exports matching the file name converted to PascalCase (user-profile.tsx → export function UserProfile())

Examples

✅ ui/src/components/ui/data-table.tsx
✅ ui/src/components/ui/dropdown-menu.tsx
✅ ui/src/routes/_layout/settings.tsx

❌ ui/src/components/ui/DataTable.tsx
❌ ui/src/components/ui/DropdownMenu.tsx
❌ ui/src/routes/_layout/SettingsPage.tsx

• Route files under ui/src/routes/ follow TanStack Router conventions: _ prefix for layouts, kebab-case for path segments

CSS & Tailwind

• Use semantic theme tokens only: bg-background, text-foreground, text-muted-foreground, bg-card, border-border
• No hardcoded colors: bg-blue-600, text-white, border-gray-200
• No magic spacing values outside of Tailwind's scale
• Dark mode is handled automatically by the theme system — do not add dark: variants

<div className="bg-background text-foreground">         // ✅ correct
<div className="p-4 rounded-lg border border-border">   // ✅ correct
<div className="bg-blue-600 text-white">                 // ❌ wrong

No Code Comments

• No comments in implementation files — types and tests are the documentation
• JSDoc on public API exports is acceptable but not required
• Inline comments (//, /* */) are not allowed in src/ files

Imports & Exports

• Use @/ path aliases (import { Button } from "@/components/ui/button")
• Named exports for components and utilities
• Default exports only for route components (export const Route = createFileRoute(...))
• Shared components exported from ui/src/components/index.ts

Follow Neighboring Files

• Match the import style, typing patterns, and structure of files in the same directory
• If neighboring files use function Component(), don't use const Component: React.FC = () =>
• If neighboring files group imports by type (React, third-party, local), do the same
• Consistent file structure within a directory is more important than personal preference