### Start Svelte Development Server

Source: https://github.com/davidhellmann/com.davidhellmann.sveltekit/blob/main/README.md

Starts a local development server for your Svelte project. This command allows you to see your changes in real-time as you develop. The `--open` flag will automatically open the application in your default browser.

```bash
npm run dev

# or start the server and open the app in a new browser tab
npm run dev -- --open
```

--------------------------------

### TypeScript Type Declarations for lightgallery

Source: https://github.com/davidhellmann/com.davidhellmann.sveltekit/blob/main/projectplan.md

Example of how to create a TypeScript declaration file (`.d.ts`) to provide type information for a library like `lightgallery` when its types are not automatically included or are missing.

```typescript
// src/lib/types/lightgallery.d.ts

declare module 'lightgallery/plugins/zoom' {
  import { LightGalleryEvents } from 'lightgallery';
  interface ZoomPluginOptions {
    // Define options for the zoom plugin if known
    scrollZoom?: boolean;
  }
  export default function zoom(options?: ZoomPluginOptions): { init: (instance: any) => void, destroy: () => void };
}

declare module 'lightgallery/plugins/thumbnail' {
  import { LightGalleryEvents } from 'lightgallery';
  interface ThumbnailPluginOptions {
    // Define options for the thumbnail plugin if known
    thumbnailsContainerClass?: string;
  }
  export default function thumbnail(options?: ThumbnailPluginOptions): { init: (instance: any) => void, destroy: () => void };
}

// Add declarations for other lightgallery plugins as needed
```

--------------------------------

### Core Development Commands

Source: https://github.com/davidhellmann/com.davidhellmann.sveltekit/blob/main/CLAUDE.md

Essential npm scripts for running the SvelteKit development server, building for production, previewing the build, checking TypeScript, linting, and formatting code.

```bash
npm run dev
# Start development server with GraphQL codegen watching
```

```bash
npm run build
# Build for production
```

```bash
npm run preview
# Preview production build
```

```bash
npm run check
# Run svelte-check with TypeScript
```

```bash
npm run lint
# Run prettier and eslint checks
```

```bash
npm run format
# Format code with prettier
```

--------------------------------

### Preview Svelte Production Build

Source: https://github.com/davidhellmann/com.davidhellmann.sveltekit/blob/main/README.md

Serves the production build of your Svelte application locally. This command is useful for testing the production-ready version of your app before deploying it to a live environment.

```bash
npm run preview
```

--------------------------------

### Create Svelte Project with npm create

Source: https://github.com/davidhellmann/com.davidhellmann.sveltekit/blob/main/README.md

Initializes a new Svelte project. You can create a project in the current directory or specify a new directory name. This command uses the create-svelte package to set up the project structure and initial configuration.

```bash
npm create svelte@latest

# create a new project in my-app
npm create svelte@latest my-app
```

--------------------------------

### Audit Project Dependencies for Security

Source: https://github.com/davidhellmann/com.davidhellmann.sveltekit/blob/main/projectplan.md

Runs a security audit on project dependencies to identify known vulnerabilities. This is a best practice for maintaining a secure development environment.

```bash
pnpm audit
```

--------------------------------

### Custom Scripts

Source: https://github.com/davidhellmann/com.davidhellmann.sveltekit/blob/main/CLAUDE.md

Custom npm scripts for running all scopes or a focused set of scopes.

```bash
npm run a
# Run all scopes script
```

```bash
npm run f
# Run focus scopes script
```

--------------------------------

### Build Svelte Project for Production

Source: https://github.com/davidhellmann/com.davidhellmann.sveltekit/blob/main/README.md

Generates an optimized production build of your Svelte application. This build is suitable for deployment to a web server. After building, you can preview the production version locally.

```bash
npm run build
```

--------------------------------

### Format Code with pnpm

Source: https://github.com/davidhellmann/com.davidhellmann.sveltekit/blob/main/projectplan.md

Applies code formatting rules to the project files. This command is used to automatically fix formatting inconsistencies identified by tools like Prettier.

```bash
pnpm run format
```

--------------------------------

### Icons & Assets Commands

Source: https://github.com/davidhellmann/com.davidhellmann.sveltekit/blob/main/CLAUDE.md

Command to add new icons using the Sly CLI. Icons are processed into SVG sprites automatically.

```bash
npm run icons:add
# Add new icons using Sly CLI
```

--------------------------------

### Update Project Dependencies

Source: https://github.com/davidhellmann/com.davidhellmann.sveltekit/blob/main/projectplan.md

Updates project dependencies to their latest minor versions. This is a quick fix to address outdated packages and potentially include bug fixes or minor improvements.

```bash
pnpm update
```

--------------------------------

### Svelte Custom Actions

Source: https://github.com/davidhellmann/com.davidhellmann.sveltekit/blob/main/CLAUDE.md

Lists custom Svelte actions available in the project for enhanced functionality, such as animations, lightboxes, and syntax highlighting.

```svelte
// useWaypoint: Intersection Observer animations with stagger support
// useLightbox: Image gallery with LightGallery integration
// useShiki: Syntax highlighting with Synthwave 84 theme
// useJumpingLetters: Interactive text animations
// useUnlazy: Lazy loading for images
```

--------------------------------

### GraphQL & Code Generation Commands

Source: https://github.com/davidhellmann/com.davidhellmann.sveltekit/blob/main/CLAUDE.md

Command to generate GraphQL types and operations. It relies on environment variables GQL_API_URL and GQL_API_TOKEN for CMS connection.

```bash
npm run codegen
# Generate GraphQL types and operations
```

--------------------------------

### Tailwind CSS At-Rules in Svelte Components

Source: https://github.com/davidhellmann/com.davidhellmann.sveltekit/blob/main/projectplan.md

Demonstrates the use of Tailwind CSS directives within Svelte components. These directives, such as `@apply`, `@screen`, and `@reference`, require proper PostCSS and Tailwind CSS configuration to function correctly.

```css
/* Example of Tailwind CSS directives in a Svelte component */

.my-element {
  @apply text-blue-500 font-bold;
}

@screen md {
  .my-element {
    @apply text-lg;
  }
}

/* @reference directive might be used for shared styles or themes */
/* @apply, @screen, @reference are examples of unknown CSS At-Rules if not configured */
```

--------------------------------

### Generate GraphQL Types

Source: https://github.com/davidhellmann/com.davidhellmann.sveltekit/blob/main/projectplan.md

Executes a script to regenerate GraphQL types for the project. This is crucial for ensuring type safety when interacting with GraphQL APIs, especially after schema changes.

```bash
pnpm run codegen
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.