123 lines
3.0 KiB
Markdown
123 lines
3.0 KiB
Markdown
# Agent Instructions
|
|
|
|
This is a SvelteKit 5 project with TypeScript and Tailwind CSS for a router dashboard interface.
|
|
|
|
## Build Commands
|
|
|
|
```bash
|
|
# Development server
|
|
npm run dev
|
|
|
|
# Build for production
|
|
npm run build
|
|
|
|
# Preview production build
|
|
npm run preview
|
|
|
|
# Type checking
|
|
npm run check
|
|
npm run check:watch
|
|
|
|
# Linting and formatting
|
|
npm run lint
|
|
npm run format
|
|
```
|
|
|
|
## Code Style Guidelines
|
|
|
|
### TypeScript
|
|
|
|
- Use strict TypeScript mode
|
|
- Use `import type` for type-only imports
|
|
- Prefer interfaces over type aliases for object shapes
|
|
- Use PascalCase for types, interfaces, enums, and components
|
|
- Use camelCase for functions, variables, and properties
|
|
- Enum values use PascalCase (e.g., `IPv4`, `Static`)
|
|
- Use explicit return types on exported functions
|
|
|
|
### Svelte 5 Runes
|
|
|
|
- Use `$props()` for component props with typed interfaces
|
|
- Use `$derived()` for computed values
|
|
- Always define Props interface for component props
|
|
- Example:
|
|
```svelte
|
|
<script lang="ts">
|
|
interface Props {
|
|
iface: NetworkInterface
|
|
class?: string
|
|
}
|
|
let { iface, class: className = '' }: Props = $props()
|
|
const ipv4Addresses = $derived(iface.Addresses?.filter((addr) => addr.Family === 2) ?? [])
|
|
</script>
|
|
```
|
|
|
|
### Formatting
|
|
|
|
- Use 2 spaces for indentation
|
|
- Single quotes for strings
|
|
- Trailing commas enabled
|
|
- No semicolons
|
|
- Print width: 100
|
|
- Tailwind CSS class sorting enabled
|
|
|
|
### Imports
|
|
|
|
- Use `$lib/` alias for imports from src/lib
|
|
- Group imports: external libraries, then $lib imports, then relative imports
|
|
- Use type imports: `import type { NetworkInterface } from '$lib/types'`
|
|
|
|
### Error Handling
|
|
|
|
- Use optional chaining (`?.`) and nullish coalescing (`??`) for safe property access
|
|
- Provide default values for optional props
|
|
- Use proper TypeScript narrowing with type guards when needed
|
|
|
|
### Component Structure
|
|
|
|
- One component per file
|
|
- Use `.svelte` extension for components
|
|
- Place reusable UI components in `$lib/components/ui/`
|
|
- Place feature-specific components in `$lib/components/<feature>/`
|
|
- Use `Snippet` type from svelte for children props
|
|
|
|
### Styling
|
|
|
|
- Use Tailwind CSS classes
|
|
- Prefer utility classes over custom CSS
|
|
- Use color utilities from the project's palette (green-600, yellow-600, red-600, etc.)
|
|
|
|
## MCP Tools
|
|
|
|
You have access to Svelte 5 and SvelteKit documentation via MCP:
|
|
|
|
### 1. list-sections
|
|
|
|
Use FIRST to discover available documentation sections.
|
|
|
|
### 2. get-documentation
|
|
|
|
Fetch documentation for specific sections after listing.
|
|
|
|
### 3. svelte-autofixer
|
|
|
|
MUST use this tool whenever writing Svelte code before sending to the user. Keep calling until no issues remain.
|
|
|
|
### 4. playground-link
|
|
|
|
Generate Svelte Playground links after user confirmation. Never use if code was written to project files.
|
|
|
|
## Project Structure
|
|
|
|
```
|
|
src/
|
|
routes/ # SvelteKit routes
|
|
lib/
|
|
components/ # Svelte components
|
|
ui/ # Reusable UI primitives
|
|
network/ # Network-specific components
|
|
types.ts # TypeScript type definitions
|
|
utils/ # Utility functions
|
|
static/ # Static assets
|
|
```
|