netlify-deploy
Deploy web projects to Netlify using the Netlify CLI (`npx netlify`). Use when the user asks to deploy, host, publish, or link a site/repo on Netlify, including preview and production deploys. Do NOT use for deploying to Vercel, Cloudflare, or Render (use their respective skills).
What this skill does
# Netlify Deployment Skill Deploy web projects to Netlify using the Netlify CLI with intelligent detection of project configuration and deployment context. ## Overview This skill automates Netlify deployments by: - Verifying Netlify CLI authentication - Detecting project configuration and framework - Linking to existing sites or creating new ones - Deploying to production or preview environments ## Prerequisites - **Netlify CLI**: Installed via npx (no global install required) - **Authentication**: Netlify account with active login session - **Project**: Valid web project in current directory - When sandboxing blocks the deployment network calls, rerun with `sandbox_permissions=require_escalated`. - The deployment might take a few minutes. Use appropriate timeout values. ## Authentication Pattern The skill uses the **pre-authenticated Netlify CLI** approach: 1. Check authentication status with `npx netlify status` 2. If not authenticated, guide user through `npx netlify login` 3. Fail gracefully if authentication cannot be established Authentication uses either: - **Browser-based OAuth** (primary): `netlify login` opens browser for authentication - **API Key** (alternative): Set `NETLIFY_AUTH_TOKEN` environment variable ## Workflow ### 1. Verify Netlify CLI Authentication Check if the user is logged into Netlify: ```bash npx netlify status ``` **Expected output patterns**: - ✅ Authenticated: Shows logged-in user email and site link status - ❌ Not authenticated: "Not logged into any site" or authentication error **If not authenticated**, guide the user: ```bash npx netlify login ``` This opens a browser window for OAuth authentication. Wait for user to complete login, then verify with `netlify status` again. **Alternative: API Key authentication** If browser authentication isn't available, users can set: ```bash export NETLIFY_AUTH_TOKEN=your_token_here ``` Tokens can be generated at: https://app.netlify.com/user/applications#personal-access-tokens ### 2. Detect Site Link Status From `netlify status` output, determine: - **Linked**: Site already connected to Netlify (shows site name/URL) - **Not linked**: Need to link or create site ### 3. Link to Existing Site or Create New **If already linked** → Skip to step 4 **If not linked**, attempt to link by Git remote: ```bash # Check if project is Git-based git remote show origin # If Git-based, extract remote URL # Format: https://github.com/username/repo or [email protected]:username/repo.git # Try to link by Git remote npx netlify link --git-remote-url <REMOTE_URL> ``` **If link fails** (site doesn't exist on Netlify): ```bash # Create new site interactively npx netlify init ``` This guides user through: 1. Choosing team/account 2. Setting site name 3. Configuring build settings 4. Creating netlify.toml if needed ### 4. Verify Dependencies Before deploying, ensure project dependencies are installed: ```bash # For npm projects npm install # For other package managers, detect and use appropriate command # yarn install, pnpm install, etc. ``` ### 5. Deploy to Netlify Choose deployment type based on context: **Preview/Draft Deploy** (default for existing sites): ```bash npx netlify deploy ``` This creates a deploy preview with a unique URL for testing. **Production Deploy** (for new sites or explicit production deployments): ```bash npx netlify deploy --prod ``` This deploys to the live production URL. **Deployment process**: 1. CLI detects build settings (from netlify.toml or prompts user) 2. Builds the project locally 3. Uploads built assets to Netlify 4. Returns deployment URL ### 6. Report Results After deployment, report to user: - **Deploy URL**: Unique URL for this deployment - **Site URL**: Production URL (if production deploy) - **Deploy logs**: Link to Netlify dashboard for logs - **Next steps**: Suggest `netlify open` to view site or dashboard ## Handling netlify.toml If a `netlify.toml` file exists, the CLI uses it automatically. If not, the CLI will prompt for: - **Build command**: e.g., `npm run build`, `next build` - **Publish directory**: e.g., `dist`, `build`, `.next` Common framework defaults: - **Next.js**: build command `npm run build`, publish `.next` - **React (Vite)**: build command `npm run build`, publish `dist` - **Static HTML**: no build command, publish current directory The skill should detect framework from `package.json` if possible and suggest appropriate settings. ## Example Full Workflow ```bash # 1. Check authentication npx netlify status # If not authenticated: npx netlify login # 2. Link site (if needed) # Try Git-based linking first git remote show origin npx netlify link --git-remote-url https://github.com/user/repo # If no site exists, create new one: npx netlify init # 3. Install dependencies npm install # 4. Deploy (preview for testing) npx netlify deploy # 5. Deploy to production (when ready) npx netlify deploy --prod ``` ## Error Handling Common issues and solutions: **"Not logged in"** → Run `npx netlify login` **"No site linked"** → Run `npx netlify link` or `npx netlify init` **"Build failed"** → Check build command and publish directory in netlify.toml or CLI prompts → Verify dependencies are installed → Review build logs for specific errors **"Publish directory not found"** → Verify build command ran successfully → Check publish directory path is correct ## Troubleshooting ### Escalated Network Access If deployment fails due to network issues (timeouts, DNS errors, connection resets), rerun the deploy with escalated permissions (use `sandbox_permissions=require_escalated`). The deploy requires escalated network access when sandbox networking blocks outbound requests. Example guidance to the user: ``` The deploy needs escalated network access to deploy to Netlify. I can rerun the command with escalated permissions—want me to proceed? ``` ## Environment Variables For secrets and configuration: 1. Never commit secrets to Git 2. Set in Netlify dashboard: Site Settings → Environment Variables 3. Access in builds via `process.env.VARIABLE_NAME` ## Tips - Use `netlify deploy` (no `--prod`) first to test before production - Run `netlify open` to view site in Netlify dashboard - Run `netlify logs` to view function logs (if using Netlify Functions) - Use `netlify dev` for local development with Netlify Functions ## Reference - Netlify CLI Docs: https://docs.netlify.com/cli/get-started/ - netlify.toml Reference: https://docs.netlify.com/configure-builds/file-based-configuration/ ## Bundled References (Load As Needed) - [CLI commands](references/cli-commands.md) - [Deployment patterns](references/deployment-patterns.md) - [netlify.toml guide](references/netlify-toml.md)
Related in Image & Video
watch
IncludedWatch a video (URL or local path). Downloads with yt-dlp, extracts auto-scaled frames with ffmpeg, pulls the transcript from captions (or Whisper API fallback), and hands the result to Claude so it can answer questions about what's in the video.
physical-ai-defect-image-generation
IncludedUse when the user wants to orchestrate defect image generation, run associated setup, or handle outputs on OSMO. The Day 0 path handles cold-start with USD-to-ROI, image-edit augmentation, and AnomalyGen to create initial PCBA datasets. The Day 1 path performs inference and labeling on real images. This skill helps with first-time asset setup, creation of finetuning checkpoints, and configuring deployment. Trigger keywords: defect image generation, dig workflow, dig pipeline, defect image detection workflow, aoi pipeline, aoi anomalygen, usd2roi anomalygen, day 0 pcba, day 1 pcba, day 1 real-photo alignment, day 1 manual roi, metal surface anomaly, glass defect, anomalygen finetune, setup_pcb, setup_metal, setup_glass, setup_pretrained, dig setup, dig datasets, dig pretrained checkpoint, dig image-edit endpoint.
accelint-react-best-practices
IncludedReact performance optimization and best practices. ALWAYS use this skill when working with any React code - writing components, hooks, JSX; refactoring; optimizing re-renders, memoization, state management; reviewing for performance; fixing hydration mismatches; debugging infinite re-renders, stale closures, input focus loss, animations restarting; preventing remounting; implementing transitions, lazy initialization, effect dependencies. Even simple React tasks benefit from these patterns. Covers React 19+ (useEffectEvent, Activity, ref props). Triggers - useEffect, useState, useMemo, useCallback, memo, inline components, nested components, components inside components, re-render, performance, hydration, SSR, Next.js, useDeferredValue, combined hooks.
elevenlabs-agents
IncludedBuild conversational AI voice agents with ElevenLabs Platform using React, JavaScript, React Native, or Swift SDKs. Configure agents, tools (client/server/MCP), RAG knowledge bases, multi-voice, and Scribe real-time STT. Use when: building voice chat interfaces, implementing AI phone agents with Twilio, configuring agent workflows or tools, adding RAG knowledge bases, testing with CLI "agents as code", or troubleshooting deprecated @11labs packages, Android audio cutoff, CSP violations, dynamic variables, or WebRTC config. Keywords: ElevenLabs Agents, ElevenLabs voice agents, AI voice agents, conversational AI, @elevenlabs/react, @elevenlabs/client, @elevenlabs/react-native, @elevenlabs/elevenlabs-js, @elevenlabs/agents-cli, elevenlabs SDK, voice AI, TTS, text-to-speech, ASR, speech recognition, turn-taking model, WebRTC voice, WebSocket voice, ElevenLabs conversation, agent system prompt, agent tools, agent knowledge base, RAG voice agents, multi-voice agents, pronunciation dictionary, voice speed control, elevenlabs scribe, @11labs deprecated, Android audio cutoff, CSP violation elevenlabs, dynamic variables elevenlabs, case-sensitive tool names, webhook authentication
humanizer
IncludedHumanize AI-generated text by detecting and removing patterns typical of LLM output. Rewrites text to sound natural, specific, and human. Uses 28 pattern detectors, 560+ AI vocabulary terms across 3 tiers, and statistical analysis (burstiness, type-token ratio, readability) for comprehensive detection. Use when asked to humanize text, de-AI writing, make content sound more natural/human, review writing for AI patterns, score text for AI detection, or improve AI-generated drafts. Covers content, language, style, communication, and filler categories.
generating-mermaid-diagrams
IncludedSalesforce architecture diagrams using Mermaid with ASCII fallback. Use this skill when generating text-based diagrams for Salesforce architecture, OAuth flows, ERDs, integration sequences, or Agentforce structure. TRIGGER when: user says "diagram", "visualize", "ERD", or asks for sequence diagrams, flowcharts, class diagrams, or architecture visualizations in Mermaid. DO NOT TRIGGER when: user wants PNG/SVG image output (use generating-visual-diagrams), or asks about non-Salesforce systems.