pmx-canvas 0.1.0

package/skills/web-artifacts-builder/scripts/bundle-artifact.sh

@@ -0,0 +1,167 @@
+#!/bin/bash
+set -euo pipefail
+
+PNPM_VERSION="10.33.0"
+ALLOWED_BUILD_PACKAGES=("@parcel/watcher" "@swc/core" "lmdb" "msgpackr-extract")
+
+function configure_pnpm() {
+  if command -v pnpm >/dev/null 2>&1; then
+    PNPM_CMD=("pnpm")
+    echo "✅ Using pnpm from PATH"
+    return 0
+  fi
+
+  if command -v bun >/dev/null 2>&1; then
+    PNPM_CMD=("bun" "x" "pnpm@${PNPM_VERSION}")
+    echo "✅ Using pnpm via bun x"
+    return 0
+  fi
+
+  if command -v npm >/dev/null 2>&1; then
+    echo "📦 pnpm not found. Installing pnpm..."
+    npm install -g "pnpm@${PNPM_VERSION}"
+    PNPM_CMD=("pnpm")
+    echo "✅ Using pnpm installed via npm"
+    return 0
+  fi
+
+  echo "❌ Error: pnpm is unavailable and no Bun or npm fallback was found." >&2
+  return 1
+}
+
+function run_pnpm() {
+  "${PNPM_CMD[@]}" "$@"
+}
+
+function run_local_binary() {
+  local binary_name="$1"
+  shift
+  local binary_path="./node_modules/.bin/$binary_name"
+  if [ ! -x "$binary_path" ]; then
+    echo "❌ Error: Expected local binary at $binary_path" >&2
+    exit 1
+  fi
+  "$binary_path" "$@"
+}
+
+function replay_filtered_stderr() {
+  local stderr_file="$1"
+  while IFS= read -r line; do
+    if [[ "$line" == *"/dev/tty"* ]]; then
+      continue
+    fi
+    echo "$line" >&2
+  done < "$stderr_file"
+}
+
+function run_with_filtered_stderr() {
+  local stderr_file
+  stderr_file="$(mktemp)"
+  if "$@" 2>"$stderr_file"; then
+    replay_filtered_stderr "$stderr_file"
+    rm -f "$stderr_file"
+    return 0
+  fi
+
+  local status=$?
+  replay_filtered_stderr "$stderr_file"
+  rm -f "$stderr_file"
+  return "$status"
+}
+
+function run_pnpm_quiet() {
+  run_with_filtered_stderr "${PNPM_CMD[@]}" --silent "$@"
+}
+
+function run_pnpm_allow_build() {
+  local allow_build_args=()
+  local package_name
+  for package_name in "${ALLOWED_BUILD_PACKAGES[@]}"; do
+    allow_build_args+=(--allow-build="$package_name")
+  done
+  run_with_filtered_stderr "${PNPM_CMD[@]}" --silent "$@" "${allow_build_args[@]}"
+}
+
+function package_has_dependency() {
+  local package_name="$1"
+  node -e '
+const fs = require("fs");
+const packageName = process.argv[1];
+const pkg = JSON.parse(fs.readFileSync("package.json", "utf8"));
+const deps = { ...(pkg.dependencies || {}), ...(pkg.devDependencies || {}) };
+process.exit(deps[packageName] ? 0 : 1);
+' "$package_name"
+}
+
+function ensure_bundle_dependencies() {
+  local packages=(
+    "parcel"
+    "@parcel/config-default"
+    "parcel-resolver-tspaths"
+    "html-inline"
+  )
+
+  for package_name in "${packages[@]}"; do
+    if ! package_has_dependency "$package_name"; then
+      echo "📦 Installing missing bundling dependencies..."
+      run_pnpm_allow_build add -D parcel @parcel/config-default parcel-resolver-tspaths html-inline
+      return 0
+    fi
+  done
+
+  echo "✅ Reusing existing bundling dependencies"
+}
+
+declare -a PNPM_CMD
+configure_pnpm
+
+echo "📦 Bundling React app to single HTML artifact..."
+
+# Check if we're in a project directory
+if [ ! -f "package.json" ]; then
+  echo "❌ Error: No package.json found. Run this script from your project root."
+  exit 1
+fi
+
+# Check if index.html exists
+if [ ! -f "index.html" ]; then
+  echo "❌ Error: No index.html found in project root."
+  echo "   This script requires an index.html entry point."
+  exit 1
+fi
+
+# Install bundling dependencies only when missing
+ensure_bundle_dependencies
+
+# Create Parcel config with tspaths resolver
+if [ ! -f ".parcelrc" ]; then
+  echo "🔧 Creating Parcel configuration with path alias support..."
+  cat > .parcelrc << 'EOF'
+{
+  "extends": "@parcel/config-default",
+  "resolvers": ["parcel-resolver-tspaths", "..."]
+}
+EOF
+fi
+
+# Clean previous build
+echo "🧹 Cleaning previous build..."
+rm -rf dist bundle.html
+
+# Build with Parcel
+echo "🔨 Building with Parcel..."
+run_with_filtered_stderr run_local_binary parcel build index.html --dist-dir dist --no-source-maps --log-level error
+
+# Inline everything into single HTML
+echo "🎯 Inlining all assets into single HTML file..."
+run_with_filtered_stderr run_local_binary html-inline dist/index.html > bundle.html
+
+# Get file size
+FILE_SIZE=$(du -h bundle.html | cut -f1)
+
+echo ""
+echo "✅ Bundle complete!"
+echo "📄 Output: bundle.html ($FILE_SIZE)"
+echo ""
+echo "You can now open this single HTML file directly in a browser or share it in an artifact-capable client."
+echo "To test locally: open bundle.html in your browser"

