How to use the Azure Static Web Apps agent skill

What the Azure Static Web Apps skill does

Azure Static Web Apps (SWA) hosts static frontends, such as React, Vue or Angular sites, with optional serverless API backends. The skill is a step-by-step playbook for that service. Once it is loaded, the agent knows the correct order of commands: install the SWA CLI, run swa init, test locally with swa start, then log in and deploy.

The skill also tells the agent how to write staticwebapp.config.json, the runtime file for routes, access control and headers, and how to add an Azure Functions API folder. It is instructions only. It does not run anything by itself; the agent runs the listed commands only when it decides to during a task.

Install the skill in Claude

Download the ZIP file for this skill from this page and unzip it. The skill is a folder containing SKILL.md. Put the folder in one of two places: your personal skills folder at ~/.claude/skills/, or a project's .claude/skills/ folder if you want the skill only for that project.

You can also upload the skill in the Claude apps. Go to Settings, then Capabilities, then Skills, and upload it there.

• Personal use across projects: ~/.claude/skills/
• Single project only: .claude/skills/ inside the project folder

Know what you need before you start

The skill assumes a command-line workflow. You need Node.js and npm, because the SWA CLI is installed from npm as @azure/static-web-apps-cli. You also need an Azure account and subscription and an Azure Static Web Apps resource. Deployment needs a deployment token or an Azure login.

If you add an API folder, you need Azure Functions Core Tools (func). A GitHub repository is optional and only needed for CI/CD.

• Node.js and npm
• An Azure account and subscription
• An Azure Static Web Apps resource
• A deployment token or Azure login
• Azure Functions Core Tools (func), only for an API folder
• A GitHub repository, optional, for CI/CD

How to trigger the skill with natural requests

You do not need special syntax. Describe the task in plain language. The skill's description says it is useful when you deploy static sites to Azure, set up SWA local development, configure staticwebapp.config.json, add Azure Functions APIs to SWA, or set up GitHub Actions CI/CD for Static Web Apps. Requests that mention these tasks are the ones most likely to use it.

Name the service and the goal. The more specific you are about your framework and what you want working, the better the agent's first attempt will be.

• "Deploy my Vite React app to Azure Static Web Apps."
• "Set up local testing for my Static Web Apps site with its API on port 4280."
• "Add a staticwebapp.config.json that requires login for /api/* routes."
• "Add an Azure Functions API folder to my Angular app and test it locally."
• "Create a GitHub Actions workflow that deploys my Static Web Apps site on pull requests."

Example workflows the agent follows

For a frontend with an API, the skill's basic order is: install the CLI, run swa init (or swa init --yes to accept detected defaults), build the app if needed, test with swa start, then run swa login and swa deploy --env production. The skill says swa-cli.config.json must be created by swa init and not written by hand.

To add an API, the skill has the agent create an api folder with Azure Functions Core Tools, set the API runtime in staticwebapp.config.json, point apiLocation to the api folder in swa-cli.config.json, and test with swa start.

• swa init creates swa-cli.config.json and detects your framework
• swa start serves the local emulator at http://localhost:4280
• swa deploy --dry-run previews a deployment without deploying
• Common dev server ports in the source: React, Vue and Next.js 3000; Angular 4200; Vite 5173

Safety notes before you deploy

Review every command the agent proposes. The skill runs scripts and uses the network, because it installs packages, starts local servers and talks to Azure. Commands such as swa deploy --env production push live changes. The skill does not add safeguards beyond the --dry-run option, so the review is your responsibility.

Keep deployment tokens out of files you commit. The source shows the token can be passed as a flag or read from the SWA_CLI_DEPLOYMENT_TOKEN environment variable.

• Read the commands before the agent runs them, especially deploy commands
• Run swa deploy --dry-run first to preview
• Do not paste deployment tokens into shared chats or commit them to git

Tips for better results

Let swa init generate swa-cli.config.json rather than writing it yourself, as the skill instructs. Test locally with swa start before any deployment. When you want the agent to write the routing file, state which routes need access control, since staticwebapp.config.json is where those rules live.

If you use GitHub Actions, the skill includes a sample workflow that builds and deploys with the Azure/static-web-apps-deploy action. Check the app, api and output locations in it match your project.

• Test with swa start before every deploy
• Check that the app, API and output locations in your workflow match your folders
• Name your framework and build output folder in the request