feat: Add blank-web project creation skill @rodydavis

skills/create-blank-web/SKILL.md

@@ -0,0 +1,35 @@
+---
+name: create-blank-web
+description: Creates a new blank web project using Vite by copying template files and installing custom AI rules.
+inputs:
+  - id: workspace_name
+    name: Workspace Name
+    type: string
+    description: The name of the folder for the new project.
+---
+
+## When to Use This Skill
+
+Use this skill when the user wants to create a new, modern blank web project from the `blank-web` template. This skill sets up a Vite-based development environment.
+
+## Instructions
+
+1.  **Read Setup Instructions**
+    Review the [setup instructions](resources/setup_instructions.md) to understand the full process for initializing the project.
+
+    *Action:* Read `resources/setup_instructions.md`.
+
+2.  **Execute Setup**
+    Follow the steps outlined in `resources/setup_instructions.md` to:
+    - Ensure **Node.js and npm** are installed, using the provided scripts if necessary.
+    - Create the workspace folder (using the `workspace_name` input).
+    - Copy the `blank-web` template files into the new workspace.
+    - Run `npm install` to install project dependencies.
+    - Create the `.agents/rules/blank-web.md` file using the content from `resources/ai_rules.md`.
+
+3.  **Final Verification**
+    Check that:
+    - `package.json` and `vite.config.js` exist in the new project root.
+    - `index.html` and `src/main.js` exist.
+    - The `node_modules` directory has been created.
+    - `.agents/rules/blank-web.md` exists.

skills/create-blank-web/resources/ai_rules.md

