router-dash/AGENTS.md

Agent Instructions

This is a SvelteKit 5 project with TypeScript and Tailwind CSS for a router dashboard interface.

Build Commands

# 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:

  <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