Merge branch 'main' into jamont-skill-imagemagick

2026-02-23 11:55:12 +00:00 · 2026-01-21 08:56:06 -08:00
parent 9f69340637 5fb41dae2a
commit 5a2e38b390
162 changed files with 15238 additions and 839 deletions
--- a/skills/appinsights-instrumentation/LICENSE.txt
+++ b/skills/appinsights-instrumentation/LICENSE.txt
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright 2025 (c) Microsoft Corporation.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE
--- a/skills/appinsights-instrumentation/SKILL.md
+++ b/skills/appinsights-instrumentation/SKILL.md
@@ -0,0 +1,48 @@
+---
+name: appinsights-instrumentation
+description: 'Instrument a webapp to send useful telemetry data to Azure App Insights'
+---
+
+# AppInsights instrumentation
+
+This skill enables sending telemetry data of a webapp to Azure App Insights for better observability of the app's health.
+
+## When to use this skill
+
+Use this skill when the user wants to enable telemetry for their webapp.
+
+## Prerequisites
+
+The app in the workspace must be one of these kinds
+
+- An ASP.NET Core app hosted in Azure
+- A Node.js app hosted in Azure
+
+## Guidelines
+
+### Collect context information
+
+Find out the (programming language, application framework, hosting) tuple of the application the user is trying to add telemetry support in. This determines how the application can be instrumented. Read the source code to make an educated guess. Confirm with the user on anything you don't know. You must always ask the user where the application is hosted (e.g. on a personal computer, in an Azure App Service as code, in an Azure App Service as container, in an Azure Container App, etc.). 
+
+### Prefer auto-instrument if possible
+
+If the app is a C# ASP.NET Core app hosted in Azure App Service, use [AUTO guide](references/AUTO.md) to help user auto-instrument the app.
+
+### Manually instrument
+
+Manually instrument the app by creating the AppInsights resource and update the app's code. 
+
+#### Create AppInsights resource
+
+Use one of the following options that fits the environment.
+
+- Add AppInsights to existing Bicep template. See [examples/appinsights.bicep](examples/appinsights.bicep) for what to add. This is the best option if there are existing Bicep template files in the workspace.
+- Use Azure CLI. See [scripts/appinsights.ps1](scripts/appinsights.ps1) for what Azure CLI command to execute to create the App Insights resource.
+
+No matter which option you choose, recommend the user to create the App Insights resource in a meaningful resource group that makes managing resources easier. A good candidate will be the same resource group that contains the resources for the hosted app in Azure.
+
+#### Modify application code
+
+- If the app is an ASP.NET Core app, see [ASPNETCORE guide](references/ASPNETCORE.md) for how to modify the C# code.
+- If the app is a Node.js app, see [NODEJS guide](references/NODEJS.md) for how to modify the JavaScript/TypeScript code.
+- If the app is a Python app, see [PYTHON guide](references/PYTHON.md) for how to modify the Python code.
--- a/skills/appinsights-instrumentation/examples/appinsights.bicep
+++ b/skills/appinsights-instrumentation/examples/appinsights.bicep
@@ -0,0 +1,30 @@
+@description('Location for all resources')
+param location string = resourceGroup().location
+
+@description('Name for new Application Insights')
+param name string
+
+// Create Log Analytics Workspace
+resource logAnalyticsWorkspace 'Microsoft.OperationalInsights/workspaces@2022-10-01' = {
+  name: '${name}-workspace'
+  location: location
+  properties: {
+    sku: {
+      name: 'PerGB2018'
+    }
+    retentionInDays: 30
+  }
+}
+
+// Create Application Insights
+resource applicationInsights 'Microsoft.Insights/components@2020-02-02' = {
+  name: name
+  location: location
+  kind: 'web'
+  properties: {
+    Application_Type: 'web'
+    WorkspaceResourceId: logAnalyticsWorkspace.id
+  }
+}
+
+output connectionString string = applicationInsights.properties.ConnectionString
--- a/skills/appinsights-instrumentation/references/ASPNETCORE.md
+++ b/skills/appinsights-instrumentation/references/ASPNETCORE.md
@@ -0,0 +1,29 @@
+## Modify code
+
+Make these necessary changes to the app.
+
+- Install client library
+```
+dotnet add package Azure.Monitor.OpenTelemetry.AspNetCore
+```
+
+- Configure the app to use Azure Monitor
+An ASP.NET Core app typically has a Program.cs file that "builds" the app. Find this file and apply these changes.
+  - Add `using Azure.Monitor.OpenTelemetry.AspNetCore;` at the top
+  - Before calling `builder.Build()`, add this line `builder.Services.AddOpenTelemetry().UseAzureMonitor();`.
+
+> Note: since we modified the code of the app, the app needs to be deployed to take effect.
+
+## Configure App Insights connection string
+
+The App Insights resource has a connection string. Add the connection string as an environment variable of the running app. You can use Azure CLI to query the connection string of the App Insights resource. See [scripts/appinsights.ps1](scripts/appinsights.ps1) for what Azure CLI command to execute for querying the connection string.
+
+After getting the connection string, set this environment variable with its value.
+
+```
+"APPLICATIONINSIGHTS_CONNECTION_STRING={your_application_insights_connection_string}"
+```
+
+If the app has IaC template such as Bicep or terraform files representing its cloud instance, this environment variable should be added to the IaC template to be applied in each deployment. Otherwise, use Azure CLI to manually apply the environment variable to the cloud instance of the app. See [scripts/appinsights.ps1](scripts/appinsights.ps1) for what Azure CLI command to execute for setting this environment variable.
+
+> Important: Don't modify appsettings.json. It was a deprecated way to configure App Insights. The environment variable is the new recommended way.
--- a/skills/appinsights-instrumentation/references/AUTO.md
+++ b/skills/appinsights-instrumentation/references/AUTO.md
@@ -0,0 +1,13 @@
+# Auto-instrument app
+
+Use Azure Portal to auto-instrument a webapp hosted in Azure App Service for App Insights without making any code changes. Only the following types of app can be auto-instrumented. See [supported environments and resource providers](https://learn.microsoft.com/azure/azure-monitor/app/codeless-overview#supported-environments-languages-and-resource-providers).
+
+- ASP.NET Core app hosted in Azure App Service
+- Node.js app hosted in Azure App Service
+
+Construct a url to bring the user to the Application Insights blade in Azure Portal for the App Service App.
+```
+https://portal.azure.com/#resource/subscriptions/{subscription_id}/resourceGroups/{resource_group_name}/providers/Microsoft.Web/sites/{app_service_name}/monitoringSettings
+```
+
+Use the context or ask the user to get the subscription_id, resource_group_name, and the app_service_name hosting the webapp.
--- a/skills/appinsights-instrumentation/references/NODEJS.md
+++ b/skills/appinsights-instrumentation/references/NODEJS.md
@@ -0,0 +1,28 @@
+## Modify code
+
+Make these necessary changes to the app.
+
+- Install client library
+```
+npm install @azure/monitor-opentelemetry
+```
+
+- Configure the app to use Azure Monitor
+A Node.js app typically has an entry file that is listed as the "main" property in package.json. Find this file and apply these changes in it.
+  - Require the client library at the top. `const { useAzureMonitor } = require("@azure/monitor-opentelemetry");`
+  - Call the setup method. `useAzureMonitor();`
+
+> Note: The setup method should be called as early as possible but it must be after the environment variables are configured since it needs the App Insights connection string from the environment variable. For example, if the app uses dotenv to load environment variables, the setup method should be called after it but before anything else.
+> Note: since we modified the code of the app, it needs to be deployed to take effect.
+
+## Configure App Insights connection string
+
+The App Insights resource has a connection string. Add the connection string as an environment variable of the running app. You can use Azure CLI to query the connection string of the App Insights resource. See [scripts/appinsights.ps1] for what Azure CLI command to execute for querying the connection string.
+
+After getting the connection string, set this environment variable with its value.
+
+```
+"APPLICATIONINSIGHTS_CONNECTION_STRING={your_application_insights_connection_string}"
+```
+
+If the app has IaC template such as Bicep or terraform files representing its cloud instance, this environment variable should be added to the IaC template to be applied in each deployment. Otherwise, use Azure CLI to manually apply the environment variable to the cloud instance of the app. See what Azure CLI command to execute for setting this environment variable.
--- a/skills/appinsights-instrumentation/references/PYTHON.md
+++ b/skills/appinsights-instrumentation/references/PYTHON.md
@@ -0,0 +1,48 @@
+## Modify code
+
+Make these necessary changes to the app.
+
+- Install client library
+```
+pip install azure-monitor-opentelemetry
+```
+
+- Configure the app to use Azure Monitor
+Python applications send telemetry via the logger class in Python standard library. Create a module that configures and creates a logger that can send telemetry.
+
+```python
+import logging
+from azure.monitor.opentelemetry import configure_azure_monitor
+
+configure_azure_monitor(
+    logger_name="<your_logger_namespace>"
+)
+logger = logging.getLogger("<your_logger_namespace>")
+```
+
+> Note: since we modified the code of the app, it needs to be deployed to take effect.
+
+## Configure App Insights connection string
+
+The App Insights resource has a connection string. Add the connection string as an environment variable of the running app. You can use Azure CLI to query the connection string of the App Insights resource. See [scripts/appinsights.ps1] for what Azure CLI command to execute for querying the connection string.
+
+After getting the connection string, set this environment variable with its value.
+
+```
+"APPLICATIONINSIGHTS_CONNECTION_STRING={your_application_insights_connection_string}"
+```
+
+If the app has IaC template such as Bicep or terraform files representing its cloud instance, this environment variable should be added to the IaC template to be applied in each deployment. Otherwise, use Azure CLI to manually apply the environment variable to the cloud instance of the app. See what Azure CLI command to execute for setting this environment variable.
+
+## Send data
+
+Create a logger that is configured to send telemetry.
+```python
+logger = logging.getLogger("<your_logger_namespace>")
+logger.setLevel(logging.INFO)
+```
+
+Then send telemetry events by calling its logging methods.
+```python
+logger.info("info log")
+```
--- a/skills/appinsights-instrumentation/scripts/appinsights.ps1
+++ b/skills/appinsights-instrumentation/scripts/appinsights.ps1
@@ -0,0 +1,20 @@
+# Create App Insights resource (3 steps)
+## Add the Application Insights extension
+az extension add -n application-insights
+## Create a Log Analytics workspace
+az monitor log-analytics workspace create --resource-group $resourceGroupName --workspace-name $logAnalyticsWorkspaceName --location $azureRegionName
+## Create the Application Insights resource
+az monitor app-insights component create --app $applicationInsightsResourceName --location $azureRegionName --resource-group $resourceGroupName --workspace $logAnalyticsWorkspaceName
+
+# Query connection string of App Insights
+az monitor app-insights component show --app $applicationInsightsResourceName --resource-group $resourceGroupName --query connectionString --output tsv
+
+# Set environment variable of App Service
+az webapp config appsettings set --resource-group $resourceGroupName --name $appName --settings $key=$value
+
+# Set environment variable of Container App
+# Or update an existing container app
+az containerapp update -n $containerAppName -g $resourceGroupName --set-env-vars $key=$value
+
+# Set environment variable of Function App
+az functionapp config appsettings set --name $functionName --resource-group $ResourceGroupName --settings $key=$value
--- a/skills/azure-resource-visualizer/LICENSE.txt
+++ b/skills/azure-resource-visualizer/LICENSE.txt
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright 2025 (c) Microsoft Corporation.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE
--- a/skills/azure-resource-visualizer/SKILL.md
+++ b/skills/azure-resource-visualizer/SKILL.md
@@ -0,0 +1,233 @@
+---
+name: azure-resource-visualizer
+description: Analyze Azure resource groups and generate detailed Mermaid architecture diagrams showing the relationships between individual resources. Use this skill when the user asks for a diagram of their Azure resources or help in understanding how the resources relate to each other.
+license: Complete terms in LICENSE.txt
+metadata:
+  author: Tom Meschter (tom.meschter@microsoft.com)
+---
+
+# Azure Resource Visualizer - Architecture Diagram Generator
+
+A user may ask for help understanding how individual resources fit together, or to create a diagram showing their relationships. Your mission is to examine Azure resource groups, understand their structure and relationships, and generate comprehensive Mermaid diagrams that clearly illustrate the architecture.
+
+## Core Responsibilities
+
+1. **Resource Group Discovery**: List available resource groups when not specified
+2. **Deep Resource Analysis**: Examine all resources, their configurations, and interdependencies
+3. **Relationship Mapping**: Identify and document all connections between resources
+4. **Diagram Generation**: Create detailed, accurate Mermaid diagrams
+5. **Documentation Creation**: Produce clear markdown files with embedded diagrams
+
+## Workflow Process
+
+### Step 1: Resource Group Selection
+
+If the user hasn't specified a resource group:
+
+1. Use your tools to query available resource groups. If you do not have a tool for this, use `az`.
+2. Present a numbered list of resource groups with their locations
+3. Ask the user to select one by number or name
+4. Wait for user response before proceeding
+
+If a resource group is specified, validate it exists and proceed.
+
+### Step 2: Resource Discovery & Analysis
+
+Once you have the resource group:
+
+1. **Query all resources** in the resource group using Azure MCP tools or `az`.
+2. **Analyze each resource** type and capture:
+   - Resource name and type
+   - SKU/tier information
+   - Location/region
+   - Key configuration properties
+   - Network settings (VNets, subnets, private endpoints)
+   - Identity and access (Managed Identity, RBAC)
+   - Dependencies and connections
+
+3. **Map relationships** by identifying:
+   - **Network connections**: VNet peering, subnet assignments, NSG rules, private endpoints
+   - **Data flow**: Apps → Databases, Functions → Storage, API Management → Backends
+   - **Identity**: Managed identities connecting to resources
+   - **Configuration**: App Settings pointing to Key Vaults, connection strings
+   - **Dependencies**: Parent-child relationships, required resources
+
+### Step 3: Diagram Construction
+
+Create a **detailed Mermaid diagram** using the `graph TB` (top-to-bottom) or `graph LR` (left-to-right) format:
+
+**Diagram Structure Guidelines:**
+
+```mermaid
+graph TB
+    %% Use subgraphs to group related resources
+    subgraph "Resource Group: [name]"
+        subgraph "Network Layer"
+            VNET[Virtual Network<br/>10.0.0.0/16]
+            SUBNET1[Subnet: web<br/>10.0.1.0/24]
+            SUBNET2[Subnet: data<br/>10.0.2.0/24]
+            NSG[Network Security Group]
+        end
+        
+        subgraph "Compute Layer"
+            APP[App Service<br/>Plan: P1v2]
+            FUNC[Function App<br/>Runtime: .NET 8]
+        end
+        
+        subgraph "Data Layer"
+            SQL[Azure SQL Database<br/>DTU: S1]
+            STORAGE[Storage Account<br/>Type: Standard LRS]
+        end
+        
+        subgraph "Security & Identity"
+            KV[Key Vault]
+            MI[Managed Identity]
+        end
+    end
+    
+    %% Define relationships with descriptive labels
+    APP -->|"HTTPS requests"| FUNC
+    FUNC -->|"SQL connection"| SQL
+    FUNC -->|"Blob/Queue access"| STORAGE
+    APP -->|"Uses identity"| MI
+    MI -->|"Access secrets"| KV
+    VNET --> SUBNET1
+    VNET --> SUBNET2
+    SUBNET1 --> APP
+    SUBNET2 --> SQL
+    NSG -->|"Rules applied to"| SUBNET1
+```
+
+**Key Diagram Requirements:**
+
+- **Group by layer or purpose**: Network, Compute, Data, Security, Monitoring
+- **Include details**: SKUs, tiers, important settings in node labels (use `<br/>` for line breaks)
+- **Label all connections**: Describe what flows between resources (data, identity, network)
+- **Use meaningful node IDs**: Abbreviations that make sense (APP, FUNC, SQL, KV)
+- **Visual hierarchy**: Subgraphs for logical grouping
+- **Connection types**:
+  - `-->` for data flow or dependencies
+  - `-.->` for optional/conditional connections
+  - `==>` for critical/primary paths
+
+**Resource Type Examples:**
+- App Service: Include plan tier (B1, S1, P1v2)
+- Functions: Include runtime (.NET, Python, Node)
+- Databases: Include tier (Basic, Standard, Premium)
+- Storage: Include redundancy (LRS, GRS, ZRS)
+- VNets: Include address space
+- Subnets: Include address range
+
+### Step 4: File Creation
+
+Use [template-architecture.md](./assets/template-architecture.md) as a template and create a markdown file named `[resource-group-name]-architecture.md` with:
+
+1. **Header**: Resource group name, subscription, region
+2. **Summary**: Brief overview of the architecture (2-3 paragraphs)
+3. **Resource Inventory**: Table listing all resources with types and key properties
+4. **Architecture Diagram**: The complete Mermaid diagram
+5. **Relationship Details**: Explanation of key connections and data flows
+6. **Notes**: Any important observations, potential issues, or recommendations
+
+## Operating Guidelines
+
+### Quality Standards
+
+- **Accuracy**: Verify all resource details before including in diagram
+- **Completeness**: Don't omit resources; include everything in the resource group
+- **Clarity**: Use clear, descriptive labels and logical grouping
+- **Detail Level**: Include configuration details that matter for architecture understanding
+- **Relationships**: Show ALL significant connections, not just obvious ones
+
+### Tool Usage Patterns
+
+1. **Azure MCP Search**: 
+   - Use `intent="list resource groups"` to discover resource groups
+   - Use `intent="list resources in group"` with group name to get all resources
+   - Use `intent="get resource details"` for individual resource analysis
+   - Use `command` parameter when you need specific Azure operations
+
+2. **File Creation**:
+   - Always create in workspace root or a `docs/` folder if it exists
+   - Use clear, descriptive filenames: `[rg-name]-architecture.md`
+   - Ensure Mermaid syntax is valid (test syntax mentally before output)
+
+3. **Terminal (when needed)**:
+   - Use Azure CLI for complex queries not available via MCP
+   - Example: `az resource list --resource-group <name> --output json`
+   - Example: `az network vnet show --resource-group <name> --name <vnet-name>`
+
+### Constraints & Boundaries
+
+**Always Do:**
+- ✅ List resource groups if not specified
+- ✅ Wait for user selection before proceeding
+- ✅ Analyze ALL resources in the group
+- ✅ Create detailed, accurate diagrams
+- ✅ Include configuration details in node labels
+- ✅ Group resources logically with subgraphs
+- ✅ Label all connections descriptively
+- ✅ Create a complete markdown file with diagram
+
+**Never Do:**
+- ❌ Skip resources because they seem unimportant
+- ❌ Make assumptions about resource relationships without verification
+- ❌ Create incomplete or placeholder diagrams
+- ❌ Omit configuration details that affect architecture
+- ❌ Proceed without confirming resource group selection
+- ❌ Generate invalid Mermaid syntax
+- ❌ Modify or delete Azure resources (read-only analysis)
+
+### Edge Cases & Error Handling
+
+- **No resources found**: Inform user and verify resource group name
+- **Permission issues**: Explain what's missing and suggest checking RBAC
+- **Complex architectures (50+ resources)**: Consider creating multiple diagrams by layer
+- **Cross-resource-group dependencies**: Note external dependencies in diagram notes
+- **Resources without clear relationships**: Group in "Other Resources" section
+
+## Output Format Specifications
+
+### Mermaid Diagram Syntax
+- Use `graph TB` (top-to-bottom) for vertical layouts
+- Use `graph LR` (left-to-right) for horizontal layouts (better for wide architectures)
+- Subgraph syntax: `subgraph "Descriptive Name"`
+- Node syntax: `ID["Display Name<br/>Details"]`
+- Connection syntax: `SOURCE -->|"Label"| TARGET`
+
+### Markdown Structure
+- Use H1 for main title
+- Use H2 for major sections
+- Use H3 for subsections
+- Use tables for resource inventories
+- Use bullet lists for notes and recommendations
+- Use code blocks with `mermaid` language tag for diagrams
+
+## Example Interaction
+
+**User**: "Analyze my production resource group"
+
+**Agent**:
+1. Lists all resource groups in subscription
+2. Asks user to select: "Which resource group? 1) rg-prod-app, 2) rg-dev-app, 3) rg-shared"
+3. User selects: "1"
+4. Queries all resources in rg-prod-app
+5. Analyzes: App Service, Function App, SQL Database, Storage Account, Key Vault, VNet, NSG
+6. Identifies relationships: App → Function, Function → SQL, Function → Storage, All → Key Vault
+7. Creates detailed Mermaid diagram with subgraphs
+8. Generates `rg-prod-app-architecture.md` with complete documentation
+9. Displays: "Created architecture diagram in rg-prod-app-architecture.md. Found 7 resources with 8 key relationships."
+
+## Success Criteria
+
+A successful analysis includes:
+- ✅ Valid resource group identified
+- ✅ All resources discovered and analyzed
+- ✅ All significant relationships mapped
+- ✅ Detailed Mermaid diagram with proper grouping
+- ✅ Complete markdown file created
+- ✅ Clear, actionable documentation
+- ✅ Valid Mermaid syntax that renders correctly
+- ✅ Professional, architect-level output
+
+Your goal is to provide clarity and insight into Azure architectures, making complex resource relationships easy to understand through excellent visualization.
--- a/skills/azure-resource-visualizer/assets/template-architecture.md
+++ b/skills/azure-resource-visualizer/assets/template-architecture.md
@@ -0,0 +1,41 @@
+# Azure Architecture: [Resource Group Name]
+
+**Subscription**: [subscription-name]  
+**Region**: [primary-region]  
+**Resource Count**: [count]  
+**Generated**: [date]
+
+## Overview
+
+[2-3 paragraph summary of the architecture, its purpose, and key components]
+
+## Resource Inventory
+
+| Resource Name | Type | Tier/SKU | Location | Notes |
+|--------------|------|----------|----------|-------|
+| app-prod-001 | App Service | P1v2 | East US | Production web app |
+| func-prod-001 | Function App | Y1 | East US | Consumption plan |
+
+## Architecture Diagram
+
+```mermaid
+[full diagram here]
+```
+
+## Relationship Details
+
+### Network Architecture
+[Describe VNets, subnets, network security]
+
+### Data Flow
+[Describe how data moves between components]
+
+### Identity & Access
+[Describe managed identities, key vault access, RBAC]
+
+### Dependencies
+[Describe critical dependencies and their order]
+
+## Notes & Recommendations
+
+[Any observations, potential issues, or suggestions]
--- a/skills/azure-role-selector/LICENSE.txt
+++ b/skills/azure-role-selector/LICENSE.txt
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright 2025 (c) Microsoft Corporation.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE
--- a/skills/azure-role-selector/SKILL.md
+++ b/skills/azure-role-selector/SKILL.md
@@ -0,0 +1,6 @@
+---
+name: azure-role-selector
+description: When user is asking for guidance for which role to assign to an identity given desired permissions, this agent helps them understand the role that will meet the requirements with least privilege access and how to apply that role.
+allowed-tools: ['Azure MCP/documentation', 'Azure MCP/bicepschema', 'Azure MCP/extension_cli_generate', 'Azure MCP/get_bestpractices']
+---
+Use 'Azure MCP/documentation' tool to find the minimal role definition that matches the desired permissions the user wants to assign to an identity (If no built-in role matches the desired permissions, use 'Azure MCP/extension_cli_generate' tool to create a custom role definition with the desired permissions). Use 'Azure MCP/extension_cli_generate' tool to generate the CLI commands needed to assign that role to the identity and use the 'Azure MCP/bicepschema' and the 'Azure MCP/get_bestpractices' tool to provide a Bicep code snippet for adding the role assignment.
--- a/skills/azure-static-web-apps/SKILL.md
+++ b/skills/azure-static-web-apps/SKILL.md
@@ -0,0 +1,315 @@
+---
+name: azure-static-web-apps
+description: Helps create, configure, and deploy Azure Static Web Apps using the SWA CLI. Use when deploying static sites to Azure, setting up SWA local development, configuring staticwebapp.config.json, adding Azure Functions APIs to SWA, or setting up GitHub Actions CI/CD for Static Web Apps.
+---
+
+## Overview
+
+Azure Static Web Apps (SWA) hosts static frontends with optional serverless API backends. The SWA CLI (`swa`) provides local development emulation and deployment capabilities.
+
+**Key features:**
+- Local emulator with API proxy and auth simulation
+- Framework auto-detection and configuration
+- Direct deployment to Azure
+- Database connections support
+
+**Config files:**
+- `swa-cli.config.json` - CLI settings, **created by `swa init`** (never create manually)
+- `staticwebapp.config.json` - Runtime config (routes, auth, headers, API runtime) - can be created manually
+
+## General Instructions
+
+### Installation
+
+```bash
+npm install -D @azure/static-web-apps-cli
+```
+
+Verify: `npx swa --version`
+
+### Quick Start Workflow
+
+**IMPORTANT: Always use `swa init` to create configuration files. Never manually create `swa-cli.config.json`.**
+
+1. `swa init` - **Required first step** - auto-detects framework and creates `swa-cli.config.json`
+2. `swa start` - Run local emulator at `http://localhost:4280`
+3. `swa login` - Authenticate with Azure
+4. `swa deploy` - Deploy to Azure
+
+### Configuration Files
+
+**swa-cli.config.json** - Created by `swa init`, do not create manually:
+- Run `swa init` for interactive setup with framework detection
+- Run `swa init --yes` to accept auto-detected defaults
+- Edit the generated file only to customize settings after initialization
+
+Example of generated config (for reference only):
+```json
+{
+  "$schema": "https://aka.ms/azure/static-web-apps-cli/schema",
+  "configurations": {
+    "app": {
+      "appLocation": ".",
+      "apiLocation": "api",
+      "outputLocation": "dist",
+      "appBuildCommand": "npm run build",
+      "run": "npm run dev",
+      "appDevserverUrl": "http://localhost:3000"
+    }
+  }
+}
+```
+
+**staticwebapp.config.json** (in app source or output folder) - This file CAN be created manually for runtime configuration:
+```json
+{
+  "navigationFallback": {
+    "rewrite": "/index.html",
+    "exclude": ["/images/*", "/css/*"]
+  },
+  "routes": [
+    { "route": "/api/*", "allowedRoles": ["authenticated"] }
+  ],
+  "platform": {
+    "apiRuntime": "node:20"
+  }
+}
+```
+
+## Command-line Reference
+
+### swa login
+
+Authenticate with Azure for deployment.
+
+```bash
+swa login                              # Interactive login
+swa login --subscription-id <id>       # Specific subscription
+swa login --clear-credentials          # Clear cached credentials
+```
+
+**Flags:** `--subscription-id, -S` | `--resource-group, -R` | `--tenant-id, -T` | `--client-id, -C` | `--client-secret, -CS` | `--app-name, -n`
+
+### swa init
+
+Configure a new SWA project based on an existing frontend and (optional) API. Detects frameworks automatically.
+
+```bash
+swa init                    # Interactive setup
+swa init --yes              # Accept defaults
+```
+
+### swa build
+
+Build frontend and/or API.
+
+```bash
+swa build                   # Build using config
+swa build --auto            # Auto-detect and build
+swa build myApp             # Build specific configuration
+```
+
+**Flags:** `--app-location, -a` | `--api-location, -i` | `--output-location, -O` | `--app-build-command, -A` | `--api-build-command, -I`
+
+### swa start
+
+Start local development emulator.
+
+```bash
+swa start                                    # Serve from outputLocation
+swa start ./dist                             # Serve specific folder
+swa start http://localhost:3000              # Proxy to dev server
+swa start ./dist --api-location ./api        # With API folder
+swa start http://localhost:3000 --run "npm start"  # Auto-start dev server
+```
+
+**Common framework ports:**
+| Framework | Port |
+|-----------|------|
+| React/Vue/Next.js | 3000 |
+| Angular | 4200 |
+| Vite | 5173 |
+
+**Key flags:**
+- `--port, -p` - Emulator port (default: 4280)
+- `--api-location, -i` - API folder path
+- `--api-port, -j` - API port (default: 7071)
+- `--run, -r` - Command to start dev server
+- `--open, -o` - Open browser automatically
+- `--ssl, -s` - Enable HTTPS
+
+### swa deploy
+
+Deploy to Azure Static Web Apps.
+
+```bash
+swa deploy                              # Deploy using config
+swa deploy ./dist                       # Deploy specific folder
+swa deploy --env production             # Deploy to production
+swa deploy --deployment-token <TOKEN>   # Use deployment token
+swa deploy --dry-run                    # Preview without deploying
+```
+
+**Get deployment token:**
+- Azure Portal: Static Web App → Overview → Manage deployment token
+- CLI: `swa deploy --print-token`
+- Environment variable: `SWA_CLI_DEPLOYMENT_TOKEN`
+
+**Key flags:**
+- `--env` - Target environment (`preview` or `production`)
+- `--deployment-token, -d` - Deployment token
+- `--app-name, -n` - Azure SWA resource name
+
+### swa db
+
+Initialize database connections.
+
+```bash
+swa db init --database-type mssql
+swa db init --database-type postgresql
+swa db init --database-type cosmosdb_nosql
+```
+
+## Scenarios
+
+### Create SWA from Existing Frontend and Backend
+
+**Always run `swa init` before `swa start` or `swa deploy`. Do not manually create `swa-cli.config.json`.**
+
+```bash
+# 1. Install CLI
+npm install -D @azure/static-web-apps-cli
+
+# 2. Initialize - REQUIRED: creates swa-cli.config.json with auto-detected settings
+npx swa init              # Interactive mode
+# OR
+npx swa init --yes        # Accept auto-detected defaults
+
+# 3. Build application (if needed)
+npm run build
+
+# 4. Test locally (uses settings from swa-cli.config.json)
+npx swa start
+
+# 5. Deploy
+npx swa login
+npx swa deploy --env production
+```
+
+### Add Azure Functions Backend
+
+1. **Create API folder:**
+```bash
+mkdir api && cd api
+func init --worker-runtime node --model V4
+func new --name message --template "HTTP trigger"
+```
+
+2. **Example function** (`api/src/functions/message.js`):
+```javascript
+const { app } = require('@azure/functions');
+
+app.http('message', {
+    methods: ['GET', 'POST'],
+    authLevel: 'anonymous',
+    handler: async (request) => {
+        const name = request.query.get('name') || 'World';
+        return { jsonBody: { message: `Hello, ${name}!` } };
+    }
+});
+```
+
+3. **Set API runtime** in `staticwebapp.config.json`:
+```json
+{
+  "platform": { "apiRuntime": "node:20" }
+}
+```
+
+4. **Update CLI config** in `swa-cli.config.json`:
+```json
+{
+  "configurations": {
+    "app": { "apiLocation": "api" }
+  }
+}
+```
+
+5. **Test locally:**
+```bash
+npx swa start ./dist --api-location ./api
+# Access API at http://localhost:4280/api/message
+```
+
+**Supported API runtimes:** `node:18`, `node:20`, `node:22`, `dotnet:8.0`, `dotnet-isolated:8.0`, `python:3.10`, `python:3.11`
+
+### Set Up GitHub Actions Deployment
+
+1. **Create SWA resource** in Azure Portal or via Azure CLI
+2. **Link GitHub repository** - workflow auto-generated, or create manually:
+
+`.github/workflows/azure-static-web-apps.yml`:
+```yaml
+name: Azure Static Web Apps CI/CD
+
+on:
+  push:
+    branches: [main]
+  pull_request:
+    types: [opened, synchronize, reopened, closed]
+    branches: [main]
+
+jobs:
+  build_and_deploy:
+    if: github.event_name == 'push' || (github.event_name == 'pull_request' && github.event.action != 'closed')
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - name: Build And Deploy
+        uses: Azure/static-web-apps-deploy@v1
+        with:
+          azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN }}
+          repo_token: ${{ secrets.GITHUB_TOKEN }}
+          action: upload
+          app_location: /
+          api_location: api
+          output_location: dist
+
+  close_pr:
+    if: github.event_name == 'pull_request' && github.event.action == 'closed'
+    runs-on: ubuntu-latest
+    steps:
+      - uses: Azure/static-web-apps-deploy@v1
+        with:
+          azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN }}
+          action: close
+```
+
+3. **Add secret:** Copy deployment token to repository secret `AZURE_STATIC_WEB_APPS_API_TOKEN`
+
+**Workflow settings:**
+- `app_location` - Frontend source path
+- `api_location` - API source path
+- `output_location` - Built output folder
+- `skip_app_build: true` - Skip if pre-built
+- `app_build_command` - Custom build command
+
+## Troubleshooting
+
+| Issue | Solution |
+|-------|----------|
+| 404 on client routes | Add `navigationFallback` with `rewrite: "/index.html"` to `staticwebapp.config.json` |
+| API returns 404 | Verify `api` folder structure, ensure `platform.apiRuntime` is set, check function exports |
+| Build output not found | Verify `output_location` matches actual build output directory |
+| Auth not working locally | Use `/.auth/login/<provider>` to access auth emulator UI |
+| CORS errors | APIs under `/api/*` are same-origin; external APIs need CORS headers |
+| Deployment token expired | Regenerate in Azure Portal → Static Web App → Manage deployment token |
+| Config not applied | Ensure `staticwebapp.config.json` is in `app_location` or `output_location` |
+| Local API timeout | Default is 45 seconds; optimize function or check for blocking calls |
+
+**Debug commands:**
+```bash
+swa start --verbose log        # Verbose output
+swa deploy --dry-run           # Preview deployment
+swa --print-config             # Show resolved configuration
+```
--- a/skills/github-issues/SKILL.md
+++ b/skills/github-issues/SKILL.md
@@ -0,0 +1,132 @@
+---
+name: github-issues
+description: 'Create, update, and manage GitHub issues using MCP tools. Use this skill when users want to create bug reports, feature requests, or task issues, update existing issues, add labels/assignees/milestones, or manage issue workflows. Triggers on requests like "create an issue", "file a bug", "request a feature", "update issue X", or any GitHub issue management task.'
+---
+
+# GitHub Issues
+
+Manage GitHub issues using the `@modelcontextprotocol/server-github` MCP server.
+
+## Available MCP Tools
+
+| Tool | Purpose |
+|------|---------|
+| `mcp__github__create_issue` | Create new issues |
+| `mcp__github__update_issue` | Update existing issues |
+| `mcp__github__get_issue` | Fetch issue details |
+| `mcp__github__search_issues` | Search issues |
+| `mcp__github__add_issue_comment` | Add comments |
+| `mcp__github__list_issues` | List repository issues |
+
+## Workflow
+
+1. **Determine action**: Create, update, or query?
+2. **Gather context**: Get repo info, existing labels, milestones if needed
+3. **Structure content**: Use appropriate template from [references/templates.md](references/templates.md)
+4. **Execute**: Call the appropriate MCP tool
+5. **Confirm**: Report the issue URL to user
+
+## Creating Issues
+
+### Required Parameters
+
+```
+owner: repository owner (org or user)
+repo: repository name  
+title: clear, actionable title
+body: structured markdown content
+```
+
+### Optional Parameters
+
+```
+labels: ["bug", "enhancement", "documentation", ...]
+assignees: ["username1", "username2"]
+milestone: milestone number (integer)
+```
+
+### Title Guidelines
+
+- Start with type prefix when useful: `[Bug]`, `[Feature]`, `[Docs]`
+- Be specific and actionable
+- Keep under 72 characters
+- Examples:
+  - `[Bug] Login fails with SSO enabled`
+  - `[Feature] Add dark mode support`
+  - `Add unit tests for auth module`
+
+### Body Structure
+
+Always use the templates in [references/templates.md](references/templates.md). Choose based on issue type:
+
+| User Request | Template |
+|--------------|----------|
+| Bug, error, broken, not working | Bug Report |
+| Feature, enhancement, add, new | Feature Request |
+| Task, chore, refactor, update | Task |
+
+## Updating Issues
+
+Use `mcp__github__update_issue` with:
+
+```
+owner, repo, issue_number (required)
+title, body, state, labels, assignees, milestone (optional - only changed fields)
+```
+
+State values: `open`, `closed`
+
+## Examples
+
+### Example 1: Bug Report
+
+**User**: "Create a bug issue - the login page crashes when using SSO"
+
+**Action**: Call `mcp__github__create_issue` with:
+```json
+{
+  "owner": "github",
+  "repo": "awesome-copilot",
+  "title": "[Bug] Login page crashes when using SSO",
+  "body": "## Description\nThe login page crashes when users attempt to authenticate using SSO.\n\n## Steps to Reproduce\n1. Navigate to login page\n2. Click 'Sign in with SSO'\n3. Page crashes\n\n## Expected Behavior\nSSO authentication should complete and redirect to dashboard.\n\n## Actual Behavior\nPage becomes unresponsive and displays error.\n\n## Environment\n- Browser: [To be filled]\n- OS: [To be filled]\n\n## Additional Context\nReported by user.",
+  "labels": ["bug"]
+}
+```
+
+### Example 2: Feature Request
+
+**User**: "Create a feature request for dark mode with high priority"
+
+**Action**: Call `mcp__github__create_issue` with:
+```json
+{
+  "owner": "github",
+  "repo": "awesome-copilot",
+  "title": "[Feature] Add dark mode support",
+  "body": "## Summary\nAdd dark mode theme option for improved user experience and accessibility.\n\n## Motivation\n- Reduces eye strain in low-light environments\n- Increasingly expected by users\n- Improves accessibility\n\n## Proposed Solution\nImplement theme toggle with system preference detection.\n\n## Acceptance Criteria\n- [ ] Toggle switch in settings\n- [ ] Persists user preference\n- [ ] Respects system preference by default\n- [ ] All UI components support both themes\n\n## Alternatives Considered\nNone specified.\n\n## Additional Context\nHigh priority request.",
+  "labels": ["enhancement", "high-priority"]
+}
+```
+
+## Common Labels
+
+Use these standard labels when applicable:
+
+| Label | Use For |
+|-------|---------|
+| `bug` | Something isn't working |
+| `enhancement` | New feature or improvement |
+| `documentation` | Documentation updates |
+| `good first issue` | Good for newcomers |
+| `help wanted` | Extra attention needed |
+| `question` | Further information requested |
+| `wontfix` | Will not be addressed |
+| `duplicate` | Already exists |
+| `high-priority` | Urgent issues |
+
+## Tips
+
+- Always confirm the repository context before creating issues
+- Ask for missing critical information rather than guessing
+- Link related issues when known: `Related to #123`
+- For updates, fetch current issue first to preserve unchanged fields
--- a/skills/github-issues/references/templates.md
+++ b/skills/github-issues/references/templates.md
@@ -0,0 +1,90 @@
+# Issue Templates
+
+Copy and customize these templates for issue bodies.
+
+## Bug Report Template
+
+```markdown
+## Description
+[Clear description of the bug]
+
+## Steps to Reproduce
+1. [First step]
+2. [Second step]
+3. [And so on...]
+
+## Expected Behavior
+[What should happen]
+
+## Actual Behavior
+[What actually happens]
+
+## Environment
+- Browser: [e.g., Chrome 120]
+- OS: [e.g., macOS 14.0]
+- Version: [e.g., v1.2.3]
+
+## Screenshots/Logs
+[If applicable]
+
+## Additional Context
+[Any other relevant information]
+```
+
+## Feature Request Template
+
+```markdown
+## Summary
+[One-line description of the feature]
+
+## Motivation
+[Why is this feature needed? What problem does it solve?]
+
+## Proposed Solution
+[How should this feature work?]
+
+## Acceptance Criteria
+- [ ] [Criterion 1]
+- [ ] [Criterion 2]
+- [ ] [Criterion 3]
+
+## Alternatives Considered
+[Other approaches considered and why they weren't chosen]
+
+## Additional Context
+[Mockups, examples, or related issues]
+```
+
+## Task Template
+
+```markdown
+## Objective
+[What needs to be accomplished]
+
+## Details
+[Detailed description of the work]
+
+## Checklist
+- [ ] [Subtask 1]
+- [ ] [Subtask 2]
+- [ ] [Subtask 3]
+
+## Dependencies
+[Any blockers or related work]
+
+## Notes
+[Additional context or considerations]
+```
+
+## Minimal Template
+
+For simple issues:
+
+```markdown
+## Description
+[What and why]
+
+## Tasks
+- [ ] [Task 1]
+- [ ] [Task 2]
+```
--- a/skills/make-skill-template/SKILL.md
+++ b/skills/make-skill-template/SKILL.md
@@ -0,0 +1,147 @@
+---
+name: make-skill-template
+description: 'Create new Agent Skills for GitHub Copilot from prompts or by duplicating this template. Use when asked to "create a skill", "make a new skill", "scaffold a skill", or when building specialized AI capabilities with bundled resources. Generates SKILL.md files with proper frontmatter, directory structure, and optional scripts/references/assets folders.'
+---
+
+# Make Skill Template
+
+A meta-skill for creating new Agent Skills. Use this skill when you need to scaffold a new skill folder, generate a SKILL.md file, or help users understand the Agent Skills specification.
+
+## When to Use This Skill
+
+- User asks to "create a skill", "make a new skill", or "scaffold a skill"
+- User wants to add a specialized capability to their GitHub Copilot setup
+- User needs help structuring a skill with bundled resources
+- User wants to duplicate this template as a starting point
+
+## Prerequisites
+
+- Understanding of what the skill should accomplish
+- A clear, keyword-rich description of capabilities and triggers
+- Knowledge of any bundled resources needed (scripts, references, assets, templates)
+
+## Creating a New Skill
+
+### Step 1: Create the Skill Directory
+
+Create a new folder with a lowercase, hyphenated name:
+
+```
+skills/<skill-name>/
+└── SKILL.md          # Required
+```
+
+### Step 2: Generate SKILL.md with Frontmatter
+
+Every skill requires YAML frontmatter with `name` and `description`:
+
+```yaml
+---
+name: <skill-name>
+description: '<What it does>. Use when <specific triggers, scenarios, keywords users might say>.'
+---
+```
+
+#### Frontmatter Field Requirements
+
+| Field | Required | Constraints |
+|-------|----------|-------------|
+| `name` | **Yes** | 1-64 chars, lowercase letters/numbers/hyphens only, must match folder name |
+| `description` | **Yes** | 1-1024 chars, must describe WHAT it does AND WHEN to use it |
+| `license` | No | License name or reference to bundled LICENSE.txt |
+| `compatibility` | No | 1-500 chars, environment requirements if needed |
+| `metadata` | No | Key-value pairs for additional properties |
+| `allowed-tools` | No | Space-delimited list of pre-approved tools (experimental) |
+
+#### Description Best Practices
+
+**CRITICAL**: The `description` is the PRIMARY mechanism for automatic skill discovery. Include:
+
+1. **WHAT** the skill does (capabilities)
+2. **WHEN** to use it (triggers, scenarios, file types)
+3. **Keywords** users might mention in prompts
+
+**Good example:**
+
+```yaml
+description: 'Toolkit for testing local web applications using Playwright. Use when asked to verify frontend functionality, debug UI behavior, capture browser screenshots, or view browser console logs. Supports Chrome, Firefox, and WebKit.'
+```
+
+**Poor example:**
+
+```yaml
+description: 'Web testing helpers'
+```
+
+### Step 3: Write the Skill Body
+
+After the frontmatter, add markdown instructions. Recommended sections:
+
+| Section | Purpose |
+|---------|---------|
+| `# Title` | Brief overview |
+| `## When to Use This Skill` | Reinforces description triggers |
+| `## Prerequisites` | Required tools, dependencies |
+| `## Step-by-Step Workflows` | Numbered steps for tasks |
+| `## Troubleshooting` | Common issues and solutions |
+| `## References` | Links to bundled docs |
+
+### Step 4: Add Optional Directories (If Needed)
+
+| Folder | Purpose | When to Use |
+|--------|---------|-------------|
+| `scripts/` | Executable code (Python, Bash, JS) | Automation that performs operations |
+| `references/` | Documentation agent reads | API references, schemas, guides |
+| `assets/` | Static files used AS-IS | Images, fonts, templates |
+| `templates/` | Starter code agent modifies | Scaffolds to extend |
+
+## Example: Complete Skill Structure
+
+```
+my-awesome-skill/
+├── SKILL.md                    # Required instructions
+├── LICENSE.txt                 # Optional license file
+├── scripts/
+│   └── helper.py               # Executable automation
+├── references/
+│   ├── api-reference.md        # Detailed docs
+│   └── examples.md             # Usage examples
+├── assets/
+│   └── diagram.png             # Static resources
+└── templates/
+    └── starter.ts              # Code scaffold
+```
+
+## Quick Start: Duplicate This Template
+
+1. Copy the `make-skill-template/` folder
+2. Rename to your skill name (lowercase, hyphens)
+3. Update `SKILL.md`:
+   - Change `name:` to match folder name
+   - Write a keyword-rich `description:`
+   - Replace body content with your instructions
+4. Add bundled resources as needed
+5. Validate with `npm run skill:validate`
+
+## Validation Checklist
+
+- [ ] Folder name is lowercase with hyphens
+- [ ] `name` field matches folder name exactly
+- [ ] `description` is 10-1024 characters
+- [ ] `description` explains WHAT and WHEN
+- [ ] `description` is wrapped in single quotes
+- [ ] Body content is under 500 lines
+- [ ] Bundled assets are under 5MB each
+
+## Troubleshooting
+
+| Issue | Solution |
+|-------|----------|
+| Skill not discovered | Improve description with more keywords and triggers |
+| Validation fails on name | Ensure lowercase, no consecutive hyphens, matches folder |
+| Description too short | Add capabilities, triggers, and keywords |
+| Assets not found | Use relative paths from skill root |
+
+## References
+
+- Agent Skills official spec: <https://agentskills.io/specification>
--- a/skills/microsoft-code-reference/SKILL.md
+++ b/skills/microsoft-code-reference/SKILL.md
@@ -0,0 +1,78 @@
+---
+name: microsoft-code-reference
+description: Look up Microsoft API references, find working code samples, and verify SDK code is correct. Use when working with Azure SDKs, .NET libraries, or Microsoft APIs—to find the right method, check parameters, get working examples, or troubleshoot errors. Catches hallucinated methods, wrong signatures, and deprecated patterns by querying official docs.
+compatibility: Requires Microsoft Learn MCP Server (https://learn.microsoft.com/api/mcp)
+---
+
+# Microsoft Code Reference
+
+## Tools
+
+| Need | Tool | Example |
+|------|------|---------|
+| API method/class lookup | `microsoft_docs_search` | `"BlobClient UploadAsync Azure.Storage.Blobs"` |
+| Working code sample | `microsoft_code_sample_search` | `query: "upload blob managed identity", language: "python"` |
+| Full API reference | `microsoft_docs_fetch` | Fetch URL from `microsoft_docs_search` (for overloads, full signatures) |
+
+## Finding Code Samples
+
+Use `microsoft_code_sample_search` to get official, working examples:
+
+```
+microsoft_code_sample_search(query: "upload file to blob storage", language: "csharp")
+microsoft_code_sample_search(query: "authenticate with managed identity", language: "python")
+microsoft_code_sample_search(query: "send message service bus", language: "javascript")
+```
+
+**When to use:**
+- Before writing code—find a working pattern to follow
+- After errors—compare your code against a known-good sample
+- Unsure of initialization/setup—samples show complete context
+
+## API Lookups
+
+```
+# Verify method exists (include namespace for precision)
+"BlobClient UploadAsync Azure.Storage.Blobs"
+"GraphServiceClient Users Microsoft.Graph"
+
+# Find class/interface
+"DefaultAzureCredential class Azure.Identity"
+
+# Find correct package
+"Azure Blob Storage NuGet package"
+"azure-storage-blob pip package"
+```
+
+Fetch full page when method has multiple overloads or you need complete parameter details.
+
+## Error Troubleshooting
+
+Use `microsoft_code_sample_search` to find working code samples and compare with your implementation. For specific errors, use `microsoft_docs_search` and `microsoft_docs_fetch`:
+
+| Error Type | Query |
+|------------|-------|
+| Method not found | `"[ClassName] methods [Namespace]"` |
+| Type not found | `"[TypeName] NuGet package namespace"` |
+| Wrong signature | `"[ClassName] [MethodName] overloads"` → fetch full page |
+| Deprecated warning | `"[OldType] migration v12"` |
+| Auth failure | `"DefaultAzureCredential troubleshooting"` |
+| 403 Forbidden | `"[ServiceName] RBAC permissions"` |
+
+## When to Verify
+
+Always verify when:
+- Method name seems "too convenient" (`UploadFile` vs actual `Upload`)
+- Mixing SDK versions (v11 `CloudBlobClient` vs v12 `BlobServiceClient`)
+- Package name doesn't follow conventions (`Azure.*` for .NET, `azure-*` for Python)
+- Using an API for the first time
+
+## Validation Workflow
+
+Before generating code using Microsoft SDKs, verify it's correct:
+
+1. **Confirm method or package exists** — `microsoft_docs_search(query: "[ClassName] [MethodName] [Namespace]")`
+2. **Fetch full details** (for overloads/complex params) — `microsoft_docs_fetch(url: "...")`
+3. **Find working sample** — `microsoft_code_sample_search(query: "[task]", language: "[lang]")`
+
+For simple lookups, step 1 alone may suffice. For complex API usage, complete all three steps.
--- a/skills/microsoft-docs/SKILL.md
+++ b/skills/microsoft-docs/SKILL.md
@@ -0,0 +1,56 @@
+---
+name: microsoft-docs
+description: Query official Microsoft documentation to understand concepts, find tutorials, and learn how services work. Use for Azure, .NET, Microsoft 365, Windows, Power Platform, and all Microsoft technologies. Get accurate, current information from learn.microsoft.com and other official Microsoft websites—architecture overviews, quickstarts, configuration guides, limits, and best practices.
+compatibility: Requires Microsoft Learn MCP Server (https://learn.microsoft.com/api/mcp)
+---
+
+# Microsoft Docs
+
+## Tools
+
+| Tool | Use For |
+|------|---------|
+| `microsoft_docs_search` | Find documentation—concepts, guides, tutorials, configuration |
+| `microsoft_docs_fetch` | Get full page content (when search excerpts aren't enough) |
+
+## When to Use
+
+- **Understanding concepts** — "How does Cosmos DB partitioning work?"
+- **Learning a service** — "Azure Functions overview", "Container Apps architecture"
+- **Finding tutorials** — "quickstart", "getting started", "step-by-step"
+- **Configuration options** — "App Service configuration settings"
+- **Limits & quotas** — "Azure OpenAI rate limits", "Service Bus quotas"
+- **Best practices** — "Azure security best practices"
+
+## Query Effectiveness
+
+Good queries are specific:
+
+```
+# ❌ Too broad
+"Azure Functions"
+
+# ✅ Specific
+"Azure Functions Python v2 programming model"
+"Cosmos DB partition key design best practices"
+"Container Apps scaling rules KEDA"
+```
+
+Include context:
+- **Version** when relevant (`.NET 8`, `EF Core 8`)
+- **Task intent** (`quickstart`, `tutorial`, `overview`, `limits`)
+- **Platform** for multi-platform docs (`Linux`, `Windows`)
+
+## When to Fetch Full Page
+
+Fetch after search when:
+- **Tutorials** — need complete step-by-step instructions
+- **Configuration guides** — need all options listed
+- **Deep dives** — user wants comprehensive coverage
+- **Search excerpt is cut off** — full context needed
+
+## Why Use This
+
+- **Accuracy** — live docs, not training data that may be outdated
+- **Completeness** — tutorials have all steps, not fragments
+- **Authority** — official Microsoft documentation
--- a/skills/nuget-manager/SKILL.md
+++ b/skills/nuget-manager/SKILL.md
@@ -0,0 +1,68 @@
+---
+name: nuget-manager
+description: 'Manage NuGet packages in .NET projects/solutions. Use this skill when adding, removing, or updating NuGet package versions. It enforces using `dotnet` CLI for package management and provides strict procedures for direct file edits only when updating versions.'
+---
+
+# NuGet Manager
+
+## Overview
+
+This skill ensures consistent and safe management of NuGet packages across .NET projects. It prioritizes using the `dotnet` CLI to maintain project integrity and enforces a strict verification and restoration workflow for version updates.
+
+## Prerequisites
+
+- .NET SDK installed (typically .NET 8.0 SDK or later, or a version compatible with the target solution).
+- `dotnet` CLI available on your `PATH`.
+- `jq` (JSON processor) OR PowerShell (for version verification using `dotnet package search`).
+
+## Core Rules
+
+1.  **NEVER** directly edit `.csproj`, `.props`, or `Directory.Packages.props` files to **add** or **remove** packages. Always use `dotnet add package` and `dotnet remove package` commands.
+2.  **DIRECT EDITING** is ONLY permitted for **changing versions** of existing packages.
+3.  **VERSION UPDATES** must follow the mandatory workflow:
+    - Verify the target version exists on NuGet.
+    - Determine if versions are managed per-project (`.csproj`) or centrally (`Directory.Packages.props`).
+    - Update the version string in the appropriate file.
+    - Immediately run `dotnet restore` to verify compatibility.
+
+## Workflows
+
+### Adding a Package
+Use `dotnet add [<PROJECT>] package <PACKAGE_NAME> [--version <VERSION>]`.
+Example: `dotnet add src/MyProject/MyProject.csproj package Newtonsoft.Json`
+
+### Removing a Package
+Use `dotnet remove [<PROJECT>] package <PACKAGE_NAME>`.
+Example: `dotnet remove src/MyProject/MyProject.csproj package Newtonsoft.Json`
+
+### Updating Package Versions
+When updating a version, follow these steps:
+
+1.  **Verify Version Existence**:
+    Check if the version exists using the `dotnet package search` command with exact match and JSON formatting. 
+    Using `jq`:
+    `dotnet package search <PACKAGE_NAME> --exact-match --format json | jq -e '.searchResult[].packages[] | select(.version == "<VERSION>")'`
+    Using PowerShell:
+    `(dotnet package search <PACKAGE_NAME> --exact-match --format json | ConvertFrom-Json).searchResult.packages | Where-Object { $_.version -eq "<VERSION>" }`
+    
+2.  **Determine Version Management**:
+    - Search for `Directory.Packages.props` in the solution root. If present, versions should be managed there via `<PackageVersion Include="Package.Name" Version="1.2.3" />`.
+    - If absent, check individual `.csproj` files for `<PackageReference Include="Package.Name" Version="1.2.3" />`.
+
+3.  **Apply Changes**:
+    Modify the identified file with the new version string.
+
+4.  **Verify Stability**:
+    Run `dotnet restore` on the project or solution. If errors occur, revert the change and investigate.
+
+## Examples
+
+### User: "Add Serilog to the WebApi project"
+**Action**: Execute `dotnet add src/WebApi/WebApi.csproj package Serilog`.
+
+### User: "Update Newtonsoft.Json to 13.0.3 in the whole solution"
+**Action**:
+1. Verify 13.0.3 exists: `dotnet package search Newtonsoft.Json --exact-match --format json` (and parse output to confirm "13.0.3" is present).
+2. Find where it's defined (e.g., `Directory.Packages.props`).
+3. Edit the file to update the version.
+4. Run `dotnet restore`.
--- a/skills/snowflake-semanticview/SKILL.md
+++ b/skills/snowflake-semanticview/SKILL.md
@@ -0,0 +1,83 @@
+---
+name: snowflake-semanticview
+description: Create, alter, and validate Snowflake semantic views using Snowflake CLI (snow). Use when asked to build or troubleshoot semantic views/semantic layer definitions with CREATE/ALTER SEMANTIC VIEW, to validate semantic-view DDL against Snowflake via CLI, or to guide Snowflake CLI installation and connection setup.
+---
+
+# Snowflake Semantic Views
+
+## One-Time Setup
+
+- Verify Snowflake CLI installation by opening a new terminal and running `snow --help`.
+- If Snowflake CLI is missing or the user cannot install it, direct them to https://docs.snowflake.com/en/developer-guide/snowflake-cli/installation/installation.
+- Configure a Snowflake connection with `snow connection add` per https://docs.snowflake.com/en/developer-guide/snowflake-cli/connecting/configure-connections#add-a-connection.
+- Use the configured connection for all validation and execution steps.
+
+## Workflow For Each Semantic View Request
+
+1. Confirm the target database, schema, role, warehouse, and final semantic view name.
+2. Confirm the model follows a star schema (facts with conformed dimensions).
+3. Draft the semantic view DDL using the official syntax:
+   - https://docs.snowflake.com/en/sql-reference/sql/create-semantic-view
+4. Populate synonyms and comments for each dimension, fact, and metric:
+   - Read Snowflake table/view/column comments first (preferred source):
+     - https://docs.snowflake.com/en/sql-reference/sql/comment
+   - If comments or synonyms are missing, ask whether you can create them, whether the user wants to provide text, or whether you should draft suggestions for approval.
+5. Use SELECT statements with DISTINCT and LIMIT (maximum 1000 rows) to discover relationships between fact and dimension tables, identify column data types, and create more meaningful comments and synonyms for columns.
+6. Create a temporary validation name (for example, append `__tmp_validate`) while keeping the same database and schema.
+7. Always validate by sending the DDL to Snowflake via Snowflake CLI before finalizing:
+   - Use `snow sql` to execute the statement with the configured connection.
+   - If flags differ by version, check `snow sql --help` and use the connection option shown there.
+8. If validation fails, iterate on the DDL and re-run the validation step until it succeeds.
+9. Apply the final DDL (create or alter) using the real semantic view name.
+10. Run a sample query against the final semantic view to confirm it works as expected. It has a different SQL syntax as can be seen here: https://docs.snowflake.com/en/user-guide/views-semantic/querying#querying-a-semantic-view
+Example:
+
+```SQL
+SELECT * FROM SEMANTIC_VIEW(
+    my_semview_name
+    DIMENSIONS customer.customer_market_segment
+    METRICS orders.order_average_value
+)
+ORDER BY customer_market_segment;
+```
+
+11. Clean up any temporary semantic view created during validation.
+
+## Synonyms And Comments (Required)
+
+- Use the semantic view syntax for synonyms and comments:
+
+```
+WITH SYNONYMS [ = ] ( 'synonym' [ , ... ] )
+COMMENT = 'comment_about_dim_fact_or_metric'
+```
+
+- Treat synonyms as informational only; do not use them to reference dimensions, facts, or metrics elsewhere.
+- Use Snowflake comments as the preferred and first source for synonyms and comments:
+  - https://docs.snowflake.com/en/sql-reference/sql/comment
+- If Snowflake comments are missing, ask whether you can create them, whether the user wants to provide text, or whether you should draft suggestions for approval.
+- Do not invent synonyms or comments without user approval.
+
+## Validation Pattern (Required)
+
+- Never skip validation. Always execute the DDL against Snowflake with Snowflake CLI before presenting it as final.
+- Prefer a temporary name for validation to avoid clobbering the real view.
+
+## Example CLI Validation (Template)
+
+```bash
+# Replace placeholders with real values.
+snow sql -q "<CREATE OR ALTER SEMANTIC VIEW ...>" --connection <connection_name>
+```
+
+If the CLI uses a different connection flag in your version, run:
+
+```bash
+snow sql --help
+```
+
+## Notes
+
+- Treat installation and connection setup as one-time steps, but confirm they are done before the first validation.
+- Keep the final semantic view definition identical to the validated temporary definition except for the name.
+- Do not omit synonyms or comments; consider them required for completeness even if optional in syntax.
--- a/skills/vscode-ext-commands/SKILL.md
+++ b/skills/vscode-ext-commands/SKILL.md
@@ -0,0 +1,21 @@
+---
+name: vscode-ext-commands
+description: 'Guidelines for contributing commands in VS Code extensions. Indicates naming convention, visibility, localization and other relevant attributes, following VS Code extension development guidelines, libraries and good practices'
+---
+
+# VS Code extension command contribution
+
+This skill helps you to contribute commands in VS Code extensions
+
+## When to use this skill
+
+Use this skill when you need to:
+- Add or update commands to your VS Code extension
+
+# Instructions
+
+VS Code commands must always define a `title`, independent of its category, visibility or location. We use a few patterns for each "kind" of command, with some characteristics, described below:
+
+* Regular commands: By default, all commands should be accessible in the Command Palette, must define a `category`, and don't need an `icon`, unless the command will be used in the Side Bar.
+
+* Side Bar commands: Its name follows a special pattern, starting with underscore (`_`) and suffixed with `#sideBar`, like `_extensionId.someCommand#sideBar` for instance. Must define an `icon`, and may or may not have some rule for `enablement`. Side Bar exclusive commands should not be visible in the Command Palette. Contributing it to the `view/title` or `view/item/context`, we must inform _order/position_ that it will be displayed, and we can use terms "relative to other command/button" in order to you identify the correct `group` to be used. Also, it's a good practice to define the condition (`when`) for the new command is visible.
--- a/skills/vscode-ext-localization/SKILL.md
+++ b/skills/vscode-ext-localization/SKILL.md
@@ -0,0 +1,25 @@
+---
+name: vscode-ext-localization
+description: 'Guidelines for proper localization of VS Code extensions, following VS Code extension development guidelines, libraries and good practices'
+---
+
+# VS Code extension localization
+
+This skill helps you localize every aspect of VS Code extensions
+
+## When to use this skill
+
+Use this skill when you need to:
+- Localize new or existing contributed configurations (settings), commands, menus, views or walkthroughs
+- Localize new or existing messages or other string resources contained in extension source code that are displayed to the end user
+
+# Instructions
+
+VS Code localization is composed by three different approaches, depending on the resource that is being localized. When a new localizable resource is created or updated, the corresponding localization for all currently available languages must be created/updated.
+
+1. Configurations like Settings, Commands, Menus, Views, ViewsWelcome, Walkthrough Titles and Descriptions, defined in `package.json`
+  -> An exclusive `package.nls.LANGID.json` file, like `package.nls.pt-br.json` of Brazilian Portuguese (`pt-br`) localization
+2. Walkthrough content (defined in its own `Markdown` files)
+  -> An exclusive `Markdown` file like `walkthrough/someStep.pt-br.md` for Brazilian Portuguese localization
+3. Messages and string located in extension source code (JavaScript or TypeScript files)
+  -> An exclusive `bundle.l10n.pt-br.json` for Brazilian Portuguese localization
--- a/skills/web-design-reviewer/SKILL.md
+++ b/skills/web-design-reviewer/SKILL.md
@@ -0,0 +1,368 @@
+---
+name: web-design-reviewer
+description: 'This skill enables visual inspection of websites running locally or remotely to identify and fix design issues. Triggers on requests like "review website design", "check the UI", "fix the layout", "find design problems". Detects issues with responsive design, accessibility, visual consistency, and layout breakage, then performs fixes at the source code level.'
+---
+
+# Web Design Reviewer
+
+This skill enables visual inspection and validation of website design quality, identifying and fixing issues at the source code level.
+
+## Scope of Application
+
+- Static sites (HTML/CSS/JS)
+- SPA frameworks such as React / Vue / Angular / Svelte
+- Full-stack frameworks such as Next.js / Nuxt / SvelteKit
+- CMS platforms such as WordPress / Drupal
+- Any other web application
+
+## Prerequisites
+
+### Required
+
+1. **Target website must be running**
+   - Local development server (e.g., `http://localhost:3000`)
+   - Staging environment
+   - Production environment (for read-only reviews)
+
+2. **Browser automation must be available**
+   - Screenshot capture
+   - Page navigation
+   - DOM information retrieval
+
+3. **Access to source code (when making fixes)**
+   - Project must exist within the workspace
+
+## Workflow Overview
+
+```mermaid
+flowchart TD
+    A[Step 1: Information Gathering] --> B[Step 2: Visual Inspection]
+    B --> C[Step 3: Issue Fixing]
+    C --> D[Step 4: Re-verification]
+    D --> E{Issues Remaining?}
+    E -->|Yes| B
+    E -->|No| F[Completion Report]
+```
+
+---
+
+## Step 1: Information Gathering Phase
+
+### 1.1 URL Confirmation
+
+If the URL is not provided, ask the user:
+
+> Please provide the URL of the website to review (e.g., `http://localhost:3000`)
+
+### 1.2 Understanding Project Structure
+
+When making fixes, gather the following information:
+
+| Item | Example Question |
+|------|------------------|
+| Framework | Are you using React / Vue / Next.js, etc.? |
+| Styling Method | CSS / SCSS / Tailwind / CSS-in-JS, etc. |
+| Source Location | Where are style files and components located? |
+| Review Scope | Specific pages only or entire site? |
+
+### 1.3 Automatic Project Detection
+
+Attempt automatic detection from files in the workspace:
+
+```
+Detection targets:
+├── package.json     → Framework and dependencies
+├── tsconfig.json    → TypeScript usage
+├── tailwind.config  → Tailwind CSS
+├── next.config      → Next.js
+├── vite.config      → Vite
+├── nuxt.config      → Nuxt
+└── src/ or app/     → Source directory
+```
+
+### 1.4 Identifying Styling Method
+
+| Method | Detection | Edit Target |
+|--------|-----------|-------------|
+| Pure CSS | `*.css` files | Global CSS or component CSS |
+| SCSS/Sass | `*.scss`, `*.sass` | SCSS files |
+| CSS Modules | `*.module.css` | Module CSS files |
+| Tailwind CSS | `tailwind.config.*` | className in components |
+| styled-components | `styled.` in code | JS/TS files |
+| Emotion | `@emotion/` imports | JS/TS files |
+| CSS-in-JS (other) | Inline styles | JS/TS files |
+
+---
+
+## Step 2: Visual Inspection Phase
+
+### 2.1 Page Traversal
+
+1. Navigate to the specified URL
+2. Capture screenshots
+3. Retrieve DOM structure/snapshot (if possible)
+4. If additional pages exist, traverse through navigation
+
+### 2.2 Inspection Items
+
+#### Layout Issues
+
+| Issue | Description | Severity |
+|-------|-------------|----------|
+| Element Overflow | Content overflows from parent element or viewport | High |
+| Element Overlap | Unintended overlapping of elements | High |
+| Alignment Issues | Grid or flex alignment problems | Medium |
+| Inconsistent Spacing | Padding/margin inconsistencies | Medium |
+| Text Clipping | Long text not handled properly | Medium |
+
+#### Responsive Issues
+
+| Issue | Description | Severity |
+|-------|-------------|----------|
+| Non-mobile Friendly | Layout breaks on small screens | High |
+| Breakpoint Issues | Unnatural transitions when screen size changes | Medium |
+| Touch Targets | Buttons too small on mobile | Medium |
+
+#### Accessibility Issues
+
+| Issue | Description | Severity |
+|-------|-------------|----------|
+| Insufficient Contrast | Low contrast ratio between text and background | High |
+| No Focus State | Cannot determine state during keyboard navigation | High |
+| Missing alt Text | No alternative text for images | Medium |
+
+#### Visual Consistency
+
+| Issue | Description | Severity |
+|-------|-------------|----------|
+| Font Inconsistency | Mixed font families | Medium |
+| Color Inconsistency | Non-unified brand colors | Medium |
+| Spacing Inconsistency | Non-uniform spacing between similar elements | Low |
+
+### 2.3 Viewport Testing (Responsive)
+
+Test at the following viewports:
+
+| Name | Width | Representative Device |
+|------|-------|----------------------|
+| Mobile | 375px | iPhone SE/12 mini |
+| Tablet | 768px | iPad |
+| Desktop | 1280px | Standard PC |
+| Wide | 1920px | Large display |
+
+---
+
+## Step 3: Issue Fixing Phase
+
+### 3.1 Issue Prioritization
+
+```mermaid
+block-beta
+    columns 1
+    block:priority["Priority Matrix"]
+        P1["P1: Fix Immediately\n(Layout issues affecting functionality)"]
+        P2["P2: Fix Next\n(Visual issues degrading UX)"]
+        P3["P3: Fix If Possible\n(Minor visual inconsistencies)"]
+    end
+```
+
+### 3.2 Identifying Source Files
+
+Identify source files from problematic elements:
+
+1. **Selector-based Search**
+   - Search codebase by class name or ID
+   - Explore style definitions with `grep_search`
+
+2. **Component-based Search**
+   - Identify components from element text or structure
+   - Explore related files with `semantic_search`
+
+3. **File Pattern Filtering**
+   ```
+   Style files: src/**/*.css, styles/**/*
+   Components: src/components/**/*
+   Pages: src/pages/**, app/**
+   ```
+
+### 3.3 Applying Fixes
+
+#### Framework-specific Fix Guidelines
+
+See [references/framework-fixes.md](references/framework-fixes.md) for details.
+
+#### Fix Principles
+
+1. **Minimal Changes**: Only make the minimum changes necessary to resolve the issue
+2. **Respect Existing Patterns**: Follow existing code style in the project
+3. **Avoid Breaking Changes**: Be careful not to affect other areas
+4. **Add Comments**: Add comments to explain the reason for fixes where appropriate
+
+---
+
+## Step 4: Re-verification Phase
+
+### 4.1 Post-fix Confirmation
+
+1. Reload browser (or wait for development server HMR)
+2. Capture screenshots of fixed areas
+3. Compare before and after
+
+### 4.2 Regression Testing
+
+- Verify that fixes haven't affected other areas
+- Confirm responsive display is not broken
+
+### 4.3 Iteration Decision
+
+```mermaid
+flowchart TD
+    A{Issues Remaining?}
+    A -->|Yes| B[Return to Step 2]
+    A -->|No| C[Proceed to Completion Report]
+```
+
+**Iteration Limit**: If more than 3 fix attempts are needed for a specific issue, consult the user
+
+---
+
+## Output Format
+
+### Review Results Report
+
+```markdown
+# Web Design Review Results
+
+## Summary
+
+| Item | Value |
+|------|-------|
+| Target URL | {URL} |
+| Framework | {Detected framework} |
+| Styling | {CSS / Tailwind / etc.} |
+| Tested Viewports | Desktop, Mobile |
+| Issues Detected | {N} |
+| Issues Fixed | {M} |
+
+## Detected Issues
+
+### [P1] {Issue Title}
+
+- **Page**: {Page path}
+- **Element**: {Selector or description}
+- **Issue**: {Detailed description of the issue}
+- **Fixed File**: `{File path}`
+- **Fix Details**: {Description of changes}
+- **Screenshot**: Before/After
+
+### [P2] {Issue Title}
+...
+
+## Unfixed Issues (if any)
+
+### {Issue Title}
+- **Reason**: {Why it was not fixed/could not be fixed}
+- **Recommended Action**: {Recommendations for user}
+
+## Recommendations
+
+- {Suggestions for future improvements}
+```
+
+---
+
+## Required Capabilities
+
+| Capability | Description | Required |
+|------------|-------------|----------|
+| Web Page Navigation | Access URLs, page transitions | ✅ |
+| Screenshot Capture | Page image capture | ✅ |
+| Image Analysis | Visual issue detection | ✅ |
+| DOM Retrieval | Page structure retrieval | Recommended |
+| File Read/Write | Source code reading and editing | Required for fixes |
+| Code Search | Code search within project | Required for fixes |
+
+---
+
+## Reference Implementation
+
+### Implementation with Playwright MCP
+
+[Playwright MCP](https://github.com/microsoft/playwright-mcp) is recommended as the reference implementation for this skill.
+
+| Capability | Playwright MCP Tool | Purpose |
+|------------|---------------------|---------|
+| Navigation | `browser_navigate` | Access URLs |
+| Snapshot | `browser_snapshot` | Retrieve DOM structure |
+| Screenshot | `browser_take_screenshot` | Images for visual inspection |
+| Click | `browser_click` | Interact with interactive elements |
+| Resize | `browser_resize` | Responsive testing |
+| Console | `browser_console_messages` | Detect JS errors |
+
+#### Configuration Example (MCP Server)
+
+```json
+{
+  "mcpServers": {
+    "playwright": {
+      "command": "npx",
+      "args": ["-y", "@playwright/mcp@latest", "--caps=vision"]
+    }
+  }
+}
+```
+
+### Other Compatible Browser Automation Tools
+
+| Tool | Features |
+|------|----------|
+| Selenium | Broad browser support, multi-language support |
+| Puppeteer | Chrome/Chromium focused, Node.js |
+| Cypress | Easy integration with E2E testing |
+| WebDriver BiDi | Standardized next-generation protocol |
+
+The same workflow can be implemented with these tools. As long as they provide the necessary capabilities (navigation, screenshot, DOM retrieval), the choice of tool is flexible.
+
+---
+
+## Best Practices
+
+### DO (Recommended)
+
+- ✅ Always save screenshots before making fixes
+- ✅ Fix one issue at a time and verify each
+- ✅ Follow the project's existing code style
+- ✅ Confirm with user before major changes
+- ✅ Document fix details thoroughly
+
+### DON'T (Not Recommended)
+
+- ❌ Large-scale refactoring without confirmation
+- ❌ Ignoring design systems or brand guidelines
+- ❌ Fixes that ignore performance
+- ❌ Fixing multiple issues at once (difficult to verify)
+
+---
+
+## Troubleshooting
+
+### Problem: Style files not found
+
+1. Check dependencies in `package.json`
+2. Consider the possibility of CSS-in-JS
+3. Consider CSS generated at build time
+4. Ask user about styling method
+
+### Problem: Fixes not reflected
+
+1. Check if development server HMR is working
+2. Clear browser cache
+3. Rebuild if project requires build
+4. Check CSS specificity issues
+
+### Problem: Fixes affecting other areas
+
+1. Rollback changes
+2. Use more specific selectors
+3. Consider using CSS Modules or scoped styles
+4. Consult user to confirm impact scope
--- a/skills/web-design-reviewer/references/framework-fixes.md
+++ b/skills/web-design-reviewer/references/framework-fixes.md
@@ -0,0 +1,475 @@
+# Framework-specific Fix Guide
+
+This document explains specific fix techniques for each framework and styling method.
+
+---
+
+## Pure CSS / SCSS
+
+### Fixing Layout Overflow
+
+```css
+/* Before: Overflow occurs */
+.container {
+  width: 100%;
+}
+
+/* After: Control overflow */
+.container {
+  width: 100%;
+  max-width: 100%;
+  overflow-x: hidden;
+}
+```
+
+### Text Clipping Prevention
+
+```css
+/* Single line truncation */
+.text-truncate {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* Multi-line truncation */
+.text-clamp {
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+/* Word wrapping */
+.text-wrap {
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+  hyphens: auto;
+}
+```
+
+### Spacing Unification
+
+```css
+/* Unify spacing with CSS custom properties */
+:root {
+  --spacing-xs: 0.25rem;
+  --spacing-sm: 0.5rem;
+  --spacing-md: 1rem;
+  --spacing-lg: 1.5rem;
+  --spacing-xl: 2rem;
+}
+
+.card {
+  padding: var(--spacing-md);
+  margin-bottom: var(--spacing-lg);
+}
+```
+
+### Improving Contrast
+
+```css
+/* Before: Insufficient contrast */
+.text {
+  color: #999999;
+  background-color: #ffffff;
+}
+
+/* After: Meets WCAG AA standards */
+.text {
+  color: #595959; /* Contrast ratio 7:1 */
+  background-color: #ffffff;
+}
+```
+
+---
+
+## Tailwind CSS
+
+### Layout Fixes
+
+```jsx
+{/* Before: Overflow */}
+<div className="w-full">
+  <img src="..." />
+</div>
+
+{/* After: Overflow control */}
+<div className="w-full max-w-full overflow-hidden">
+  <img src="..." className="w-full h-auto object-contain" />
+</div>
+```
+
+### Text Clipping Prevention
+
+```jsx
+{/* Single line truncation */}
+<p className="truncate">Long text...</p>
+
+{/* Multi-line truncation */}
+<p className="line-clamp-3">Long text...</p>
+
+{/* Allow wrapping */}
+<p className="break-words">Long text...</p>
+```
+
+### Responsive Support
+
+```jsx
+{/* Mobile-first responsive */}
+<div className="
+  flex flex-col gap-4
+  md:flex-row md:gap-6
+  lg:gap-8
+">
+  <div className="w-full md:w-1/2 lg:w-1/3">
+    Content
+  </div>
+</div>
+```
+
+### Spacing Unification (Tailwind Config)
+
+```javascript
+// tailwind.config.js
+module.exports = {
+  theme: {
+    extend: {
+      spacing: {
+        '18': '4.5rem',
+        '22': '5.5rem',
+      },
+    },
+  },
+}
+```
+
+### Accessibility Improvements
+
+```jsx
+{/* Add focus state */}
+<button className="
+  bg-blue-500 text-white
+  hover:bg-blue-600
+  focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2
+">
+  Button
+</button>
+
+{/* Improve contrast */}
+<p className="text-gray-700 bg-white"> {/* Changed from text-gray-500 */}
+  Readable text
+</p>
+```
+
+---
+
+## React + CSS Modules
+
+### Fixes in Module Scope
+
+```css
+/* Component.module.css */
+
+/* Before */
+.container {
+  display: flex;
+}
+
+/* After: Add overflow control */
+.container {
+  display: flex;
+  flex-wrap: wrap;
+  overflow: hidden;
+  max-width: 100%;
+}
+```
+
+### Component-side Fixes
+
+```jsx
+// Component.jsx
+import styles from './Component.module.css';
+
+// Before
+<div className={styles.container}>
+
+// After: Add conditional class
+<div className={`${styles.container} ${isOverflow ? styles.overflow : ''}`}>
+```
+
+---
+
+## styled-components / Emotion
+
+### Style Fixes
+
+```jsx
+// Before
+const Container = styled.div`
+  width: 100%;
+`;
+
+// After
+const Container = styled.div`
+  width: 100%;
+  max-width: 100%;
+  overflow-x: hidden;
+  
+  @media (max-width: 768px) {
+    padding: 1rem;
+  }
+`;
+```
+
+### Responsive Support
+
+```jsx
+const Card = styled.div`
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 1.5rem;
+  
+  @media (max-width: 1024px) {
+    grid-template-columns: repeat(2, 1fr);
+  }
+  
+  @media (max-width: 640px) {
+    grid-template-columns: 1fr;
+    gap: 1rem;
+  }
+`;
+```
+
+### Consistency with Theme
+
+```jsx
+// theme.js
+export const theme = {
+  colors: {
+    primary: '#2563eb',
+    text: '#1f2937',
+    textLight: '#4b5563', // Improved contrast
+  },
+  spacing: {
+    sm: '0.5rem',
+    md: '1rem',
+    lg: '1.5rem',
+  },
+};
+
+// Usage
+const Text = styled.p`
+  color: ${({ theme }) => theme.colors.text};
+  margin-bottom: ${({ theme }) => theme.spacing.md};
+`;
+```
+
+---
+
+## Vue (Scoped Styles)
+
+### Fixing Scoped Styles
+
+```vue
+<template>
+  <div class="container">
+    <p class="text">Content</p>
+  </div>
+</template>
+
+<style scoped>
+/* Applied only to this component */
+.container {
+  max-width: 100%;
+  overflow: hidden;
+}
+
+.text {
+  /* Fix: Improve contrast */
+  color: #374151; /* Was: #9ca3af */
+}
+
+/* Responsive */
+@media (max-width: 768px) {
+  .container {
+    padding: 1rem;
+  }
+}
+</style>
+```
+
+### Deep Selectors (Affecting Child Components)
+
+```vue
+<style scoped>
+/* Override child component styles (use cautiously) */
+:deep(.child-class) {
+  margin-bottom: 1rem;
+}
+</style>
+```
+
+---
+
+## Next.js / App Router
+
+### Global Style Fixes
+
+```css
+/* app/globals.css */
+:root {
+  --foreground: #171717;
+  --background: #ffffff;
+}
+
+/* Prevent layout overflow */
+html, body {
+  max-width: 100vw;
+  overflow-x: hidden;
+}
+
+/* Prevent image overflow */
+img {
+  max-width: 100%;
+  height: auto;
+}
+```
+
+### Fixes in Layout Components
+
+```tsx
+// app/layout.tsx
+export default function RootLayout({ children }) {
+  return (
+    <html lang="en">
+      <body className="min-h-screen flex flex-col">
+        <header className="sticky top-0 z-50">
+          {/* Header */}
+        </header>
+        <main className="flex-1 container mx-auto px-4 py-8">
+          {children}
+        </main>
+        <footer>
+          {/* Footer */}
+        </footer>
+      </body>
+    </html>
+  );
+}
+```
+
+---
+
+## Common Patterns
+
+### Fixing Flexbox Layout Issues
+
+```css
+/* Before: Items overflow */
+.flex-container {
+  display: flex;
+  gap: 1rem;
+}
+
+/* After: Wrap and size control */
+.flex-container {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 1rem;
+}
+
+.flex-item {
+  flex: 1 1 300px; /* grow, shrink, basis */
+  min-width: 0; /* Prevent flexbox overflow issues */
+}
+```
+
+### Fixing Grid Layout Issues
+
+```css
+/* Before: Fixed column count */
+.grid-container {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+}
+
+/* After: Auto-adjust */
+.grid-container {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+  gap: 1.5rem;
+}
+```
+
+### Organizing z-index
+
+```css
+/* Systematize z-index */
+:root {
+  --z-dropdown: 100;
+  --z-sticky: 200;
+  --z-modal-backdrop: 300;
+  --z-modal: 400;
+  --z-tooltip: 500;
+}
+
+.modal {
+  z-index: var(--z-modal);
+}
+```
+
+### Adding Focus States
+
+```css
+/* Add focus state to all interactive elements */
+button:focus-visible,
+a:focus-visible,
+input:focus-visible,
+select:focus-visible,
+textarea:focus-visible {
+  outline: 2px solid #2563eb;
+  outline-offset: 2px;
+}
+
+/* Customize focus ring */
+.custom-focus:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.5);
+}
+```
+
+---
+
+## Debugging Techniques
+
+### Visualizing Element Boundaries
+
+```css
+/* Use only during development */
+* {
+  outline: 1px solid red !important;
+}
+```
+
+### Detecting Overflow
+
+```javascript
+// Run in console to detect overflow elements
+document.querySelectorAll('*').forEach(el => {
+  if (el.scrollWidth > el.clientWidth) {
+    console.log('Horizontal overflow:', el);
+  }
+  if (el.scrollHeight > el.clientHeight) {
+    console.log('Vertical overflow:', el);
+  }
+});
+```
+
+### Checking Contrast Ratio
+
+```javascript
+// Use Chrome DevTools Lighthouse or axe DevTools
+// Or check at the following site:
+// https://webaim.org/resources/contrastchecker/
+```
--- a/skills/web-design-reviewer/references/visual-checklist.md
+++ b/skills/web-design-reviewer/references/visual-checklist.md
@@ -0,0 +1,236 @@
+# Visual Inspection Checklist
+
+This document is a comprehensive checklist of items to verify during web design visual inspection.
+
+---
+
+## 1. Layout Verification
+
+### Structural Integrity
+
+- [ ] Header is correctly fixed/positioned at the top of the screen
+- [ ] Footer is positioned at the bottom of the screen or end of content
+- [ ] Main content area is center-aligned with appropriate width
+- [ ] Sidebar (if present) is positioned correctly
+- [ ] Navigation is displayed in the intended position
+
+### Overflow
+
+- [ ] Horizontal scrollbar is not unintentionally displayed
+- [ ] Content does not overflow from parent elements
+- [ ] Images fit within parent containers
+- [ ] Tables do not exceed container width
+- [ ] Code blocks wrap or scroll appropriately
+
+### Alignment
+
+- [ ] Grid items are evenly distributed
+- [ ] Flex item alignment is correct
+- [ ] Text alignment (left/center/right) is consistent
+- [ ] Icons and text are vertically aligned
+- [ ] Form labels and input fields are correctly positioned
+
+---
+
+## 2. Typography Verification
+
+### Readability
+
+- [ ] Body text font size is sufficient (minimum 16px recommended)
+- [ ] Line height is appropriate (1.5-1.8 recommended)
+- [ ] Characters per line is appropriate (40-80 characters recommended)
+- [ ] Spacing between paragraphs is sufficient
+- [ ] Heading size hierarchy is clear
+
+### Text Handling
+
+- [ ] Long words wrap appropriately
+- [ ] URLs and code are handled properly
+- [ ] No text clipping occurs
+- [ ] Ellipsis (...) displays correctly
+- [ ] Language-specific line breaking rules work correctly
+
+### Fonts
+
+- [ ] Web fonts load correctly
+- [ ] Fallback fonts are appropriate
+- [ ] Font weights are as intended
+- [ ] Special characters and emoji display correctly
+
+---
+
+## 3. Color & Contrast Verification
+
+### Accessibility (WCAG Standards)
+
+- [ ] Body text: Contrast ratio 4.5:1 or higher (AA)
+- [ ] Large text (18px+ bold or 24px+): 3:1 or higher
+- [ ] Interactive element borders: 3:1 or higher
+- [ ] Focus indicators: Sufficient contrast with background
+
+### Color Consistency
+
+- [ ] Brand colors are unified
+- [ ] Link colors are consistent
+- [ ] Error state red is unified
+- [ ] Success state green is unified
+- [ ] Hover/active state colors are appropriate
+
+### Color Vision Diversity
+
+- [ ] Information conveyed by shape and text, not just color
+- [ ] Charts and diagrams consider color vision diversity
+- [ ] Error messages don't rely solely on color
+
+---
+
+## 4. Responsive Verification
+
+### Mobile (~640px)
+
+- [ ] Content fits within screen width
+- [ ] Touch targets are 44x44px or larger
+- [ ] Text is readable size
+- [ ] No horizontal scrolling occurs
+- [ ] Navigation is mobile-friendly (hamburger menu, etc.)
+- [ ] Form inputs are easy to use
+
+### Tablet (641px~1024px)
+
+- [ ] Layout is optimized for tablet
+- [ ] Two-column layouts display appropriately
+- [ ] Image sizes are appropriate
+- [ ] Sidebar show/hide is appropriate
+
+### Desktop (1025px~)
+
+- [ ] Maximum width is set and doesn't break on extra-large screens
+- [ ] Spacing is sufficient
+- [ ] Multi-column layouts function correctly
+- [ ] Hover states are implemented
+
+### Breakpoint Transitions
+
+- [ ] Layout transitions smoothly when screen size changes
+- [ ] Layout doesn't break at intermediate sizes
+- [ ] No content disappears or duplicates
+
+---
+
+## 5. Interactive Element Verification
+
+### Buttons
+
+- [ ] Default state is clear
+- [ ] Hover state exists (desktop)
+- [ ] Focus state is visually clear
+- [ ] Active (pressed) state exists
+- [ ] Disabled state is distinguishable
+- [ ] Loading state (if applicable)
+
+### Links
+
+- [ ] Links are visually identifiable
+- [ ] Visited links are distinguishable (if needed)
+- [ ] Hover state exists
+- [ ] Focus state is clear
+
+### Form Elements
+
+- [ ] Input field boundaries are clear
+- [ ] Placeholder text contrast is appropriate
+- [ ] Visual feedback on focus
+- [ ] Error state display
+- [ ] Required field indication
+- [ ] Dropdowns function correctly
+
+---
+
+## 6. Images & Media Verification
+
+### Images
+
+- [ ] Images display at appropriate size
+- [ ] Aspect ratio is maintained
+- [ ] High resolution display support (@2x)
+- [ ] Display when image fails to load
+- [ ] Lazy loading behavior works
+
+### Video & Embeds
+
+- [ ] Videos fit within containers
+- [ ] Aspect ratio is maintained
+- [ ] Embedded content is responsive
+- [ ] iframes don't overflow
+
+---
+
+## 7. Accessibility Verification
+
+### Keyboard Navigation
+
+- [ ] All interactive elements accessible via Tab key
+- [ ] Focus order is logical
+- [ ] Focus traps are appropriate (modals, etc.)
+- [ ] Skip to content link exists
+
+### Screen Reader Support
+
+- [ ] Images have alt text
+- [ ] Forms have labels
+- [ ] ARIA labels are appropriately set
+- [ ] Heading hierarchy is correct (h1→h2→h3...)
+
+### Motion
+
+- [ ] Animations are not excessive
+- [ ] prefers-reduced-motion is supported (if possible)
+
+---
+
+## 8. Performance-related Visual Issues
+
+### Loading
+
+- [ ] Font FOUT/FOIT is minimal
+- [ ] No layout shift (CLS) occurs
+- [ ] No jumping when images load
+- [ ] Skeleton screens are appropriate (if applicable)
+
+### Animation
+
+- [ ] Animations are smooth (60fps)
+- [ ] No performance issues when scrolling
+- [ ] Transitions are natural
+
+---
+
+## Priority Matrix
+
+| Priority | Category | Examples |
+|----------|----------|----------|
+| P0 (Critical) | Functionality breaking | Complete element overlap, content disappearance |
+| P1 (High) | Serious UX issues | Unreadable text, inoperable buttons |
+| P2 (Medium) | Moderate issues | Alignment issues, spacing inconsistencies |
+| P3 (Low) | Minor issues | Slight positioning differences, minor color variations |
+
+---
+
+## Verification Tools
+
+### Browser DevTools
+
+- Elements panel: DOM and style inspection
+- Lighthouse: Performance and accessibility audits
+- Device toolbar: Responsive testing
+
+### Accessibility Tools
+
+- axe DevTools
+- WAVE
+- Color Contrast Analyzer
+
+### Automation Tools
+
+- Playwright (screenshot comparison)
+- Percy / Chromatic (Visual Regression Testing)