@@ -0,0 +1,54 @@
+# Gemini AI Rules for Blank Web Projects
+
+## 1. Persona & Expertise
+
+You are an expert web developer, proficient in HTML, CSS, and JavaScript. You have a strong understanding of modern web development best practices, including:
+- Semantic HTML5 for content structure.
+- Advanced CSS, including Flexbox, Grid, and CSS Variables for responsive and maintainable layouts.
+- Modern JavaScript (ES6+) for DOM manipulation and interactivity.
+- Web accessibility (a11y) standards (ARIA, alt text, etc.).
+- Using modern build tools like Vite for development and bundling.
+- Basic security awareness (e.g., sanitizing user input to prevent XSS).
+
+## 2. Project Context
+
+This is a minimal blank web project scaffolded with Vite. It provides a modern development environment for building static websites or client-side applications.
+
+Default assumptions:
+- The project uses Node.js and npm for dependency management and scripts.
+- The main entry point is `index.html` in the root directory.
+- The development server is run with `npm run dev`.
+- Production builds are created with `npm run build`.
+
+## 3. Development Environment
+
+This project is configured to run in a pre-built developer environment. The setup requires Node.js and npm.
+
+When providing instructions:
+- Assume the environment can run Node.js and npm commands.
+- The user can start the development server by running `npm run dev` from the project root.
+- The service will typically be available at `http://localhost:5173` (Vite's default).
+
+## 4. Coding Standards & Best Practices
+
+### HTML
+- Use semantic HTML5 elements (`<header>`, `<footer>`, `<main>`, `<article>`, `<section>`).
+- Ensure all images have `alt` attributes.
+- Use proper labeling for form elements.
+
+### CSS
+- Use CSS variables for colors, fonts, and spacing to improve maintainability.
+- Employ a mobile-first approach for responsive design using media queries.
+- Prefer Flexbox or Grid for layout over older methods.
+
+### JavaScript
+- JavaScript should be linked as an ES module in `index.html` (e.g., `<script type="module" src="/src/main.js"></script>`).
+- Use modern JavaScript syntax (ES6+).
+- Use modern DOM APIs like `querySelector` and `querySelectorAll`.
+
+## 5. Interaction Guidelines
+
+- Provide clear, actionable steps.
+- When generating code, provide complete file contents for HTML, CSS, or JavaScript.
+- If the request is ambiguous, ask for clarification about the desired layout, functionality, or user experience.
+- Remember that this is a Vite project. When adding new dependencies, instruct the user to use npm (e.g., `npm install <package-name>`).

skills/create-blank-web/resources/setup_instructions.md

@@ -0,0 +1,88 @@
+# Blank Web Workspace Setup Instructions
+
+Follow these steps to initialize the workspace.
+
+## 1. Install prerequisites (Node.js)
+
+This project uses Vite, which requires Node.js (version 18.0.0 or higher) and npm.
+
+### 1.1 Verify
+Run:
+- `node --version`
+
+If the command works and the version is **18.0.0 or higher**, go to **Step 2**.
+
+### 1.2 Install automatically
+Run ONE of the following depending on your OS:
+
+#### Windows (PowerShell)
+Run:
+- `powershell -ExecutionPolicy Bypass -File "scripts/install_node.ps1"`
+
+Then restart your terminal session and verify:
+- `node --version`
+
+#### macOS / Linux (bash)
+Run:
+- `bash "scripts/install_node.sh"`
+
+Then restart your shell session and verify:
+- `node --version`
+
+---
+
+## 2. Create the project (copy template files)
+
+Set workspace name:
+- `WS_NAME="<workspace_name>"`
+
+From the repo root (or any directory), create the folder:
+
+```bash
+mkdir -p "$WS_NAME"
+cd "$WS_NAME"
+npm create vite@latest . -- --template vanilla
+```
+- Copy the blank web template files into the workspace:
+
+# Copy from this repo’s blank-web template into the new workspace
+cp -R "<skill_root>/../../blank-web/." "$WS_NAME/"
+
+Then enter the workspace:
+
+cd "$WS_NAME"
+
+## 3. Install project dependencies
+
+Once inside the new workspace, install the npm packages:
+
+```bash
+npm install
+```
+
+## 4. Configure Agents Rules
+
+Create: .agents/rules/blank-web.md inside the new workspace directory.
+
+Copy the content from: resources/ai_rules.md
+
+Commands:
+
+mkdir -p .agents/rules
+# then create .agents/rules/blank-web.md and paste contents from resources/ai_rules.md
+
+## 5. Run server
+
+To start the Vite development server:
+
+`npm run dev`
+
+The server runs on:
+
+http://localhost:5173 (default)
+
+### Verify
+
+Open http://localhost:5173 in your web browser. You should see a simple webpage with:
+- A heading that says "Hello, world!"
+- A button with the text "Press me"

skills/create-blank-web/scripts/install_node.ps1

@@ -0,0 +1,80 @@
+# Installs Node.js and npm for Windows using nvm-windows.
+# - Downloads and runs the official nvm-windows installation script.
+# - Installs the latest Long-Term Support (LTS) version of Node.js.
+
+$ErrorActionPreference = "Stop"
+Set-StrictMode -Version Latest
+
+$MinNodeVersion = if ($env:MIN_NODE_VERSION) { $env:MIN_NODE_VERSION } else { "18.0.0" }
+
+function Get-NodeVersion {
+    try {
+        $out = node --version 2>$null
+        return $out.Trim().SubString(1) # "v18.12.1" -> "18.12.1"
+    } catch {
+        return $null
+    }
+}
+
+function Version-ToInt([string]$v) {
+    $parts = $v.Split(".")
+    $major = if ($parts.Length -ge 1) { [int]$parts[0] } else { 0 }
+    $minor = if ($parts.Length -ge 2) { [int]$parts[1] } else { 0 }
+    $patch = if ($parts.Length -ge 3) { [int]$parts[2] } else { 0 }
+    return ($major * 1000000) + ($minor * 1000) + $patch
+}
+
+# 1. Check if Node.js is already installed and meets the minimum version
+$existingVersion = Get-NodeVersion
+if ($existingVersion) {
+    if ((Version-ToInt $existingVersion) -ge (Version-ToInt $MinNodeVersion)) {
+        Write-Host "Node.js is already installed (version v$existingVersion >= v$MinNodeVersion). No action needed."
+        exit 0
+    } else {
+        Write-Host "Node.js is installed (version v$existingVersion) but is less than the required version v$MinNodeVersion."
+    }
+}
+
+# 2. Install nvm-windows if it's not already installed
+$nvmDir = "$env:APPDATA\nvm"
+if (-not (Test-Path "$nvmDir\nvm.exe")) {
+    Write-Host "nvm-windows not found. Installing nvm-windows..."
+    $nvmInstallerUrl = "https://github.com/coreybutler/nvm-windows/releases/latest/download/nvm-setup.zip"
+    $nvmInstallerZip = "$env:TEMP\nvm-setup.zip"
+
+    try {
+        Invoke-WebRequest -Uri $nvmInstallerUrl -OutFile $nvmInstallerZip
+        Expand-Archive -Path $nvmInstallerZip -DestinationPath "$env:TEMP\nvm-installer" -Force
+        # Run the installer silently
+        Start-Process -FilePath "$env:TEMP\nvm-installer\nvm-setup.exe" -ArgumentList '/S' -Wait
+        Write-Host "nvm-windows installed. Please restart your terminal."
+    } finally {
+        Remove-Item $nvmInstallerZip -ErrorAction SilentlyContinue
+        Remove-Item "$env:TEMP\nvm-installer" -Recurse -Force -ErrorAction SilentlyContinue
+    }
+    Write-Host "Please restart your terminal session and run this script again to install Node.js."
+    exit 1
+} else {
+    Write-Host "nvm-windows is already installed."
+}
+
+# 3. Reload environment variables and install Node.js
+# In PowerShell, nvm is a command, not a function to be sourced.
+Write-Host "Installing the latest LTS version of Node.js..."
+try {
+    nvm install lts
+    nvm use lts
+} catch {
+    Write-Host "NVM command failed. It might be because nvm was just installed."
+    Write-Host "Please restart your terminal session and run 'nvm install lts' manually."
+    exit 1
+}
+
+# 4. Verify installation
+Write-Host ""
+Write-Host "Node.js installation complete."
+Write-Host "Installed version:"
+node --version
+npm --version
+Write-Host ""
+Write-Host "Please restart your terminal session for the changes to take full effect."

skills/create-blank-web/scripts/install_node.sh

@@ -0,0 +1,67 @@
+#!/usr/bin/env bash
+set -euo pipefail
+
+# Installs Node.js and npm using Node Version Manager (nvm).
+# - Downloads and runs the official nvm installation script.
+# - Installs the latest Long-Term Support (LTS) version of Node.js.
+# - Updates shell profile to load nvm.
+
+MIN_NODE_VERSION="${MIN_NODE_VERSION:-18.0.0}"
+
+need_cmd() { command -v "$1" >/dev/null 2>&1; }
+
+ver_to_int() {
+  # Converts a version string like "18.12.1" to a comparable integer.
+  local IFS=.
+  read -r a b c <<< "${1//v/}" # Strip 'v' prefix if present
+  printf "%03d%03d%03d" "${a:-0}" "${b:-0}" "${c:-0}"
+}
+
+current_node_version() {
+  node --version
+}
+
+# 1. Check if Node.js is already installed and meets the minimum version
+if need_cmd node; then
+  CUR_VERSION_STR="$(current_node_version)"
+  if [[ "$(ver_to_int "$CUR_VERSION_STR")" -ge "$(ver_to_int "$MIN_NODE_VERSION")" ]]; then
+    echo "Node.js is already installed (version $CUR_VERSION_STR >= $MIN_NODE_VERSION). No action needed."
+    exit 0
+  else
+    echo "Node.js is installed (version $CUR_VERSION_STR) but is less than the required version $MIN_NODE_VERSION."
+  fi
+fi
+
+# 2. Install nvm if it's not already installed
+export NVM_DIR="$HOME/.nvm"
+if [ ! -s "$NVM_DIR/nvm.sh" ]; then
+  echo "nvm not found. Installing nvm..."
+  if need_cmd curl; then
+    curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash
+  elif need_cmd wget; then
+    wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash
+  else
+    echo "Error: You need curl or wget to install nvm."
+    exit 1
+  fi
+  echo "nvm installed."
+else
+  echo "nvm is already installed."
+fi
+
+# Source nvm to make it available in the current script
+[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"
+[ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/bash_completion"
+
+# 3. Install the latest LTS version of Node.js
+echo "Installing the latest LTS version of Node.js..."
+nvm install --lts
+
+# 4. Verify installation
+echo ""
+echo "Node.js installation complete."
+echo "Installed version:"
+node --version
+npm --version
+echo ""
+echo "Please restart your terminal session for the changes to take full effect."