Skill creation for sveltekit template. @rodydavis

skills/create-sveltekit/SKILL.md

@@ -0,0 +1,103 @@
+---
+name: create-sveltekit
+description: Creates a new SvelteKit project with a wide range of selectable integrations.
+inputs:
+  - id: workspace_name
+    name: Workspace Name
+    type: string
+    description: The name of the folder for the new project.
+    default: my-sveltekit-app
+  - id: template
+    name: Template
+    type: enum
+    description: The SvelteKit template to start with.
+    default: minimal
+    options:
+      demo: Demo app
+      minimal: Minimal app
+      library: Library project
+  - id: types
+    name: Type Checking
+    type: enum
+    description: How to handle type checking.
+    default: ts
+    options:
+      ts: TypeScript syntax
+      jsdoc: JSDoc comments
+      null: None
+  - id: prettier
+    name: Add Prettier
+    type: boolean
+    description: Add Prettier for code formatting.
+    default: true
+  - id: eslint
+    name: Add ESLint
+    type: boolean
+    description: Add ESLint for code linting.
+    default: true
+  - id: vitest
+    name: Add Vitest
+    type: boolean
+    description: Add Vitest for unit testing.
+    default: false
+  - id: playwright
+    name: Add Playwright
+    type: boolean
+    description: Add Playwright for browser testing.
+    default: false
+  - id: tailwindcss
+    name: Add Tailwind CSS
+    type: boolean
+    description: Add Tailwind CSS for styling.
+    default: false
+  - id: drizzle
+    name: Add Drizzle
+    type: boolean
+    description: Add Drizzle ORM for database access.
+    default: false
+  - id: lucia
+    name: Add Lucia
+    type: boolean
+    description: Add Lucia for authentication.
+    default: false
+  - id: mdsvex
+    name: Add MDsveX
+    type: boolean
+    description: Add MDsveX for using Markdown in Svelte.
+    default: false
+  - id: paraglide
+    name: Add Paraglide
+    type: boolean
+    description: Add Paraglide for i18n.
+    default: false
+  - id: storybook
+    name: Add Storybook
+    type: boolean
+    description: Add Storybook for component development.
+    default: false
+---
+
+## When to Use This Skill
+
+Use this skill to create a new, customized SvelteKit project. It allows for the selection of common tools and integrations from the start.
+
+## Instructions
+
+1.  **Read Setup Instructions**
+    Review the [setup instructions](resources/setup_instructions.md) to understand how to initialize the project, run installer scripts from the `scripts` folder, and install dependencies.
+
+    *Action:* Read `resources/setup_instructions.md`.
+
+2.  **Execute Setup**
+    Follow the steps outlined in `resources/setup_instructions.md` to:
+    - Build and execute the `npm create svelte` command with the correct flags based on user inputs.
+    - Copy `init.js` and `package.json` from the `templates/sveltekit` directory into the new project.
+    - Execute the `init.js` script, passing the selected integrations as arguments. This script will run `npx svelte-add` for each tool and install all dependencies.
+    - Create the `.agents/rules/sveltekit.md` file.
+
+3.  **Final Verification**
+    Check that the following files exist in the new project directory:
+    - `package.json`
+    - `init.js`
+    - `svelte.config.js`
+    - `.agents/rules/sveltekit.md`

skills/create-sveltekit/resources/ai_rules.md

@@ -0,0 +1,33 @@
+# Gemini AI Rules for SvelteKit Projects
+
+## 1. Persona & Expertise
+
+You are an expert full-stack developer specializing in Svelte and SvelteKit. You are highly proficient in TypeScript, Vite, and the entire Svelte ecosystem. Your expertise includes building performant applications using SvelteKit's file-based routing, load functions, and endpoints, as well as integrating various tools like Tailwind CSS, Drizzle, Lucia, and Vitest.
+
+## 2. Project Context
+
+This project is a SvelteKit application built with Vite. The focus is on leveraging SvelteKit's features to build fast, modern web applications. The project may be configured with a variety of integrations. You should check `package.json` and `svelte.config.js` to understand which tools are currently installed.
+
+## 3. Coding Standards & Best Practices
+
+### SvelteKit Core Concepts
+
+- **File-Based Routing:** All routes are defined by the structure of the `src/routes` directory. Acknowledge this as the primary routing mechanism.
+  - `src/routes/about/+page.svelte` creates an `/about` route.
+  - `src/routes/blog/[slug]/+page.svelte` creates a dynamic route.
+- **Load Functions:** For loading data into a page, use `load` functions in `+page.ts` or `+page.server.ts`. Explain the difference (universal vs. server-only execution).
+- **Form Actions:** For handling form submissions, use SvelteKit's built-in form actions in `+page.server.js` or `+page.server.ts`.
+- **API Routes:** Create API endpoints by creating `+server.ts` files within the `src/routes` directory.
+- **Layouts:** Use `+layout.svelte` files to create shared layouts for different sections of the application.
+
+### Component Structure (`.svelte` files)
+
+- A component consists of three optional parts in this order:
+  1.  A `<script>` block for component logic (JS/TS).
+  2.  HTML-like markup for the component's structure.
+  3.  A `<style>` block for component-scoped CSS.
+
+### Adding Integrations
+
+- **Crucially**, when the user wants to add a new integration (e.g., a CSS framework, a database adapter, an auth solution), the **standard and required method** is to use the `svelte-add` command.
+- **Always recommend `npx svelte-add@latest <tool-name>`**. This ensures integrations are configured correctly according to SvelteKit's best practices.

