Code Standards

Rule 2: Naming Conventions (camelCase)

CRITICAL: All component folders and filenames must use camelCase.

// ✅ Correct — camelCase
src/shared/components/ui/button/button.tsx
src/shared/components/ui/themeToggle/themeToggle.tsx
src/shared/components/ui/fileUpload/fileUpload.tsx
src/shared/components/forms/loginForm/loginForm.tsx
src/shared/components/forms/loginForm/emailField.tsx

// ❌ Wrong — PascalCase folders/files
src/shared/components/ui/Button/Button.tsx
src/shared/components/forms/LoginForm/LoginForm.tsx

// ❌ Wrong — kebab-case
src/shared/components/ui/theme-toggle/theme-toggle.tsx
src/shared/components/forms/login-form/login-form.tsx

The React component exported from the file is still PascalCase (e.g., export const ThemeToggle). Only the file and folder names use camelCase.

Rule 3: Component File Structure

Follow this order within every component file:

// 1. External imports
import { useState } from 'react';

// 2. Internal imports (styles last)
import { ROUTES } from '@/shared/lib/config/routes';
import { images } from '@/shared/assets/images';
import styles from './componentName.module.scss';

// 3. TypeScript interface
interface ComponentNameProps {
  label: string;
  variant?: 'primary' | 'secondary';
  onChange?: (value: string) => void;
}

// 4. Component
export const ComponentName = ({ label, variant = 'primary', onChange }: ComponentNameProps) => {
  // State
  const [value, setValue] = useState('');

  // Handlers
  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setValue(e.target.value);
    onChange?.(e.target.value);
  };

  // Render
  return (
    <div className={[styles.component, styles[`component--${variant}`]].filter(Boolean).join(' ')}>
      ...
    </div>
  );
};

Rule 4: Conditional Class Names

Use filter(Boolean).join(' ') — never template literals with ternaries for multiple classes:

// ✅ Clean
className={[
  styles.button,
  styles[`button--${variant}`],
  disabled ? styles['button--disabled'] : '',
  className,
].filter(Boolean).join(' ')}

// ❌ Messy
className={`${styles.button} ${styles[`button--${variant}`]} ${disabled ? styles['button--disabled'] : ''}`}

Rule 5: TypeScript Strictness

• All component props must have a TypeScript interface
• Prefer interface over type for component props
• Use as const for enum-like objects
• Avoid any — use unknown and narrow the type instead

Rule 7: Keep Functions Short — Split Instead of Branching

If a function is growing long due to if/else or conditional logic, split it into separate focused functions rather than one long branching function.

// ❌ One long function with branches
const handleSubmit = async (type: 'create' | 'update') => {
  if (type === 'create') {
    // 20 lines of create logic
  } else {
    // 20 lines of update logic
  }
};

// ✅ Two focused functions
const handleCreate = async () => {
  // create logic only
};

const handleUpdate = async () => {
  // update logic only
};

Rule 6: No Magic Strings

• Route strings → always use ROUTES.* (see .agent/skills/routes/SKILL.md)
• Asset paths → always use images.* / icons.* (see .agent/rules/assets/SKILL.md)
• API endpoints → define as constants, not inline strings