SvelteKit Architecture Rules

# SvelteKit Architecture Rules
=====================================

## Core Principles
-------------------

1. **Separation of Concerns**: Keep each component focused on a single responsibility.
2. **Modularity**: Break down large components into smaller, reusable pieces.
3. **Reusability**: Design components to be reusable across the application.
4. **Scalability**: Structure the application to accommodate growth and changes.

## Code Style Guidelines
-----------------------

### Naming Conventions

1. **File Names**: Use kebab-case for file names (e.g., `hello-world.svelte`).
2. **Component Names**: Use PascalCase for component names (e.g., `HelloWorld.svelte`).
3. **Variable Names**: Use camelCase for variable names (e.g., `helloWorld`).
4. **Function Names**: Use camelCase for function names (e.g., `getHelloWorld`).

### Typing

1. **Type Annotations**: Use type annotations for function parameters and return types.
2. **Type Definitions**: Use type definitions for complex data structures.

## Best Practices
-----------------

### Component Structure

1. **Components**: Keep components in the `src/lib/components` directory.
2. **Layouts**: Keep layouts in the `src/lib/layouts` directory.
3. **Pages**: Keep pages in the `src/routes` directory.
4. **Stores**: Keep stores in the `src/lib/stores` directory.

### Routing

1. **Route Naming**: Use descriptive names for routes (e.g., `users/[id].svelte`).
2. **Route Parameters**: Use parameterized routes for dynamic data (e.g., `users/[id].svelte`).

### State Management

1. **Store Usage**: Use stores for global state management.
2. **Local State**: Use local state for component-specific data.

### API Integration

1. **API Endpoints**: Keep API endpoints in the `src/lib/api` directory.
2. **API Client**: Use a single API client instance throughout the application.

## Common Pitfalls to Avoid
---------------------------

1. **Tight Coupling**: Avoid tightly coupling components to specific implementations.
2. **Deep Nesting**: Avoid deeply nesting components or conditional statements.
3. **Unused Code**: Remove unused code and components.
4. **Duplicate Code**: Avoid duplicating code or functionality.

## Example Use Cases
---------------------

### Component Example
```svelte
// src/lib/components/HelloWorld.svelte
<script>
  export let name: string;
</script>

<h1>Hello, {name}!</h1>
```

### Store Example
```svelte
// src/lib/stores/userStore.js
import { writable } from 'svelte/store';

export const user = writable({
  id: 1,
  name: 'John Doe'
});
```

### API Endpoint Example
```javascript
// src/lib/api/users.js
import { fetch } from 'node-fetch';

export async function getUsers() {
  const response = await fetch('/api/users');
  return await response.json();
}
```