diff --git a/skills/public/frontend-design/SKILL.md b/skills/public/frontend-design/SKILL.md index d5b288d..fceaa83 100644 --- a/skills/public/frontend-design/SKILL.md +++ b/skills/public/frontend-design/SKILL.md @@ -8,6 +8,10 @@ This skill guides creation of distinctive, production-grade frontend interfaces The user provides frontend requirements: a component, page, application, or interface to build. They may include context about the purpose, audience, or technical constraints. +## Output Requirements + +**MANDATORY**: The entry HTML file MUST be named `index.html`. This is a strict requirement for all generated frontend projects to ensure compatibility with standard web hosting and deployment workflows. + ## Design Thinking Before coding, understand the context and commit to a BOLD aesthetic direction: diff --git a/skills/public/vercel-deploy-claimable/SKILL.md b/skills/public/vercel-deploy-claimable/SKILL.md new file mode 100644 index 0000000..4a51aa4 --- /dev/null +++ b/skills/public/vercel-deploy-claimable/SKILL.md @@ -0,0 +1,112 @@ +--- +name: vercel-deploy +description: Deploy applications and websites to Vercel. Use this skill when the user requests deployment actions such as "Deploy my app", "Deploy this to production", "Create a preview deployment", "Deploy and give me the link", or "Push this live". No authentication required - returns preview URL and claimable deployment link. +metadata: + author: vercel + version: "1.0.0" +--- + +# Vercel Deploy + +Deploy any project to Vercel instantly. No authentication required. + +## How It Works + +1. Packages your project into a tarball (excludes `node_modules` and `.git`) +2. Auto-detects framework from `package.json` +3. Uploads to deployment service +4. Returns **Preview URL** (live site) and **Claim URL** (transfer to your Vercel account) + +## Usage + +```bash +bash /mnt/skills/user/vercel-deploy/scripts/deploy.sh [path] +``` + +**Arguments:** +- `path` - Directory to deploy, or a `.tgz` file (defaults to current directory) + +**Examples:** + +```bash +# Deploy current directory +bash /mnt/skills/user/vercel-deploy/scripts/deploy.sh + +# Deploy specific project +bash /mnt/skills/user/vercel-deploy/scripts/deploy.sh /path/to/project + +# Deploy existing tarball +bash /mnt/skills/user/vercel-deploy/scripts/deploy.sh /path/to/project.tgz +``` + +## Output + +``` +Preparing deployment... +Detected framework: nextjs +Creating deployment package... +Deploying... +✓ Deployment successful! + +Preview URL: https://skill-deploy-abc123.vercel.app +Claim URL: https://vercel.com/claim-deployment?code=... +``` + +The script also outputs JSON to stdout for programmatic use: + +```json +{ + "previewUrl": "https://skill-deploy-abc123.vercel.app", + "claimUrl": "https://vercel.com/claim-deployment?code=...", + "deploymentId": "dpl_...", + "projectId": "prj_..." +} +``` + +## Framework Detection + +The script auto-detects frameworks from `package.json`. Supported frameworks include: + +- **React**: Next.js, Gatsby, Create React App, Remix, React Router +- **Vue**: Nuxt, Vitepress, Vuepress, Gridsome +- **Svelte**: SvelteKit, Svelte, Sapper +- **Other Frontend**: Astro, Solid Start, Angular, Ember, Preact, Docusaurus +- **Backend**: Express, Hono, Fastify, NestJS, Elysia, h3, Nitro +- **Build Tools**: Vite, Parcel +- **And more**: Blitz, Hydrogen, RedwoodJS, Storybook, Sanity, etc. + +For static HTML projects (no `package.json`), framework is set to `null`. + +## Static HTML Projects + +For projects without a `package.json`: +- If there's a single `.html` file not named `index.html`, it gets renamed automatically +- This ensures the page is served at the root URL (`/`) + +## Present Results to User + +Always show both URLs: + +``` +✓ Deployment successful! + +Preview URL: https://skill-deploy-abc123.vercel.app +Claim URL: https://vercel.com/claim-deployment?code=... + +View your site at the Preview URL. +To transfer this deployment to your Vercel account, visit the Claim URL. +``` + +## Troubleshooting + +### Network Egress Error + +If deployment fails due to network restrictions (common on claude.ai), tell the user: + +``` +Deployment failed due to network restrictions. To fix this: + +1. Go to https://claude.ai/settings/capabilities +2. Add *.vercel.com to the allowed domains +3. Try deploying again +``` diff --git a/skills/public/vercel-deploy-claimable/scripts/deploy.sh b/skills/public/vercel-deploy-claimable/scripts/deploy.sh new file mode 100755 index 0000000..de46e71 --- /dev/null +++ b/skills/public/vercel-deploy-claimable/scripts/deploy.sh @@ -0,0 +1,249 @@ +#!/bin/bash + +# Vercel Deployment Script (via claimable deploy endpoint) +# Usage: ./deploy.sh [project-path] +# Returns: JSON with previewUrl, claimUrl, deploymentId, projectId + +set -e + +DEPLOY_ENDPOINT="https://claude-skills-deploy.vercel.com/api/deploy" + +# Detect framework from package.json +detect_framework() { + local pkg_json="$1" + + if [ ! -f "$pkg_json" ]; then + echo "null" + return + fi + + local content=$(cat "$pkg_json") + + # Helper to check if a package exists in dependencies or devDependencies + has_dep() { + echo "$content" | grep -q "\"$1\"" + } + + # Order matters - check more specific frameworks first + + # Blitz + if has_dep "blitz"; then echo "blitzjs"; return; fi + + # Next.js + if has_dep "next"; then echo "nextjs"; return; fi + + # Gatsby + if has_dep "gatsby"; then echo "gatsby"; return; fi + + # Remix + if has_dep "@remix-run/"; then echo "remix"; return; fi + + # React Router (v7 framework mode) + if has_dep "@react-router/"; then echo "react-router"; return; fi + + # TanStack Start + if has_dep "@tanstack/start"; then echo "tanstack-start"; return; fi + + # Astro + if has_dep "astro"; then echo "astro"; return; fi + + # Hydrogen (Shopify) + if has_dep "@shopify/hydrogen"; then echo "hydrogen"; return; fi + + # SvelteKit + if has_dep "@sveltejs/kit"; then echo "sveltekit-1"; return; fi + + # Svelte (standalone) + if has_dep "svelte"; then echo "svelte"; return; fi + + # Nuxt + if has_dep "nuxt"; then echo "nuxtjs"; return; fi + + # Vue with Vitepress + if has_dep "vitepress"; then echo "vitepress"; return; fi + + # Vue with Vuepress + if has_dep "vuepress"; then echo "vuepress"; return; fi + + # Gridsome + if has_dep "gridsome"; then echo "gridsome"; return; fi + + # SolidStart + if has_dep "@solidjs/start"; then echo "solidstart-1"; return; fi + + # Docusaurus + if has_dep "@docusaurus/core"; then echo "docusaurus-2"; return; fi + + # RedwoodJS + if has_dep "@redwoodjs/"; then echo "redwoodjs"; return; fi + + # Hexo + if has_dep "hexo"; then echo "hexo"; return; fi + + # Eleventy + if has_dep "@11ty/eleventy"; then echo "eleventy"; return; fi + + # Angular / Ionic Angular + if has_dep "@ionic/angular"; then echo "ionic-angular"; return; fi + if has_dep "@angular/core"; then echo "angular"; return; fi + + # Ionic React + if has_dep "@ionic/react"; then echo "ionic-react"; return; fi + + # Create React App + if has_dep "react-scripts"; then echo "create-react-app"; return; fi + + # Ember + if has_dep "ember-cli" || has_dep "ember-source"; then echo "ember"; return; fi + + # Dojo + if has_dep "@dojo/framework"; then echo "dojo"; return; fi + + # Polymer + if has_dep "@polymer/"; then echo "polymer"; return; fi + + # Preact + if has_dep "preact"; then echo "preact"; return; fi + + # Stencil + if has_dep "@stencil/core"; then echo "stencil"; return; fi + + # UmiJS + if has_dep "umi"; then echo "umijs"; return; fi + + # Sapper (legacy Svelte) + if has_dep "sapper"; then echo "sapper"; return; fi + + # Saber + if has_dep "saber"; then echo "saber"; return; fi + + # Sanity + if has_dep "sanity"; then echo "sanity-v3"; return; fi + if has_dep "@sanity/"; then echo "sanity"; return; fi + + # Storybook + if has_dep "@storybook/"; then echo "storybook"; return; fi + + # NestJS + if has_dep "@nestjs/core"; then echo "nestjs"; return; fi + + # Elysia + if has_dep "elysia"; then echo "elysia"; return; fi + + # Hono + if has_dep "hono"; then echo "hono"; return; fi + + # Fastify + if has_dep "fastify"; then echo "fastify"; return; fi + + # h3 + if has_dep "h3"; then echo "h3"; return; fi + + # Nitro + if has_dep "nitropack"; then echo "nitro"; return; fi + + # Express + if has_dep "express"; then echo "express"; return; fi + + # Vite (generic - check last among JS frameworks) + if has_dep "vite"; then echo "vite"; return; fi + + # Parcel + if has_dep "parcel"; then echo "parcel"; return; fi + + # No framework detected + echo "null" +} + +# Parse arguments +INPUT_PATH="${1:-.}" + +# Create temp directory for packaging +TEMP_DIR=$(mktemp -d) +TARBALL="$TEMP_DIR/project.tgz" +CLEANUP_TEMP=true + +cleanup() { + if [ "$CLEANUP_TEMP" = true ]; then + rm -rf "$TEMP_DIR" + fi +} +trap cleanup EXIT + +echo "Preparing deployment..." >&2 + +# Check if input is a .tgz file or a directory +FRAMEWORK="null" + +if [ -f "$INPUT_PATH" ] && [[ "$INPUT_PATH" == *.tgz ]]; then + # Input is already a tarball, use it directly + echo "Using provided tarball..." >&2 + TARBALL="$INPUT_PATH" + CLEANUP_TEMP=false + # Can't detect framework from tarball, leave as null +elif [ -d "$INPUT_PATH" ]; then + # Input is a directory, need to tar it + PROJECT_PATH=$(cd "$INPUT_PATH" && pwd) + + # Detect framework from package.json + FRAMEWORK=$(detect_framework "$PROJECT_PATH/package.json") + + # Check if this is a static HTML project (no package.json) + if [ ! -f "$PROJECT_PATH/package.json" ]; then + # Find HTML files in root + HTML_FILES=$(find "$PROJECT_PATH" -maxdepth 1 -name "*.html" -type f) + HTML_COUNT=$(echo "$HTML_FILES" | grep -c . || echo 0) + + # If there's exactly one HTML file and it's not index.html, rename it + if [ "$HTML_COUNT" -eq 1 ]; then + HTML_FILE=$(echo "$HTML_FILES" | head -1) + BASENAME=$(basename "$HTML_FILE") + if [ "$BASENAME" != "index.html" ]; then + echo "Renaming $BASENAME to index.html..." >&2 + mv "$HTML_FILE" "$PROJECT_PATH/index.html" + fi + fi + fi + + # Create tarball of the project (excluding node_modules and .git) + echo "Creating deployment package..." >&2 + tar -czf "$TARBALL" -C "$PROJECT_PATH" --exclude='node_modules' --exclude='.git' . +else + echo "Error: Input must be a directory or a .tgz file" >&2 + exit 1 +fi + +if [ "$FRAMEWORK" != "null" ]; then + echo "Detected framework: $FRAMEWORK" >&2 +fi + +# Deploy +echo "Deploying..." >&2 +RESPONSE=$(curl -s -X POST "$DEPLOY_ENDPOINT" -F "file=@$TARBALL" -F "framework=$FRAMEWORK") + +# Check for error in response +if echo "$RESPONSE" | grep -q '"error"'; then + ERROR_MSG=$(echo "$RESPONSE" | grep -o '"error":"[^"]*"' | cut -d'"' -f4) + echo "Error: $ERROR_MSG" >&2 + exit 1 +fi + +# Extract URLs from response +PREVIEW_URL=$(echo "$RESPONSE" | grep -o '"previewUrl":"[^"]*"' | cut -d'"' -f4) +CLAIM_URL=$(echo "$RESPONSE" | grep -o '"claimUrl":"[^"]*"' | cut -d'"' -f4) + +if [ -z "$PREVIEW_URL" ]; then + echo "Error: Could not extract preview URL from response" >&2 + echo "$RESPONSE" >&2 + exit 1 +fi + +echo "" >&2 +echo "Deployment successful!" >&2 +echo "" >&2 +echo "Preview URL: $PREVIEW_URL" >&2 +echo "Claim URL: $CLAIM_URL" >&2 +echo "" >&2 + +# Output JSON for programmatic use +echo "$RESPONSE"