# AI Output Format Standards
## Rule
All AI-generated code MUST include file path headers, proper language tags, and follow the project's import ordering conventions. Output should be copy-paste ready.
## File Path Headers
```typescript
// src/components/UserProfile/UserProfile.tsx
import React from 'react';
// ... rest of code
```
### Good
```typescript
// src/components/UserProfile.tsx
export function UserProfile() { ... }
```
### Bad
```typescript
// No file path — where does this go?
export function UserProfile() { ... }
```
## Code Block Language Tags
Always specify the language for syntax highlighting:
### Good
```typescript
const user: User = { name: "Alice" };
```
### Bad
```
const user: User = { name: "Alice" };
```
## Import Ordering
```typescript
// 1. React/framework imports
import React, { useState } from 'react';
import { useRouter } from 'next/navigation';
// 2. External library imports
import { useQuery } from '@tanstack/react-query';
import { z } from 'zod';
// 3. Internal imports (with @/ alias)
import { Button } from '@/components/ui/Button';
import { useAuth } from '@/hooks/useAuth';
import type { User } from '@/types';
```
## Response Structure
When generating new files, use this order:
1. File path comment
2. Imports (grouped as above)
3. Type definitions
4. Constants
5. Main export (component, function, class)
6. Helper functions
7. Default export (only if required by framework)
## Multi-File Output
When generating multiple files, separate with clear headers:
```markdown
### src/components/UserProfile.tsx
[code]
### src/components/UserProfile.test.tsx
[code]
### src/components/index.ts (updated)
[code showing only the added export line]
```
## Anti-Patterns
- Code without file path (user doesn't know where to put it)
- Missing language tag on code blocks
- Imports in random order
- Mixing multiple files without clear separation
- Including explanatory text inside code blocks