package/skills/web-artifacts-builder/scripts/init-artifact.sh

@@ -0,0 +1,425 @@
+#!/bin/bash
+
+set -euo pipefail
+
+PNPM_VERSION="10.33.0"
+ALLOWED_BUILD_PACKAGES=("@parcel/watcher" "@swc/core" "lmdb" "msgpackr-extract")
+
+function detect_runtime_major() {
+  if command -v node >/dev/null 2>&1; then
+    local node_version
+    if node_version="$(node --version 2>/dev/null)"; then
+      local node_major="${node_version#v}"
+      node_major="${node_major%%.*}"
+      echo "$node_major|Node.js $node_version"
+      return 0
+    fi
+  fi
+
+  if command -v bun >/dev/null 2>&1; then
+    local bun_version
+    if bun_version="$(bun --version 2>/dev/null)"; then
+      echo "20|Bun $bun_version"
+      return 0
+    fi
+  fi
+
+  echo "❌ Error: Node.js 18+ or Bun is required to initialize a web artifact." >&2
+  return 1
+}
+
+function configure_pnpm() {
+  if command -v pnpm >/dev/null 2>&1; then
+    PNPM_CMD=("pnpm")
+    echo "✅ Using pnpm from PATH"
+    return 0
+  fi
+
+  if command -v bun >/dev/null 2>&1; then
+    PNPM_CMD=("bun" "x" "pnpm@${PNPM_VERSION}")
+    echo "✅ Using pnpm via bun x"
+    return 0
+  fi
+
+  if command -v npm >/dev/null 2>&1; then
+    echo "📦 pnpm not found. Installing pnpm..."
+    npm install -g "pnpm@${PNPM_VERSION}"
+    PNPM_CMD=("pnpm")
+    echo "✅ Using pnpm installed via npm"
+    return 0
+  fi
+
+  echo "❌ Error: pnpm is unavailable and no Bun or npm fallback was found." >&2
+  return 1
+}
+
+function run_pnpm() {
+  "${PNPM_CMD[@]}" "$@"
+}
+
+function replay_filtered_stderr() {
+  local stderr_file="$1"
+  while IFS= read -r line; do
+    if [[ "$line" == *"/dev/tty"* ]]; then
+      continue
+    fi
+    echo "$line" >&2
+  done < "$stderr_file"
+}
+
+function run_with_filtered_stderr() {
+  local stderr_file
+  stderr_file="$(mktemp)"
+  if "$@" 2>"$stderr_file"; then
+    replay_filtered_stderr "$stderr_file"
+    rm -f "$stderr_file"
+    return 0
+  fi
+
+  local status=$?
+  replay_filtered_stderr "$stderr_file"
+  rm -f "$stderr_file"
+  return "$status"
+}
+
+function run_pnpm_quiet() {
+  run_with_filtered_stderr "${PNPM_CMD[@]}" --silent "$@"
+}
+
+function run_pnpm_allow_build() {
+  local allow_build_args=()
+  local package_name
+  for package_name in "${ALLOWED_BUILD_PACKAGES[@]}"; do
+    allow_build_args+=(--allow-build="$package_name")
+  done
+  run_with_filtered_stderr "${PNPM_CMD[@]}" --silent "$@" "${allow_build_args[@]}"
+}
+
+RUNTIME_INFO="$(detect_runtime_major)"
+NODE_VERSION="${RUNTIME_INFO%%|*}"
+RUNTIME_LABEL="${RUNTIME_INFO#*|}"
+
+echo "🔍 Detected runtime: $RUNTIME_LABEL"
+
+if [ "$NODE_VERSION" -lt 18 ]; then
+  echo "❌ Error: Node.js 18 or higher is required"
+  echo "   Current runtime: $RUNTIME_LABEL"
+  exit 1
+fi
+
+if [ "$NODE_VERSION" -ge 20 ]; then
+  VITE_VERSION="latest"
+  echo "✅ Using Vite latest (runtime equivalent to Node 20+)"
+else
+  VITE_VERSION="5.4.11"
+  echo "✅ Using Vite $VITE_VERSION (Node 18 compatible)"
+fi
+
+# Detect OS and set sed syntax
+if [[ "$OSTYPE" == "darwin"* ]]; then
+  SED_INPLACE="sed -i ''"
+else
+  SED_INPLACE="sed -i"
+fi
+
+declare -a PNPM_CMD
+configure_pnpm
+
+# Check if project name is provided
+if [ -z "$1" ]; then
+  echo "❌ Usage: ./init-artifact.sh <project-name>"
+  exit 1
+fi
+
+PROJECT_NAME="$1"
+SCRIPT_DIR="$(cd "$(dirname "${BASH_SOURCE[0]}")" && pwd)"
+COMPONENTS_TARBALL="$SCRIPT_DIR/shadcn-components.tar.gz"
+
+# Check if components tarball exists
+if [ ! -f "$COMPONENTS_TARBALL" ]; then
+  echo "❌ Error: shadcn-components.tar.gz not found in script directory"
+  echo "   Expected location: $COMPONENTS_TARBALL"
+  exit 1
+fi
+
+echo "🚀 Creating new React + Vite project: $PROJECT_NAME"
+
+# Create new Vite project (always use latest create-vite, pin vite version later)
+run_pnpm_quiet create vite "$PROJECT_NAME" --template react-ts --no-interactive
+
+# Navigate into project directory
+cd "$PROJECT_NAME"
+
+node -e "
+const fs = require('fs');
+const pkg = JSON.parse(fs.readFileSync('package.json', 'utf8'));
+pkg.packageManager = 'pnpm@${PNPM_VERSION}';
+fs.writeFileSync('package.json', JSON.stringify(pkg, null, 2) + '\n');
+"
+
+echo "🧹 Cleaning up Vite template..."
+$SED_INPLACE '/<link rel="icon".*/d' index.html
+$SED_INPLACE 's/<title>.*<\/title>/<title>'"$PROJECT_NAME"'<\/title>/' index.html
+
+echo "📦 Installing base dependencies..."
+run_pnpm_quiet install
+
+# Pin Vite version for Node 18
+if [ "$NODE_VERSION" -lt 20 ]; then
+  echo "📌 Pinning Vite to $VITE_VERSION for Node 18 compatibility..."
+  run_pnpm_allow_build add -D vite@"$VITE_VERSION"
+fi
+
+echo "📦 Installing Tailwind CSS and dependencies..."
+run_pnpm_allow_build add -D tailwindcss@3.4.1 postcss @types/node tailwindcss-animate parcel @parcel/config-default parcel-resolver-tspaths html-inline
+run_pnpm_quiet add class-variance-authority clsx tailwind-merge lucide-react next-themes
+
+echo "⚙️  Creating Tailwind and PostCSS configuration..."
+cat > .postcssrc.json << 'EOF'
+{
+  "plugins": {
+    "tailwindcss": {}
+  }
+}
+EOF
+
+echo "📝 Configuring Tailwind with shadcn theme..."
+cat > tailwind.config.js << 'EOF'
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  darkMode: ["class"],
+  content: [
+    "./index.html",
+    "./src/**/*.{js,ts,jsx,tsx}",
+  ],
+  theme: {
+    extend: {
+      colors: {
+        border: "hsl(var(--border))",
+        input: "hsl(var(--input))",
+        ring: "hsl(var(--ring))",
+        background: "hsl(var(--background))",
+        foreground: "hsl(var(--foreground))",
+        primary: {
+          DEFAULT: "hsl(var(--primary))",
+          foreground: "hsl(var(--primary-foreground))",
+        },
+        secondary: {
+          DEFAULT: "hsl(var(--secondary))",
+          foreground: "hsl(var(--secondary-foreground))",
+        },
+        destructive: {
+          DEFAULT: "hsl(var(--destructive))",
+          foreground: "hsl(var(--destructive-foreground))",
+        },
+        muted: {
+          DEFAULT: "hsl(var(--muted))",
+          foreground: "hsl(var(--muted-foreground))",
+        },
+        accent: {
+          DEFAULT: "hsl(var(--accent))",
+          foreground: "hsl(var(--accent-foreground))",
+        },
+        popover: {
+          DEFAULT: "hsl(var(--popover))",
+          foreground: "hsl(var(--popover-foreground))",
+        },
+        card: {
+          DEFAULT: "hsl(var(--card))",
+          foreground: "hsl(var(--card-foreground))",
+        },
+      },
+      borderRadius: {
+        lg: "var(--radius)",
+        md: "calc(var(--radius) - 2px)",
+        sm: "calc(var(--radius) - 4px)",
+      },
+      keyframes: {
+        "accordion-down": {
+          from: { height: "0" },
+          to: { height: "var(--radix-accordion-content-height)" },
+        },
+        "accordion-up": {
+          from: { height: "var(--radix-accordion-content-height)" },
+          to: { height: "0" },
+        },
+      },
+      animation: {
+        "accordion-down": "accordion-down 0.2s ease-out",
+        "accordion-up": "accordion-up 0.2s ease-out",
+      },
+    },
+  },
+  plugins: [require("tailwindcss-animate")],
+}
+EOF
+
+# Add Tailwind directives and CSS variables to index.css
+echo "🎨 Adding Tailwind directives and CSS variables..."
+cat > src/index.css << 'EOF'
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 0 0% 3.9%;
+    --card: 0 0% 100%;
+    --card-foreground: 0 0% 3.9%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 0 0% 3.9%;
+    --primary: 0 0% 9%;
+    --primary-foreground: 0 0% 98%;
+    --secondary: 0 0% 96.1%;
+    --secondary-foreground: 0 0% 9%;
+    --muted: 0 0% 96.1%;
+    --muted-foreground: 0 0% 45.1%;
+    --accent: 0 0% 96.1%;
+    --accent-foreground: 0 0% 9%;
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 0 0% 89.8%;
+    --input: 0 0% 89.8%;
+    --ring: 0 0% 3.9%;
+    --radius: 0.5rem;
+  }
+
+  .dark {
+    --background: 0 0% 3.9%;
+    --foreground: 0 0% 98%;
+    --card: 0 0% 3.9%;
+    --card-foreground: 0 0% 98%;
+    --popover: 0 0% 3.9%;
+    --popover-foreground: 0 0% 98%;
+    --primary: 0 0% 98%;
+    --primary-foreground: 0 0% 9%;
+    --secondary: 0 0% 14.9%;
+    --secondary-foreground: 0 0% 98%;
+    --muted: 0 0% 14.9%;
+    --muted-foreground: 0 0% 63.9%;
+    --accent: 0 0% 14.9%;
+    --accent-foreground: 0 0% 98%;
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 0 0% 14.9%;
+    --input: 0 0% 14.9%;
+    --ring: 0 0% 83.1%;
+  }
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}
+EOF
+
+# Add path aliases to tsconfig.json
+echo "🔧 Adding path aliases to tsconfig.json..."
+node -e "
+const fs = require('fs');
+const config = JSON.parse(fs.readFileSync('tsconfig.json', 'utf8'));
+config.compilerOptions = config.compilerOptions || {};
+config.compilerOptions.baseUrl = '.';
+config.compilerOptions.paths = { '@/*': ['./src/*'] };
+fs.writeFileSync('tsconfig.json', JSON.stringify(config, null, 2));
+"
+
+# Add path aliases to tsconfig.app.json
+echo "🔧 Adding path aliases to tsconfig.app.json..."
+node -e "
+const fs = require('fs');
+const path = 'tsconfig.app.json';
+const content = fs.readFileSync(path, 'utf8');
+// Remove comments manually
+const lines = content.split('\n').filter(line => !line.trim().startsWith('//'));
+const jsonContent = lines.join('\n');
+const config = JSON.parse(jsonContent.replace(/\/\*[\s\S]*?\*\//g, '').replace(/,(\s*[}\]])/g, '\$1'));
+config.compilerOptions = config.compilerOptions || {};
+config.compilerOptions.baseUrl = '.';
+config.compilerOptions.paths = { '@/*': ['./src/*'] };
+fs.writeFileSync(path, JSON.stringify(config, null, 2));
+"
+
+# Update vite.config.ts
+echo "⚙️  Updating Vite configuration..."
+cat > vite.config.ts << 'EOF'
+import path from "path";
+import react from "@vitejs/plugin-react";
+import { defineConfig } from "vite";
+
+export default defineConfig({
+  plugins: [react()],
+  resolve: {
+    alias: {
+      "@": path.resolve(__dirname, "./src"),
+    },
+  },
+});
+EOF
+
+echo "🔧 Creating Parcel configuration with path alias support..."
+cat > .parcelrc << 'EOF'
+{
+  "extends": "@parcel/config-default",
+  "resolvers": ["parcel-resolver-tspaths", "..."]
+}
+EOF
+
+# Install all shadcn/ui dependencies
+echo "📦 Installing shadcn/ui dependencies..."
+run_pnpm_quiet add @radix-ui/react-accordion @radix-ui/react-aspect-ratio @radix-ui/react-avatar @radix-ui/react-checkbox @radix-ui/react-collapsible @radix-ui/react-context-menu @radix-ui/react-dialog @radix-ui/react-dropdown-menu @radix-ui/react-hover-card @radix-ui/react-label @radix-ui/react-menubar @radix-ui/react-navigation-menu @radix-ui/react-popover @radix-ui/react-progress @radix-ui/react-radio-group @radix-ui/react-scroll-area @radix-ui/react-select @radix-ui/react-separator @radix-ui/react-slider @radix-ui/react-slot @radix-ui/react-switch @radix-ui/react-tabs @radix-ui/react-toast @radix-ui/react-toggle @radix-ui/react-toggle-group @radix-ui/react-tooltip
+run_pnpm_quiet add sonner cmdk vaul embla-carousel-react react-day-picker react-resizable-panels date-fns react-hook-form @hookform/resolvers zod
+
+# Extract shadcn components from tarball
+echo "📦 Extracting shadcn/ui components..."
+tar -xzf "$COMPONENTS_TARBALL" -C src/
+
+# Create components.json for reference
+echo "📝 Creating components.json config..."
+cat > components.json << 'EOF'
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "default",
+  "rsc": false,
+  "tsx": true,
+  "tailwind": {
+    "config": "tailwind.config.js",
+    "css": "src/index.css",
+    "baseColor": "slate",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  }
+}
+EOF
+
+echo "✅ Setup complete! You can now use Tailwind CSS and shadcn/ui in your project."
+echo ""
+echo "📦 Included components (40+ total):"
+echo "  - accordion, alert, aspect-ratio, avatar, badge, breadcrumb"
+echo "  - button, calendar, card, carousel, checkbox, collapsible"
+echo "  - command, context-menu, dialog, drawer, dropdown-menu"
+echo "  - form, hover-card, input, label, menubar, navigation-menu"
+echo "  - popover, progress, radio-group, resizable, scroll-area"
+echo "  - select, separator, sheet, skeleton, slider, sonner"
+echo "  - switch, table, tabs, textarea, toast, toggle, toggle-group, tooltip"
+echo ""
+echo "To start developing:"
+echo "  cd $PROJECT_NAME"
+echo "  pnpm dev"
+echo ""
+echo "📚 Import components like:"
+echo "  import { Button } from '@/components/ui/button'"
+echo "  import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/card'"
+echo "  import { Dialog, DialogContent, DialogTrigger } from '@/components/ui/dialog'"

package/skills/web-design-guidelines/SKILL.md

@@ -0,0 +1,39 @@
+---
+name: web-design-guidelines
+description: Review UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "audit design", "review UX", or "check my site against best practices".
+metadata:
+  author: vercel
+  version: "1.0.0"
+  argument-hint: <file-or-pattern>
+---
+
+# Web Interface Guidelines
+
+Review files for compliance with Web Interface Guidelines.
+
+## How It Works
+
+1. Fetch the latest guidelines from the source URL below
+2. Read the specified files (or prompt user for files/pattern)
+3. Check against all rules in the fetched guidelines
+4. Output findings in the terse `file:line` format
+
+## Guidelines Source
+
+Fetch fresh guidelines before each review:
+
+```
+https://raw.githubusercontent.com/vercel-labs/web-interface-guidelines/main/command.md
+```
+
+Use WebFetch to retrieve the latest rules. The fetched content contains all the rules and output format instructions.
+
+## Usage
+
+When a user provides a file or pattern argument:
+1. Fetch guidelines from the source URL above
+2. Read the specified files
+3. Apply all rules from the fetched guidelines
+4. Output findings using the format specified in the guidelines
+
+If no files specified, ask the user which files to review.