skills/create-sveltekit/resources/setup_instructions.md

@@ -0,0 +1,100 @@
+# SvelteKit Workspace Setup Instructions
+
+This document provides the steps to set up a new SvelteKit workspace using a hybrid approach.
+
+## 1. Install Prerequisites (Node.js)
+
+This skill requires Node.js (LTS) and npm.
+
+### 1.1. Verify
+- `node -v`
+- `npm -v`
+
+If both commands work, go to **Step 2**.
+
+### 1.2. Install automatically (recommended)
+Run ONE of the following for your OS:
+
+#### Windows (PowerShell)
+- `powershell -ExecutionPolicy Bypass -File "skills/sveltekit/scripts/install_node_official.ps1"`
+
+#### macOS / Linux (bash)
+- `bash "skills/sveltekit/scripts/install_node_official.sh"`
+
+Then restart your terminal session and verify.
+
+---
+
+## 2. Create and Configure the Project
+
+This script first scaffolds a project with `create-svelte`, copies a base configuration, and then runs a configuration script (`init.js`) to add user-selected integrations.
+
+```bash
+# 1. Set variables from inputs
+WS_NAME="{{workspace_name}}"
+TEMPLATE_INPUT="{{template}}"
+TYPES_INPUT="{{types}}"
+ADD_PRETTIER={{prettier}}
+ADD_ESLINT={{eslint}}
+ADD_VITEST={{vitest}}
+ADD_PLAYWRIGHT={{playwright}}
+
+# 2. Determine Template Flag for create-svelte
+if [ "$TEMPLATE_INPUT" = "minimal" ]; then
+  TEMPLATE_FLAG="skeleton"
+elif [ "$TEMPLATE_INPUT" = "library" ]; then
+  TEMPLATE_FLAG="library"
+else # demo
+  TEMPLATE_FLAG="default"
+fi
+
+# 3. Build the create-svelte command
+CMD="npm create svelte@latest \"$WS_NAME\" -- --name \"$WS_NAME\" --template \"$TEMPLATE_FLAG\" --types \"$TYPES_INPUT\""
+if [ "$ADD_PRETTIER" = "true" ]; then CMD="$CMD --prettier"; else CMD="$CMD --no-prettier"; fi
+if [ "$ADD_ESLINT" = "true" ]; then CMD="$CMD --eslint"; else CMD="$CMD --no-eslint"; fi
+if [ "$ADD_VITEST" = "true" ]; then CMD="$CMD --vitest"; else CMD="$CMD --no-vitest"; fi
+if [ "$ADD_PLAYWRIGHT" = "true" ]; then CMD="$CMD --playwright"; else CMD="$CMD --no-playwright"; fi
+
+# 4. Scaffold the base project
+echo "Running: $CMD"
+eval "$CMD"
+
+# 5. Navigate to Project Directory
+cd "$WS_NAME"
+
+# 6. Copy custom base configurations from template
+echo "Copying custom package.json and init.js..."
+cp "../templates/sveltekit/package.json" "."
+cp "../templates/sveltekit/init.js" "."
+
+# 7. Build the init.js command with integration flags
+INIT_CMD="node init.js"
+if [ "{{tailwindcss}}" = "true" ]; then INIT_CMD="$INIT_CMD tailwindcss=true"; fi
+if [ "{{drizzle}}" = "true" ]; then INIT_CMD="$INIT_CMD drizzle=true"; fi
+if [ "{{lucia}}" = "true" ]; then INIT_CMD="$INIT_CMD lucia=true"; fi
+if [ "{{mdsvex}}" = "true" ]; then INIT_CMD="$INIT_CMD mdsvex=true"; fi
+if [ "{{paraglide}}" = "true" ]; then INIT_CMD="$INIT_CMD paraglide=true"; fi
+if [ "{{storybook}}" = "true" ]; then INIT_CMD="$INIT_CMD storybook=true"; fi
+
+# 8. Run the integration script, which will also install dependencies
+echo "Running post-scaffolding configuration: $INIT_CMD"
+eval "$INIT_CMD"
+```
+
+## 3. Configure Agents Rules
+
+This step copies the AI rules file into the new workspace.
+
+```bash
+mkdir -p ".agents/rules"
+cp "../skills/sveltekit/resources/ai_rules.md" ".agents/rules/sveltekit.md"
+```
+
+## 4. Run Server / Development Environment
+
+This command starts the development server.
+
+```bash
+npm run dev
+```
+

