| name | azure-swa |
| description | Comprehensive expertise for Azure Static Web Apps including architecture, configuration, API integration with Azure Functions, authentication, routing, deployment, and CI/CD. Use when building, configuring, deploying, or troubleshooting Azure Static Web Apps projects with frameworks like React, Angular, Vue, Blazor, or vanilla JavaScript. |
| version | 2 |
| allowed-tools | Read, Edit, Write, Bash, Glob, Grep |
Azure Static Web Apps (SWA) Orchestration Skill
Master Azure Static Web Apps—Microsoft's managed platform for full-stack web applications. This skill provides focused guidance organized by concern area. Select the resource that matches your current task.
Quick Reference: When to Load Which Resource
| Task / Scenario | Load Resource |
|---|
| Understanding SWA concepts, architecture, frameworks | resources/core-concepts.md |
| Routing, authentication rules, headers, fallback routes | resources/configuration-routing.md |
| Building APIs, calling from frontend, error handling | resources/api-integration.md |
| Login flow, roles, protecting routes, token management | resources/authentication.md |
| GitHub Actions, deployment, environment variables | resources/deployment-cicd.md |
| Custom domains, SSL, monitoring, troubleshooting | resources/operations-monitoring.md |
Orchestration Protocol
Phase 1: Task Analysis
Classify your task to identify the right resource:
Task Type Classification:
- Architectural: Understanding SWA concepts, choosing frameworks, design patterns → Load
core-concepts.md
- Configuration: Setting up routing, security, headers, fallback behavior → Load
configuration-routing.md
- API Development: Building functions, calling APIs, error handling → Load
api-integration.md
- Authentication: Login flows, role-based access, user info → Load
authentication.md
- Deployment: Setting up pipelines, environments, CI/CD configuration → Load
deployment-cicd.md
- Operations: Monitoring, troubleshooting, custom domains, SSL → Load
operations-monitoring.md
Complexity Indicators:
- Single concern vs. multi-component setup
- Development vs. production requirements
- Pre-existing vs. new project
Phase 2: Resource Selection
Load only the resource(s) needed:
- Single Resource: When task clearly maps to one area
- Sequential Resources: When setup requires multiple steps (e.g., deployment → monitoring)
- Cross-Resource: When building complete solution (e.g., API → authentication → deployment)
Phase 3: Execution & Validation
During Execution:
- Follow examples for your framework/language
- Apply patterns from the selected resource
- Test locally with SWA CLI when appropriate
Before Deployment:
- Verify configuration is complete
- Check staticwebapp.config.json
- Test authentication and API locally
- Review deployment logs
Common Development Scenarios
Scenario 1: Building a React App with API
- Load
core-concepts.md → Understand SWA architecture for React
- Load
configuration-routing.md → Set up SPA routing fallback
- Load
api-integration.md → Build Azure Functions API
- Load
authentication.md → Add login if needed
- Load
deployment-cicd.md → Configure GitHub Actions
Scenario 2: Deploying Existing Angular App
- Load
core-concepts.md → Verify Angular is supported framework
- Load
configuration-routing.md → Set up navigation fallback for Angular routing
- Load
deployment-cicd.md → Configure build output location (dist/<app-name>)
- Load
operations-monitoring.md → Set up monitoring after deployment
Scenario 3: Troubleshooting 404 Errors
- Load
configuration-routing.md → Check navigation fallback and route exclusions
- Load
deployment-cicd.md → Verify app_location and output_location
- Load
operations-monitoring.md → Enable debugging and review logs
Scenario 4: Adding Role-Based Access Control
- Load
authentication.md → Configure auth providers
- Load
configuration-routing.md → Define routes with role restrictions
- Load
api-integration.md → Protect API endpoints with role checks
Decision Tree: Which Resource?
START: What are you doing?
├─ Understanding/designing? → core-concepts.md
├─ Configuring routing/security? → configuration-routing.md
├─ Building/testing API? → api-integration.md
├─ Implementing login/auth? → authentication.md
├─ Setting up deployment? → deployment-cicd.md
└─ Running in production? → operations-monitoring.md
Version: 2.0 (Refactored - Modular Orchestration Pattern)
Last Updated: December 2024
Maintained by: Claude Skills Repository
Resource Files Summary
The main SKILL.md is now an orchestration hub. Content is organized into 6 focused resource files:
- core-concepts.md - Architecture, frameworks, key concepts
- configuration-routing.md - staticwebapp.config.json, routing rules, headers
- api-integration.md - Azure Functions, calling APIs, error handling
- authentication.md - Auth providers, login flows, role-based access
- deployment-cicd.md - GitHub Actions, environments, CLI deployment
- operations-monitoring.md - Custom domains, SSL, monitoring, troubleshooting
All content preserved and significantly enhanced with better organization and accessibility.
