initial commit

AGENTS.md

@@ -0,0 +1,122 @@
+# Agent Instructions
+
+This is a SvelteKit 5 project with TypeScript and Tailwind CSS for a router dashboard interface.
+
+## Build Commands
+
+```bash
+# Development server
+deno run dev
+
+# Build for production
+deno run build
+
+# Preview production build
+deno run preview
+
+# Type checking
+deno run check
+deno run check:watch
+
+# Linting and formatting
+deno run lint
+deno 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
+```