skills/create-sveltekit/scripts/install_node_official.ps1

@@ -0,0 +1,103 @@
+# Installs the latest Node.js LTS from official nodejs.org releases (user-local install).
+# - Detects CPU architecture
+# - Fetches latest LTS from Node dist index.json
+# - Downloads the official ZIP
+# - Extracts to %LOCALAPPDATA%\Programs\nodejs\<version>
+# - Adds to user PATH (no admin required)
+# - Prompts to restart terminal / Antigravity
+
+$ErrorActionPreference = "Stop"
+Set-StrictMode -Version Latest
+
+function Get-LatestLtsVersion {
+  $index = Invoke-RestMethod -Uri "https://nodejs.org/dist/index.json"
+  $lts = $index | Where-Object { $_.lts -ne $false } | Select-Object -First 1
+  if (-not $lts -or -not $lts.version) {
+    throw "Could not determine latest LTS from https://nodejs.org/dist/index.json"
+  }
+  return $lts.version  # e.g., v20.11.1
+}
+
+function Get-PlatformSuffix {
+  $arch = $env:PROCESSOR_ARCHITECTURE
+  switch ($arch) {
+    "AMD64" { return "win-x64" }
+    "ARM64" { return "win-arm64" }
+    "x86"   { return "win-x86" }
+    default { throw "Unsupported Windows architecture: $arch" }
+  }
+}
+
+function Get-MajorVersion([string]$v) {
+  # v like "v20.11.1"
+  $v = $v.Trim()
+  if ($v.StartsWith("v")) { $v = $v.Substring(1) }
+  return [int]($v.Split(".")[0])
+}
+
+# If Node already installed and >= 20, do nothing.
+try {
+  $existing = & node -v 2>$null
+  if ($LASTEXITCODE -eq 0) {
+    $major = Get-MajorVersion $existing
+    if ($major -ge 20) {
+      Write-Host "Node is already installed ($existing). No action needed."
+      Write-Host "npm version: " -NoNewline; & npm -v
+      exit 0
+    }
+    Write-Host "Node detected ($existing) but < 20; proceeding to install latest LTS."
+  }
+} catch {
+  # node not found
+}
+
+$version  = Get-LatestLtsVersion
+$platform = Get-PlatformSuffix
+$zipName  = "node-$version-$platform.zip"
+$zipUrl   = "https://nodejs.org/dist/$version/$zipName"
+
+$installBase = Join-Path $env:LOCALAPPDATA "Programs\nodejs"
+New-Item -ItemType Directory -Force -Path $installBase | Out-Null
+
+$tmpDir = Join-Path $env:TEMP ("node-install-" + [guid]::NewGuid().ToString("N"))
+New-Item -ItemType Directory -Force -Path $tmpDir | Out-Null
+$zipPath = Join-Path $tmpDir $zipName
+
+try {
+  Write-Host "Downloading $zipUrl"
+  Invoke-WebRequest -Uri $zipUrl -OutFile $zipPath
+
+  Write-Host "Extracting to $installBase"
+  Expand-Archive -Path $zipPath -DestinationPath $installBase -Force
+
+  $extractedDir = Join-Path $installBase ("node-" + $version + "-" + $platform)
+  if (-not (Test-Path $extractedDir)) {
+    throw "Extraction failed; expected folder not found: $extractedDir"
+  }
+
+  # Add to user PATH if not present
+  $userPath = [Environment]::GetEnvironmentVariable("Path", "User")
+  if (-not $userPath) { $userPath = "" }
+
+  $already = $userPath.Split(";") | Where-Object { $_.Trim() -ieq $extractedDir }
+  if (-not $already) {
+    $newUserPath = ($extractedDir + ";" + $userPath).TrimEnd(";")
+    [Environment]::SetEnvironmentVariable("Path", $newUserPath, "User")
+    Write-Host "Added Node to user PATH: $extractedDir"
+  } else {
+    Write-Host "Node path already present in user PATH."
+  }
+
+  # Also update current session PATH
+  $env:Path = $extractedDir + ";" + $env:Path
+
+  Write-Host "Installed Node $version"
+  Write-Host "Verify:"
+  & node -v
+  & npm -v
+
+  Write-Host ""
+  Write-Host "Restart your terminal / Antigravity session so PATH updates fully."
+} finally {
+  if (Test-Path $tmpDir) { Remove-Item -Recurse -Force $tmpDir }
+}