From b1f3346ef2d05f445b19a46bfeaeb887010b323d Mon Sep 17 00:00:00 2001
From: Aaron Powell
Date: Fri, 13 Mar 2026 13:45:17 +1100
Subject: [PATCH] content review (#995)
* Cleaned up some tool names
* Removing some instructionsThese instructions are no longer useful as the knowledge the add is already well handled by frontier models, so the instructions potentially provide conflicting or incorrect information to the agent while it undertakes a task
* Improved the skill to be more explicit on how to use playwright
* Removing a skill that is of low value
The information captured in this skill is mostly just what is found in the links that are at the top of the references, and thus the model will already have that knowledge available to it, meaning that the skill will potentially provide conflicting guidance to the agent as it works
* Updating readmes
---
agents/csharp-dotnet-janitor.agent.md | 2 +-
agents/janitor.agent.md | 2 +-
docs/README.instructions.md | 6 -
docs/README.skills.md | 3 +-
instructions/angular.instructions.md | 104 -
instructions/java.instructions.md | 81 -
instructions/python.instructions.md | 56 -
instructions/reactjs.instructions.md | 162 --
.../typescript-5-es2022.instructions.md | 114 -
instructions/vuejs3.instructions.md | 153 --
skills/create-web-form/SKILL.md | 85 -
.../references/accessibility.md | 512 ----
.../references/aria-form-role.md | 156 --
.../create-web-form/references/css-styling.md | 1027 -------
.../create-web-form/references/form-basics.md | 451 ---
.../references/form-controls.md | 851 ------
.../references/form-data-handling.md | 627 -----
.../references/html-form-elements.md | 822 ------
.../references/html-form-example.md | 990 -------
.../references/hypertext-transfer-protocol.md | 1227 ---------
.../create-web-form/references/javascript.md | 2413 -----------------
.../create-web-form/references/php-cookies.md | 145 -
.../create-web-form/references/php-forms.md | 601 ----
skills/create-web-form/references/php-json.md | 202 --
.../references/php-mysql-database.md | 1696 ------------
.../references/progressive-web-app.md | 211 --
.../references/python-as-web-framework.md | 567 ----
.../references/python-contact-form.md | 453 ----
.../references/python-flask-app.md | 449 ---
.../references/python-flask.md | 432 ---
skills/create-web-form/references/security.md | 136 -
.../references/styling-web-forms.md | 1643 -----------
skills/create-web-form/references/web-api.md | 165 --
.../references/web-performance.md | 974 -------
skills/create-web-form/references/xml.md | 366 ---
skills/webapp-testing/SKILL.md | 39 +-
.../{ => assets}/test-helper.js | 0
37 files changed, 31 insertions(+), 17892 deletions(-)
delete mode 100644 instructions/angular.instructions.md
delete mode 100644 instructions/java.instructions.md
delete mode 100644 instructions/python.instructions.md
delete mode 100644 instructions/reactjs.instructions.md
delete mode 100644 instructions/typescript-5-es2022.instructions.md
delete mode 100644 instructions/vuejs3.instructions.md
delete mode 100644 skills/create-web-form/SKILL.md
delete mode 100644 skills/create-web-form/references/accessibility.md
delete mode 100644 skills/create-web-form/references/aria-form-role.md
delete mode 100644 skills/create-web-form/references/css-styling.md
delete mode 100644 skills/create-web-form/references/form-basics.md
delete mode 100644 skills/create-web-form/references/form-controls.md
delete mode 100644 skills/create-web-form/references/form-data-handling.md
delete mode 100644 skills/create-web-form/references/html-form-elements.md
delete mode 100644 skills/create-web-form/references/html-form-example.md
delete mode 100644 skills/create-web-form/references/hypertext-transfer-protocol.md
delete mode 100644 skills/create-web-form/references/javascript.md
delete mode 100644 skills/create-web-form/references/php-cookies.md
delete mode 100644 skills/create-web-form/references/php-forms.md
delete mode 100644 skills/create-web-form/references/php-json.md
delete mode 100644 skills/create-web-form/references/php-mysql-database.md
delete mode 100644 skills/create-web-form/references/progressive-web-app.md
delete mode 100644 skills/create-web-form/references/python-as-web-framework.md
delete mode 100644 skills/create-web-form/references/python-contact-form.md
delete mode 100644 skills/create-web-form/references/python-flask-app.md
delete mode 100644 skills/create-web-form/references/python-flask.md
delete mode 100644 skills/create-web-form/references/security.md
delete mode 100644 skills/create-web-form/references/styling-web-forms.md
delete mode 100644 skills/create-web-form/references/web-api.md
delete mode 100644 skills/create-web-form/references/web-performance.md
delete mode 100644 skills/create-web-form/references/xml.md
rename skills/webapp-testing/{ => assets}/test-helper.js (100%)
diff --git a/agents/csharp-dotnet-janitor.agent.md b/agents/csharp-dotnet-janitor.agent.md
index 4ab83815..858f55bd 100644
--- a/agents/csharp-dotnet-janitor.agent.md
+++ b/agents/csharp-dotnet-janitor.agent.md
@@ -1,7 +1,7 @@
---
description: 'Perform janitorial tasks on C#/.NET code including cleanup, modernization, and tech debt remediation.'
name: 'C#/.NET Janitor'
-tools: ['changes', 'codebase', 'edit/editFiles', 'extensions', 'web/fetch', 'findTestFiles', 'githubRepo', 'new', 'openSimpleBrowser', 'problems', 'runCommands', 'runTasks', 'runTests', 'search', 'searchResults', 'terminalLastCommand', 'terminalSelection', 'testFailure', 'usages', 'vscodeAPI', 'microsoft.docs.mcp', 'github']
+tools: [vscode/extensions, vscode/getProjectSetupInfo, vscode/installExtension, vscode/newWorkspace, vscode/runCommand, vscode/vscodeAPI, execute/getTerminalOutput, execute/runTask, execute/createAndRunTask, execute/runTests, execute/runInTerminal, execute/testFailure, read/terminalSelection, read/terminalLastCommand, read/getTaskOutput, read/problems, read/readFile, 'github/*', 'microsoft.docs.mcp/*', edit/editFiles, search, web]
---
# C#/.NET Janitor
diff --git a/agents/janitor.agent.md b/agents/janitor.agent.md
index 5a2f6400..42fb9258 100644
--- a/agents/janitor.agent.md
+++ b/agents/janitor.agent.md
@@ -1,7 +1,7 @@
---
description: 'Perform janitorial tasks on any codebase including cleanup, simplification, and tech debt remediation.'
name: 'Universal Janitor'
-tools: ['search/changes', 'search/codebase', 'edit/editFiles', 'vscode/extensions', 'web/fetch', 'findTestFiles', 'web/githubRepo', 'vscode/getProjectSetupInfo', 'vscode/installExtension', 'vscode/newWorkspace', 'vscode/runCommand', 'vscode/openSimpleBrowser', 'read/problems', 'execute/getTerminalOutput', 'execute/runInTerminal', 'read/terminalLastCommand', 'read/terminalSelection', 'execute/createAndRunTask', 'execute/getTaskOutput', 'execute/runTask', 'execute/runTests', 'search', 'search/searchResults', 'execute/testFailure', 'search/usages', 'vscode/vscodeAPI', 'microsoft.docs.mcp', 'github']
+tools: [vscode/extensions, vscode/getProjectSetupInfo, vscode/installExtension, vscode/newWorkspace, vscode/runCommand, vscode/vscodeAPI, execute/getTerminalOutput, execute/runTask, execute/createAndRunTask, execute/runTests, execute/runInTerminal, execute/testFailure, read/terminalSelection, read/terminalLastCommand, read/getTaskOutput, read/problems, read/readFile, browser, 'github/*', 'microsoft.docs.mcp/*', edit/editFiles, search, web]
---
# Universal Janitor
diff --git a/docs/README.instructions.md b/docs/README.instructions.md
index f50183be..671ac8e3 100644
--- a/docs/README.instructions.md
+++ b/docs/README.instructions.md
@@ -25,7 +25,6 @@ See [CONTRIBUTING.md](../CONTRIBUTING.md#adding-instructions) for guidelines on
| [Agent Safety & Governance](../instructions/agent-safety.instructions.md) [](https://aka.ms/awesome-copilot/install/instructions?url=vscode%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Fagent-safety.instructions.md) [](https://aka.ms/awesome-copilot/install/instructions?url=vscode-insiders%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Fagent-safety.instructions.md) | Guidelines for building safe, governed AI agent systems. Apply when writing code that uses agent frameworks, tool-calling LLMs, or multi-agent orchestration to ensure proper safety boundaries, policy enforcement, and auditability. |
| [Agent Skills File Guidelines](../instructions/agent-skills.instructions.md) [](https://aka.ms/awesome-copilot/install/instructions?url=vscode%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Fagent-skills.instructions.md) [](https://aka.ms/awesome-copilot/install/instructions?url=vscode-insiders%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Fagent-skills.instructions.md) | Guidelines for creating high-quality Agent Skills for GitHub Copilot |
| [AI Prompt Engineering & Safety Best Practices](../instructions/ai-prompt-engineering-safety-best-practices.instructions.md) [](https://aka.ms/awesome-copilot/install/instructions?url=vscode%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Fai-prompt-engineering-safety-best-practices.instructions.md) [](https://aka.ms/awesome-copilot/install/instructions?url=vscode-insiders%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Fai-prompt-engineering-safety-best-practices.instructions.md) | Comprehensive best practices for AI prompt engineering, safety frameworks, bias mitigation, and responsible AI usage for Copilot and LLMs. |
-| [Angular Development Instructions](../instructions/angular.instructions.md) [](https://aka.ms/awesome-copilot/install/instructions?url=vscode%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Fangular.instructions.md) [](https://aka.ms/awesome-copilot/install/instructions?url=vscode-insiders%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Fangular.instructions.md) | Angular-specific coding standards and best practices |
| [Ansible Conventions and Best Practices](../instructions/ansible.instructions.md) [](https://aka.ms/awesome-copilot/install/instructions?url=vscode%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Fansible.instructions.md) [](https://aka.ms/awesome-copilot/install/instructions?url=vscode-insiders%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Fansible.instructions.md) | Ansible conventions and best practices |
| [Apex Development](../instructions/apex.instructions.md) [](https://aka.ms/awesome-copilot/install/instructions?url=vscode%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Fapex.instructions.md) [](https://aka.ms/awesome-copilot/install/instructions?url=vscode-insiders%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Fapex.instructions.md) | Guidelines and best practices for Apex development on the Salesforce Platform |
| [Arch Linux Administration Guidelines](../instructions/arch-linux.instructions.md) [](https://aka.ms/awesome-copilot/install/instructions?url=vscode%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Farch-linux.instructions.md) [](https://aka.ms/awesome-copilot/install/instructions?url=vscode-insiders%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Farch-linux.instructions.md) | Guidance for Arch Linux administration, pacman workflows, and rolling-release best practices. |
@@ -107,7 +106,6 @@ See [CONTRIBUTING.md](../CONTRIBUTING.md#adding-instructions) for guidelines on
| [Java 11 to Java 17 Upgrade Guide](../instructions/java-11-to-java-17-upgrade.instructions.md) [](https://aka.ms/awesome-copilot/install/instructions?url=vscode%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Fjava-11-to-java-17-upgrade.instructions.md) [](https://aka.ms/awesome-copilot/install/instructions?url=vscode-insiders%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Fjava-11-to-java-17-upgrade.instructions.md) | Comprehensive best practices for adopting new Java 17 features since the release of Java 11. |
| [Java 17 to Java 21 Upgrade Guide](../instructions/java-17-to-java-21-upgrade.instructions.md) [](https://aka.ms/awesome-copilot/install/instructions?url=vscode%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Fjava-17-to-java-21-upgrade.instructions.md) [](https://aka.ms/awesome-copilot/install/instructions?url=vscode-insiders%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Fjava-17-to-java-21-upgrade.instructions.md) | Comprehensive best practices for adopting new Java 21 features since the release of Java 17. |
| [Java 21 to Java 25 Upgrade Guide](../instructions/java-21-to-java-25-upgrade.instructions.md) [](https://aka.ms/awesome-copilot/install/instructions?url=vscode%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Fjava-21-to-java-25-upgrade.instructions.md) [](https://aka.ms/awesome-copilot/install/instructions?url=vscode-insiders%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Fjava-21-to-java-25-upgrade.instructions.md) | Comprehensive best practices for adopting new Java 25 features since the release of Java 21. |
-| [Java Development](../instructions/java.instructions.md) [](https://aka.ms/awesome-copilot/install/instructions?url=vscode%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Fjava.instructions.md) [](https://aka.ms/awesome-copilot/install/instructions?url=vscode-insiders%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Fjava.instructions.md) | Guidelines for building Java base applications |
| [Java MCP Server Development Guidelines](../instructions/java-mcp-server.instructions.md) [](https://aka.ms/awesome-copilot/install/instructions?url=vscode%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Fjava-mcp-server.instructions.md) [](https://aka.ms/awesome-copilot/install/instructions?url=vscode-insiders%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Fjava-mcp-server.instructions.md) | Best practices and patterns for building Model Context Protocol (MCP) servers in Java using the official MCP Java SDK with reactive streams and Spring integration. |
| [Joyride User Scripts Project Assistant](../instructions/joyride-user-project.instructions.md) [](https://aka.ms/awesome-copilot/install/instructions?url=vscode%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Fjoyride-user-project.instructions.md) [](https://aka.ms/awesome-copilot/install/instructions?url=vscode-insiders%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Fjoyride-user-project.instructions.md) | Expert assistance for Joyride User Script projects - REPL-driven ClojureScript and user space automation of VS Code |
| [Joyride Workspace Automation Assistant](../instructions/joyride-workspace-automation.instructions.md) [](https://aka.ms/awesome-copilot/install/instructions?url=vscode%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Fjoyride-workspace-automation.instructions.md) [](https://aka.ms/awesome-copilot/install/instructions?url=vscode-insiders%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Fjoyride-workspace-automation.instructions.md) | Expert assistance for Joyride Workspace automation - REPL-driven and user space ClojureScript automation within specific VS Code workspaces |
@@ -153,13 +151,11 @@ See [CONTRIBUTING.md](../CONTRIBUTING.md#adding-instructions) for guidelines on
| [PowerShell Cmdlet Development Guidelines](../instructions/powershell.instructions.md) [](https://aka.ms/awesome-copilot/install/instructions?url=vscode%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Fpowershell.instructions.md) [](https://aka.ms/awesome-copilot/install/instructions?url=vscode-insiders%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Fpowershell.instructions.md) | PowerShell cmdlet and scripting best practices based on Microsoft guidelines |
| [PowerShell Pester v5 Testing Guidelines](../instructions/powershell-pester-5.instructions.md) [](https://aka.ms/awesome-copilot/install/instructions?url=vscode%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Fpowershell-pester-5.instructions.md) [](https://aka.ms/awesome-copilot/install/instructions?url=vscode-insiders%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Fpowershell-pester-5.instructions.md) | PowerShell Pester testing best practices based on Pester v5 conventions |
| [Project Context](../instructions/moodle.instructions.md) [](https://aka.ms/awesome-copilot/install/instructions?url=vscode%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Fmoodle.instructions.md) [](https://aka.ms/awesome-copilot/install/instructions?url=vscode-insiders%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Fmoodle.instructions.md) | Instructions for GitHub Copilot to generate code in a Moodle project context. |
-| [Python Coding Conventions](../instructions/python.instructions.md) [](https://aka.ms/awesome-copilot/install/instructions?url=vscode%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Fpython.instructions.md) [](https://aka.ms/awesome-copilot/install/instructions?url=vscode-insiders%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Fpython.instructions.md) | Python coding conventions and guidelines |
| [Python MCP Server Development](../instructions/python-mcp-server.instructions.md) [](https://aka.ms/awesome-copilot/install/instructions?url=vscode%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Fpython-mcp-server.instructions.md) [](https://aka.ms/awesome-copilot/install/instructions?url=vscode-insiders%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Fpython-mcp-server.instructions.md) | Instructions for building Model Context Protocol (MCP) servers using the Python SDK |
| [Quarkus](../instructions/quarkus.instructions.md) [](https://aka.ms/awesome-copilot/install/instructions?url=vscode%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Fquarkus.instructions.md) [](https://aka.ms/awesome-copilot/install/instructions?url=vscode-insiders%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Fquarkus.instructions.md) | Quarkus development standards and instructions |
| [Quarkus MCP Server](../instructions/quarkus-mcp-server-sse.instructions.md) [](https://aka.ms/awesome-copilot/install/instructions?url=vscode%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Fquarkus-mcp-server-sse.instructions.md) [](https://aka.ms/awesome-copilot/install/instructions?url=vscode-insiders%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Fquarkus-mcp-server-sse.instructions.md) | Quarkus and MCP Server with HTTP SSE transport development standards and instructions |
| [R Programming Language Instructions](../instructions/r.instructions.md) [](https://aka.ms/awesome-copilot/install/instructions?url=vscode%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Fr.instructions.md) [](https://aka.ms/awesome-copilot/install/instructions?url=vscode-insiders%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Fr.instructions.md) | R language and document formats (R, Rmd, Quarto): coding standards and Copilot guidance for idiomatic, safe, and consistent code generation. |
| [React Controls & Platform Libraries](../instructions/pcf-react-platform-libraries.instructions.md) [](https://aka.ms/awesome-copilot/install/instructions?url=vscode%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Fpcf-react-platform-libraries.instructions.md) [](https://aka.ms/awesome-copilot/install/instructions?url=vscode-insiders%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Fpcf-react-platform-libraries.instructions.md) | React controls and platform libraries for PCF components |
-| [ReactJS Development Instructions](../instructions/reactjs.instructions.md) [](https://aka.ms/awesome-copilot/install/instructions?url=vscode%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Freactjs.instructions.md) [](https://aka.ms/awesome-copilot/install/instructions?url=vscode-insiders%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Freactjs.instructions.md) | ReactJS development standards and best practices |
| [Ruby MCP Server Development Guidelines](../instructions/ruby-mcp-server.instructions.md) [](https://aka.ms/awesome-copilot/install/instructions?url=vscode%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Fruby-mcp-server.instructions.md) [](https://aka.ms/awesome-copilot/install/instructions?url=vscode-insiders%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Fruby-mcp-server.instructions.md) | Best practices and patterns for building Model Context Protocol (MCP) servers in Ruby using the official MCP Ruby SDK gem. |
| [Ruby on Rails](../instructions/ruby-on-rails.instructions.md) [](https://aka.ms/awesome-copilot/install/instructions?url=vscode%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Fruby-on-rails.instructions.md) [](https://aka.ms/awesome-copilot/install/instructions?url=vscode-insiders%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Fruby-on-rails.instructions.md) | Ruby on Rails coding conventions and guidelines |
| [Rust Coding Conventions and Best Practices](../instructions/rust.instructions.md) [](https://aka.ms/awesome-copilot/install/instructions?url=vscode%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Frust.instructions.md) [](https://aka.ms/awesome-copilot/install/instructions?url=vscode-insiders%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Frust.instructions.md) | Rust programming language coding conventions and best practices |
@@ -183,7 +179,6 @@ See [CONTRIBUTING.md](../CONTRIBUTING.md#adding-instructions) for guidelines on
| [TaskSync V5 Protocol](../instructions/tasksync.instructions.md) [](https://aka.ms/awesome-copilot/install/instructions?url=vscode%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Ftasksync.instructions.md) [](https://aka.ms/awesome-copilot/install/instructions?url=vscode-insiders%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Ftasksync.instructions.md) | TaskSync V5 - Allows you to give the agent new instructions or feedback after completing a task using terminal while agent is running. |
| [Terraform Conventions](../instructions/terraform.instructions.md) [](https://aka.ms/awesome-copilot/install/instructions?url=vscode%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Fterraform.instructions.md) [](https://aka.ms/awesome-copilot/install/instructions?url=vscode-insiders%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Fterraform.instructions.md) | Terraform Conventions and Guidelines |
| [Terraform on SAP BTP – Best Practices & Conventions](../instructions/terraform-sap-btp.instructions.md) [](https://aka.ms/awesome-copilot/install/instructions?url=vscode%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Fterraform-sap-btp.instructions.md) [](https://aka.ms/awesome-copilot/install/instructions?url=vscode-insiders%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Fterraform-sap-btp.instructions.md) | Terraform conventions and guidelines for SAP Business Technology Platform (SAP BTP). |
-| [TypeScript Development](../instructions/typescript-5-es2022.instructions.md) [](https://aka.ms/awesome-copilot/install/instructions?url=vscode%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Ftypescript-5-es2022.instructions.md) [](https://aka.ms/awesome-copilot/install/instructions?url=vscode-insiders%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Ftypescript-5-es2022.instructions.md) | Guidelines for TypeScript Development targeting TypeScript 5.x and ES2022 output |
| [TypeScript MCP Server Development](../instructions/typescript-mcp-server.instructions.md) [](https://aka.ms/awesome-copilot/install/instructions?url=vscode%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Ftypescript-mcp-server.instructions.md) [](https://aka.ms/awesome-copilot/install/instructions?url=vscode-insiders%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Ftypescript-mcp-server.instructions.md) | Instructions for building Model Context Protocol (MCP) servers using the TypeScript SDK |
| [TypeSpec for Microsoft 365 Copilot Development Guidelines](../instructions/typespec-m365-copilot.instructions.md) [](https://aka.ms/awesome-copilot/install/instructions?url=vscode%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Ftypespec-m365-copilot.instructions.md) [](https://aka.ms/awesome-copilot/install/instructions?url=vscode-insiders%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Ftypespec-m365-copilot.instructions.md) | Guidelines and best practices for building TypeSpec-based declarative agents and API plugins for Microsoft 365 Copilot |
| [Update Code from Shorthand](../instructions/update-code-from-shorthand.instructions.md) [](https://aka.ms/awesome-copilot/install/instructions?url=vscode%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Fupdate-code-from-shorthand.instructions.md) [](https://aka.ms/awesome-copilot/install/instructions?url=vscode-insiders%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Fupdate-code-from-shorthand.instructions.md) | Shorthand code will be in the file provided from the prompt or raw data in the prompt, and will be used to update the code file when the prompt has the text `UPDATE CODE FROM SHORTHAND`. |
@@ -191,6 +186,5 @@ See [CONTRIBUTING.md](../CONTRIBUTING.md#adding-instructions) for guidelines on
| [Upgrading from .NET MAUI 9 to .NET MAUI 10](../instructions/dotnet-maui-9-to-dotnet-maui-10-upgrade.instructions.md) [](https://aka.ms/awesome-copilot/install/instructions?url=vscode%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Fdotnet-maui-9-to-dotnet-maui-10-upgrade.instructions.md) [](https://aka.ms/awesome-copilot/install/instructions?url=vscode-insiders%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Fdotnet-maui-9-to-dotnet-maui-10-upgrade.instructions.md) | Instructions for upgrading .NET MAUI applications from version 9 to version 10, including breaking changes, deprecated APIs, and migration strategies for ListView to CollectionView. |
| [Use Code Components in Power Pages](../instructions/pcf-power-pages.instructions.md) [](https://aka.ms/awesome-copilot/install/instructions?url=vscode%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Fpcf-power-pages.instructions.md) [](https://aka.ms/awesome-copilot/install/instructions?url=vscode-insiders%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Fpcf-power-pages.instructions.md) | Using code components in Power Pages sites |
| [Visual Studio Extension Development with Community.VisualStudio.Toolkit](../instructions/vsixtoolkit.instructions.md) [](https://aka.ms/awesome-copilot/install/instructions?url=vscode%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Fvsixtoolkit.instructions.md) [](https://aka.ms/awesome-copilot/install/instructions?url=vscode-insiders%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Fvsixtoolkit.instructions.md) | Guidelines for Visual Studio extension (VSIX) development using Community.VisualStudio.Toolkit |
-| [VueJS 3 Development Instructions](../instructions/vuejs3.instructions.md) [](https://aka.ms/awesome-copilot/install/instructions?url=vscode%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Fvuejs3.instructions.md) [](https://aka.ms/awesome-copilot/install/instructions?url=vscode-insiders%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Fvuejs3.instructions.md) | VueJS 3 development standards and best practices with Composition API and TypeScript |
| [WinUI 3 / Windows App SDK](../instructions/winui3.instructions.md) [](https://aka.ms/awesome-copilot/install/instructions?url=vscode%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Fwinui3.instructions.md) [](https://aka.ms/awesome-copilot/install/instructions?url=vscode-insiders%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Fwinui3.instructions.md) | WinUI 3 and Windows App SDK coding guidelines. Prevents common UWP API misuse, enforces correct XAML namespaces, threading, windowing, and MVVM patterns for desktop Windows apps. |
| [WordPress Development — Copilot Instructions](../instructions/wordpress.instructions.md) [](https://aka.ms/awesome-copilot/install/instructions?url=vscode%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Fwordpress.instructions.md) [](https://aka.ms/awesome-copilot/install/instructions?url=vscode-insiders%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Fwordpress.instructions.md) | Coding, security, and testing rules for WordPress plugins and themes |
diff --git a/docs/README.skills.md b/docs/README.skills.md
index d9b1a621..fa97cb2f 100644
--- a/docs/README.skills.md
+++ b/docs/README.skills.md
@@ -86,7 +86,6 @@ See [CONTRIBUTING.md](../CONTRIBUTING.md#adding-skills) for guidelines on how to
| [create-spring-boot-kotlin-project](../skills/create-spring-boot-kotlin-project/SKILL.md) | Create Spring Boot Kotlin Project Skeleton | None |
| [create-technical-spike](../skills/create-technical-spike/SKILL.md) | Create time-boxed technical spike documents for researching and resolving critical development decisions before implementation. | None |
| [create-tldr-page](../skills/create-tldr-page/SKILL.md) | Create a tldr page from documentation URLs and command examples, requiring both URL and command name. | None |
-| [create-web-form](../skills/create-web-form/SKILL.md) | Create robust, accessible web forms with best practices for HTML structure, CSS styling, JavaScript interactivity, form validation, and server-side processing. Use when asked to "create a form", "build a web form", "add a contact form", "make a signup form", or when building any HTML form with data handling. Covers PHP and Python backends, MySQL database integration, REST APIs, XML data exchange, accessibility (ARIA), and progressive web apps. | `references/accessibility.md` `references/aria-form-role.md` `references/css-styling.md` `references/form-basics.md` `references/form-controls.md` `references/form-data-handling.md` `references/html-form-elements.md` `references/html-form-example.md` `references/hypertext-transfer-protocol.md` `references/javascript.md` `references/php-cookies.md` `references/php-forms.md` `references/php-json.md` `references/php-mysql-database.md` `references/progressive-web-app.md` `references/python-as-web-framework.md` `references/python-contact-form.md` `references/python-flask-app.md` `references/python-flask.md` `references/security.md` `references/styling-web-forms.md` `references/web-api.md` `references/web-performance.md` `references/xml.md` |
| [creating-oracle-to-postgres-master-migration-plan](../skills/creating-oracle-to-postgres-master-migration-plan/SKILL.md) | Discovers all projects in a .NET solution, classifies each for Oracle-to-PostgreSQL migration eligibility, and produces a persistent master migration plan. Use when starting a multi-project Oracle-to-PostgreSQL migration, creating a migration inventory, or assessing which .NET projects contain Oracle dependencies. | None |
| [creating-oracle-to-postgres-migration-bug-report](../skills/creating-oracle-to-postgres-migration-bug-report/SKILL.md) | Creates structured bug reports for defects found during Oracle-to-PostgreSQL migration. Use when documenting behavioral differences between Oracle and PostgreSQL as actionable bug reports with severity, root cause, and remediation steps. | `references/BUG-REPORT-TEMPLATE.md` |
| [creating-oracle-to-postgres-migration-integration-tests](../skills/creating-oracle-to-postgres-migration-integration-tests/SKILL.md) | Creates integration test cases for .NET data access artifacts during Oracle-to-PostgreSQL database migrations. Generates DB-agnostic xUnit tests with deterministic seed data that validate behavior consistency across both database systems. Use when creating integration tests for a migrated project, generating test coverage for data access layers, or writing Oracle-to-PostgreSQL migration validation tests. | None |
@@ -242,7 +241,7 @@ See [CONTRIBUTING.md](../CONTRIBUTING.md#adding-skills) for guidelines on how to
| [vscode-ext-localization](../skills/vscode-ext-localization/SKILL.md) | Guidelines for proper localization of VS Code extensions, following VS Code extension development guidelines, libraries and good practices | None |
| [web-coder](../skills/web-coder/SKILL.md) | Expert 10x engineer with comprehensive knowledge of web development, internet protocols, and web standards. Use when working with HTML, CSS, JavaScript, web APIs, HTTP/HTTPS, web security, performance optimization, accessibility, or any web/internet concepts. Specializes in translating web terminology accurately and implementing modern web standards across frontend and backend development. | `references/accessibility.md` `references/architecture-patterns.md` `references/browsers-engines.md` `references/css-styling.md` `references/data-formats-encoding.md` `references/development-tools.md` `references/glossary.md` `references/html-markup.md` `references/http-networking.md` `references/javascript-programming.md` `references/media-graphics.md` `references/performance-optimization.md` `references/security-authentication.md` `references/servers-infrastructure.md` `references/web-apis-dom.md` `references/web-protocols-standards.md` |
| [web-design-reviewer](../skills/web-design-reviewer/SKILL.md) | 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. | `references/framework-fixes.md` `references/visual-checklist.md` |
-| [webapp-testing](../skills/webapp-testing/SKILL.md) | Toolkit for interacting with and testing local web applications using Playwright. Supports verifying frontend functionality, debugging UI behavior, capturing browser screenshots, and viewing browser logs. | `test-helper.js` |
+| [webapp-testing](../skills/webapp-testing/SKILL.md) | Toolkit for interacting with and testing local web applications using Playwright. Supports verifying frontend functionality, debugging UI behavior, capturing browser screenshots, and viewing browser logs. | `assets/test-helper.js` |
| [what-context-needed](../skills/what-context-needed/SKILL.md) | Ask Copilot what files it needs to see before answering a question | None |
| [winapp-cli](../skills/winapp-cli/SKILL.md) | Windows App Development CLI (winapp) for building, packaging, and deploying Windows applications. Use when asked to initialize Windows app projects, create MSIX packages, generate AppxManifest.xml, manage development certificates, add package identity for debugging, sign packages, publish to the Microsoft Store, create external catalogs, or access Windows SDK build tools. Supports .NET (csproj), C++, Electron, Rust, Tauri, and cross-platform frameworks targeting Windows. | None |
| [winmd-api-search](../skills/winmd-api-search/SKILL.md) | Find and explore Windows desktop APIs. Use when building features that need platform capabilities — camera, file access, notifications, UI controls, AI/ML, sensors, networking, etc. Discovers the right API for a task and retrieves full type details (methods, properties, events, enumeration values). | `LICENSE.txt` `scripts/Invoke-WinMdQuery.ps1` `scripts/Update-WinMdCache.ps1` `scripts/cache-generator` |
diff --git a/instructions/angular.instructions.md b/instructions/angular.instructions.md
deleted file mode 100644
index 12b7355a..00000000
--- a/instructions/angular.instructions.md
+++ /dev/null
@@ -1,104 +0,0 @@
----
-description: 'Angular-specific coding standards and best practices'
-applyTo: '**/*.ts, **/*.html, **/*.scss, **/*.css'
----
-
-# Angular Development Instructions
-
-Instructions for generating high-quality Angular applications with TypeScript, using Angular Signals for state management, adhering to Angular best practices as outlined at https://angular.dev.
-
-## Project Context
-- Latest Angular version (use standalone components by default)
-- TypeScript for type safety
-- Angular CLI for project setup and scaffolding
-- Follow Angular Style Guide (https://angular.dev/style-guide)
-- Use Angular Material or other modern UI libraries for consistent styling (if specified)
-
-## Development Standards
-
-### Architecture
-- Use standalone components unless modules are explicitly required
-- Organize code by standalone feature modules or domains for scalability
-- Implement lazy loading for feature modules to optimize performance
-- Use Angular's built-in dependency injection system effectively
-- Structure components with a clear separation of concerns (smart vs. presentational components)
-
-### TypeScript
-- Enable strict mode in `tsconfig.json` for type safety
-- Define clear interfaces and types for components, services, and models
-- Use type guards and union types for robust type checking
-- Implement proper error handling with RxJS operators (e.g., `catchError`)
-- Use typed forms (e.g., `FormGroup`, `FormControl`) for reactive forms
-
-### Component Design
-- Follow Angular's component lifecycle hooks best practices
-- When using Angular >= 19, Use `input()` `output()`, `viewChild()`, `viewChildren()`, `contentChild()` and `contentChildren()` functions instead of decorators; otherwise use decorators
-- Leverage Angular's change detection strategy (default or `OnPush` for performance)
-- Keep templates clean and logic in component classes or services
-- Use Angular directives and pipes for reusable functionality
-
-### Styling
-- Use Angular's component-level CSS encapsulation (default: ViewEncapsulation.Emulated)
-- Prefer SCSS for styling with consistent theming
-- Implement responsive design using CSS Grid, Flexbox, or Angular CDK Layout utilities
-- Follow Angular Material's theming guidelines if used
-- Maintain accessibility (a11y) with ARIA attributes and semantic HTML
-
-### State Management
-- Use Angular Signals for reactive state management in components and services
-- Leverage `signal()`, `computed()`, and `effect()` for reactive state updates
-- Use writable signals for mutable state and computed signals for derived state
-- Handle loading and error states with signals and proper UI feedback
-- Use Angular's `AsyncPipe` to handle observables in templates when combining signals with RxJS
-
-### Data Fetching
-- Use Angular's `HttpClient` for API calls with proper typing
-- Implement RxJS operators for data transformation and error handling
-- Use Angular's `inject()` function for dependency injection in standalone components
-- Implement caching strategies (e.g., `shareReplay` for observables)
-- Store API response data in signals for reactive updates
-- Handle API errors with global interceptors for consistent error handling
-
-### Security
-- Sanitize user inputs using Angular's built-in sanitization
-- Implement route guards for authentication and authorization
-- Use Angular's `HttpInterceptor` for CSRF protection and API authentication headers
-- Validate form inputs with Angular's reactive forms and custom validators
-- Follow Angular's security best practices (e.g., avoid direct DOM manipulation)
-
-### Performance
-- Enable production builds with `ng build --prod` for optimization
-- Use lazy loading for routes to reduce initial bundle size
-- Optimize change detection with `OnPush` strategy and signals for fine-grained reactivity
-- Use trackBy in `ngFor` loops to improve rendering performance
-- Implement server-side rendering (SSR) or static site generation (SSG) with Angular Universal (if specified)
-
-### Testing
-- Write unit tests for components, services, and pipes using Jasmine and Karma
-- Use Angular's `TestBed` for component testing with mocked dependencies
-- Test signal-based state updates using Angular's testing utilities
-- Write end-to-end tests with Cypress or Playwright (if specified)
-- Mock HTTP requests using `provideHttpClientTesting`
-- Ensure high test coverage for critical functionality
-
-## Implementation Process
-1. Plan project structure and feature modules
-2. Define TypeScript interfaces and models
-3. Scaffold components, services, and pipes using Angular CLI
-4. Implement data services and API integrations with signal-based state
-5. Build reusable components with clear inputs and outputs
-6. Add reactive forms and validation
-7. Apply styling with SCSS and responsive design
-8. Implement lazy-loaded routes and guards
-9. Add error handling and loading states using signals
-10. Write unit and end-to-end tests
-11. Optimize performance and bundle size
-
-## Additional Guidelines
-- Follow the Angular Style Guide for file naming conventions (see https://angular.dev/style-guide), e.g., use `feature.ts` for components and `feature-service.ts` for services. For legacy codebases, maintain consistency with existing pattern.
-- Use Angular CLI commands for generating boilerplate code
-- Document components and services with clear JSDoc comments
-- Ensure accessibility compliance (WCAG 2.1) where applicable
-- Use Angular's built-in i18n for internationalization (if specified)
-- Keep code DRY by creating reusable utilities and shared modules
-- Use signals consistently for state management to ensure reactive updates
diff --git a/instructions/java.instructions.md b/instructions/java.instructions.md
deleted file mode 100644
index 7a4258e1..00000000
--- a/instructions/java.instructions.md
+++ /dev/null
@@ -1,81 +0,0 @@
----
-description: 'Guidelines for building Java base applications'
-applyTo: '**/*.java'
----
-
-# Java Development
-
-## General Instructions
-
-- First, prompt the user if they want to integrate static analysis tools (SonarQube, PMD, Checkstyle) into their project setup.
- - If yes, document a recommended static-analysis setup.
- - Prefer SonarQube/SonarCloud (SonarLint in IDE + `sonar-scanner` in CI).
- - Create a Sonar project key.
- - Store the scanner token in CI secrets.
- - Provide a sample CI job that runs the scanner.
- - If the team declines Sonar, note this in the project README and continue.
- - If Sonar is bound to the project:
- - Use Sonar as the primary source of actionable issues.
- - Reference Sonar rule keys in remediation guidance.
- - If Sonar is unavailable:
- - Perform up to 3 troubleshooting checks:
- 1. Verify project binding and token.
- 2. Ensure SonarScanner runs in CI.
- 3. Confirm SonarLint is installed and configured.
- - If still failing after 3 attempts:
- - Enable SpotBugs, PMD, or Checkstyle as CI fallbacks.
- - Open a short tracker issue documenting the blocker and next steps.
-- If the user declines static analysis tools or wants to proceed without them, continue with implementing the Best practices, bug patterns and code smell prevention guidelines outlined below.
-- Address code smells proactively during development rather than accumulating technical debt.
-- Focus on readability, maintainability, and performance when refactoring identified issues.
-- Use IDE / Code editor reported warnings and suggestions to catch common patterns early in development.
-
-## Best practices
-
-- **Records**: For classes primarily intended to store data (e.g., DTOs, immutable data structures), **Java Records should be used instead of traditional classes**.
-- **Pattern Matching**: Utilize pattern matching for `instanceof` and `switch` expression to simplify conditional logic and type casting.
-- **Type Inference**: Use `var` for local variable declarations to improve readability, but only when the type is explicitly clear from the right-hand side of the expression.
-- **Immutability**: Favor immutable objects. Make classes and fields `final` where possible. Use collections from `List.of()`/`Map.of()` for fixed data. Use `Stream.toList()` to create immutable lists.
-- **Streams and Lambdas**: Use the Streams API and lambda expressions for collection processing. Employ method references (e.g., `stream.map(Foo::toBar)`).
-- **Null Handling**: Avoid returning or accepting `null`. Use `Optional` for possibly-absent values and `Objects` utility methods like `equals()` and `requireNonNull()`.
-
-### Naming Conventions
-
-- Follow Google's Java style guide:
- - `UpperCamelCase` for class and interface names.
- - `lowerCamelCase` for method and variable names.
- - `UPPER_SNAKE_CASE` for constants.
- - `lowercase` for package names.
-- Use nouns for classes (`UserService`) and verbs for methods (`getUserById`).
-- Avoid abbreviations and Hungarian notation.
-
-### Common Bug Patterns
-
-Below are concise, human-readable rules you can apply regardless of which static analysis tool you use. If you run Sonar/SonarLint, the IDE will show the matching rule and location — direct Sonar connections are preferred and should override this ruleset.
-
-- Resource management — Always close resources (files, sockets, streams). Use try-with-resources where possible so resources are closed automatically.
-- Equality checks — Compare object equality with `.equals()` or `Objects.equals(...)` rather than `==` for non-primitives; this avoids reference-equality bugs.
-- Redundant casts — Remove unnecessary casts; prefer correct generic typing and let the compiler infer types where possible.
-- Reachable conditions — Avoid conditional expressions that are always true or false; they indicate bugs or dead code and should be corrected.
-
-For contributors who *do* use Sonar or SonarLint: the IDE/scan will show the specific rule key (for example, S2095 for resource leaks) and the affected file/line. Use that information to navigate to the exact location, then apply the recommended remediation.
-
-### Common Code Smells
-
-These patterns are phrased for humans; they map cleanly to checks in Sonar, SpotBugs, PMD, or Checkstyle but do not require those tools to be useful.
-
-- Parameter count — Keep method parameter lists short. If a method needs many params, consider grouping into a value object or using the builder pattern.
-- Method size — Keep methods focused and small. Extract helper methods to improve readability and testability.
-- Cognitive complexity — Reduce nested conditionals and heavy branching by extracting methods, using polymorphism, or applying the Strategy pattern.
-- Duplicated literals — Extract repeated strings and numbers into named constants or enums to reduce errors and ease changes.
-- Dead code — Remove unused variables and assignments. They confuse readers and can hide bugs.
-- Magic numbers — Replace numeric literals with named constants that explain intent (e.g., MAX_RETRIES).
-
-If you run a static analyzer like Sonar or SonarLint — direct Sonar connections are preferred and should override this ruleset. Sonar rule keys are useful for automation and suppression, but they are not required in day-to-day developer guidance.
-
-## Build and Verification
-
-- After adding or modifying code, verify the project continues to build successfully.
-- If the project uses Maven, run `mvn clean install`.
-- If the project uses Gradle, run `./gradlew build` (or `gradlew.bat build` on Windows).
-- Ensure all tests pass as part of the build.
diff --git a/instructions/python.instructions.md b/instructions/python.instructions.md
deleted file mode 100644
index a783f424..00000000
--- a/instructions/python.instructions.md
+++ /dev/null
@@ -1,56 +0,0 @@
----
-description: 'Python coding conventions and guidelines'
-applyTo: '**/*.py'
----
-
-# Python Coding Conventions
-
-## Python Instructions
-
-- Write clear and concise comments for each function.
-- Ensure functions have descriptive names and include type hints.
-- Provide docstrings following PEP 257 conventions.
-- Use the `typing` module for type annotations (e.g., `List[str]`, `Dict[str, int]`).
-- Break down complex functions into smaller, more manageable functions.
-
-## General Instructions
-
-- Always prioritize readability and clarity.
-- For algorithm-related code, include explanations of the approach used.
-- Write code with good maintainability practices, including comments on why certain design decisions were made.
-- Handle edge cases and write clear exception handling.
-- For libraries or external dependencies, mention their usage and purpose in comments.
-- Use consistent naming conventions and follow language-specific best practices.
-- Write concise, efficient, and idiomatic code that is also easily understandable.
-
-## Code Style and Formatting
-
-- Follow the **PEP 8** style guide for Python.
-- Maintain proper indentation (use 4 spaces for each level of indentation).
-- Ensure lines do not exceed 79 characters.
-- Place function and class docstrings immediately after the `def` or `class` keyword.
-- Use blank lines to separate functions, classes, and code blocks where appropriate.
-
-## Edge Cases and Testing
-
-- Always include test cases for critical paths of the application.
-- Account for common edge cases like empty inputs, invalid data types, and large datasets.
-- Include comments for edge cases and the expected behavior in those cases.
-- Write unit tests for functions and document them with docstrings explaining the test cases.
-
-## Example of Proper Documentation
-
-```python
-def calculate_area(radius: float) -> float:
- """
- Calculate the area of a circle given the radius.
-
- Parameters:
- radius (float): The radius of the circle.
-
- Returns:
- float: The area of the circle, calculated as π * radius^2.
- """
- import math
- return math.pi * radius ** 2
-```
diff --git a/instructions/reactjs.instructions.md b/instructions/reactjs.instructions.md
deleted file mode 100644
index 79bd2754..00000000
--- a/instructions/reactjs.instructions.md
+++ /dev/null
@@ -1,162 +0,0 @@
----
-description: 'ReactJS development standards and best practices'
-applyTo: '**/*.jsx, **/*.tsx, **/*.js, **/*.ts, **/*.css, **/*.scss'
----
-
-# ReactJS Development Instructions
-
-Instructions for building high-quality ReactJS applications with modern patterns, hooks, and best practices following the official React documentation at https://react.dev.
-
-## Project Context
-- Latest React version (React 19+)
-- TypeScript for type safety (when applicable)
-- Functional components with hooks as default
-- Follow React's official style guide and best practices
-- Use modern build tools (Vite, Create React App, or custom Webpack setup)
-- Implement proper component composition and reusability patterns
-
-## Development Standards
-
-### Architecture
-- Use functional components with hooks as the primary pattern
-- Implement component composition over inheritance
-- Organize components by feature or domain for scalability
-- Separate presentational and container components clearly
-- Use custom hooks for reusable stateful logic
-- Implement proper component hierarchies with clear data flow
-
-### TypeScript Integration
-- Use TypeScript interfaces for props, state, and component definitions
-- Define proper types for event handlers and refs
-- Implement generic components where appropriate
-- Use strict mode in `tsconfig.json` for type safety
-- Leverage React's built-in types (`React.FC`, `React.ComponentProps`, etc.)
-- Create union types for component variants and states
-
-### Component Design
-- Follow the single responsibility principle for components
-- Use descriptive and consistent naming conventions
-- Implement proper prop validation with TypeScript or PropTypes
-- Design components to be testable and reusable
-- Keep components small and focused on a single concern
-- Use composition patterns (render props, children as functions)
-
-### State Management
-- Use `useState` for local component state
-- Implement `useReducer` for complex state logic
-- Leverage `useContext` for sharing state across component trees
-- Consider external state management (Redux Toolkit, Zustand) for complex applications
-- Implement proper state normalization and data structures
-- Use React Query or SWR for server state management
-
-### Hooks and Effects
-- Use `useEffect` with proper dependency arrays to avoid infinite loops
-- Implement cleanup functions in effects to prevent memory leaks
-- Use `useMemo` and `useCallback` for performance optimization when needed
-- Create custom hooks for reusable stateful logic
-- Follow the rules of hooks (only call at the top level)
-- Use `useRef` for accessing DOM elements and storing mutable values
-
-### Styling
-- Use CSS Modules, Styled Components, or modern CSS-in-JS solutions
-- Implement responsive design with mobile-first approach
-- Follow BEM methodology or similar naming conventions for CSS classes
-- Use CSS custom properties (variables) for theming
-- Implement consistent spacing, typography, and color systems
-- Ensure accessibility with proper ARIA attributes and semantic HTML
-
-### Performance Optimization
-- Use `React.memo` for component memoization when appropriate
-- Implement code splitting with `React.lazy` and `Suspense`
-- Optimize bundle size with tree shaking and dynamic imports
-- Use `useMemo` and `useCallback` judiciously to prevent unnecessary re-renders
-- Implement virtual scrolling for large lists
-- Profile components with React DevTools to identify performance bottlenecks
-
-### Data Fetching
-- Use modern data fetching libraries (React Query, SWR, Apollo Client)
-- Implement proper loading, error, and success states
-- Handle race conditions and request cancellation
-- Use optimistic updates for better user experience
-- Implement proper caching strategies
-- Handle offline scenarios and network errors gracefully
-
-### Error Handling
-- Implement Error Boundaries for component-level error handling
-- Use proper error states in data fetching
-- Implement fallback UI for error scenarios
-- Log errors appropriately for debugging
-- Handle async errors in effects and event handlers
-- Provide meaningful error messages to users
-
-### Forms and Validation
-- Use controlled components for form inputs
-- Implement proper form validation with libraries like Formik, React Hook Form
-- Handle form submission and error states appropriately
-- Implement accessibility features for forms (labels, ARIA attributes)
-- Use debounced validation for better user experience
-- Handle file uploads and complex form scenarios
-
-### Routing
-- Use React Router for client-side routing
-- Implement nested routes and route protection
-- Handle route parameters and query strings properly
-- Implement lazy loading for route-based code splitting
-- Use proper navigation patterns and back button handling
-- Implement breadcrumbs and navigation state management
-
-### Testing
-- Write unit tests for components using React Testing Library
-- Test component behavior, not implementation details
-- Use Jest for test runner and assertion library
-- Implement integration tests for complex component interactions
-- Mock external dependencies and API calls appropriately
-- Test accessibility features and keyboard navigation
-
-### Security
-- Sanitize user inputs to prevent XSS attacks
-- Validate and escape data before rendering
-- Use HTTPS for all external API calls
-- Implement proper authentication and authorization patterns
-- Avoid storing sensitive data in localStorage or sessionStorage
-- Use Content Security Policy (CSP) headers
-
-### Accessibility
-- Use semantic HTML elements appropriately
-- Implement proper ARIA attributes and roles
-- Ensure keyboard navigation works for all interactive elements
-- Provide alt text for images and descriptive text for icons
-- Implement proper color contrast ratios
-- Test with screen readers and accessibility tools
-
-## Implementation Process
-1. Plan component architecture and data flow
-2. Set up project structure with proper folder organization
-3. Define TypeScript interfaces and types
-4. Implement core components with proper styling
-5. Add state management and data fetching logic
-6. Implement routing and navigation
-7. Add form handling and validation
-8. Implement error handling and loading states
-9. Add testing coverage for components and functionality
-10. Optimize performance and bundle size
-11. Ensure accessibility compliance
-12. Add documentation and code comments
-
-## Additional Guidelines
-- Follow React's naming conventions (PascalCase for components, camelCase for functions)
-- Use meaningful commit messages and maintain clean git history
-- Implement proper code splitting and lazy loading strategies
-- Document complex components and custom hooks with JSDoc
-- Use ESLint and Prettier for consistent code formatting
-- Keep dependencies up to date and audit for security vulnerabilities
-- Implement proper environment configuration for different deployment stages
-- Use React Developer Tools for debugging and performance analysis
-
-## Common Patterns
-- Higher-Order Components (HOCs) for cross-cutting concerns
-- Render props pattern for component composition
-- Compound components for related functionality
-- Provider pattern for context-based state sharing
-- Container/Presentational component separation
-- Custom hooks for reusable logic extraction
diff --git a/instructions/typescript-5-es2022.instructions.md b/instructions/typescript-5-es2022.instructions.md
deleted file mode 100644
index 1b530353..00000000
--- a/instructions/typescript-5-es2022.instructions.md
+++ /dev/null
@@ -1,114 +0,0 @@
----
-description: 'Guidelines for TypeScript Development targeting TypeScript 5.x and ES2022 output'
-applyTo: '**/*.ts'
----
-
-# TypeScript Development
-
-> These instructions assume projects are built with TypeScript 5.x (or newer) compiling to an ES2022 JavaScript baseline. Adjust guidance if your runtime requires older language targets or down-level transpilation.
-
-## Core Intent
-
-- Respect the existing architecture and coding standards.
-- Prefer readable, explicit solutions over clever shortcuts.
-- Extend current abstractions before inventing new ones.
-- Prioritize maintainability and clarity, short methods and classes, clean code.
-
-## General Guardrails
-
-- Target TypeScript 5.x / ES2022 and prefer native features over polyfills.
-- Use pure ES modules; never emit `require`, `module.exports`, or CommonJS helpers.
-- Rely on the project's build, lint, and test scripts unless asked otherwise.
-- Note design trade-offs when intent is not obvious.
-
-## Project Organization
-
-- Follow the repository's folder and responsibility layout for new code.
-- Use kebab-case filenames (e.g., `user-session.ts`, `data-service.ts`) unless told otherwise.
-- Keep tests, types, and helpers near their implementation when it aids discovery.
-- Reuse or extend shared utilities before adding new ones.
-
-## Naming & Style
-
-- Use PascalCase for classes, interfaces, enums, and type aliases; camelCase for everything else.
-- Skip interface prefixes like `I`; rely on descriptive names.
-- Name things for their behavior or domain meaning, not implementation.
-
-## Formatting & Style
-
-- Run the repository's lint/format scripts (e.g., `npm run lint`) before submitting.
-- Match the project's indentation, quote style, and trailing comma rules.
-- Keep functions focused; extract helpers when logic branches grow.
-- Favor immutable data and pure functions when practical.
-
-## Type System Expectations
-
-- Avoid `any` (implicit or explicit); prefer `unknown` plus narrowing.
-- Use discriminated unions for realtime events and state machines.
-- Centralize shared contracts instead of duplicating shapes.
-- Express intent with TypeScript utility types (e.g., `Readonly`, `Partial`, `Record`).
-
-## Async, Events & Error Handling
-
-- Use `async/await`; wrap awaits in try/catch with structured errors.
-- Guard edge cases early to avoid deep nesting.
-- Send errors through the project's logging/telemetry utilities.
-- Surface user-facing errors via the repository's notification pattern.
-- Debounce configuration-driven updates and dispose resources deterministically.
-
-## Architecture & Patterns
-
-- Follow the repository's dependency injection or composition pattern; keep modules single-purpose.
-- Observe existing initialization and disposal sequences when wiring into lifecycles.
-- Keep transport, domain, and presentation layers decoupled with clear interfaces.
-- Supply lifecycle hooks (e.g., `initialize`, `dispose`) and targeted tests when adding services.
-
-## External Integrations
-
-- Instantiate clients outside hot paths and inject them for testability.
-- Never hardcode secrets; load them from secure sources.
-- Apply retries, backoff, and cancellation to network or IO calls.
-- Normalize external responses and map errors to domain shapes.
-
-## Security Practices
-
-- Validate and sanitize external input with schema validators or type guards.
-- Avoid dynamic code execution and untrusted template rendering.
-- Encode untrusted content before rendering HTML; use framework escaping or trusted types.
-- Use parameterized queries or prepared statements to block injection.
-- Keep secrets in secure storage, rotate them regularly, and request least-privilege scopes.
-- Favor immutable flows and defensive copies for sensitive data.
-- Use vetted crypto libraries only.
-- Patch dependencies promptly and monitor advisories.
-
-## Configuration & Secrets
-
-- Reach configuration through shared helpers and validate with schemas or dedicated validators.
-- Handle secrets via the project's secure storage; guard `undefined` and error states.
-- Document new configuration keys and update related tests.
-
-## UI & UX Components
-
-- Sanitize user or external content before rendering.
-- Keep UI layers thin; push heavy logic to services or state managers.
-- Use messaging or events to decouple UI from business logic.
-
-## Testing Expectations
-
-- Add or update unit tests with the project's framework and naming style.
-- Expand integration or end-to-end suites when behavior crosses modules or platform APIs.
-- Run targeted test scripts for quick feedback before submitting.
-- Avoid brittle timing assertions; prefer fake timers or injected clocks.
-
-## Performance & Reliability
-
-- Lazy-load heavy dependencies and dispose them when done.
-- Defer expensive work until users need it.
-- Batch or debounce high-frequency events to reduce thrash.
-- Track resource lifetimes to prevent leaks.
-
-## Documentation & Comments
-
-- Add JSDoc to public APIs; include `@remarks` or `@example` when helpful.
-- Write comments that capture intent, and remove stale notes during refactors.
-- Update architecture or design docs when introducing significant patterns.
diff --git a/instructions/vuejs3.instructions.md b/instructions/vuejs3.instructions.md
deleted file mode 100644
index 879cf2c2..00000000
--- a/instructions/vuejs3.instructions.md
+++ /dev/null
@@ -1,153 +0,0 @@
----
-description: 'VueJS 3 development standards and best practices with Composition API and TypeScript'
-applyTo: '**/*.vue, **/*.ts, **/*.js, **/*.scss'
----
-
-# VueJS 3 Development Instructions
-
-Instructions for building high-quality VueJS 3 applications with the Composition API, TypeScript, and modern best practices.
-
-## Project Context
-- Vue 3.x with Composition API as default
-- TypeScript for type safety
-- Single File Components (`.vue`) with `
-```
-
----
-
-## `
-```
-
-### 2. External JavaScript (Recommended)
-
-Keep JavaScript in a separate file for better organization and reusability:
-
-**HTML file:**
-
-```html
-
-```
-
-**script.js file:**
-
-```javascript
-function createParagraph() {
- const para = document.createElement("p");
- para.textContent = "You clicked the button!";
- document.body.appendChild(para);
-}
-
-const buttons = document.querySelectorAll("button");
-for (const button of buttons) {
- button.addEventListener("click", createParagraph);
-}
-```
-
-### 3. Inline JavaScript Handlers (Not Recommended)
-
-```html
-
-```
-
-Avoid inline handlers because they pollute HTML with JavaScript, are inefficient, and are harder to maintain.
-
-### Comparison
-
-| Method | Location | Best For | Pros | Cons |
-|--------|----------|----------|------|------|
-| **Internal** | `
-
-```
-
-### Use `
-
-```
-
-Browser waits for all HTML to process before executing.
-
-### Use `defer` Attribute
-
-```html
-
-
-
-```
-
-Script downloads in parallel while HTML continues parsing; executes only after HTML is fully parsed. Scripts with `defer` execute in order.
-
-### Use `async` Attribute (for non-dependent scripts)
-
-```html
-
-```
-
-Script downloads in parallel and executes immediately when ready. Does not guarantee execution order. Use only for scripts that do not depend on DOM elements.
-
-### Wrap Internal Scripts in `DOMContentLoaded`
-
-```javascript
-document.addEventListener('DOMContentLoaded', function() {
- const button = document.querySelector("button");
- button.addEventListener("click", updateName);
-});
-```
-
----
-
-## Comments
-
-> Source:
-
-### Single Line Comments
-
-```javascript
-// This is a single line comment
-const name = "Chris"; // Can also go at end of line
-```
-
-### Multi-Line Comments
-
-```javascript
-/*
- This is a multi-line comment.
- It can span multiple lines.
- Useful for longer explanations.
-*/
-```
-
-### Best Practices
-
-- Use comments to explain **why** code does something, not **what** it does
-- Variable names should be intuitive -- don't comment obvious operations
-- More comments are usually better than fewer, but avoid overdoing it
-- Keep comments up-to-date as code changes
-
----
-
-## Variables
-
-> Source:
-
-A variable is a **container for a value**, like a number or string. Variables are essential because they allow your code to remember and manipulate data.
-
-### Declaring Variables
-
-Use the **`let`** keyword to create a variable:
-
-```javascript
-let myName;
-let myAge;
-```
-
-After declaration, the variable exists but has no value (`undefined`).
-
-### Initializing Variables
-
-Assign a value using the equals sign (`=`):
-
-```javascript
-myName = "Chris";
-myAge = 37;
-```
-
-Or declare and initialize together:
-
-```javascript
-let myDog = "Rover";
-```
-
-### Variable Types
-
-**Numbers:**
-
-```javascript
-let myAge = 17; // integer
-let temperature = 98.6; // floating point number
-```
-
-**Strings:**
-
-```javascript
-let dolphinGoodbye = "So long and thanks for all the fish";
-```
-
-**Booleans:**
-
-```javascript
-let iAmAlive = true;
-let test = 6 < 3; // returns false
-```
-
-**Arrays:**
-
-```javascript
-let myNameArray = ["Chris", "Bob", "Jim"];
-let myNumberArray = [10, 15, 40];
-myNameArray[0]; // "Chris" (zero-indexed)
-myNumberArray[2]; // 40
-```
-
-**Objects:**
-
-```javascript
-let dog = { name: "Spot", breed: "Dalmatian" };
-dog.name; // "Spot"
-```
-
-### Variable Naming Rules
-
-- Use Latin characters (0-9, a-z, A-Z) and underscores only
-- Use **lower camel case**: `myAge`, `initialColor`, `finalOutputValue`
-- Make names intuitive and descriptive
-- Variables are case-sensitive: `myage` is not the same as `myAge`
-- Don't start with underscore or numbers
-- Don't use reserved keywords (`var`, `function`, `let`, etc.)
-
-### Dynamic Typing
-
-JavaScript is **dynamically typed** -- you don't declare variable types. A variable's type is determined by the value assigned:
-
-```javascript
-let myString = "Hello";
-typeof myString; // "string"
-
-let myNumber = "500";
-typeof myNumber; // "string"
-
-myNumber = 500;
-typeof myNumber; // "number"
-```
-
-### Constants with `const`
-
-Use **`const`** for values that should not change:
-
-```javascript
-const myDog = "Rover";
-myDog = "Fido"; // Error: cannot reassign
-```
-
-For objects, you can still modify properties even with `const`:
-
-```javascript
-const bird = { species: "Kestrel" };
-bird.species = "Striated Caracara"; // OK - modifying content
-```
-
-### `let` vs `const` vs `var`
-
-| Feature | `let` | `const` | `var` |
-|---------|-------|---------|-------|
-| Can reassign | Yes | No | Yes |
-| Must initialize | No | Yes | No |
-| Scoping | Block | Block | Function |
-| Hoisting issues | No | No | Yes |
-
-**Best Practice:** Use `const` when possible, use `let` when you need to reassign. Avoid `var` in modern JavaScript.
-
----
-
-## Numbers and Math
-
-> Source:
-
-### Types of Numbers
-
-- **Integers**: Numbers without a fractional part (e.g., 10, 400, -5)
-- **Floating Point Numbers (Floats)**: Have decimal points (e.g., 12.5, 56.7786543)
-- JavaScript has only one data type for numbers: `Number` (plus `BigInt` for very large integers)
-
-### Arithmetic Operators
-
-| Operator | Name | Example | Result |
-|----------|------|---------|--------|
-| `+` | Addition | `6 + 9` | `15` |
-| `-` | Subtraction | `20 - 15` | `5` |
-| `*` | Multiplication | `3 * 7` | `21` |
-| `/` | Division | `10 / 5` | `2` |
-| `%` | Remainder (Modulo) | `8 % 3` | `2` |
-| `**` | Exponent | `5 ** 2` | `25` |
-
-```javascript
-const num1 = 10;
-const num2 = 50;
-9 * num1; // 90
-num1 ** 3; // 1000
-num2 / num1; // 5
-```
-
-### Operator Precedence
-
-1. **Multiply and Divide** are done first (left to right)
-2. **Add and Subtract** are done after (left to right)
-
-```javascript
-num2 + num1 / 8 + 2; // = 53.25 (50 + 1.25 + 2)
-(num2 + num1) / (8 + 2); // = 6 (60 / 10)
-```
-
-### Increment and Decrement Operators
-
-```javascript
-let num1 = 4;
-num1++; // Returns 4, then increments to 5
-++num1; // Increments first, then returns 6
-
-let num2 = 6;
-num2--; // Returns 6, then decrements to 5
---num2; // Decrements first, then returns 4
-```
-
-### Assignment Operators
-
-| Operator | Example | Equivalent |
-|----------|---------|------------|
-| `+=` | `x += 4;` | `x = x + 4;` |
-| `-=` | `x -= 3;` | `x = x - 3;` |
-| `*=` | `x *= 3;` | `x = x * 3;` |
-| `/=` | `x /= 5;` | `x = x / 5;` |
-
-### Comparison Operators
-
-| Operator | Name | Example | Result |
-|----------|------|---------|--------|
-| `===` | Strict equality | `5 === 2 + 3` | `true` |
-| `!==` | Strict non-equality | `5 !== 2 + 3` | `false` |
-| `<` | Less than | `10 < 6` | `false` |
-| `>` | Greater than | `10 > 20` | `false` |
-| `<=` | Less than or equal | `3 <= 2` | `false` |
-| `>=` | Greater than or equal | `5 >= 4` | `true` |
-
-Always use `===` and `!==` (strict versions) instead of `==` and `!=`.
-
-### Useful Number Methods
-
-```javascript
-// Round to decimal places
-const lotsOfDecimal = 1.7665849587;
-lotsOfDecimal.toFixed(2); // "1.77"
-
-// Convert string to number
-let myNumber = "74";
-myNumber = Number(myNumber) + 3; // 77
-
-// Check data type
-typeof 5; // "number"
-typeof 6.667; // "number"
-
-// Math object methods
-Math.random(); // Random number between 0 and 1
-Math.floor(2.9); // 2 (rounds down)
-Math.ceil(2.1); // 3 (rounds up)
-Math.pow(5, 2); // 25 (5 to the power of 2)
-```
-
----
-
-## Strings
-
-> Source:
-
-### Creating Strings
-
-Strings must be surrounded by quotes:
-
-```javascript
-const single = 'Single quotes';
-const double = "Double quotes";
-const backtick = `Backtick`;
-```
-
-The same character must be used for the start and end of a string.
-
-### Template Literals
-
-Template literals (backtick-wrapped strings) have two special features:
-
-**1. Embedding JavaScript Expressions:**
-
-```javascript
-const name = "Chris";
-const greeting = `Hello, ${name}`;
-console.log(greeting); // "Hello, Chris"
-
-const song = "Fight the Youth";
-const score = 9;
-const highestScore = 10;
-const output = `I like the song ${song}. I gave it a score of ${
- (score / highestScore) * 100
-}%.`;
-// "I like the song Fight the Youth. I gave it a score of 90%."
-```
-
-**2. Multiline Strings:**
-
-```javascript
-const newline = `One day you finally knew
-what you had to do, and began,`;
-```
-
-With regular strings, use `\n` for line breaks:
-
-```javascript
-const newline2 = "One day you finally knew\nwhat you had to do, and began,";
-```
-
-### String Concatenation
-
-```javascript
-// Using + operator
-const greeting = "Hello" + ", " + "Bob"; // "Hello, Bob"
-
-// Using template literals (recommended)
-const name = "Ramesh";
-console.log(`Howdy, ${name}`); // "Howdy, Ramesh"
-```
-
-### Escaping Characters
-
-```javascript
-const bigmouth = 'I\'ve got no right to take my place...';
-```
-
----
-
-## Useful String Methods
-
-> Source:
-
-### Finding String Length
-
-```javascript
-const browserType = "mozilla";
-browserType.length; // 7
-```
-
-### Retrieving Characters
-
-```javascript
-browserType[0]; // "m" (first character)
-browserType[browserType.length - 1]; // "a" (last character)
-```
-
-### Testing for Substrings
-
-```javascript
-const browserType = "mozilla";
-
-browserType.includes("zilla"); // true
-browserType.startsWith("zilla"); // false
-browserType.endsWith("zilla"); // true
-```
-
-### Finding Position of a Substring
-
-```javascript
-const tagline = "MDN - Resources for developers, by developers";
-tagline.indexOf("developers"); // 20
-tagline.indexOf("x"); // -1 (not found)
-
-// Finding subsequent occurrences
-const first = tagline.indexOf("developers"); // 20
-const second = tagline.indexOf("developers", first + 1); // 35
-```
-
-### Extracting Substrings
-
-```javascript
-const browserType = "mozilla";
-browserType.slice(1, 4); // "ozi"
-browserType.slice(2); // "zilla" (from index 2 to end)
-```
-
-### Changing Case
-
-```javascript
-const radData = "My NaMe Is MuD";
-radData.toLowerCase(); // "my name is mud"
-radData.toUpperCase(); // "MY NAME IS MUD"
-```
-
-### Replacing Parts of a String
-
-```javascript
-// Replace first occurrence
-const browserType = "mozilla";
-const updated = browserType.replace("moz", "van"); // "vanilla"
-
-// Replace all occurrences
-let quote = "To be or not to be";
-quote = quote.replaceAll("be", "code"); // "To code or not to code"
-```
-
-**Important:** String methods return new strings; they don't modify the original unless you reassign.
-
----
-
-## Arrays
-
-> Source:
-
-### Creating Arrays
-
-```javascript
-const shopping = ["bread", "milk", "cheese", "hummus", "noodles"];
-const sequence = [1, 1, 2, 3, 5, 8, 13];
-const random = ["tree", 795, [0, 1, 2]]; // Mixed types allowed
-```
-
-### Finding Array Length
-
-```javascript
-shopping.length; // 5
-```
-
-### Accessing and Modifying Items
-
-```javascript
-shopping[0]; // "bread" (zero-indexed)
-shopping[0] = "tahini"; // Modify first item
-
-// Multidimensional arrays
-const random = ["tree", 795, [0, 1, 2]];
-random[2][2]; // 2
-```
-
-### Finding Index of Items
-
-```javascript
-const birds = ["Parrot", "Falcon", "Owl"];
-birds.indexOf("Owl"); // 2
-birds.indexOf("Rabbit"); // -1 (not found)
-```
-
-### Adding Items
-
-```javascript
-const cities = ["Manchester", "Liverpool"];
-
-// Add to end
-cities.push("Cardiff");
-cities.push("Bradford", "Brighton"); // Add multiple
-
-// Add to start
-cities.unshift("Edinburgh");
-```
-
-### Removing Items
-
-```javascript
-const cities = ["Manchester", "Liverpool", "Edinburgh", "Carlisle"];
-
-// Remove from end
-cities.pop(); // Returns removed item
-
-// Remove from start
-cities.shift(); // Returns removed item
-
-// Remove from specific index
-const index = cities.indexOf("Liverpool");
-if (index !== -1) {
- cities.splice(index, 1); // Remove 1 item at index
-}
-cities.splice(index, 2); // Remove 2 items starting at index
-```
-
-### Iterating Over Arrays
-
-**for...of Loop:**
-
-```javascript
-const birds = ["Parrot", "Falcon", "Owl"];
-for (const bird of birds) {
- console.log(bird);
-}
-```
-
-**map() -- Transform Items:**
-
-```javascript
-const numbers = [5, 2, 7, 6];
-const doubled = numbers.map(number => number * 2);
-// [10, 4, 14, 12]
-```
-
-**filter() -- Select Matching Items:**
-
-```javascript
-const cities = ["London", "Liverpool", "Totnes", "Edinburgh"];
-const longer = cities.filter(city => city.length > 8);
-// ["Liverpool", "Edinburgh"]
-```
-
-### Converting Between Strings and Arrays
-
-```javascript
-// String to Array
-const data = "Manchester,London,Liverpool";
-const cities = data.split(",");
-// ["Manchester", "London", "Liverpool"]
-
-// Array to String
-const commaSeparated = cities.join(",");
-// "Manchester,London,Liverpool"
-
-// Simple toString (always uses comma)
-const dogNames = ["Rocket", "Flash", "Bella"];
-dogNames.toString(); // "Rocket,Flash,Bella"
-```
-
----
-
-## Conditionals
-
-> Source:
-
-### if...else Statements
-
-```javascript
-if (condition) {
- /* code to run if condition is true */
-} else {
- /* run some other code instead */
-}
-```
-
-### else if Statements
-
-```javascript
-if (choice === "sunny") {
- para.textContent = "Wear shorts!";
-} else if (choice === "rainy") {
- para.textContent = "Take a rain coat.";
-} else if (choice === "snowing") {
- para.textContent = "It is freezing!";
-} else {
- para.textContent = "";
-}
-```
-
-### Logical Operators
-
-**AND (`&&`) -- All conditions must be true:**
-
-```javascript
-if (choice === "sunny" && temperature < 86) {
- para.textContent = "Nice and sunny. Let's go to the beach!";
-}
-```
-
-**OR (`||`) -- At least one condition must be true:**
-
-```javascript
-if (iceCreamVanOutside || houseStatus === "on fire") {
- console.log("You should leave the house quickly.");
-}
-```
-
-**NOT (`!`) -- Negates an expression:**
-
-```javascript
-if (!(iceCreamVanOutside || houseStatus === "on fire")) {
- console.log("Probably should just stay in then.");
-}
-```
-
-**Common Mistake:**
-
-```javascript
-// WRONG - will always evaluate to true
-if (x === 5 || 7 || 10 || 20) { }
-
-// CORRECT
-if (x === 5 || x === 7 || x === 10 || x === 20) { }
-```
-
-### Switch Statements
-
-```javascript
-switch (choice) {
- case "sunny":
- para.textContent = "Wear shorts!";
- break;
- case "rainy":
- para.textContent = "Take a rain coat.";
- break;
- case "snowing":
- para.textContent = "It is freezing!";
- break;
- default:
- para.textContent = "";
-}
-```
-
-### Ternary Operator
-
-```javascript
-const greeting = isBirthday
- ? "Happy birthday Mrs. Smith!"
- : "Good morning Mrs. Smith.";
-```
-
----
-
-## Loops
-
-> Source:
-
-### for...of Loop
-
-Used to iterate through collections:
-
-```javascript
-const cats = ["Leopard", "Serval", "Jaguar", "Tiger"];
-for (const cat of cats) {
- console.log(cat);
-}
-```
-
-### Standard for Loop
-
-```javascript
-for (let i = 1; i < 10; i++) {
- console.log(`${i} x ${i} = ${i * i}`);
-}
-```
-
-Components: **initializer** (`let i = 1`), **condition** (`i < 10`), **final-expression** (`i++`).
-
-### Looping Through Arrays with for
-
-```javascript
-const cats = ["Leopard", "Serval", "Jaguar"];
-for (let i = 0; i < cats.length; i++) {
- console.log(cats[i]);
-}
-```
-
-### while Loop
-
-```javascript
-let i = 0;
-while (i < cats.length) {
- console.log(cats[i]);
- i++;
-}
-```
-
-### do...while Loop
-
-Code executes **at least once**, then checks condition:
-
-```javascript
-let i = 0;
-do {
- console.log(cats[i]);
- i++;
-} while (i < cats.length);
-```
-
-### break and continue
-
-**break -- Exit Loop Immediately:**
-
-```javascript
-for (const contact of contacts) {
- const splitContact = contact.split(":");
- if (splitContact[0].toLowerCase() === searchName) {
- console.log(`${splitContact[0]}'s number is ${splitContact[1]}.`);
- break;
- }
-}
-```
-
-**continue -- Skip to Next Iteration:**
-
-```javascript
-for (let i = 1; i <= num; i++) {
- let sqRoot = Math.sqrt(i);
- if (Math.floor(sqRoot) !== sqRoot) {
- continue; // Skip non-perfect squares
- }
- console.log(i);
-}
-```
-
-### Which Loop Type to Use?
-
-| Loop Type | Best For |
-|-----------|----------|
-| `for...of` | Iterating collections when you don't need index |
-| `for` | General purpose loops; full control of iteration |
-| `while` | When initializer before loop makes sense |
-| `do...while` | When code must run at least once |
-| `map()` | Transforming array items |
-| `filter()` | Selecting specific array items |
-
-**Warning:** Always ensure loops terminate. Infinite loops crash browsers.
-
----
-
-## Functions
-
-> Source:
-
-### What Are Functions?
-
-Functions are **reusable blocks of code** that perform a single task. They allow you to store code in a defined block and call it whenever needed.
-
-### Built-in Browser Functions
-
-```javascript
-const myText = "I am a string";
-const newString = myText.replace("string", "sausage"); // "I am a sausage"
-
-const myArray = ["I", "love", "chocolate", "frogs"];
-const madeAString = myArray.join(" "); // "I love chocolate frogs"
-
-const myNumber = Math.random(); // Random number between 0 and 1
-```
-
-### Custom Functions
-
-```javascript
-function myFunction() {
- alert("hello");
-}
-
-myFunction(); // Calls the function
-```
-
-### Function Parameters and Default Parameters
-
-```javascript
-function hello(name = "Chris") {
- console.log(`Hello ${name}!`);
-}
-
-hello("Ari"); // "Hello Ari!"
-hello(); // "Hello Chris!"
-```
-
-### Anonymous Functions
-
-Functions without names, often passed as parameters:
-
-```javascript
-textBox.addEventListener("keydown", function (event) {
- console.log(`You pressed "${event.key}".`);
-});
-```
-
-### Arrow Functions
-
-Modern syntax using `=>`:
-
-```javascript
-// Full syntax
-textBox.addEventListener("keydown", (event) => {
- console.log(`You pressed "${event.key}".`);
-});
-
-// Single parameter - parentheses optional
-textBox.addEventListener("keydown", event => {
- console.log(`You pressed "${event.key}".`);
-});
-
-// Single return statement - implicit return
-const originals = [1, 2, 3];
-const doubled = originals.map(item => item * 2); // [2, 4, 6]
-```
-
-### Function Scope
-
-Variables inside functions are locked to **function scope** and unreachable from outside:
-
-```javascript
-const x = 1; // global scope - accessible everywhere
-
-function myFunc() {
- const y = 2; // function scope - only inside myFunc
- console.log(x); // Can access global x
-}
-
-console.log(x); // Can access global x
-console.log(y); // ReferenceError: y is not defined
-```
-
-### Block Scope (let/const)
-
-```javascript
-if (x === 1) {
- const c = 4; // block scope
-}
-console.log(c); // ReferenceError: c is not defined
-```
-
----
-
-## Building Custom Functions
-
-> Source:
-
-### Function Structure
-
-```javascript
-function displayMessage() {
- // Function body code goes here
-}
-```
-
-Key components:
-
-- `function` keyword declares a function definition
-- Function name follows variable naming conventions
-- Parentheses `()` hold parameters
-- Curly braces `{}` contain the code that runs when called
-
-### Complete Practical Example
-
-```javascript
-function displayMessage(msgText, msgType) {
- const body = document.body;
-
- const panel = document.createElement("div");
- panel.setAttribute("class", "msgBox");
- body.appendChild(panel);
-
- const msg = document.createElement("p");
- msg.textContent = msgText;
- panel.appendChild(msg);
-
- const closeBtn = document.createElement("button");
- closeBtn.textContent = "x";
- panel.appendChild(closeBtn);
-
- closeBtn.addEventListener("click", () => body.removeChild(panel));
-
- if (msgType === "warning") {
- msg.style.backgroundImage = 'url("icons/warning.png")';
- panel.style.backgroundColor = "red";
- } else if (msgType === "chat") {
- msg.style.backgroundImage = 'url("icons/chat.png")';
- panel.style.backgroundColor = "aqua";
- } else {
- msg.style.paddingLeft = "20px";
- }
-}
-```
-
-### Calling Functions
-
-```javascript
-// Direct invocation
-displayMessage("Your inbox is almost full", "warning");
-
-// As event handler (no parentheses)
-btn.addEventListener("click", displayMessage);
-
-// With parameters via anonymous function
-btn.addEventListener("click", () =>
- displayMessage("Woo, this is a different message!"),
-);
-```
-
-**Important:** Don't include parentheses when passing a function as a callback:
-
-```javascript
-btn.addEventListener("click", displayMessage); // Correct
-btn.addEventListener("click", displayMessage()); // Wrong - calls immediately
-```
-
-### Parameters vs Arguments
-
-- **Parameters** are the named variables in the function definition
-- **Arguments** are the actual values passed when calling the function
-
----
-
-## Function Return Values
-
-> Source:
-
-### What Are Return Values?
-
-Return values are the values that a function returns when it completes execution.
-
-```javascript
-const myText = "The weather is cold";
-const newString = myText.replace("cold", "warm"); // "The weather is warm"
-```
-
-### Using the return Keyword
-
-```javascript
-function random(number) {
- return Math.floor(Math.random() * number);
-}
-```
-
-When a function is called, the return value **substitutes for the function call**:
-
-```javascript
-ctx.arc(random(WIDTH), random(HEIGHT), random(50), 0, 2 * Math.PI);
-// If random() calls return 500, 200, 35:
-ctx.arc(500, 200, 35, 0, 2 * Math.PI);
-```
-
-### Creating Functions with Return Values
-
-```javascript
-function squared(num) {
- return num * num;
-}
-
-function cubed(num) {
- return num * num * num;
-}
-
-function factorial(num) {
- if (num < 0) return undefined;
- if (num === 0) return 1;
- let x = num - 1;
- while (x > 1) {
- num *= x;
- x--;
- }
- return num;
-}
-```
-
-### Using Return Values
-
-```javascript
-input.addEventListener("change", () => {
- const num = parseFloat(input.value);
- if (isNaN(num)) {
- para.textContent = "You need to enter a number!";
- } else {
- para.textContent = `${num} squared is ${squared(num)}. `;
- para.textContent += `${num} cubed is ${cubed(num)}. `;
- para.textContent += `${num} factorial is ${factorial(num)}. `;
- }
-});
-```
-
-| Concept | Description |
-|---------|-------------|
-| **return keyword** | Returns a value and exits the function immediately |
-| **No return value** | Functions without explicit return return `undefined` |
-| **Variable storage** | Return values can be saved to variables for later use |
-
----
-
-## Events
-
-> Source:
-
-### What Are Events?
-
-Events are signals fired by the browser when something significant happens. They allow your code to react to user interactions and system activities.
-
-### Using addEventListener() (Recommended)
-
-```javascript
-const btn = document.querySelector("button");
-
-function random(number) {
- return Math.floor(Math.random() * (number + 1));
-}
-
-btn.addEventListener("click", () => {
- const rndCol = `rgb(${random(255)} ${random(255)} ${random(255)})`;
- document.body.style.backgroundColor = rndCol;
-});
-```
-
-### Using Named Functions
-
-```javascript
-function changeBackground() {
- const rndCol = `rgb(${random(255)} ${random(255)} ${random(255)})`;
- document.body.style.backgroundColor = rndCol;
-}
-
-btn.addEventListener("click", changeBackground);
-```
-
-### Removing Event Listeners
-
-```javascript
-btn.removeEventListener("click", changeBackground);
-```
-
-### Adding Multiple Listeners
-
-```javascript
-myElement.addEventListener("click", functionA);
-myElement.addEventListener("click", functionB);
-// Both functions run when element is clicked
-```
-
-### Common Event Types
-
-| Event | Description |
-|-------|-------------|
-| `click` | User clicks an element |
-| `dblclick` | User double-clicks an element |
-| `focus` | Element receives focus |
-| `blur` | Element loses focus |
-| `mouseover` | Mouse pointer hovers over element |
-| `mouseout` | Mouse pointer leaves element |
-| `keydown` | User presses a key |
-| `submit` | Form is submitted |
-| `play` | Media begins playing |
-| `pause` | Media is paused |
-
-### Event Objects
-
-Event handler functions receive an **event object** automatically:
-
-```javascript
-function bgChange(e) {
- const rndCol = `rgb(${random(255)} ${random(255)} ${random(255)})`;
- e.target.style.backgroundColor = rndCol;
-}
-
-btn.addEventListener("click", bgChange);
-```
-
-**Keyboard Events:**
-
-```javascript
-const textBox = document.querySelector("#textBox");
-const output = document.querySelector("#output");
-
-textBox.addEventListener("keydown", (event) => {
- output.textContent = `You pressed "${event.key}".`;
-});
-```
-
-### Preventing Default Behavior
-
-```javascript
-const form = document.querySelector("form");
-const fname = document.getElementById("fname");
-const lname = document.getElementById("lname");
-
-form.addEventListener("submit", (e) => {
- if (fname.value === "" || lname.value === "") {
- e.preventDefault();
- para.textContent = "You need to fill in both names!";
- }
-});
-```
-
-### Event Handler Properties (Not Recommended for Multiple Handlers)
-
-```javascript
-btn.onclick = () => {
- document.body.style.backgroundColor = rndCol;
-};
-```
-
-Cannot add multiple listeners -- subsequent assignments overwrite previous ones.
-
----
-
-## Object Basics
-
-> Source:
-
-### What Are Objects?
-
-An object is a collection of related data and/or functionality, consisting of:
-
-- **Properties**: variables inside objects (data)
-- **Methods**: functions inside objects (functionality)
-
-### Object Literal Syntax
-
-```javascript
-const person = {
- name: ["Bob", "Smith"],
- age: 32,
- bio() {
- console.log(`${this.name[0]} ${this.name[1]} is ${this.age} years old.`);
- },
- introduceSelf() {
- console.log(`Hi! I'm ${this.name[0]}.`);
- },
-};
-```
-
-### Dot Notation
-
-```javascript
-person.age; // 32
-person.bio(); // Calls the method
-person.name.first; // Access nested properties
-```
-
-### Bracket Notation
-
-```javascript
-person["age"]; // 32
-person["name"]["first"]; // Nested access
-
-// When property names are stored in variables
-function logProperty(propertyName) {
- console.log(person[propertyName]);
-}
-logProperty("name"); // ["Bob", "Smith"]
-```
-
-### Setting Object Members
-
-```javascript
-// Update existing properties
-person.age = 45;
-
-// Create new properties
-person["eyes"] = "hazel";
-person.farewell = function () {
- console.log("Bye everybody!");
-};
-
-// Dynamic property creation (only bracket notation)
-const myDataName = "height";
-const myDataValue = "1.75m";
-person[myDataName] = myDataValue;
-```
-
-### What is "this"?
-
-The `this` keyword refers to the **current object the code is being executed in**:
-
-```javascript
-const person1 = {
- name: "Chris",
- introduceSelf() {
- console.log(`Hi! I'm ${this.name}.`);
- },
-};
-
-const person2 = {
- name: "Deepti",
- introduceSelf() {
- console.log(`Hi! I'm ${this.name}.`);
- },
-};
-
-person1.introduceSelf(); // "Hi! I'm Chris."
-person2.introduceSelf(); // "Hi! I'm Deepti."
-```
-
-### Constructors
-
-Functions called with the `new` keyword that create new objects:
-
-```javascript
-function Person(name) {
- this.name = name;
- this.introduceSelf = function () {
- console.log(`Hi! I'm ${this.name}.`);
- };
-}
-
-const salva = new Person("Salva");
-salva.introduceSelf(); // "Hi! I'm Salva."
-
-const frankie = new Person("Frankie");
-frankie.introduceSelf(); // "Hi! I'm Frankie."
-```
-
----
-
-## DOM Scripting
-
-> Source:
-
-### What is the DOM?
-
-The **Document Object Model (DOM)** is a tree structure representation created by the browser that enables HTML to be accessed by programming languages. Each entry in the tree is called a **node**.
-
-### DOM Tree Relationships
-
-- **Root node**: The top node (the `HTML` element)
-- **Parent node**: A node that has other nodes inside it
-- **Child node**: A node directly inside another node
-- **Sibling nodes**: Nodes on the same level under the same parent
-- **Descendant node**: A node anywhere inside another node
-
-### Selecting Elements
-
-```javascript
-// querySelector - select first match (Recommended)
-const link = document.querySelector("a");
-const element = document.querySelector("#myId");
-const element = document.querySelector(".myClass");
-
-// querySelectorAll - select all matches (returns NodeList)
-const paragraphs = document.querySelectorAll("p");
-
-// Legacy methods
-const elementRef = document.getElementById('myId');
-const elementRefArray = document.getElementsByTagName('p');
-```
-
-### Creating and Inserting Elements
-
-```javascript
-const para = document.createElement("p");
-para.textContent = "We hope you enjoyed the ride.";
-
-const sect = document.querySelector("section");
-sect.appendChild(para);
-
-// Create a text node
-const text = document.createTextNode(" -- the premier source.");
-const linkPara = document.querySelector("p");
-linkPara.appendChild(text);
-```
-
-### Moving and Removing Elements
-
-```javascript
-// Moving (appendChild on existing element moves it)
-sect.appendChild(linkPara);
-
-// Cloning
-const clone = linkPara.cloneNode(); // Shallow clone
-const deepClone = linkPara.cloneNode(true); // Deep clone
-
-// Removing
-sect.removeChild(linkPara); // Using parent
-linkPara.remove(); // Modern method
-linkPara.parentNode.removeChild(linkPara); // Older browsers
-```
-
-### Manipulating Content
-
-```javascript
-// textContent - plain text only (safer)
-link.textContent = "Mozilla Developer Network";
-
-// innerHTML - parses HTML (use with caution)
-element.innerHTML = "New content";
-```
-
-### Manipulating Attributes
-
-```javascript
-link.href = "https://developer.mozilla.org";
-element.getAttribute("class");
-element.setAttribute("class", "newClass");
-element.removeAttribute("id");
-```
-
-### Manipulating Styles
-
-**Method 1: Inline Styles:**
-
-```javascript
-para.style.color = "white";
-para.style.backgroundColor = "black";
-para.style.padding = "10px";
-para.style.width = "250px";
-para.style.textAlign = "center";
-```
-
-Note: CSS hyphenated properties become camelCase in JavaScript (`background-color` becomes `backgroundColor`).
-
-**Method 2: CSS Classes (Recommended):**
-
-```javascript
-para.classList.add("highlight");
-para.classList.remove("highlight");
-para.classList.toggle("highlight");
-```
-
-### Complete Practical Example: Dynamic Shopping List
-
-```html
-
My shopping list
-
- Enter a new item:
-
-
-
-
-```
-
-```javascript
-const list = document.querySelector("ul");
-const input = document.querySelector("input");
-const button = document.querySelector("button");
-
-button.addEventListener("click", (event) => {
- event.preventDefault();
-
- const myItem = input.value;
- input.value = "";
-
- const listItem = document.createElement("li");
- const listText = document.createElement("span");
- const listBtn = document.createElement("button");
-
- listItem.appendChild(listText);
- listText.textContent = myItem;
- listItem.appendChild(listBtn);
- listBtn.textContent = "Delete";
- list.appendChild(listItem);
-
- listBtn.addEventListener("click", () => {
- list.removeChild(listItem);
- });
-
- input.focus();
-});
-```
-
-### Key Browser Objects
-
-| Object | Description |
-|--------|-------------|
-| `window` | Represents the browser tab |
-| `document` | The page loaded in the window |
-| `navigator` | Browser state and identity |
-
----
-
-## Network Requests
-
-> Source:
-
-### The Fetch API
-
-The main modern JavaScript API for making HTTP requests to retrieve resources from the server without full page reloads.
-
-### Basic Syntax
-
-```javascript
-fetch(url)
- .then((response) => {
- if (!response.ok) {
- throw new Error(`HTTP error: ${response.status}`);
- }
- return response.text();
- })
- .then((data) => {
- // Use the data
- })
- .catch((error) => {
- console.error(`Fetch problem: ${error.message}`);
- });
-```
-
-### Fetching Text Content
-
-```javascript
-function updateDisplay(verse) {
- verse = verse.replace(" ", "").toLowerCase();
- const url = `${verse}.txt`;
-
- fetch(url)
- .then((response) => {
- if (!response.ok) {
- throw new Error(`HTTP error: ${response.status}`);
- }
- return response.text();
- })
- .then((text) => {
- poemDisplay.textContent = text;
- })
- .catch((error) => {
- poemDisplay.textContent = `Could not fetch verse: ${error}`;
- });
-}
-```
-
-### Fetching JSON Data
-
-```javascript
-fetch("products.json")
- .then((response) => {
- if (!response.ok) {
- throw new Error(`HTTP error: ${response.status}`);
- }
- return response.json();
- })
- .then((json) => initialize(json))
- .catch((err) => console.error(`Fetch problem: ${err.message}`));
-```
-
-### Fetching Binary Data (Blob)
-
-```javascript
-fetch(url)
- .then((response) => {
- if (!response.ok) {
- throw new Error(`HTTP error: ${response.status}`);
- }
- return response.blob();
- })
- .then((blob) => showProduct(blob, product))
- .catch((err) => console.error(`Fetch problem: ${err.message}`));
-```
-
-### Core Response Methods
-
-| Method | Use Case |
-|--------|----------|
-| `response.text()` | Plain text files |
-| `response.json()` | JSON objects/arrays |
-| `response.blob()` | Binary data (images, videos) |
-
-### Error Handling
-
-```javascript
-.then((response) => {
- if (!response.ok) {
- throw new Error(`HTTP error: ${response.status}`);
- }
- return response.json();
-})
-.catch((error) => {
- console.error(`Fetch problem: ${error.message}`);
-});
-```
-
-**Important**: `fetch()` only rejects on network failures, not HTTP error statuses (404, 500). Always check `response.ok` or `response.status`.
-
-### XMLHttpRequest (Legacy Alternative)
-
-```javascript
-const request = new XMLHttpRequest();
-
-try {
- request.open("GET", "products.json");
- request.responseType = "json";
-
- request.addEventListener("load", () => {
- initialize(request.response);
- });
- request.addEventListener("error", () => {
- console.error("XHR error");
- });
-
- request.send();
-} catch (error) {
- console.error(`XHR error ${request.status}`);
-}
-```
-
-Fetch is simpler and recommended over XMLHttpRequest.
-
----
-
-## Working with JSON
-
-> Source:
-
-### What is JSON?
-
-**JSON (JavaScript Object Notation)** is a standard text-based format for representing structured data based on JavaScript object syntax, commonly used for transmitting data in web applications.
-
-- Converting a string to a native object is called **deserialization**
-- Converting a native object to a string is called **serialization**
-- JSON files use the `.json` extension and `application/json` MIME type
-
-### JSON Structure
-
-```json
-{
- "squadName": "Super hero squad",
- "homeTown": "Metro City",
- "formed": 2016,
- "secretBase": "Super tower",
- "active": true,
- "members": [
- {
- "name": "Molecule Man",
- "age": 29,
- "secretIdentity": "Dan Jukes",
- "powers": ["Radiation resistance", "Turning tiny", "Radiation blast"]
- }
- ]
-}
-```
-
-### Valid JSON Data Types
-
-- String literals, number literals, `true`, `false`, `null`
-- Objects and arrays containing valid JSON types
-
-**Not valid in JSON:**
-
-- `undefined`, `NaN`, `Infinity`
-- Functions or object types like `Date`, `Set`, `Map`
-- Single quotes (must use double quotes)
-- Trailing commas
-- Comments
-
-### Accessing JSON Data
-
-```javascript
-superHeroes.homeTown; // "Metro City"
-superHeroes.members[1].powers[2]; // Third power of second hero
-superHeroes[0].powers[0]; // For top-level arrays
-```
-
-### JSON.parse() -- String to Object
-
-```javascript
-const jsonString = '{"name":"John","age":30}';
-const obj = JSON.parse(jsonString);
-console.log(obj.name); // "John"
-```
-
-### JSON.stringify() -- Object to String
-
-```javascript
-let myObj = { name: "Chris", age: 38 };
-let myString = JSON.stringify(myObj);
-console.log(myString); // '{"name":"Chris","age":38}'
-```
-
-### Complete Example: Fetching and Displaying JSON
-
-```javascript
-async function populate() {
- const requestURL =
- "https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json";
- const request = new Request(requestURL);
-
- const response = await fetch(request);
- const superHeroes = await response.json();
-
- populateHeader(superHeroes);
- populateHeroes(superHeroes);
-}
-
-function populateHeader(obj) {
- const header = document.querySelector("header");
- const myH1 = document.createElement("h1");
- myH1.textContent = obj.squadName;
- header.appendChild(myH1);
-
- const myPara = document.createElement("p");
- myPara.textContent = `Hometown: ${obj.homeTown} // Formed: ${obj.formed}`;
- header.appendChild(myPara);
-}
-
-function populateHeroes(obj) {
- const section = document.querySelector("section");
- const heroes = obj.members;
-
- for (const hero of heroes) {
- const myArticle = document.createElement("article");
- const myH2 = document.createElement("h2");
- myH2.textContent = hero.name;
- myArticle.appendChild(myH2);
-
- const myPara = document.createElement("p");
- myPara.textContent = `Secret identity: ${hero.secretIdentity}`;
- myArticle.appendChild(myPara);
-
- section.appendChild(myArticle);
- }
-}
-
-populate();
-```
-
----
-
-## JavaScript Frameworks: Main Features
-
-> Source:
-
-### Domain-Specific Languages (DSLs)
-
-**JSX (JavaScript and XML):**
-
-```jsx
-const subject = "World";
-const header = (
-
-
- );
-}
-```
-
-### Unique Keys
-
-Always provide a unique `key` prop to items rendered with iteration:
-
-```jsx
-const taskList = props.tasks?.map((task) => (
-
-));
-```
-
-React uses keys to track which items have changed, been added, or removed.
-
-### Component Architecture Example
-
-```jsx
-// src/components/Form.jsx
-function Form() {
- return (
-
-
-
- What needs to be done?
-
-
-
-
-
- );
-}
-
-export default Form;
-```
-
-```jsx
-// src/App.jsx
-import Form from "./components/Form";
-import FilterButton from "./components/FilterButton";
-import Todo from "./components/Todo";
-
-function App(props) {
- const taskList = props.tasks?.map((task) => (
-
- ));
-
- return (
-
-
TodoMatic
-
-
-
-
-
-
-
3 tasks remaining
-
- {taskList}
-
-
- );
-}
-
-export default App;
-```
-
----
-
-## A First Splash into JavaScript
-
-> Source:
-
-### Thinking Like a Programmer
-
-Programming requires breaking problems into actionable tasks, applying syntax to real-world problems, and understanding how features work together.
-
-### Number Guessing Game: Complete Example
-
-```javascript
-let randomNumber = Math.floor(Math.random() * 100) + 1;
-
-const guesses = document.querySelector(".guesses");
-const lastResult = document.querySelector(".lastResult");
-const lowOrHi = document.querySelector(".lowOrHi");
-const guessSubmit = document.querySelector(".guessSubmit");
-const guessField = document.querySelector(".guessField");
-
-let guessCount = 1;
-let resetButton;
-
-function checkGuess() {
- const userGuess = Number(guessField.value);
-
- if (guessCount === 1) {
- guesses.textContent = "Previous guesses:";
- }
- guesses.textContent = `${guesses.textContent} ${userGuess}`;
-
- if (userGuess === randomNumber) {
- lastResult.textContent = "Congratulations! You got it right!";
- lastResult.style.backgroundColor = "green";
- lowOrHi.textContent = "";
- setGameOver();
- } else if (guessCount === 10) {
- lastResult.textContent = "!!!GAME OVER!!!";
- lowOrHi.textContent = "";
- setGameOver();
- } else {
- lastResult.textContent = "Wrong!";
- lastResult.style.backgroundColor = "red";
- if (userGuess < randomNumber) {
- lowOrHi.textContent = "Last guess was too low!";
- } else if (userGuess > randomNumber) {
- lowOrHi.textContent = "Last guess was too high!";
- }
- }
-
- guessCount++;
- guessField.value = "";
- guessField.focus();
-}
-
-guessSubmit.addEventListener("click", checkGuess);
-
-function setGameOver() {
- guessField.disabled = true;
- guessSubmit.disabled = true;
- resetButton = document.createElement("button");
- resetButton.textContent = "Start new game";
- document.body.appendChild(resetButton);
- resetButton.addEventListener("click", resetGame);
-}
-
-function resetGame() {
- guessCount = 1;
-
- const resetParas = document.querySelectorAll(".resultParas p");
- for (const resetPara of resetParas) {
- resetPara.textContent = "";
- }
-
- resetButton.parentNode.removeChild(resetButton);
-
- guessField.disabled = false;
- guessSubmit.disabled = false;
- guessField.value = "";
- guessField.focus();
-
- lastResult.style.backgroundColor = "white";
-
- randomNumber = Math.floor(Math.random() * 100) + 1;
-}
-```
-
-### Key Techniques Demonstrated
-
-- `Math.floor(Math.random() * 100) + 1` -- generate random integer
-- `Number()` constructor -- convert input to a number
-- `document.querySelector()` -- select DOM elements
-- `.textContent` -- set text in elements
-- `.style.backgroundColor` -- change element styling
-- `.disabled` -- disable/enable form elements
-- `document.createElement()` -- create new HTML elements
-- `.appendChild()` / `.removeChild()` -- add/remove elements from DOM
-- `addEventListener()` -- attach event listeners
-- `.focus()` -- return focus to input field
-
----
-
-## JavaScript Learning Module Overview
-
-> Source:
-
-### Topics Covered in the MDN Learning Path
-
-**Core Language Fundamentals:**
-
-1. What is JavaScript?
-2. A first splash into JavaScript
-3. Troubleshooting JavaScript
-4. Variables
-5. Numbers and operators
-6. Strings
-7. Useful string methods
-8. Arrays
-
-**Control Flow and Functions:**
-9. Conditionals
-10. Loops
-11. Functions
-12. Build your own function
-13. Function return values
-
-**Events and DOM Manipulation:**
-14. Introduction to events
-15. Event bubbling
-16. Object basics
-17. DOM scripting
-
-**APIs and Data:**
-18. Making network requests
-19. Working with JSON
-
-**Error Handling:**
-20. JavaScript debugging and error handling
-
-### Practical Challenges
-
-- **Silly story generator** -- Variables, math, strings, arrays
-- **Image gallery** -- Loops, functions, conditionals, events
-- **House data UI** -- JSON fetching, filtering, rendering
-
----
-
-## JavaScript Built-in Objects Quick Reference
-
-> Source: (partial -- access was restricted)
-
-### Core Objects and Common Methods
-
-**Array Methods:**
-`concat()`, `every()`, `filter()`, `find()`, `findIndex()`, `forEach()`, `from()`, `includes()`, `indexOf()`, `isArray()`, `join()`, `keys()`, `lastIndexOf()`, `map()`, `of()`, `pop()`, `push()`, `reduce()`, `reduceRight()`, `reverse()`, `shift()`, `slice()`, `some()`, `sort()`, `splice()`, `toString()`, `unshift()`, `values()`
-
-**String Methods:**
-`charAt()`, `charCodeAt()`, `concat()`, `endsWith()`, `fromCharCode()`, `includes()`, `indexOf()`, `lastIndexOf()`, `match()`, `matchAll()`, `padEnd()`, `padStart()`, `repeat()`, `replace()`, `replaceAll()`, `search()`, `slice()`, `split()`, `startsWith()`, `substring()`, `toLowerCase()`, `toUpperCase()`, `trim()`, `trimEnd()`, `trimStart()`
-
-**Number Methods:**
-`isFinite()`, `isInteger()`, `isNaN()`, `isSafeInteger()`, `parseFloat()`, `parseInt()`, `toExponential()`, `toFixed()`, `toLocaleString()`, `toPrecision()`, `toString()`
-
-**Math Methods:**
-`abs()`, `acos()`, `asin()`, `atan()`, `atan2()`, `cbrt()`, `ceil()`, `cos()`, `exp()`, `floor()`, `log()`, `max()`, `min()`, `pow()`, `random()`, `round()`, `sign()`, `sin()`, `sqrt()`, `tan()`, `trunc()`
-
-**Date Methods:**
-`getDate()`, `getDay()`, `getFullYear()`, `getHours()`, `getMilliseconds()`, `getMinutes()`, `getMonth()`, `getSeconds()`, `getTime()`, `now()`, `parse()`, `setDate()`, `setFullYear()`, `setHours()`, `setMilliseconds()`, `setMinutes()`, `setMonth()`, `setSeconds()`, `toDateString()`, `toISOString()`, `toJSON()`, `toLocaleDateString()`, `toLocaleString()`, `toLocaleTimeString()`, `toString()`, `toTimeString()`, `toUTCString()`
-
-**JSON Methods:**
-`JSON.parse()`, `JSON.stringify()`
-
-**Global Functions:**
-`decodeURI()`, `decodeURIComponent()`, `encodeURI()`, `encodeURIComponent()`, `eval()`, `isFinite()`, `isNaN()`, `Number()`, `parseFloat()`, `parseInt()`, `String()`
-
-**Promise Methods:**
-`Promise.all()`, `Promise.allSettled()`, `Promise.any()`, `Promise.race()`, `Promise.reject()`, `Promise.resolve()`, `.then()`, `.catch()`, `.finally()`
-
----
-
-*This reference was compiled from the following sources:*
-
-1. **
-2. **
-3. **
-4. **
-5. **
-6. **
-7. **
-8. **
-9. **
-10. **
-11. **
-12. **
-13. **
-14. **
-15. **
-16. **
-17. **
-18. **
-19. **
-20. **
-21. **
-22. **
diff --git a/skills/create-web-form/references/php-cookies.md b/skills/create-web-form/references/php-cookies.md
deleted file mode 100644
index 3408527c..00000000
--- a/skills/create-web-form/references/php-cookies.md
+++ /dev/null
@@ -1,145 +0,0 @@
-# PHP Cookies Reference
-
-> Source:
-
-## What is a Cookie?
-
-A cookie is often used to identify a user. It is a small file that the server embeds on the user's computer. Each time the same computer requests a page with a browser, it will send the cookie too. With PHP, you can both create and retrieve cookie values.
-
-## Create a Cookie with `setcookie()`
-
-A cookie is created with the `setcookie()` function.
-
-### Syntax
-
-```php
-setcookie(name, value, expire, path, domain, secure, httponly);
-```
-
-### Parameters
-
-| Parameter | Description |
-|------------|---------------------------------------------------------------------------------------------------------|
-| `name` | Required. Specifies the name of the cookie. |
-| `value` | Optional. Specifies the value of the cookie. |
-| `expire` | Optional. Specifies when the cookie expires. The value `time() + 86400 * 30` will set the cookie to expire in 30 days. If this parameter is omitted or set to `0`, the cookie will expire at the end of the session (when the browser closes). Default is `0`. |
-| `path` | Optional. Specifies the server path of the cookie. If set to `"/"`, the cookie will be available within the entire domain. If set to `"/php/"`, the cookie will only be available within the `php` directory and all sub-directories of `php`. The default value is the current directory that the cookie is being set in. |
-| `domain` | Optional. Specifies the domain name of the cookie. To make the cookie available on all subdomains of `example.com`, set domain to `".example.com"`. |
-| `secure` | Optional. Specifies whether or not the cookie should only be transmitted over a secure HTTPS connection. `true` means the cookie will only be set if a secure connection exists. Default is `false`. |
-| `httponly` | Optional. If set to `true` the cookie will be accessible only through the HTTP protocol (the cookie will not be accessible by scripting languages, such as JavaScript). This setting can help to reduce identity theft through XSS attacks. Default is `false`. |
-
-**Note:** The `setcookie()` function must appear BEFORE the `` tag (before any output is sent to the browser).
-
-### Example: Create a Cookie
-
-The following example creates a cookie named "user" with the value "John Doe". The cookie will expire after 30 days. The `"/"` means that the cookie is available across the entire website:
-
-```php
-
-
-
-
-";
- echo "Value is: " . $_COOKIE[$cookie_name];
-}
-?>
-
-
-
-```
-
-**Note:** The `setcookie()` function sends the cookie as part of the HTTP response header. A cookie is not visible to the current page until the next loading of a page that the cookie should be visible for. So to test the cookie, the page must be reloaded or another page must be navigated to.
-
-## Retrieve a Cookie Value
-
-The PHP `$_COOKIE` superglobal variable is used to retrieve a cookie value.
-
-```php
-";
- echo "Value is: " . $_COOKIE["user"];
-}
-?>
-```
-
-**Tip:** Use the `isset()` function to find out if a cookie is set before attempting to access its value.
-
-## Modify a Cookie Value
-
-To modify a cookie, just set (again) the cookie using the `setcookie()` function:
-
-```php
-
-
-
-
-";
- echo "Value is: " . $_COOKIE[$cookie_name];
-}
-?>
-
-
-
-```
-
-## Delete a Cookie
-
-To delete a cookie, use the `setcookie()` function with an expiration date in the past:
-
-```php
-
-
-
-
-
-
-
-
-```
-
-## Check if Cookies are Enabled
-
-The following example creates a small script that checks whether cookies are enabled. First, try to create a test cookie with the `setcookie()` function, then count the `$_COOKIE` array variable:
-
-```php
-
-
-
-
- 0) {
- echo "Cookies are enabled.";
-} else {
- echo "Cookies are disabled.";
-}
-?>
-
-
-
-```
diff --git a/skills/create-web-form/references/php-forms.md b/skills/create-web-form/references/php-forms.md
deleted file mode 100644
index f0545be3..00000000
--- a/skills/create-web-form/references/php-forms.md
+++ /dev/null
@@ -1,601 +0,0 @@
-# PHP Forms Reference
-
-This reference consolidates key educational content from W3Schools covering PHP form handling, validation, required fields, URL/email validation, and a complete working example.
-
----
-
-## PHP Form Handling
-
-> **Source:**
-
-### How PHP Forms Work
-
-The PHP superglobals `$_GET` and `$_POST` are used to collect form data. When a user fills out a form and clicks submit, the form data is sent to a PHP file specified in the `action` attribute of the `
` tag.
-
-### A Simple HTML Form
-
-```html
-
-
-
-
- Name:
- E-mail:
-
-
-
-
-
-```
-
-When the user fills out the form and clicks submit, the form data is sent via HTTP POST to `welcome.php`. The processing file can then access the data:
-
-```php
-
-
-
-Welcome
-Your email address is:
-
-
-
-```
-
-### Using the GET Method
-
-```html
-
- Name:
- E-mail:
-
-
-```
-
-```php
-
-
-
-Welcome
-Your email address is:
-
-
-
-```
-
-### GET vs. POST
-
-| Feature | GET | POST |
-|---------|-----|------|
-| Visibility | Data is visible in the URL (as query string parameters) | Data is NOT displayed in the URL |
-| Bookmarking | Pages can be bookmarked with query string values | Pages cannot be bookmarked with submitted data |
-| Data length | Limited (max URL length is approximately 2048 characters) | No limitations on data size |
-| Security | Should NEVER be used for sending sensitive data (passwords, etc.) | More secure than GET for sensitive data |
-| Caching | Requests can be cached | Requests are not cached |
-| Browser history | Parameters remain in browser history | Parameters are not saved in browser history |
-| Use case | Non-sensitive data, search queries, filter parameters | Sensitive data, form submissions that change data |
-
-**Important:** Both `$_GET` and `$_POST` are superglobal arrays. They are always accessible regardless of scope, and you can access them from any function, class, or file without having to do anything special.
-
----
-
-## PHP Form Validation
-
-> **Source:**
-
-### Think Security When Processing PHP Forms
-
-These pages show how to process PHP forms with security in mind. Proper validation of form data is important to protect your form from hackers and spammers.
-
-### The HTML Form
-
-The form used throughout this tutorial:
-
-- **Fields:** Name, E-mail, Website, Comment, Gender
-- **Validation rules:**
-
-| Field | Validation Rules |
-|---------|-----------------|
-| Name | Required. Must only contain letters and whitespace |
-| E-mail | Required. Must contain a valid email address (with `@` and `.`) |
-| Website | Optional. If present, must contain a valid URL |
-| Comment | Optional. Multi-line input field (textarea) |
-| Gender | Required. Must select one |
-
-### The Form Element
-
-```html
-
">
-```
-
-The `$_SERVER["PHP_SELF"]` variable returns the filename of the currently executing script. So the form data is sent to the page itself instead of a different page.
-
-### What is `$_SERVER["PHP_SELF"]`?
-
-`$_SERVER["PHP_SELF"]` is a superglobal variable that returns the filename of the currently executing script relative to the document root.
-
-### Big Note on PHP Form Security
-
-The `$_SERVER["PHP_SELF"]` variable can be exploited by hackers via **Cross-Site Scripting (XSS)** attacks.
-
-**XSS** enables attackers to inject client-side script into web pages viewed by other users. For example, if the form is on a page called `test_form.php`, a user could enter the following URL:
-
-```
-http://www.example.com/test_form.php/%22%3E%3Cscript%3Ealert('hacked')%3C/script%3E
-```
-
-This translates to:
-
-```html
-
-```
-
-The `
-
-```
-
-### Static File Organization
-
-```
-static/
- css/
- style.css
- js/
- main.js
- images/
- logo.png
-```
-
----
-
-## Sessions and Cookies
-
-### Using Sessions
-
-```python
-from flask import session
-
-app.secret_key = 'your-secret-key'
-
-@app.route('/login', methods=['POST'])
-def login():
- session['username'] = request.form['username']
- return redirect(url_for('index'))
-
-@app.route('/logout')
-def logout():
- session.pop('username', None)
- return redirect(url_for('index'))
-
-@app.route('/')
-def index():
- if 'username' in session:
- return f'Logged in as {session["username"]}'
- return 'You are not logged in'
-```
-
-### Setting Cookies
-
-```python
-from flask import make_response
-
-@app.route('/set-cookie')
-def set_cookie():
- response = make_response('Cookie set!')
- response.set_cookie('username', 'flask_user', max_age=3600)
- return response
-
-@app.route('/get-cookie')
-def get_cookie():
- username = request.cookies.get('username')
- return f'Username: {username}'
-```
-
----
-
-## Error Handling
-
-### Custom Error Pages
-
-```python
-@app.errorhandler(404)
-def page_not_found(error):
- return render_template('404.html'), 404
-
-@app.errorhandler(500)
-def internal_server_error(error):
- return render_template('500.html'), 500
-```
-
-### Aborting Requests
-
-```python
-from flask import abort
-
-@app.route('/user/')
-def get_user(user_id):
- user = find_user(user_id)
- if user is None:
- abort(404)
- return render_template('user.html', user=user)
-```
-
----
-
-## Redirects
-
-```python
-from flask import redirect, url_for
-
-@app.route('/old-page')
-def old_page():
- return redirect(url_for('new_page'))
-
-@app.route('/new-page')
-def new_page():
- return 'This is the new page.'
-
-# Redirect with status code
-@app.route('/moved')
-def moved():
- return redirect(url_for('new_page'), code=301)
-```
-
----
-
-## Flask Extensions
-
-Common Flask extensions for building web applications:
-
-| Extension | Purpose |
-|-----------|---------|
-| **Flask-SQLAlchemy** | Database ORM integration |
-| **Flask-WTF** | Form handling with WTForms and CSRF protection |
-| **Flask-Login** | User session management and authentication |
-| **Flask-Mail** | Email sending support |
-| **Flask-Migrate** | Database migration management via Alembic |
-| **Flask-RESTful** | Building REST APIs |
-| **Flask-CORS** | Cross-Origin Resource Sharing support |
-| **Flask-Caching** | Response caching |
-| **Flask-Limiter** | Rate limiting for API endpoints |
-
----
-
-## Key Takeaways
-
-1. **Flask is a micro-framework** -- it provides the essentials (routing, templates, request handling) and lets you choose extensions for everything else.
-2. **Routing maps URLs to functions** using the `@app.route()` decorator with support for dynamic URL parameters and multiple HTTP methods.
-3. **Jinja2 templates** support inheritance, loops, conditionals, and variable output for building dynamic HTML pages.
-4. **The `request` object** gives access to form data, query parameters, headers, cookies, and uploaded files.
-5. **Use `url_for()`** to build URLs dynamically instead of hard-coding paths.
-6. **Debug mode** is essential for development but must be disabled in production.
-7. **Virtual environments** isolate project dependencies and should always be used.
-8. **Static files** are served from the `static/` directory and referenced using `url_for('static', filename='...')`.
-9. **Sessions** provide server-side user state management, requiring a `SECRET_KEY` configuration.
-10. **Flask extensions** provide modular functionality for databases, forms, authentication, email, and more.
diff --git a/skills/create-web-form/references/python-contact-form.md b/skills/create-web-form/references/python-contact-form.md
deleted file mode 100644
index 42a064fa..00000000
--- a/skills/create-web-form/references/python-contact-form.md
+++ /dev/null
@@ -1,453 +0,0 @@
-# Python Contact Form Reference
-
-> Source:
-
-This reference covers how to build a contact form in Python, including creating HTML forms, handling form submissions with Flask, sending emails with `smtplib`, and validating user input.
-
----
-
-## Overview
-
-A Python contact form typically involves:
-
-- An **HTML front end** with a form for user input (name, email, message)
-- A **Python back end** (usually Flask or Django) to receive and process form data
-- An **email-sending mechanism** (using `smtplib` or a transactional email API) to deliver form submissions
-- **Input validation** on both the client side (HTML5 attributes) and server side (Python logic)
-
----
-
-## Setting Up a Flask Project
-
-### Install Flask
-
-```bash
-pip install Flask
-```
-
-### Basic Project Structure
-
-```
-contact-form/
- app.py
- templates/
- contact.html
- success.html
- static/
- style.css
-```
-
-### Minimal Flask Application
-
-```python
-from flask import Flask, render_template, request, redirect, url_for
-
-app = Flask(__name__)
-
-@app.route('/')
-def home():
- return render_template('contact.html')
-
-if __name__ == '__main__':
- app.run(debug=True)
-```
-
----
-
-## Creating the HTML Contact Form
-
-### Basic Contact Form Template
-
-```html
-
-
-
-
-
- Contact Us
-
-
-
Contact Us
-
-
- Name:
-
-
-
- Email:
-
-
-
- Subject:
-
-
-
- Message:
-
-
-
-
-
-
-```
-
-### Key HTML Form Attributes
-
-| Attribute | Description |
-|------------|-------------|
-| `method` | HTTP method -- use `POST` for contact forms to keep data out of the URL |
-| `action` | The server endpoint that processes the form data |
-| `required` | HTML5 attribute that enforces client-side validation |
-| `name` | Identifies each field in the submitted form data |
-
----
-
-## Handling Form Submissions in Flask
-
-### Processing POST Requests
-
-```python
-from flask import Flask, render_template, request, redirect, url_for, flash
-
-app = Flask(__name__)
-app.secret_key = 'your-secret-key'
-
-@app.route('/contact', methods=['GET', 'POST'])
-def contact():
- if request.method == 'POST':
- name = request.form.get('name')
- email = request.form.get('email')
- subject = request.form.get('subject')
- message = request.form.get('message')
-
- # Validate inputs
- if not name or not email or not message:
- flash('Please fill in all required fields.', 'error')
- return redirect(url_for('contact'))
-
- # Send the email
- send_email(name, email, subject, message)
-
- flash('Your message has been sent successfully!', 'success')
- return redirect(url_for('contact'))
-
- return render_template('contact.html')
-```
-
-### Accessing Form Data
-
-Flask provides `request.form` to access submitted form data:
-
-| Method | Description |
-|--------|-------------|
-| `request.form['key']` | Raises `KeyError` if the key is missing |
-| `request.form.get('key')` | Returns `None` if the key is missing (safer) |
-| `request.form.get('key', 'default')` | Returns a default value if the key is missing |
-
----
-
-## Sending Emails with `smtplib`
-
-### Basic Email Sending Function
-
-```python
-import smtplib
-from email.mime.text import MIMEText
-from email.mime.multipart import MIMEMultipart
-
-def send_email(name, email, subject, message):
- sender_email = "your-email@example.com"
- receiver_email = "recipient@example.com"
- password = "your-email-password"
-
- # Create the email message
- msg = MIMEMultipart()
- msg['From'] = sender_email
- msg['To'] = receiver_email
- msg['Subject'] = f"Contact Form: {subject}"
-
- # Email body
- body = f"""
- New contact form submission:
-
- Name: {name}
- Email: {email}
- Subject: {subject}
- Message: {message}
- """
- msg.attach(MIMEText(body, 'plain'))
-
- # Send the email
- try:
- with smtplib.SMTP('smtp.gmail.com', 587) as server:
- server.starttls()
- server.login(sender_email, password)
- server.send_message(msg)
- except Exception as e:
- print(f"Error sending email: {e}")
- raise
-```
-
-### Common SMTP Server Settings
-
-| Provider | SMTP Server | Port (TLS) | Port (SSL) |
-|----------|-------------|------------|------------|
-| Gmail | `smtp.gmail.com` | 587 | 465 |
-| Outlook | `smtp-mail.outlook.com` | 587 | -- |
-| Yahoo | `smtp.mail.yahoo.com` | 587 | 465 |
-| Mailtrap (testing) | `sandbox.smtp.mailtrap.io` | 587 | 465 |
-
-### Using Environment Variables for Credentials
-
-Never hard-code email credentials. Use environment variables instead:
-
-```python
-import os
-
-SMTP_SERVER = os.environ.get('SMTP_SERVER', 'smtp.gmail.com')
-SMTP_PORT = int(os.environ.get('SMTP_PORT', 587))
-SMTP_USERNAME = os.environ.get('SMTP_USERNAME')
-SMTP_PASSWORD = os.environ.get('SMTP_PASSWORD')
-```
-
----
-
-## Server-Side Validation
-
-### Validating Form Input
-
-```python
-import re
-
-def validate_contact_form(name, email, message):
- errors = []
-
- if not name or len(name.strip()) < 2:
- errors.append('Name must be at least 2 characters long.')
-
- if not email or not re.match(r'^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$', email):
- errors.append('Please provide a valid email address.')
-
- if not message or len(message.strip()) < 10:
- errors.append('Message must be at least 10 characters long.')
-
- return errors
-```
-
-### Integrating Validation into the Route
-
-```python
-@app.route('/contact', methods=['GET', 'POST'])
-def contact():
- if request.method == 'POST':
- name = request.form.get('name', '').strip()
- email = request.form.get('email', '').strip()
- subject = request.form.get('subject', '').strip()
- message = request.form.get('message', '').strip()
-
- errors = validate_contact_form(name, email, message)
-
- if errors:
- for error in errors:
- flash(error, 'error')
- return render_template('contact.html',
- name=name, email=email,
- subject=subject, message=message)
-
- send_email(name, email, subject, message)
- flash('Message sent successfully!', 'success')
- return redirect(url_for('contact'))
-
- return render_template('contact.html')
-```
-
----
-
-## Using Mailtrap for Email Testing
-
-Mailtrap provides a safe sandbox SMTP server for testing email sending without delivering to real inboxes.
-
-### Mailtrap Configuration
-
-```python
-import smtplib
-from email.mime.text import MIMEText
-
-def send_test_email(name, email, subject, message):
- sender = "from@example.com"
- receiver = "to@example.com"
-
- body = f"Name: {name}\nEmail: {email}\nSubject: {subject}\nMessage: {message}"
-
- msg = MIMEText(body)
- msg['Subject'] = f"Contact Form: {subject}"
- msg['From'] = sender
- msg['To'] = receiver
-
- with smtplib.SMTP("sandbox.smtp.mailtrap.io", 2525) as server:
- server.login("your_mailtrap_username", "your_mailtrap_password")
- server.sendmail(sender, receiver, msg.as_string())
-```
-
----
-
-## Using Flask-Mail Extension
-
-Flask-Mail simplifies email configuration and sending within Flask applications.
-
-### Installation and Setup
-
-```bash
-pip install Flask-Mail
-```
-
-```python
-from flask import Flask
-from flask_mail import Mail, Message
-
-app = Flask(__name__)
-
-app.config['MAIL_SERVER'] = 'smtp.gmail.com'
-app.config['MAIL_PORT'] = 587
-app.config['MAIL_USE_TLS'] = True
-app.config['MAIL_USERNAME'] = os.environ.get('MAIL_USERNAME')
-app.config['MAIL_PASSWORD'] = os.environ.get('MAIL_PASSWORD')
-app.config['MAIL_DEFAULT_SENDER'] = os.environ.get('MAIL_DEFAULT_SENDER')
-
-mail = Mail(app)
-```
-
-### Sending Email with Flask-Mail
-
-```python
-@app.route('/contact', methods=['POST'])
-def contact():
- name = request.form.get('name')
- email = request.form.get('email')
- subject = request.form.get('subject')
- message_body = request.form.get('message')
-
- msg = Message(
- subject=f"Contact Form: {subject}",
- recipients=['admin@example.com'],
- reply_to=email
- )
- msg.body = f"From: {name} ({email})\n\n{message_body}"
-
- try:
- mail.send(msg)
- flash('Message sent successfully!', 'success')
- except Exception as e:
- flash('An error occurred. Please try again later.', 'error')
-
- return redirect(url_for('contact'))
-```
-
----
-
-## CSRF Protection
-
-Cross-Site Request Forgery (CSRF) protection prevents malicious sites from submitting forms on behalf of a user.
-
-### Using Flask-WTF for CSRF
-
-```bash
-pip install Flask-WTF
-```
-
-```python
-from flask_wtf import FlaskForm
-from wtforms import StringField, TextAreaField, SubmitField
-from wtforms.validators import DataRequired, Email
-
-class ContactForm(FlaskForm):
- name = StringField('Name', validators=[DataRequired()])
- email = StringField('Email', validators=[DataRequired(), Email()])
- subject = StringField('Subject', validators=[DataRequired()])
- message = TextAreaField('Message', validators=[DataRequired()])
- submit = SubmitField('Send Message')
-```
-
-In the template, include the CSRF token:
-
-```html
-
- {{ form.hidden_tag() }}
-
-
-```
-
----
-
-## Complete Example Application
-
-```python
-import os
-import smtplib
-from email.mime.text import MIMEText
-from email.mime.multipart import MIMEMultipart
-from flask import Flask, render_template, request, redirect, url_for, flash
-
-app = Flask(__name__)
-app.secret_key = os.environ.get('SECRET_KEY', 'dev-secret-key')
-
-def send_email(name, email, subject, message):
- sender = os.environ.get('MAIL_USERNAME')
- receiver = os.environ.get('MAIL_RECIPIENT')
- password = os.environ.get('MAIL_PASSWORD')
-
- msg = MIMEMultipart()
- msg['From'] = sender
- msg['To'] = receiver
- msg['Subject'] = f"Contact Form: {subject}"
-
- body = f"Name: {name}\nEmail: {email}\nSubject: {subject}\n\n{message}"
- msg.attach(MIMEText(body, 'plain'))
-
- with smtplib.SMTP(os.environ.get('SMTP_SERVER', 'smtp.gmail.com'), 587) as server:
- server.starttls()
- server.login(sender, password)
- server.send_message(msg)
-
-@app.route('/')
-def home():
- return redirect(url_for('contact'))
-
-@app.route('/contact', methods=['GET', 'POST'])
-def contact():
- if request.method == 'POST':
- name = request.form.get('name', '').strip()
- email = request.form.get('email', '').strip()
- subject = request.form.get('subject', '').strip()
- message = request.form.get('message', '').strip()
-
- if not all([name, email, message]):
- flash('Please fill in all required fields.', 'error')
- return render_template('contact.html')
-
- try:
- send_email(name, email, subject, message)
- flash('Your message has been sent!', 'success')
- except Exception:
- flash('Failed to send message. Please try again.', 'error')
-
- return redirect(url_for('contact'))
-
- return render_template('contact.html')
-
-if __name__ == '__main__':
- app.run(debug=True)
-```
-
----
-
-## Key Takeaways
-
-1. **Use Flask** as a lightweight Python web framework for handling contact form submissions via `request.form`.
-2. **Use `smtplib`** or **Flask-Mail** for sending emails from the contact form.
-3. **Validate input** on both the client side (HTML5 `required`, `type="email"`) and server side (Python regex, length checks).
-4. **Never hard-code credentials** -- use environment variables or a `.env` file.
-5. **Use Mailtrap** or a similar service for testing email delivery without sending to real inboxes.
-6. **Add CSRF protection** using Flask-WTF to guard against cross-site request forgery attacks.
-7. **Flash messages** provide user feedback for successful submissions and validation errors.
-8. **Use `MIMEMultipart`** for constructing well-formatted email messages with headers and body content.
diff --git a/skills/create-web-form/references/python-flask-app.md b/skills/create-web-form/references/python-flask-app.md
deleted file mode 100644
index 80540d89..00000000
--- a/skills/create-web-form/references/python-flask-app.md
+++ /dev/null
@@ -1,449 +0,0 @@
-# Python Flask App Reference
-
-> Source:
-
-This reference covers building Python web applications, including how the web works, choosing a framework, building and deploying a Flask application, and understanding key web development concepts.
-
----
-
-## Overview
-
-Python offers several approaches to web development:
-
-- **Web frameworks** (Flask, Django, FastAPI) that handle routing, templates, and data
-- **Hosting platforms** (Google App Engine, PythonAnywhere, Heroku, etc.) for deployment
-- **WSGI** (Web Server Gateway Interface) as the standard interface between web servers and Python applications
-
----
-
-## How the Web Works
-
-### The HTTP Request-Response Cycle
-
-1. A client (browser) sends an **HTTP request** to a server
-2. The server processes the request and returns an **HTTP response**
-3. The browser renders the response content
-
-### HTTP Methods
-
-| Method | Purpose |
-|--------|---------|
-| `GET` | Retrieve data from the server |
-| `POST` | Submit data to the server |
-| `PUT` | Update existing data on the server |
-| `DELETE` | Remove data from the server |
-
-### URL Structure
-
-```
-https://example.com:443/path/to/resource?key=value#section
- | | | | | |
-scheme host port path query fragment
-```
-
----
-
-## Choosing a Python Web Framework
-
-### Flask
-
-- **Micro-framework** -- minimal core with extensions for added functionality
-- Best for small to medium applications, APIs, and learning
-- No database abstraction layer, form validation, or other components built in
-- Extensions available for everything (SQLAlchemy, WTForms, Login, etc.)
-
-### Django
-
-- **Full-stack framework** -- batteries included
-- Best for large applications with built-in ORM, admin panel, authentication
-- Opinionated project structure
-
-### FastAPI
-
-- **Modern, fast, async framework** -- built on Starlette and Pydantic
-- Best for building APIs with automatic documentation
-- Built-in data validation and serialization
-
----
-
-## Building a Flask Application
-
-### Installation
-
-```bash
-python -m pip install flask
-```
-
-### Minimal Application
-
-```python
-from flask import Flask
-
-app = Flask(__name__)
-
-@app.route('/')
-def home():
- return 'Hello, World!'
-
-if __name__ == '__main__':
- app.run(host='0.0.0.0', port=5000, debug=True)
-```
-
-### Running the Application
-
-```bash
-# Method 1: Direct execution
-python app.py
-
-# Method 2: Using Flask CLI
-export FLASK_APP=app.py
-export FLASK_ENV=development
-flask run
-```
-
----
-
-## Routing
-
-### Basic Routes
-
-```python
-@app.route('/')
-def home():
- return 'Home Page'
-
-@app.route('/about')
-def about():
- return 'About Page'
-
-@app.route('/contact')
-def contact():
- return 'Contact Page'
-```
-
-### Dynamic Routes with URL Parameters
-
-```python
-@app.route('/user/')
-def show_user(username):
- return f'User: {username}'
-
-@app.route('/post/')
-def show_post(post_id):
- return f'Post ID: {post_id}'
-```
-
-### URL Converters
-
-| Converter | Description |
-|-----------|-------------|
-| `string` | Accepts any text without a slash (default) |
-| `int` | Accepts positive integers |
-| `float` | Accepts positive floating-point values |
-| `path` | Like `string` but also accepts slashes |
-| `uuid` | Accepts UUID strings |
-
-### Specifying HTTP Methods
-
-```python
-@app.route('/login', methods=['GET', 'POST'])
-def login():
- if request.method == 'POST':
- return do_login()
- return show_login_form()
-```
-
----
-
-## Templates with Jinja2
-
-### Basic Template Rendering
-
-```python
-from flask import render_template
-
-@app.route('/hello/')
-def hello(name):
- return render_template('hello.html', name=name)
-```
-
-### Template Inheritance
-
-**Base template (`templates/base.html`):**
-
-```html
-
-
-
-
- {% block title %}My App{% endblock %}
-
-
-
-
-
-
- {% block content %}{% endblock %}
-
-
-
-
-
-```
-
-**Child template (`templates/home.html`):**
-
-```html
-{% extends "base.html" %}
-
-{% block title %}Home{% endblock %}
-
-{% block content %}
-
Welcome to My App
-
This is the home page.
-{% endblock %}
-```
-
-### Jinja2 Template Syntax
-
-| Syntax | Purpose |
-|--------|---------|
-| `{{ variable }}` | Output the value of a variable |
-| `{% statement %}` | Execute a control flow statement |
-| `{# comment #}` | Template comment (not rendered) |
-| `{{ url_for('func') }}` | Generate a URL for a view function |
-| `{{ url_for('static', filename='style.css') }}` | Generate a URL for a static file |
-
-### Control Flow in Templates
-
-```html
-{% if user %}
-
Hello, {{ user.name }}!
-{% else %}
-
Hello, stranger!
-{% endif %}
-
-
-{% for item in items %}
-
{{ item }}
-{% endfor %}
-
-```
-
----
-
-## Project Structure
-
-### Recommended Flask Project Layout
-
-```
-my_flask_app/
- app.py # Application entry point
- config.py # Configuration settings
- requirements.txt # Python dependencies
- static/ # Static files (CSS, JS, images)
- style.css
- script.js
- templates/ # Jinja2 HTML templates
- base.html
- home.html
- about.html
- models.py # Database models (if using a database)
- forms.py # WTForms form classes
-```
-
-### Larger Application Structure (Blueprints)
-
-```
-my_flask_app/
- app/
- __init__.py # Application factory
- models.py
- auth/
- __init__.py
- routes.py
- forms.py
- templates/
- login.html
- register.html
- main/
- __init__.py
- routes.py
- templates/
- home.html
- about.html
- config.py
- requirements.txt
- run.py
-```
-
----
-
-## Working with Static Files
-
-Flask automatically serves files from the `static/` directory.
-
-### Referencing Static Files in Templates
-
-```html
-
-
-
-```
-
----
-
-## Database Integration
-
-### Using Flask-SQLAlchemy
-
-```bash
-pip install Flask-SQLAlchemy
-```
-
-```python
-from flask import Flask
-from flask_sqlalchemy import SQLAlchemy
-
-app = Flask(__name__)
-app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///site.db'
-db = SQLAlchemy(app)
-
-class User(db.Model):
- id = db.Column(db.Integer, primary_key=True)
- username = db.Column(db.String(80), unique=True, nullable=False)
- email = db.Column(db.String(120), unique=True, nullable=False)
-
- def __repr__(self):
- return f''
-```
-
-### Creating the Database
-
-```python
-with app.app_context():
- db.create_all()
-```
-
----
-
-## Deployment
-
-### Deploying to PythonAnywhere
-
-1. Create a free account at pythonanywhere.com
-2. Upload your code via git or the file browser
-3. Set up a virtual environment and install dependencies
-4. Configure a WSGI file pointing to your Flask app
-5. Reload the web application
-
-### Deploying to Heroku
-
-1. Create a `Procfile`:
-
-```
-web: gunicorn app:app
-```
-
-1. Create a `requirements.txt`:
-
-```bash
-pip freeze > requirements.txt
-```
-
-1. Deploy:
-
-```bash
-heroku create
-git push heroku main
-```
-
-### Deploying to Google App Engine
-
-Create an `app.yaml` configuration:
-
-```yaml
-runtime: python39
-entrypoint: gunicorn -b :$PORT app:app
-
-handlers:
- - url: /static
- static_dir: static
- - url: /.*
- script: auto
-```
-
-### WSGI Servers
-
-For production, use a WSGI server instead of Flask's built-in development server:
-
-| Server | Description |
-|--------|-------------|
-| **Gunicorn** | Production-grade WSGI server for Unix |
-| **Waitress** | Production-grade WSGI server for Windows and Unix |
-| **uWSGI** | Full-featured WSGI server with many deployment options |
-
-```bash
-# Using Gunicorn
-pip install gunicorn
-gunicorn app:app
-
-# Using Waitress
-pip install waitress
-waitress-serve --port=5000 app:app
-```
-
----
-
-## Environment Configuration
-
-### Using Environment Variables
-
-```python
-import os
-
-class Config:
- SECRET_KEY = os.environ.get('SECRET_KEY', 'dev-fallback-key')
- SQLALCHEMY_DATABASE_URI = os.environ.get('DATABASE_URL', 'sqlite:///site.db')
- DEBUG = os.environ.get('FLASK_DEBUG', False)
-```
-
-### Using python-dotenv
-
-```bash
-pip install python-dotenv
-```
-
-Create a `.env` file:
-
-```
-SECRET_KEY=your-secret-key-here
-DATABASE_URL=sqlite:///site.db
-FLASK_DEBUG=1
-```
-
-Load in your application:
-
-```python
-from dotenv import load_dotenv
-load_dotenv()
-```
-
----
-
-## Key Takeaways
-
-1. **Flask is a micro-framework** -- it provides routing, templates, and request handling while leaving other choices (database, forms, authentication) to extensions.
-2. **Use Jinja2 template inheritance** to keep HTML DRY with base templates and child blocks.
-3. **Organize your project** with a clear structure: separate `templates/`, `static/`, and Python modules.
-4. **Use Blueprints** for larger applications to group related routes and templates.
-5. **Never use the Flask development server in production** -- use Gunicorn, Waitress, or uWSGI.
-6. **Store configuration in environment variables** using `python-dotenv` or platform-specific config.
-7. **Use `url_for()`** to generate URLs dynamically rather than hard-coding paths.
-8. **Flask-SQLAlchemy** provides a convenient ORM layer for database operations.
-9. **Multiple hosting platforms** support Flask apps: PythonAnywhere, Heroku, Google App Engine, and others.
diff --git a/skills/create-web-form/references/python-flask.md b/skills/create-web-form/references/python-flask.md
deleted file mode 100644
index 6010de62..00000000
--- a/skills/create-web-form/references/python-flask.md
+++ /dev/null
@@ -1,432 +0,0 @@
-# Python Flask Forms Reference
-
-> Source:
-
-This reference covers how to work with forms in Flask, including handling GET and POST requests, using WTForms for form creation and validation, implementing CSRF protection, and managing file uploads.
-
----
-
-## Overview
-
-Flask provides tools for handling web forms through:
-
-- The `request` object for accessing submitted form data
-- **Flask-WTF** and **WTForms** for declarative form creation, validation, and CSRF protection
-- Jinja2 templates for rendering form HTML
-- Flash messages for user feedback
-
----
-
-## Basic Form Handling in Flask
-
-### Handling GET and POST Requests
-
-```python
-from flask import Flask, render_template, request, redirect, url_for, flash
-
-app = Flask(__name__)
-app.secret_key = 'your-secret-key'
-
-@app.route('/login', methods=['GET', 'POST'])
-def login():
- if request.method == 'POST':
- username = request.form.get('username')
- password = request.form.get('password')
-
- if username == 'admin' and password == 'secret':
- flash('Login successful!', 'success')
- return redirect(url_for('dashboard'))
- else:
- flash('Invalid credentials.', 'error')
-
- return render_template('login.html')
-```
-
-### The `request.form` Object
-
-The `request.form` is an `ImmutableMultiDict` that contains parsed form data from POST and PUT requests.
-
-| Method | Description |
-|--------|-------------|
-| `request.form['key']` | Access a value; raises `400 Bad Request` if missing |
-| `request.form.get('key')` | Access a value; returns `None` if missing |
-| `request.form.get('key', 'default')` | Access a value with a fallback default |
-| `request.form.getlist('key')` | Returns a list of all values for a key (for multi-select fields) |
-
-### The `request.method` Attribute
-
-Used to distinguish between GET (displaying the form) and POST (processing the submission):
-
-```python
-@app.route('/register', methods=['GET', 'POST'])
-def register():
- if request.method == 'POST':
- # Process the form submission
- pass
- # GET: Display the form
- return render_template('register.html')
-```
-
----
-
-## Flask-WTF and WTForms
-
-### Installation
-
-```bash
-pip install Flask-WTF
-```
-
-Flask-WTF is a Flask extension that integrates WTForms. It provides:
-
-- CSRF protection out of the box
-- Integration with Flask's `request` object
-- Jinja2 template helpers
-- File upload support
-
-### Configuration
-
-```python
-from flask import Flask
-
-app = Flask(__name__)
-app.config['SECRET_KEY'] = 'your-secret-key' # Required for CSRF
-app.config['WTF_CSRF_ENABLED'] = True # Enabled by default
-```
-
----
-
-## Defining Forms with WTForms
-
-### Basic Form Class
-
-```python
-from flask_wtf import FlaskForm
-from wtforms import StringField, PasswordField, TextAreaField, SubmitField
-from wtforms.validators import DataRequired, Email, Length, EqualTo
-
-class RegistrationForm(FlaskForm):
- username = StringField('Username', validators=[
- DataRequired(),
- Length(min=3, max=25)
- ])
- email = StringField('Email', validators=[
- DataRequired(),
- Email()
- ])
- password = PasswordField('Password', validators=[
- DataRequired(),
- Length(min=6)
- ])
- confirm_password = PasswordField('Confirm Password', validators=[
- DataRequired(),
- EqualTo('password', message='Passwords must match.')
- ])
- submit = SubmitField('Register')
-```
-
-### Common Field Types
-
-| Field Type | Description |
-|-----------|-------------|
-| `StringField` | Single-line text input |
-| `PasswordField` | Password input (masked characters) |
-| `TextAreaField` | Multi-line text input |
-| `IntegerField` | Integer input with built-in type coercion |
-| `FloatField` | Float input with built-in type coercion |
-| `BooleanField` | Checkbox (True/False) |
-| `SelectField` | Dropdown select menu |
-| `SelectMultipleField` | Multiple-select dropdown |
-| `RadioField` | Radio button group |
-| `FileField` | File upload input |
-| `HiddenField` | Hidden input field |
-| `SubmitField` | Submit button |
-| `DateField` | Date picker input |
-
-### Common Validators
-
-| Validator | Description |
-|-----------|-------------|
-| `DataRequired()` | Field must not be empty |
-| `Email()` | Must be a valid email format |
-| `Length(min, max)` | String length must fall within range |
-| `EqualTo('field')` | Must match another field's value |
-| `NumberRange(min, max)` | Numeric value must fall within range |
-| `Regexp(regex)` | Must match the provided regular expression |
-| `URL()` | Must be a valid URL |
-| `Optional()` | Field is allowed to be empty |
-| `InputRequired()` | Raw input data must be present |
-| `AnyOf(values)` | Must be one of the provided values |
-| `NoneOf(values)` | Must not be any of the provided values |
-
----
-
-## Using Forms in Routes
-
-### Route with WTForms
-
-```python
-@app.route('/register', methods=['GET', 'POST'])
-def register():
- form = RegistrationForm()
-
- if form.validate_on_submit():
- # form.validate_on_submit() checks:
- # 1. Is the request method POST?
- # 2. Does the form pass all validation?
- # 3. Is the CSRF token valid?
-
- username = form.username.data
- email = form.email.data
- password = form.password.data
-
- # Process the data (e.g., save to database)
- flash(f'Account created for {username}!', 'success')
- return redirect(url_for('login'))
-
- return render_template('register.html', form=form)
-```
-
-### `validate_on_submit()` Method
-
-This method combines two checks:
-
-1. `request.method == 'POST'` -- ensures the form was actually submitted
-2. `form.validate()` -- runs all validators on the form fields and checks the CSRF token
-
-Returns `True` only if both conditions are met.
-
----
-
-## Rendering Forms in Templates
-
-### Basic Template Rendering
-
-```html
-
- {% endfor %}
- {% endif %}
-{% endwith %}
-```
-
----
-
-## Key Takeaways
-
-1. **Use Flask-WTF** for form handling -- it provides CSRF protection, validation, and clean form definitions.
-2. **`validate_on_submit()`** is the primary method for checking both submission and validation in one call.
-3. **Always include `{{ form.hidden_tag() }}`** in templates to enable CSRF protection.
-4. **Use WTForms validators** for clean, declarative server-side validation.
-5. **Custom validators** can be defined inline on the form class or as reusable functions.
-6. **Flash messages** provide user feedback for form actions.
-7. **File uploads** require `enctype="multipart/form-data"` and should use `secure_filename()` for safety.
-8. **Set a `SECRET_KEY`** in your Flask config -- it is required for CSRF tokens and session management.
diff --git a/skills/create-web-form/references/security.md b/skills/create-web-form/references/security.md
deleted file mode 100644
index 24fbca0b..00000000
--- a/skills/create-web-form/references/security.md
+++ /dev/null
@@ -1,136 +0,0 @@
-# Web Security Reference
-
-> Source:
-
-## Overview
-
-Web security focuses on protecting sensitive information (customer data, passwords, banking info, internal algorithms) from unauthorized access that could lead to competitive disadvantage, service disruption, or customer privacy violations.
-
-## Security vs. Privacy
-
-- **Security**: Protecting private data and systems against unauthorized access (internal and external data).
-- **Privacy**: Giving users control over data collection, storage, and usage with transparency and consent.
-
-## Security Features Provided by Browsers
-
-### Same-Origin Policy (SOP) and CORS
-
-- **Same-Origin Policy**: Restricts documents or scripts from one origin interacting with resources from another origin.
-- **CORS** (Cross-Origin Resource Sharing): An HTTP-header mechanism allowing servers to permit cross-origin resource requests when needed.
-
-### HTTP Communication Security
-
-- **HTTPS/TLS**: Encrypts data during transport, preventing third-party interception.
-- **Certificate Transparency (CT)**: An open framework protecting against certificate misissuance through public logging.
-
-### Secure Contexts and Feature Permissions
-
-Browsers restrict "powerful features" (notifications, webcam, GPU, payments) to:
-
-- Secure contexts (HTTPS/TLS delivery via `window` or `worker`).
-- Explicit user permission via the Permissions API.
-- User activation (transient activation -- requires user action like clicking).
-
-## High-Level Security Considerations
-
-### 1. Store Client-Side Data Responsibly
-
-- Limit third-party cookie usage.
-- Prepare for removal of cross-site cookies.
-- Implement alternative persistence methods.
-
-### 2. Protect User Identity and Manage Logins
-
-- Use reputable frameworks with built-in security.
-- Implement **Multi-Factor Authentication (MFA)**.
-- Use dedicated APIs:
- - Web Authentication API
- - Federated Credential Management (FedCM) API
-
-**Login Security Tips:**
-
-- Enforce strong passwords.
-- Educate users about **phishing** attacks.
-- Implement **rate limiting** on login pages.
-- Use **CAPTCHA** challenges.
-- Manage sessions with unique session IDs.
-- Auto-logout after inactivity.
-
-### 3. Do Not Include Sensitive Data in URL Query Strings
-
-- Avoid GET requests with sensitive data (can be intercepted via the Referer header).
-- Use POST requests instead.
-- Protects against CSRF and replay attacks.
-
-### 4. Enforce Usage Policies
-
-- **Content Security Policy (CSP)**: Controls where images and scripts can be loaded from; mitigates XSS and data injection attacks.
-- **Permissions Policy**: Blocks access to specific "powerful features."
-
-### 5. Maintain Data Integrity
-
-- **Subresource Integrity (SRI)**: Crypto hash verification for fetched resources (from CDNs).
-- **MIME Type Verification**: Use the `X-Content-Type-Options` header to prevent MIME sniffing.
-- **Access-Control-Allow-Origin**: Manage cross-origin resource sharing.
-
-### 6. Sanitize Form Input
-
-- **Client-side validation**: Provide instant feedback using HTML form validation.
-- **Output encoding**: Safely display user input without executing it as code.
-- **Server-side validation**: Essential; client-side is easily bypassed.
-- **Escape special characters**: Prevent executable code injection (SQL injection, JavaScript execution).
-
-### 7. Protect Against Clickjacking
-
-- **X-Frame-Options**: HTTP header preventing page rendering in ``, `