From 2f1931d6de2d66aaa30f504ee865004df23344e1 Mon Sep 17 00:00:00 2001
From: Aaron Powell <me@aaron-powell.com>
Date: Fri, 13 Mar 2026 12:01:39 +1100
Subject: [PATCH 1/5] Cleaned up some tool names

---
 agents/csharp-dotnet-janitor.agent.md | 2 +-
 agents/janitor.agent.md               | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/agents/csharp-dotnet-janitor.agent.md b/agents/csharp-dotnet-janitor.agent.md
index 4ab838158..858f55bdd 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 5a2f64009..42fb92585 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
 

From 7fc237ccb562d02965b70135c21dece24cce9c6e Mon Sep 17 00:00:00 2001
From: Aaron Powell <me@aaron-powell.com>
Date: Fri, 13 Mar 2026 12:03:16 +1100
Subject: [PATCH 2/5] 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

---
 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 -----------------
 6 files changed, 670 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

diff --git a/instructions/angular.instructions.md b/instructions/angular.instructions.md
deleted file mode 100644
index 12b7355a2..000000000
--- 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 7a4258e15..000000000
--- 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<T>` 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 a783f4244..000000000
--- 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 79bd2754e..000000000
--- 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 1b5303537..000000000
--- 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 879cf2c2e..000000000
--- 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 `<script setup>` syntax
-- Modern build tooling (Vite recommended)
-- Pinia for application state management
-- Official Vue style guide and best practices
-
-## Development Standards
-
-### Architecture
-- Favor the Composition API (`setup` functions and composables) over the Options API
-- Organize components and composables by feature or domain for scalability
-- Separate UI-focused components (presentational) from logic-focused components (containers)
-- Extract reusable logic into composable functions in a `composables/` directory
-- Structure store modules (Pinia) by domain, with clearly defined actions, state, and getters
-
-### TypeScript Integration
-- Enable `strict` mode in `tsconfig.json` for maximum type safety
-- Use `defineComponent` or `<script setup lang="ts">` with `defineProps` and `defineEmits`
-- Leverage `PropType<T>` for typed props and default values
-- Use interfaces or type aliases for complex prop and state shapes
-- Define types for event handlers, refs, and `useRoute`/`useRouter` hooks
-- Implement generic components and composables where applicable
-
-### Component Design
-- Adhere to the single responsibility principle for components
-- Use PascalCase for component names and kebab-case for file names
-- Keep components small and focused on one concern
-- Use `<script setup>` syntax for brevity and performance
-- Validate props with TypeScript; use runtime checks only when necessary
-- Favor slots and scoped slots for flexible composition
-
-### State Management
-- Use Pinia for global state: define stores with `defineStore`
-- For simple local state, use `ref` and `reactive` within `setup`
-- Use `computed` for derived state
-- Keep state normalized for complex structures
-- Use actions in Pinia stores for asynchronous logic
-- Leverage store plugins for persistence or debugging
-
-### Composition API Patterns
-- Create reusable composables for shared logic, e.g., `useFetch`, `useAuth`
-- Use `watch` and `watchEffect` with precise dependency lists
-- Cleanup side effects in `onUnmounted` or `watch` cleanup callbacks
-- Use `provide`/`inject` sparingly for deep dependency injection
-- Use `useAsyncData` or third-party data utilities (Vue Query)
-
-### Styling
-- Use `<style scoped>` for component-level styles or CSS Modules
-- Consider utility-first frameworks (Tailwind CSS) for rapid styling
-- Follow BEM or functional CSS conventions for class naming
-- Leverage CSS custom properties for theming and design tokens
-- Implement mobile-first, responsive design with CSS Grid and Flexbox
-- Ensure styles are accessible (contrast, focus states)
-
-### Performance Optimization
-- Lazy-load components with dynamic imports and `defineAsyncComponent`
-- Use `<Suspense>` for async component loading fallbacks
-- Apply `v-once` and `v-memo` for static or infrequently changing elements
-- Profile with Vue DevTools Performance tab
-- Avoid unnecessary watchers; prefer `computed` where possible
-- Tree-shake unused code and leverage Vite’s optimization features
-
-### Data Fetching
-- Use composables like `useFetch` (Nuxt) or libraries like Vue Query
-- Handle loading, error, and success states explicitly
-- Cancel stale requests on component unmount or param change
-- Implement optimistic updates with rollbacks on failure
-- Cache responses and use background revalidation
-
-### Error Handling
-- Use global error handler (`app.config.errorHandler`) for uncaught errors
-- Wrap risky logic in `try/catch`; provide user-friendly messages
-- Use `errorCaptured` hook in components for local boundaries
-- Display fallback UI or error alerts gracefully
-- Log errors to external services (Sentry, LogRocket)
-
-### Forms and Validation
-- Use libraries like VeeValidate or @vueuse/form for declarative validation
-- Build forms with controlled `v-model` bindings
-- Validate on blur or input with debouncing for performance
-- Handle file uploads and complex multi-step forms in composables
-- Ensure accessible labeling, error announcements, and focus management
-
-### Routing
-- Use Vue Router 4 with `createRouter` and `createWebHistory`
-- Implement nested routes and route-level code splitting
-- Protect routes with navigation guards (`beforeEnter`, `beforeEach`)
-- Use `useRoute` and `useRouter` in `setup` for programmatic navigation
-- Manage query params and dynamic segments properly
-- Implement breadcrumb data via route meta fields
-
-### Testing
-- Write unit tests with Vue Test Utils and Vitest
-- Focus on behavior, not implementation details
-- Use `mount` and `shallowMount` for component isolation
-- Mock global plugins (router, Pinia) as needed
-- Add end-to-end tests with Cypress or Playwright
-- Test accessibility using axe-core integration
-
-### Security
-- Avoid using `v-html`; sanitize any HTML inputs rigorously
-- Use CSP headers to mitigate XSS and injection attacks
-- Validate and escape data in templates and directives
-- Use HTTPS for all API requests
-- Store sensitive tokens in HTTP-only cookies, not `localStorage`
-
-### Accessibility
-- Use semantic HTML elements and ARIA attributes
-- Manage focus for modals and dynamic content
-- Provide keyboard navigation for interactive components
-- Add meaningful `alt` text for images and icons
-- Ensure color contrast meets WCAG AA standards
-
-## Implementation Process
-1. Plan component and composable architecture
-2. Initialize Vite project with Vue 3 and TypeScript
-3. Define Pinia stores and composables
-4. Create core UI components and layout
-5. Integrate routing and navigation
-6. Implement data fetching and state logic
-7. Build forms with validation and error states
-8. Add global error handling and fallback UIs
-9. Add unit and E2E tests
-10. Optimize performance and bundle size
-11. Ensure accessibility compliance
-12. Document components, composables, and stores
-
-## Additional Guidelines
-- Follow Vue’s official style guide (vuejs.org/style-guide)
-- Use ESLint (with `plugin:vue/vue3-recommended`) and Prettier for code consistency
-- Write meaningful commit messages and maintain clean git history
-- Keep dependencies up to date and audit for vulnerabilities
-- Document complex logic with JSDoc/TSDoc
-- Use Vue DevTools for debugging and profiling
-
-## Common Patterns
-- Renderless components and scoped slots for flexible UI
-- Compound components using provide/inject
-- Custom directives for cross-cutting concerns
-- Teleport for modals and overlays
-- Plugin system for global utilities (i18n, analytics)
-- Composable factories for parameterized logic

From 2c568d6aa10ebfad6e778046b1b54ed8b69c2f13 Mon Sep 17 00:00:00 2001
From: Aaron Powell <me@aaron-powell.com>
Date: Fri, 13 Mar 2026 12:03:46 +1100
Subject: [PATCH 3/5] Improved the skill to be more explicit on how to use
 playwright

---
 skills/webapp-testing/SKILL.md                | 39 +++++++++++++------
 .../{ => assets}/test-helper.js               |  0
 2 files changed, 28 insertions(+), 11 deletions(-)
 rename skills/webapp-testing/{ => assets}/test-helper.js (100%)

diff --git a/skills/webapp-testing/SKILL.md b/skills/webapp-testing/SKILL.md
index 0184c7096..281fff4e9 100644
--- a/skills/webapp-testing/SKILL.md
+++ b/skills/webapp-testing/SKILL.md
@@ -7,9 +7,12 @@ description: Toolkit for interacting with and testing local web applications usi
 
 This skill enables comprehensive testing and debugging of local web applications using Playwright automation.
 
+You should use the Playwright MCP Server to undertake the work if possible. If the MCP Server is unavailable, you can run the code in a local Node.js environment with Playwright installed.
+
 ## When to Use This Skill
 
 Use this skill when you need to:
+
 - Test frontend functionality in a real browser
 - Verify UI behavior and interactions
 - Debug web application issues
@@ -27,6 +30,7 @@ Use this skill when you need to:
 ## Core Capabilities
 
 ### 1. Browser Automation
+
 - Navigate to URLs
 - Click buttons and links
 - Fill form fields
@@ -34,6 +38,7 @@ Use this skill when you need to:
 - Handle dialogs and alerts
 
 ### 2. Verification
+
 - Assert element presence
 - Verify text content
 - Check element visibility
@@ -41,6 +46,7 @@ Use this skill when you need to:
 - Test responsive behavior
 
 ### 3. Debugging
+
 - Capture screenshots
 - View console logs
 - Inspect network requests
@@ -49,26 +55,29 @@ Use this skill when you need to:
 ## Usage Examples
 
 ### Example 1: Basic Navigation Test
+
 ```javascript
 // Navigate to a page and verify title
-await page.goto('http://localhost:3000');
+await page.goto("http://localhost:3000");
 const title = await page.title();
-console.log('Page title:', title);
+console.log("Page title:", title);
 ```
 
 ### Example 2: Form Interaction
+
 ```javascript
 // Fill out and submit a form
-await page.fill('#username', 'testuser');
-await page.fill('#password', 'password123');
+await page.fill("#username", "testuser");
+await page.fill("#password", "password123");
 await page.click('button[type="submit"]');
-await page.waitForURL('**/dashboard');
+await page.waitForURL("**/dashboard");
 ```
 
 ### Example 3: Screenshot Capture
+
 ```javascript
 // Capture a screenshot for debugging
-await page.screenshot({ path: 'debug.png', fullPage: true });
+await page.screenshot({ path: "debug.png", fullPage: true });
 ```
 
 ## Guidelines
@@ -84,26 +93,30 @@ await page.screenshot({ path: 'debug.png', fullPage: true });
 ## Common Patterns
 
 ### Pattern: Wait for Element
+
 ```javascript
-await page.waitForSelector('#element-id', { state: 'visible' });
+await page.waitForSelector("#element-id", { state: "visible" });
 ```
 
 ### Pattern: Check if Element Exists
+
 ```javascript
-const exists = await page.locator('#element-id').count() > 0;
+const exists = (await page.locator("#element-id").count()) > 0;
 ```
 
 ### Pattern: Get Console Logs
+
 ```javascript
-page.on('console', msg => console.log('Browser log:', msg.text()));
+page.on("console", (msg) => console.log("Browser log:", msg.text()));
 ```
 
 ### Pattern: Handle Errors
+
 ```javascript
 try {
-  await page.click('#button');
+  await page.click("#button");
 } catch (error) {
-  await page.screenshot({ path: 'error.png' });
+  await page.screenshot({ path: "error.png" });
   throw error;
 }
 ```
@@ -114,3 +127,7 @@ try {
 - Cannot test native mobile apps (use React Native Testing Library instead)
 - May have issues with complex authentication flows
 - Some modern frameworks may require specific configuration
+
+## Helper Functions
+
+Some helper functions are available in [`test-helper.js`](./assets/test-helper.js) to simplify common tasks like waiting for elements, capturing screenshots, and handling errors. You can import and use these functions in your tests to improve readability and maintainability.
diff --git a/skills/webapp-testing/test-helper.js b/skills/webapp-testing/assets/test-helper.js
similarity index 100%
rename from skills/webapp-testing/test-helper.js
rename to skills/webapp-testing/assets/test-helper.js

From 3d5abd52d3b7cd67341276ed96b5996cd547c6aa Mon Sep 17 00:00:00 2001
From: Aaron Powell <me@aaron-powell.com>
Date: Fri, 13 Mar 2026 12:07:02 +1100
Subject: [PATCH 4/5] 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
---
 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 ---
 25 files changed, 17201 deletions(-)
 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

diff --git a/skills/create-web-form/SKILL.md b/skills/create-web-form/SKILL.md
deleted file mode 100644
index 7f6613648..000000000
--- a/skills/create-web-form/SKILL.md
+++ /dev/null
@@ -1,85 +0,0 @@
----
-name: create-web-form
-description: '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.'
----
-
-# Create Web Form Skill
-
-## Overview
-
-This skill provides comprehensive reference materials and best practices for creating web forms. It covers HTML syntax, UI/UX design, form validation, server-side processing (PHP and Python), data handling, and network communication.
-
-## Purpose
-
-Enable developers to build robust, accessible, and user-friendly web forms by providing:
-
-- HTML form syntax and structure
-- CSS styling techniques for form elements
-- JavaScript for form interactivity and validation
-- Accessibility best practices
-- Server-side form processing with PHP and Python
-- Database integration methods
-- Network data handling and security
-- Performance optimization
-
-## Reference Files
-
-This skill includes the following reference documentation:
-
-### UI & Styling
-- `styling-web-forms.md` - Form styling techniques and best practices
-- `css-styling.md` - Comprehensive CSS reference for form styling
-
-### User Experience
-- `accessibility.md` - Web accessibility guidelines for forms
-- `javascript.md` - JavaScript techniques for form functionality
-- `form-controls.md` - Native form controls and their usage
-- `progressive-web-app.md` - Progressive web app integration
-
-### HTML Structure
-- `form-basics.md` - Fundamental HTML form structure
-- `aria-form-role.md` - ARIA roles for accessible forms
-- `html-form-elements.md` - Complete HTML form elements reference
-- `html-form-example.md` - Practical HTML form examples
-
-### Server-Side Processing
-- `form-data-handling.md` - Network form data handling
-- `php-forms.md` - PHP form processing
-- `php-cookies.md` - Cookie management in PHP
-- `php-json.md` - JSON handling in PHP
-- `php-mysql-database.md` - Database integration with PHP
-- `python-contact-form.md` - Python contact form implementation
-- `python-flask.md` - Flask forms tutorial
-- `python-flask-app.md` - Building Flask web applications
-- `python-as-web-framework.md` - Python web framework basics
-
-### Data & Network
-- `xml.md` - XML data format reference
-- `hypertext-transfer-protocol.md` - HTTP protocol reference
-- `security.md` - Web security best practices
-- `web-api.md` - Web API integration
-- `web-performance.md` - Performance optimization techniques
-
-## Usage
-
-When creating a web form, consult the appropriate reference files based on your needs:
-
-1. **Planning**: Review `form-basics.md` and `form-controls.md`
-2. **Structure**: Use `html-form-elements.md` and `aria-form-role.md`
-3. **Styling**: Reference `styling-web-forms.md` and `css-styling.md`
-4. **Interactivity**: Apply techniques from `javascript.md`
-5. **Accessibility**: Follow guidelines in `accessibility.md`
-6. **Server Processing**: Choose between PHP or Python references
-7. **Data Storage**: Consult database and data format references
-8. **Optimization**: Review `web-performance.md` and `security.md`
-
-## Best Practices
-
-- Always validate input on both client and server sides
-- Ensure forms are accessible to all users
-- Use semantic HTML elements
-- Implement proper error handling and user feedback
-- Secure form data transmission with HTTPS
-- Follow progressive enhancement principles
-- Test forms across different browsers and devices
-- Optimize for performance and user experience
diff --git a/skills/create-web-form/references/accessibility.md b/skills/create-web-form/references/accessibility.md
deleted file mode 100644
index e12bb69fd..000000000
--- a/skills/create-web-form/references/accessibility.md
+++ /dev/null
@@ -1,512 +0,0 @@
-# Web Accessibility Reference
-
-A consolidated reference guide drawn from MDN Web Docs covering core accessibility
-concepts, authoring guidelines, safe browsing practices, ARIA-based widgets, and
-mobile accessibility requirements.
-
----
-
-## 1. Accessibility Overview
-
-> **Source:** https://developer.mozilla.org/en-US/docs/Web/Accessibility
-
-### What Is Accessibility?
-
-**Accessibility** (abbreviated as **A11y** -- "a" + 11 characters + "y") in web
-development means enabling as many people as possible to use websites, even when
-those people's abilities are limited in some way.
-
-> "The Web is fundamentally designed to work for all people, whatever their
-> hardware, software, language, location, or ability. When the Web meets this
-> goal, it is accessible to people with a diverse range of hearing, movement,
-> sight, and cognitive ability." -- W3C
-
-Key points:
-
-- Technology makes things **easier** for many people.
-- Technology makes things **possible** for people with disabilities.
-- Accessibility spans physical, cognitive, hearing, movement, and sight abilities.
-
-### Core Principles
-
-1. **Semantic HTML** -- Use correct elements for their intended purpose.
-2. **Keyboard Navigation** -- Ensure full functionality without a mouse.
-3. **Assistive Technology Support** -- Maintain compatibility with screen readers
-   and other tools.
-4. **Perceivability** -- Content must be perceivable through multiple senses.
-5. **Operability** -- All functionality must be keyboard accessible.
-6. **Understandability** -- Clear language and predictable behavior.
-7. **Robustness** -- Works across diverse assistive technologies.
-
-### Beginner Tutorial Modules (MDN Learn Web Development)
-
-| Module | Description |
-|--------|-------------|
-| What is Accessibility? | Groups to consider, tools users rely on, workflow integration |
-| Accessibility Tooling and Assistive Technology | Tools for solving accessibility issues |
-| HTML: A Good Basis for Accessibility | Semantic markup and correct element usage |
-| CSS and JavaScript Best Practices | Accessible implementation of CSS and JS |
-| WAI-ARIA Basics | Adding semantics for complex UI controls and dynamic content |
-| Accessible Multimedia | Text alternatives for video, audio, and images |
-| Mobile Accessibility | iOS/Android tools and mobile-specific considerations |
-
-### Key Standards and Frameworks
-
-- **WCAG (Web Content Accessibility Guidelines)** -- organized into Perceivable,
-  Operable, Understandable, and Robust categories.
-- **ARIA (Accessible Rich Internet Applications)** -- 53+ attributes and 87+
-  roles for adding semantic meaning to custom widgets.
-
----
-
-## 2. Information for Web Authors
-
-> **Source:** https://developer.mozilla.org/en-US/docs/Web/Accessibility/Guides/Information_for_Web_authors
-
-### Guidelines and Regulations
-
-#### ARIA Authoring Practices Guide (APG)
-
-- **Provider:** W3C
-- **URL:** https://www.w3.org/WAI/ARIA/apg/
-- Design patterns and functional examples for accessible web experiences.
-- Covers how to apply accessibility semantics to common design patterns and
-  widgets.
-
-#### Web Content Accessibility Guidelines (WCAG)
-
-- **Provider:** W3C Web Accessibility Initiative (WAI)
-- **URL:** https://www.w3.org/WAI/standards-guidelines/wcag/
-- Important baseline guidelines being adopted by EU accessibility regulations.
-
-#### ARIA on MDN
-
-- Complete guides to ARIA roles, properties, and attributes.
-- Best practices and code examples for each role.
-
-### How-to Guides
-
-| Guide | Provider | URL |
-|-------|----------|-----|
-| Accessibility for Teams | U.S. General Services Administration | https://digital.gov/guides/accessibility-for-teams/ |
-| Accessible Web Page Authoring | IBM | https://www.ibm.com/able/requirements/requirements/ |
-
-### Automated Checking and Repair Tools
-
-#### Browser Extensions
-
-| Tool | URL |
-|------|-----|
-| HTML CodeSniffer | https://squizlabs.github.io/HTML_CodeSniffer/ |
-| aXe DevTools | Built into browser DevTools |
-| Lighthouse Accessibility Audit | Chrome DevTools integrated |
-| Accessibility Insights | https://accessibilityinsights.io/ |
-| WAVE | https://wave.webaim.org/extension/ |
-
-#### Build-Process / Programmatic Testing
-
-| Tool | Description |
-|------|-------------|
-| axe-core | Accessibility engine for automated testing (dequelabs/axe-core) |
-| eslint-plugin-jsx-a11y | ESLint plugin for JSX accessibility rules |
-| Lighthouse Audits | Programmable audit runner (GoogleChrome/lighthouse) |
-| AccessLint.js | Automated a11y linting library |
-
-#### Continuous Integration
-
-- **AccessLint** (https://accesslint.com/) -- integrates with GitHub pull
-  requests for automated accessibility review.
-
-### Testing Recommendations
-
-Simulation and testing methods to employ:
-
-- Color blindness simulation
-- Low vision simulation
-- Low contrast testing
-- Zoom testing
-- Keyboard-only navigation (disable the mouse)
-- Touch-only testing
-- Voice command testing
-- Testing with a **Web Disability Simulator** browser extension
-
-Best practice: **Test with real users whenever possible.**
-
----
-
-## 3. Browsing Safely
-
-> **Source:** https://developer.mozilla.org/en-US/docs/Web/Accessibility/Guides/Browsing_safely
-
-### Conditions Addressed
-
-| Condition | Common Triggers |
-|-----------|-----------------|
-| Vestibular Disorders | Motion, animations, parallax effects |
-| Seizure Disorders | Flashing (3+ per second), flickering, high-contrast color changes |
-| Photosensitivity | Color intensity, flashing, high contrast |
-| Traumatic Brain Injury (TBI) | High cognitive load from color processing |
-
-### CSS Media Feature: `prefers-reduced-motion`
-
-Detects the user's OS-level preference for reduced motion.
-
-```css
-@media (prefers-reduced-motion: reduce) {
-  * {
-    animation: none !important;
-    transition: none !important;
-  }
-}
-```
-
-CSS transition events that developers can listen to:
-
-- `transitionrun`
-- `transitionstart`
-- `transitionend`
-- `transitioncancel`
-
-### Platform-Level Browser Controls
-
-| Platform | Setting | Notes |
-|----------|---------|-------|
-| Safari Desktop (10.1+) | Disable Auto-Play | Does not affect animated GIFs |
-| iOS Safari (10.3+) | Reduce Motion (OS Accessibility settings) | GIFs unaffected |
-| Firefox | `image.animation_mode` set to `"none"` | Disables all animated GIFs |
-| Reader Mode (various) | Content Blockers, text-to-speech, font/zoom | Reduces distractions |
-
-### Useful Browser Extensions
-
-| Extension | Purpose | Browser |
-|-----------|---------|---------|
-| Gif Blocker | Blocks all GIFs | Chrome |
-| Gif Scrubber | Pause/play/scrub GIFs like a video | Chrome |
-| Beeline Reader | Grayscale mode, dyslexia-friendly fonts, contrast | Chrome, Edge, Firefox |
-
-### Operating System Accessibility Features
-
-**Windows 10:**
-
-- Settings > Ease of Access > Display -- Turn off animations.
-- Settings > Ease of Access > Display > Color Filters -- Toggle grayscale.
-- Grayscale reduces cognitive load for TBI, photosensitive epilepsy, and other
-  conditions.
-
-**macOS:**
-
-- System Preferences > Accessibility > Display -- "Reduce motion" option.
-
-### WCAG Compliance: Success Criterion 2.3.1
-
-**Three Flashes or Below Threshold** -- content must not flash more than three
-times per second unless the flash is below the general flash and red flash
-thresholds.
-
-### Best Practices for Developers
-
-**Do:**
-
-- Support the `prefers-reduced-motion` media query.
-- Keep flashing below 3 times per second.
-- Provide play/pause controls for all animations.
-- Test with OS accessibility features enabled.
-
-**Do not:**
-
-- Auto-play videos or animations without user controls.
-- Use high-frequency flashing or strobing effects.
-- Assume all users can tolerate motion.
-
-### Implementation Checklist
-
-- [ ] Add `@media (prefers-reduced-motion: reduce)` rules to CSS.
-- [ ] Disable auto-play animations when the user preference is set.
-- [ ] Ensure GIFs have pause controls.
-- [ ] Test in Windows and macOS accessibility modes.
-- [ ] Validate against WCAG 2.3.1 (Three Flashes criterion).
-
----
-
-## 4. Accessible Web Applications and Widgets
-
-> **Source:** https://developer.mozilla.org/en-US/docs/Web/Accessibility/Guides/Accessible_web_applications_and_widgets
-
-### The Problem
-
-Custom JavaScript widgets (sliders, menu bars, tabs, dialogs) built with generic
-HTML elements like `<div>` and `<span>` lack semantic meaning for assistive
-technologies. Dynamic content changes may not be detected by screen readers.
-
-### ARIA (Accessible Rich Internet Applications)
-
-ARIA fills the gap between standard HTML and desktop-style UI controls with three
-types of attributes:
-
-1. **Roles** -- Describe widgets not natively available in HTML (sliders, menu
-   bars, tabs, dialogs).
-2. **Properties** -- Describe characteristics (draggable, required, has popup).
-3. **States** -- Describe current interaction state (busy, disabled, selected,
-   hidden).
-
-**Important:** Prefer semantic HTML elements over ARIA when available. ARIA is a
-progressive enhancement for dynamic components.
-
-### Example: Tabs Widget
-
-**Without ARIA (non-accessible):**
-
-```html
-<ol>
-  <li id="ch1Tab">
-    <a href="#ch1Panel">Chapter 1</a>
-  </li>
-  <li id="ch2Tab">
-    <a href="#ch2Panel">Chapter 2</a>
-  </li>
-</ol>
-
-<div>
-  <div id="ch1Panel">Chapter 1 content goes here</div>
-  <div id="ch2Panel">Chapter 2 content goes here</div>
-</div>
-```
-
-**With ARIA (accessible):**
-
-```html
-<ol role="tablist">
-  <li id="ch1Tab" role="tab">
-    <a href="#ch1Panel">Chapter 1</a>
-  </li>
-  <li id="ch2Tab" role="tab">
-    <a href="#ch2Panel">Chapter 2</a>
-  </li>
-</ol>
-
-<div>
-  <div id="ch1Panel" role="tabpanel" aria-labelledby="ch1Tab">
-    Chapter 1 content goes here
-  </div>
-  <div id="ch2Panel" role="tabpanel" aria-labelledby="ch2Tab">
-    Chapter 2 content goes here
-  </div>
-</div>
-```
-
-### Common ARIA State Attributes
-
-| Attribute | Purpose |
-|-----------|---------|
-| `aria-checked` | State of checkbox or radio button |
-| `aria-disabled` | Visible but not editable/operable |
-| `aria-grabbed` | "Grabbed" state in drag-and-drop |
-| `aria-selected` | Selected state of an element |
-| `aria-expanded` | Whether expandable content is open |
-| `aria-pressed` | Pressed state of a toggle button |
-
-Use ARIA states to indicate UI state and CSS attribute selectors to style
-accordingly.
-
-### Visibility Management with `aria-hidden`
-
-```html
-<div id="tp1" class="tooltip" role="tooltip" aria-hidden="true">
-  Your first name is optional
-</div>
-```
-
-```css
-div.tooltip[aria-hidden="true"] {
-  display: none;
-}
-```
-
-```javascript
-function showTip(el) {
-  el.setAttribute("aria-hidden", "false");
-}
-```
-
-### Role Changes
-
-Never change an element's ARIA role dynamically. Instead, replace the element
-entirely:
-
-```javascript
-// Correct: swap elements
-// View mode
-<div role="button">Edit this text</div>
-
-// Edit mode: replace with an input
-<input type="text" />
-```
-
-### Keyboard Navigation Best Practices
-
-| Key | Expected Behavior |
-|-----|-------------------|
-| Tab / Shift+Tab | Move focus into and out of the widget |
-| Arrow Keys | Navigate between items within the widget |
-| Enter / Spacebar | Activate the focused control |
-| Escape | Close menus or dialogs |
-| Home / End | Jump to first or last item |
-
-Focus management considerations:
-
-- Maintain focus order that matches visual layout.
-- Use `tabindex="0"` to make custom elements keyboard accessible.
-- Avoid `tabindex > 0` (breaks natural tab order).
-- Update the visual focus indicator for keyboard users.
-- Move focus programmatically when opening dialogs or modals.
-
-### Key ARIA Attributes for Interactive Widgets
-
-**Labeling and Description:**
-
-| Attribute | Usage |
-|-----------|-------|
-| `aria-label` | Direct text label |
-| `aria-labelledby` | References the element that labels this one |
-| `aria-describedby` | References additional descriptive text |
-| `aria-description` | Inline description text |
-
-**Relationships:**
-
-| Attribute | Usage |
-|-----------|-------|
-| `aria-controls` | This element controls another element |
-| `aria-owns` | Establishes parent-child relationships |
-| `aria-flowto` | Defines logical reading order |
-
-**Widget Behavior:**
-
-| Attribute | Usage |
-|-----------|-------|
-| `aria-haspopup` | Has a popup (menu, listbox, dialog, grid, tree) |
-| `aria-expanded` | Expandable content state (true/false) |
-| `aria-modal` | Modal dialog (true) |
-| `aria-live` | Live region announcements (polite, assertive, off) |
-| `aria-busy` | Loading or processing state (true/false) |
-
-### Live Regions for Dynamic Content
-
-```html
-<div aria-live="polite" aria-atomic="true">
-  Updates will be announced to screen readers
-</div>
-```
-
-- `aria-live="polite"` -- announce when convenient.
-- `aria-live="assertive"` -- announce immediately.
-- `aria-atomic="true"` -- announce the entire region, not just the changed part.
-
----
-
-## 5. Mobile Accessibility Checklist
-
-> **Source:** https://developer.mozilla.org/en-US/docs/Web/Accessibility/Guides/Mobile_accessibility_checklist
-
-A checklist of accessibility requirements for mobile app developers targeting
-WCAG 2.2 AA compliance.
-
-### Color
-
-- **Normal text:** minimum 4.5:1 contrast ratio (less than 18pt or 14pt bold).
-- **Large text:** minimum 3:1 contrast ratio (at least 18pt or 14pt bold).
-- Information conveyed via color must also be available through other means (e.g.,
-  underlines for links).
-
-### Visibility
-
-- Do NOT hide content exclusively with zero opacity, z-index ordering, or
-  off-screen placement.
-- Use the `hidden` HTML attribute, `visibility`, or `display` CSS properties to
-  truly hide content.
-- Avoid `aria-hidden` unless absolutely necessary.
-- Critical for single-page apps where multiple views/cards may overlap.
-
-### Focus
-
-- Standard controls (links, buttons, form fields) are focusable by default.
-- Custom controls must have an appropriate ARIA Role (e.g., `button`, `link`,
-  `checkbox`).
-- Focus order must be logical and consistent.
-
-### Text Equivalents
-
-- Provide text alternatives for all non-text elements using `alt`, `title`,
-  `aria-label`, `aria-labelledby`, or `aria-describedby`.
-- Avoid images of text.
-- Visible UI component text must match the programmatic name (WCAG 2.1: Label in
-  Name).
-- All form controls must have associated `<label>` elements.
-
-### Handling State
-
-- Standard controls: the operating system handles radio buttons and checkboxes.
-- Custom controls must communicate state changes via ARIA States:
-  - `aria-checked`
-  - `aria-disabled`
-  - `aria-selected`
-  - `aria-expanded`
-  - `aria-pressed`
-
-### Orientation
-
-- Content must not be restricted to portrait or landscape unless essential (e.g.,
-  a piano app or bank-check scanner).
-- Reference: WCAG 2.1 Orientation (https://www.w3.org/WAI/WCAG21/Understanding/orientation.html).
-
-### General Guidelines
-
-**App Structure:**
-
-- Always provide an app title.
-- Use a proper heading hierarchy without skipping levels:
-
-```html
-<h1>Top level heading</h1>
-  <h2>Secondary heading</h2>
-  <h2>Another secondary heading</h2>
-    <h3>Low level heading</h3>
-```
-
-**ARIA Landmark Roles:**
-
-Use landmarks to describe app or document structure:
-
-- `banner`
-- `complementary`
-- `contentinfo`
-- `main`
-- `navigation`
-- `search`
-
-**Touch Events (WCAG 2.1: Pointer Cancellation):**
-
-1. Avoid executing functions on the down-event.
-2. If unavoidable, complete the function on the up-event with an abort mechanism.
-3. If unavoidable, ensure the up-event can undo the down-event action.
-4. Exceptions: game controls, virtual keyboards, real-time feedback.
-
-**Touch Target Size:**
-
-- Targets must be large enough for reliable user interaction.
-- Reference: BBC Mobile Accessibility Guidelines for specific sizing
-  recommendations (https://www.bbc.co.uk/accessibility/forproducts/guides/mobile/target-touch-size).
-
----
-
-## Additional Resources
-
-| Resource | URL |
-|----------|-----|
-| W3C Accessibility Standards | https://www.w3.org/standards/webdesign/accessibility |
-| WAI Interest Group | https://www.w3.org/WAI/about/groups/waiig/ |
-| ARIA Specification | https://w3c.github.io/aria/ |
-| WAI-ARIA Authoring Practices | https://www.w3.org/WAI/ARIA/apg/ |
-| WCAG 2.1 Understanding Docs | https://www.w3.org/WAI/WCAG21/Understanding/ |
-| IBM Accessibility Requirements | https://www.ibm.com/able/requirements/requirements/ |
-| Accessibility Insights | https://accessibilityinsights.io/ |
-| WAVE Evaluation Tool | https://wave.webaim.org/extension/ |
diff --git a/skills/create-web-form/references/aria-form-role.md b/skills/create-web-form/references/aria-form-role.md
deleted file mode 100644
index 87b095506..000000000
--- a/skills/create-web-form/references/aria-form-role.md
+++ /dev/null
@@ -1,156 +0,0 @@
-# ARIA Form Role Reference
-
-> **Source:** <https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/form_role>
-
-## Definition and Description
-
-The `form` role identifies a group of elements on a page that provide equivalent functionality to an HTML form. It is a **landmark role** that helps users navigate to form sections.
-
-A `form` landmark identifies a region of content that contains a collection of items and objects that, as a whole, combine to create a form when no other named landmark is appropriate (e.g., `main` or `search`).
-
-**Important:** The form is not exposed as a landmark region unless it has an accessible name.
-
-## Preferred Approach: Use HTML `<form>` Instead
-
-Use an HTML `<form>` element to contain your form controls, rather than the ARIA `form` role, unless you have a very good reason. The HTML `<form>` element is sufficient to tell assistive technologies that there is a form.
-
-```html
-<!-- Recommended semantic approach -->
-<form id="send-comment" aria-label="Add a comment">
-  <!-- form controls here -->
-</form>
-```
-
-The `<form>` element will automatically communicate as a `form` landmark if provided an accessible name.
-
-## When to Use `role="form"`
-
-The `form` role should be used to identify a **region of the page** containing form content, not individual form fields. It is appropriate when you are not using a native `<form>` element but still want to convey form semantics to assistive technologies.
-
-### Basic Example
-
-```html
-<div role="form" id="contact-info" aria-label="Contact information">
-  <!-- form content -->
-</div>
-```
-
-### Full Example with Form Controls
-
-```html
-<div role="form" id="send-comment" aria-label="Add a comment">
-  <label for="username">Username</label>
-  <input
-    id="username"
-    name="username"
-    autocomplete="nickname"
-    autocorrect="off"
-    type="text" />
-
-  <label for="email">Email</label>
-  <input
-    id="email"
-    name="email"
-    autocomplete="email"
-    autocapitalize="off"
-    autocorrect="off"
-    spellcheck="false"
-    type="text" />
-
-  <label for="comment">Comment</label>
-  <textarea id="comment" name="comment"></textarea>
-
-  <input value="Comment" type="submit" />
-</div>
-```
-
-## Accessible Naming (Required for Landmark Exposure)
-
-Each `<form>` element and form `role` that needs to be exposed as a landmark **must be given an accessible name** using one of:
-
-- `aria-label`
-- `aria-labelledby`
-- `title` attribute
-
-### Example with `aria-label`
-
-```html
-<div role="form" id="gift-cards" aria-label="Purchase a gift card">
-  <!-- form content -->
-</div>
-```
-
-### Avoid Redundant Descriptions
-
-Screen readers announce the role type, so do not repeat it in the label:
-
-- **Incorrect:** `aria-label="Contact form"` (announces "contact form form")
-- **Correct:** `aria-label="Contact information"` (concise and non-redundant)
-
-## Attributes and Interactions
-
-### Associated WAI-ARIA Roles, States, and Properties
-
-No role-specific states or properties are defined for the `form` role.
-
-### Keyboard Interactions
-
-No role-specific keyboard interactions are defined for the `form` role.
-
-### Required JavaScript Features
-
-- **`onsubmit` Event Handler:** Handles events raised when the form is submitted.
-- Anything that is not a native `<form>` element cannot be submitted using standard form submission. You must use JavaScript to build alternative data submission mechanisms (e.g., with `fetch()` or `XMLHttpRequest`).
-
-## Accessibility Concerns
-
-### 1. Use Sparingly
-
-Landmark roles are intended for larger overall sections of the document. Using too many landmark roles creates "noise" in screen readers, making it difficult for users to understand the overall page layout.
-
-### 2. Inputs Are Not Forms
-
-Do not declare `role="form"` on individual form elements (inputs, textareas, selects, etc.). Apply the role to the **wrapper element only**.
-
-```html
-<!-- Incorrect -->
-<input role="form" type="text" />
-
-<!-- Correct -->
-<div role="form" aria-label="User details">
-  <input type="text" />
-</div>
-```
-
-### 3. Use `search` Role for Search Forms
-
-If a form is used for search functionality, use the more specialized `role="search"` instead of `role="form"`.
-
-### 4. Use Native Form Controls
-
-Even when using `role="form"`, prefer native HTML form controls:
-
-- `<button>`
-- `<input>`
-- `<select>`
-- `<textarea>`
-- `<label>`
-
-## Best Practices
-
-- **Prefer the HTML `<form>` element.** Using the semantic `<form>` element automatically communicates the form landmark without needing ARIA.
-- **Provide unique labels.** Each form in a document should have a unique accessible name to help users understand its purpose.
-- **Make labels visible.** Labels should be visible to all users, not just assistive technology users.
-- **Use appropriate landmark roles.** Use `role="search"` for search forms, `role="form"` for general form groups, and the `<form>` HTML element whenever possible.
-
-## Specifications
-
-- [WAI-ARIA: form role specification](https://w3c.github.io/aria/#form)
-- [WAI-ARIA APG: Form landmark example](https://www.w3.org/WAI/ARIA/apg/patterns/landmarks/examples/form.html)
-
-## Related References
-
-- [`<form>` HTML element (MDN)](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/form)
-- [`<legend>` HTML element (MDN)](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/legend)
-- [`<label>` HTML element (MDN)](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/label)
-- [`search` ARIA role (MDN)](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/search_role)
diff --git a/skills/create-web-form/references/css-styling.md b/skills/create-web-form/references/css-styling.md
deleted file mode 100644
index 8f8a41120..000000000
--- a/skills/create-web-form/references/css-styling.md
+++ /dev/null
@@ -1,1027 +0,0 @@
-# CSS Styling Reference
-
-A consolidated reference covering CSS properties, selectors, pseudo-classes, at-rules, the box model, Flexbox, Grid, and media queries.
-
----
-
-## Table of Contents
-
-1. [CSS Properties Reference](#1-css-properties-reference)
-2. [CSS Selectors](#2-css-selectors)
-3. [Pseudo-Classes and Pseudo-Elements](#3-pseudo-classes-and-pseudo-elements)
-4. [CSS At-Rules](#4-css-at-rules)
-5. [CSS Styling Basics](#5-css-styling-basics)
-6. [The Box Model](#6-the-box-model)
-7. [Flexbox Layout](#7-flexbox-layout)
-8. [Grid Layout](#8-grid-layout)
-9. [Media Queries](#9-media-queries)
-
----
-
-## 1. CSS Properties Reference
-
-> Source: https://www.w3schools.com/cssref/index.php
-
-### Background
-
-| Property | Description |
-|---|---|
-| `background` | Shorthand for all background properties |
-| `background-color` | Sets the background color |
-| `background-image` | Sets one or more background images |
-| `background-position` | Sets the starting position of a background image |
-| `background-repeat` | Sets how a background image is repeated |
-| `background-size` | Sets the size of the background image (`cover`, `contain`, length) |
-| `background-attachment` | Sets whether background scrolls with content (`scroll`, `fixed`, `local`) |
-| `background-clip` | Defines how far the background extends (`border-box`, `padding-box`, `content-box`) |
-| `background-origin` | Specifies the positioning area of the background image |
-
-### Border
-
-| Property | Description |
-|---|---|
-| `border` | Shorthand for border-width, border-style, border-color |
-| `border-width` | Sets the width of borders |
-| `border-style` | Sets the style (`none`, `solid`, `dashed`, `dotted`, `double`, `groove`, `ridge`, `inset`, `outset`) |
-| `border-color` | Sets the color of borders |
-| `border-radius` | Sets rounded corners |
-| `border-top` / `border-right` / `border-bottom` / `border-left` | Individual side borders |
-| `border-collapse` | Sets whether table borders are collapsed into a single border |
-| `border-spacing` | Sets the distance between borders of adjacent cells |
-| `border-image` | Shorthand for using an image as a border |
-| `outline` | A line drawn outside the border (does not take up space) |
-| `outline-offset` | Adds space between an outline and the edge of an element |
-
-### Box Model / Dimensions
-
-| Property | Description |
-|---|---|
-| `width` / `height` | Sets element width/height |
-| `min-width` / `min-height` | Sets minimum width/height |
-| `max-width` / `max-height` | Sets maximum width/height |
-| `margin` | Sets outer spacing (shorthand for top, right, bottom, left) |
-| `padding` | Sets inner spacing (shorthand for top, right, bottom, left) |
-| `box-sizing` | Defines how width/height are calculated (`content-box`, `border-box`) |
-| `overflow` | Controls content overflow (`visible`, `hidden`, `scroll`, `auto`) |
-| `overflow-x` / `overflow-y` | Controls horizontal/vertical overflow individually |
-
-### Color and Opacity
-
-| Property | Description |
-|---|---|
-| `color` | Sets the text color |
-| `opacity` | Sets the transparency level (0.0 to 1.0) |
-
-### Display and Visibility
-
-| Property | Description |
-|---|---|
-| `display` | Controls display behavior (`block`, `inline`, `inline-block`, `flex`, `grid`, `none`, etc.) |
-| `visibility` | Controls visibility (`visible`, `hidden`, `collapse`) |
-| `float` | Places an element to the left or right of its container |
-| `clear` | Specifies which sides of an element floating elements are not allowed |
-| `position` | Sets positioning method (`static`, `relative`, `absolute`, `fixed`, `sticky`) |
-| `top` / `right` / `bottom` / `left` | Offsets for positioned elements |
-| `z-index` | Sets the stack order of positioned elements |
-
-### Typography / Font
-
-| Property | Description |
-|---|---|
-| `font` | Shorthand for font properties |
-| `font-family` | Sets the font (e.g., `"Arial", sans-serif`) |
-| `font-size` | Sets the size of text |
-| `font-weight` | Sets boldness (`normal`, `bold`, `100`-`900`) |
-| `font-style` | Sets style (`normal`, `italic`, `oblique`) |
-| `font-variant` | Sets small-caps or other variants |
-| `line-height` | Sets the line height / leading |
-| `letter-spacing` | Sets spacing between characters |
-| `word-spacing` | Sets spacing between words |
-
-### Text
-
-| Property | Description |
-|---|---|
-| `text-align` | Sets horizontal alignment (`left`, `right`, `center`, `justify`) |
-| `text-decoration` | Adds decoration to text (`none`, `underline`, `overline`, `line-through`) |
-| `text-transform` | Controls capitalization (`uppercase`, `lowercase`, `capitalize`) |
-| `text-indent` | Indents the first line of a text block |
-| `text-shadow` | Adds shadow to text |
-| `white-space` | Controls how whitespace is handled |
-| `word-break` | Controls line breaking rules for words |
-| `word-wrap` / `overflow-wrap` | Allows long words to break and wrap to next line |
-| `vertical-align` | Sets vertical alignment of inline or table-cell elements |
-| `direction` | Sets text direction (`ltr`, `rtl`) |
-
-### List
-
-| Property | Description |
-|---|---|
-| `list-style` | Shorthand for list properties |
-| `list-style-type` | Sets the bullet type (`disc`, `circle`, `square`, `decimal`, `none`, etc.) |
-| `list-style-position` | Sets marker position (`inside`, `outside`) |
-| `list-style-image` | Uses an image as the list marker |
-
-### Table
-
-| Property | Description |
-|---|---|
-| `border-collapse` | Merges table cell borders (`collapse`, `separate`) |
-| `border-spacing` | Sets spacing between cells (when `separate`) |
-| `caption-side` | Sets position of table caption (`top`, `bottom`) |
-| `empty-cells` | Controls display of empty cells (`show`, `hide`) |
-| `table-layout` | Sets table layout algorithm (`auto`, `fixed`) |
-
-### Transform and Transition
-
-| Property | Description |
-|---|---|
-| `transform` | Applies 2D or 3D transformations (`translate`, `rotate`, `scale`, `skew`, `matrix`) |
-| `transform-origin` | Sets the origin point for transformations |
-| `transition` | Shorthand for transition properties |
-| `transition-property` | Specifies which properties to transition |
-| `transition-duration` | Sets how long the transition takes |
-| `transition-timing-function` | Sets the speed curve (`ease`, `linear`, `ease-in`, `ease-out`, `ease-in-out`, `cubic-bezier()`) |
-| `transition-delay` | Sets a delay before the transition starts |
-
-### Animation
-
-| Property | Description |
-|---|---|
-| `animation` | Shorthand for animation properties |
-| `animation-name` | Names the `@keyframes` animation |
-| `animation-duration` | How long the animation takes |
-| `animation-timing-function` | Speed curve of the animation |
-| `animation-delay` | Delay before starting |
-| `animation-iteration-count` | Number of times to repeat (`infinite` for looping) |
-| `animation-direction` | Whether the animation alternates direction (`normal`, `reverse`, `alternate`) |
-| `animation-fill-mode` | Styles applied before/after animation (`none`, `forwards`, `backwards`, `both`) |
-| `animation-play-state` | Pauses or runs the animation (`running`, `paused`) |
-
-### Flexbox (Container)
-
-| Property | Description |
-|---|---|
-| `display: flex` | Creates a flex container |
-| `flex-direction` | Sets main axis direction (`row`, `column`, `row-reverse`, `column-reverse`) |
-| `flex-wrap` | Controls wrapping (`nowrap`, `wrap`, `wrap-reverse`) |
-| `flex-flow` | Shorthand for `flex-direction` and `flex-wrap` |
-| `justify-content` | Aligns items along the main axis |
-| `align-items` | Aligns items along the cross axis |
-| `align-content` | Aligns wrapped lines |
-| `gap` / `row-gap` / `column-gap` | Sets spacing between flex items |
-
-### Flexbox (Items)
-
-| Property | Description |
-|---|---|
-| `flex` | Shorthand for `flex-grow`, `flex-shrink`, `flex-basis` |
-| `flex-grow` | How much the item grows relative to others |
-| `flex-shrink` | How much the item shrinks relative to others |
-| `flex-basis` | Default size before distributing space |
-| `order` | Sets visual order of flex items |
-| `align-self` | Overrides container `align-items` for one item |
-
-### Grid (Container)
-
-| Property | Description |
-|---|---|
-| `display: grid` | Creates a grid container |
-| `grid-template-columns` | Defines column track sizes |
-| `grid-template-rows` | Defines row track sizes |
-| `grid-template-areas` | Defines named grid areas |
-| `grid-template` | Shorthand for rows, columns, areas |
-| `gap` / `row-gap` / `column-gap` | Spacing between grid tracks |
-| `grid-auto-rows` / `grid-auto-columns` | Size for implicitly created tracks |
-| `grid-auto-flow` | Controls auto-placement algorithm (`row`, `column`, `dense`) |
-| `justify-items` / `align-items` | Aligns items within their cells |
-| `justify-content` / `align-content` | Aligns the grid within its container |
-
-### Grid (Items)
-
-| Property | Description |
-|---|---|
-| `grid-column` | Shorthand for `grid-column-start` / `grid-column-end` |
-| `grid-row` | Shorthand for `grid-row-start` / `grid-row-end` |
-| `grid-area` | Assigns item to a named area or shorthand for row/column placement |
-| `justify-self` / `align-self` | Aligns an individual item within its cell |
-
-### Other Common Properties
-
-| Property | Description |
-|---|---|
-| `cursor` | Sets the mouse cursor type (`pointer`, `default`, `grab`, `text`, etc.) |
-| `box-shadow` | Adds shadow effects to elements |
-| `filter` | Applies graphical effects (`blur()`, `brightness()`, `contrast()`, `grayscale()`, etc.) |
-| `clip-path` | Clips an element to a shape |
-| `object-fit` | How replaced elements (img, video) fit their container (`fill`, `contain`, `cover`, `none`) |
-| `object-position` | Position of replaced element content within its box |
-| `resize` | Whether an element is resizable (`none`, `both`, `horizontal`, `vertical`) |
-| `user-select` | Controls whether text can be selected (`none`, `auto`, `text`, `all`) |
-| `pointer-events` | Controls whether an element reacts to pointer events |
-| `content` | Used with `::before` and `::after` pseudo-elements |
-| `counter-reset` / `counter-increment` | Creates and increments CSS counters |
-| `will-change` | Hints to the browser about upcoming changes for optimization |
-| `aspect-ratio` | Sets a preferred aspect ratio for the element |
-| `accent-color` | Sets the accent color for form controls |
-| `scroll-behavior` | Controls smooth scrolling (`auto`, `smooth`) |
-
----
-
-## 2. CSS Selectors
-
-> Source: https://www.w3schools.com/cssref/css_selectors.php
-
-### Basic Selectors
-
-| Selector | Example | Description |
-|---|---|---|
-| `*` | `* { }` | Selects all elements |
-| `element` | `p { }` | Selects all `<p>` elements |
-| `.class` | `.intro { }` | Selects all elements with `class="intro"` |
-| `#id` | `#firstname { }` | Selects the element with `id="firstname"` |
-| `element.class` | `p.intro { }` | Selects `<p>` elements with `class="intro"` |
-
-### Grouping
-
-| Selector | Example | Description |
-|---|---|---|
-| `sel1, sel2` | `div, p { }` | Selects all `<div>` and all `<p>` elements |
-
-### Combinator Selectors
-
-| Selector | Example | Description |
-|---|---|---|
-| `ancestor descendant` | `div p { }` | Selects all `<p>` inside `<div>` (any depth) |
-| `parent > child` | `div > p { }` | Selects `<p>` that are direct children of `<div>` |
-| `element + sibling` | `div + p { }` | Selects the first `<p>` immediately after `<div>` |
-| `element ~ siblings` | `div ~ p { }` | Selects all `<p>` that are siblings after `<div>` |
-
-### Attribute Selectors
-
-| Selector | Example | Description |
-|---|---|---|
-| `[attr]` | `[target] { }` | Elements with a `target` attribute |
-| `[attr=value]` | `[target="_blank"] { }` | Elements where `target` equals `_blank` |
-| `[attr~=value]` | `[title~="flower"] { }` | Attribute contains the word `flower` |
-| `[attr\|=value]` | `[lang\|="en"] { }` | Attribute starts with `en` (exact or followed by `-`) |
-| `[attr^=value]` | `a[href^="https"] { }` | Attribute value begins with `https` |
-| `[attr$=value]` | `a[href$=".pdf"] { }` | Attribute value ends with `.pdf` |
-| `[attr*=value]` | `a[href*="w3schools"] { }` | Attribute value contains `w3schools` |
-
----
-
-## 3. Pseudo-Classes and Pseudo-Elements
-
-> Source: https://www.w3schools.com/cssref/css_ref_pseudo_classes.php
-
-### Pseudo-Classes
-
-Pseudo-classes select elements based on state or position.
-
-**Link and User Action States:**
-
-| Pseudo-Class | Description |
-|---|---|
-| `:link` | Unvisited links |
-| `:visited` | Visited links |
-| `:hover` | Element being hovered over |
-| `:active` | Element being activated (e.g., clicked) |
-| `:focus` | Element that has focus |
-| `:focus-within` | Element that contains a focused element |
-| `:focus-visible` | Element focused via keyboard (not mouse) |
-
-**Form / Input States:**
-
-| Pseudo-Class | Description |
-|---|---|
-| `:checked` | Checked checkbox or radio button |
-| `:disabled` | Disabled form elements |
-| `:enabled` | Enabled form elements |
-| `:required` | Form elements with `required` attribute |
-| `:optional` | Form elements without `required` attribute |
-| `:valid` | Form elements with valid values |
-| `:invalid` | Form elements with invalid values |
-| `:in-range` | Input values within a specified range |
-| `:out-of-range` | Input values outside a specified range |
-| `:read-only` | Elements with `readonly` attribute |
-| `:read-write` | Elements without `readonly` attribute |
-| `:placeholder-shown` | Input elements currently showing placeholder text |
-| `:default` | The default form element |
-| `:indeterminate` | Checkbox/radio with indeterminate state |
-
-**Structural Pseudo-Classes:**
-
-| Pseudo-Class | Description |
-|---|---|
-| `:first-child` | First child of its parent |
-| `:last-child` | Last child of its parent |
-| `:nth-child(n)` | The nth child (`n`, `2n`, `odd`, `even`, `3n+1`, etc.) |
-| `:nth-last-child(n)` | The nth child counting from the end |
-| `:only-child` | Only child of its parent |
-| `:first-of-type` | First element of its type within parent |
-| `:last-of-type` | Last element of its type within parent |
-| `:nth-of-type(n)` | The nth element of its type |
-| `:nth-last-of-type(n)` | The nth element of its type counting from end |
-| `:only-of-type` | Only element of its type within parent |
-| `:root` | The document root element (usually `<html>`) |
-| `:empty` | Elements with no children or text |
-
-**Other Pseudo-Classes:**
-
-| Pseudo-Class | Description |
-|---|---|
-| `:not(selector)` | Elements that do NOT match the selector |
-| `:is(selector)` | Matches any element that matches one of the selectors in the list |
-| `:where(selector)` | Same as `:is()` but with zero specificity |
-| `:has(selector)` | Parent selector -- matches if the element has a descendant matching the selector |
-| `:target` | Element whose ID matches the URL fragment (e.g., `#section1`) |
-| `:lang(language)` | Elements with a specified language attribute |
-
-### Pseudo-Elements
-
-Pseudo-elements style specific parts of an element.
-
-| Pseudo-Element | Description |
-|---|---|
-| `::before` | Inserts content before the element's content |
-| `::after` | Inserts content after the element's content |
-| `::first-line` | Styles the first line of a block element |
-| `::first-letter` | Styles the first letter of a block element |
-| `::selection` | Styles the portion selected/highlighted by the user |
-| `::placeholder` | Styles the placeholder text of an input |
-| `::marker` | Styles the marker (bullet/number) of list items |
-| `::backdrop` | Styles the backdrop behind a dialog or fullscreen element |
-
----
-
-## 4. CSS At-Rules
-
-> Source: https://www.w3schools.com/cssref/css_ref_atrules.php
-
-| At-Rule | Description |
-|---|---|
-| `@charset` | Specifies the character encoding of the stylesheet (e.g., `@charset "UTF-8";`) |
-| `@import` | Imports an external stylesheet (`@import url("style.css");`) |
-| `@font-face` | Defines a custom font to be used in the document |
-| `@keyframes` | Defines animation keyframes for `animation-name` |
-| `@media` | Applies styles conditionally based on media queries |
-| `@supports` | Applies styles only if the browser supports a given CSS feature |
-| `@page` | Defines styles for printed pages (margins, size, etc.) |
-| `@layer` | Declares cascade layers to control specificity ordering |
-| `@container` | Applies styles based on the size of a container element |
-| `@property` | Registers a custom property with a defined syntax, inheritance, and initial value |
-| `@scope` | Limits styles to a specific DOM subtree |
-| `@starting-style` | Defines styles for CSS transitions when an element first appears |
-| `@counter-style` | Defines custom counter styles for list markers |
-| `@namespace` | Declares an XML namespace for use in CSS selectors |
-| `@color-profile` | Defines a color profile for use with `color()` function |
-
-### Common At-Rule Examples
-
-```css
-/* @font-face -- define a custom font */
-@font-face {
-  font-family: "MyFont";
-  src: url("myfont.woff2") format("woff2"),
-       url("myfont.woff") format("woff");
-  font-weight: normal;
-  font-style: normal;
-  font-display: swap;
-}
-
-/* @keyframes -- define an animation */
-@keyframes fadeIn {
-  from { opacity: 0; }
-  to   { opacity: 1; }
-}
-
-/* @media -- responsive styles */
-@media screen and (max-width: 768px) {
-  .container { flex-direction: column; }
-}
-
-/* @supports -- feature detection */
-@supports (display: grid) {
-  .container { display: grid; }
-}
-
-/* @layer -- cascade layers */
-@layer base, components, utilities;
-@layer base {
-  body { margin: 0; }
-}
-
-/* @container -- container queries */
-@container (min-width: 400px) {
-  .card { grid-template-columns: 1fr 1fr; }
-}
-```
-
----
-
-## 5. CSS Styling Basics
-
-> Source: https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics
-
-### What is CSS?
-
-**CSS (Cascading Style Sheets)** is used to style and lay out web pages. It controls fonts, colors, sizes, spacing, layout, animations, and other visual aspects.
-
-### CSS Syntax
-
-```css
-selector {
-  property: value;
-  property: value;
-}
-```
-
-A **rule** (or **ruleset**) consists of a **selector** and a **declaration block** containing one or more **declarations** (property-value pairs).
-
-### Applying CSS to HTML
-
-There are three ways to apply CSS:
-
-1. **External Stylesheet** (recommended):
-   ```html
-   <link rel="stylesheet" href="styles.css">
-   ```
-
-2. **Internal Stylesheet**:
-   ```html
-   <style>
-     p { color: red; }
-   </style>
-   ```
-
-3. **Inline Styles** (avoid when possible):
-   ```html
-   <p style="color: red;">Text</p>
-   ```
-
-### The Cascade, Specificity, and Inheritance
-
-- **Cascade**: When multiple rules target the same element, later rules override earlier ones (all else being equal).
-- **Specificity**: More specific selectors override less specific ones. Specificity ranking (low to high):
-  - Type selectors (`p`, `div`) and pseudo-elements
-  - Class selectors (`.intro`), attribute selectors, and pseudo-classes
-  - ID selectors (`#main`)
-  - Inline styles
-  - `!important` (overrides all, use sparingly)
-- **Inheritance**: Some properties (mostly text-related) are inherited by child elements; others (mostly layout-related) are not.
-
-### Values and Units
-
-| Unit | Type | Description |
-|---|---|---|
-| `px` | Absolute | Pixels (most common absolute unit) |
-| `em` | Relative | Relative to parent element font size |
-| `rem` | Relative | Relative to root element font size |
-| `%` | Relative | Percentage of parent element's value |
-| `vw` / `vh` | Relative | 1% of viewport width / height |
-| `vmin` / `vmax` | Relative | 1% of the smaller/larger viewport dimension |
-| `ch` | Relative | Width of the `0` character |
-| `fr` | Fraction | Fraction of available space (Grid only) |
-
-### Color Values
-
-```css
-color: red;                        /* Named color */
-color: #ff0000;                    /* Hex */
-color: #f00;                       /* Hex shorthand */
-color: rgb(255, 0, 0);             /* RGB */
-color: rgba(255, 0, 0, 0.5);      /* RGB with alpha */
-color: rgb(255 0 0 / 50%);        /* Modern RGB syntax */
-color: hsl(0, 100%, 50%);         /* HSL */
-color: hsla(0, 100%, 50%, 0.5);   /* HSL with alpha */
-color: hsl(0 100% 50% / 50%);     /* Modern HSL syntax */
-```
-
----
-
-## 6. The Box Model
-
-> Source: https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/Box_model
-
-### The Four Layers
-
-Every CSS element is surrounded by a box with four layers (inside to outside):
-
-1. **Content Box** -- where content is displayed; sized with `width` and `height`
-2. **Padding Box** -- space around content; sized with `padding`
-3. **Border Box** -- wraps content and padding; sized with `border`
-4. **Margin Box** -- outermost space around the element; sized with `margin`
-
-### Standard vs. Alternative Box Model
-
-**Standard (default -- `content-box`):**
-```css
-.box {
-  width: 350px;       /* Content width only */
-  padding: 25px;
-  border: 5px solid black;
-  margin: 10px;
-}
-/* Total rendered width: 350 + 25 + 25 + 5 + 5 = 410px */
-```
-
-**Alternative (`border-box`):**
-```css
-.box {
-  box-sizing: border-box;
-  width: 350px;       /* Includes padding and border */
-  padding: 25px;
-  border: 5px solid black;
-  margin: 10px;
-}
-/* Total rendered width: 350px (content area shrinks to fit) */
-```
-
-**Recommended global reset:**
-```css
-html {
-  box-sizing: border-box;
-}
-
-*,
-*::before,
-*::after {
-  box-sizing: inherit;
-}
-```
-
-### Block vs. Inline vs. Inline-Block
-
-| Behavior | Block | Inline | Inline-Block |
-|---|---|---|---|
-| Breaks onto new line | Yes | No | No |
-| Respects `width`/`height` | Yes | No | Yes |
-| Padding/margin push others away | Yes | Left/right only | Yes |
-| Fills container width by default | Yes | No | No |
-| Common elements | `div`, `p`, `h1`-`h6`, `section` | `a`, `span`, `em`, `strong` | -- (set via CSS) |
-
-### Margin Collapsing
-
-When vertical margins of adjacent block elements touch, they collapse:
-
-- **Two positive margins**: The larger value wins
-- **Two negative margins**: The smallest (most negative) value wins
-- **One positive + one negative**: They are subtracted from each other
-
-```css
-.one { margin-bottom: 50px; }
-.two { margin-top: 30px; }
-/* Result: 50px gap between them (not 80px) */
-```
-
-### Shorthand Notation
-
-```css
-/* All four sides */
-margin: 10px;                      /* All sides 10px */
-margin: 10px 20px;                 /* Vertical 10px, Horizontal 20px */
-margin: 10px 20px 30px;            /* Top 10px, Horizontal 20px, Bottom 30px */
-margin: 10px 20px 30px 40px;       /* Top, Right, Bottom, Left (clockwise) */
-```
-
----
-
-## 7. Flexbox Layout
-
-> Source: https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/CSS_layout/Flexbox
-
-Flexbox is a **one-dimensional** layout method for arranging items in rows or columns.
-
-### Axes
-
-- **Main Axis**: The direction items are laid out (default: horizontal)
-- **Cross Axis**: Perpendicular to the main axis (default: vertical)
-
-### Container Properties
-
-```css
-.container {
-  display: flex;               /* or inline-flex */
-
-  /* Direction */
-  flex-direction: row;         /* row | row-reverse | column | column-reverse */
-
-  /* Wrapping */
-  flex-wrap: nowrap;           /* nowrap | wrap | wrap-reverse */
-
-  /* Shorthand for direction + wrap */
-  flex-flow: row wrap;
-
-  /* Main axis alignment */
-  justify-content: flex-start; /* flex-start | flex-end | center |
-                                  space-between | space-around | space-evenly */
-
-  /* Cross axis alignment */
-  align-items: stretch;        /* stretch | flex-start | flex-end |
-                                  center | baseline */
-
-  /* Multi-line cross axis alignment (when wrapping) */
-  align-content: stretch;      /* stretch | flex-start | flex-end | center |
-                                  space-between | space-around */
-
-  /* Spacing */
-  gap: 10px;                   /* row-gap and column-gap shorthand */
-}
-```
-
-### Item Properties
-
-```css
-.item {
-  /* Growth/shrink behavior (shorthand) */
-  flex: 1;                     /* flex-grow: 1, flex-shrink: 1, flex-basis: 0 */
-  flex: 1 200px;               /* flex-grow: 1, flex-basis: 200px */
-
-  /* Individual properties */
-  flex-grow: 0;                /* How much the item grows (0 = don't grow) */
-  flex-shrink: 1;              /* How much the item shrinks (0 = don't shrink) */
-  flex-basis: auto;            /* Default size before space distribution */
-
-  /* Visual ordering */
-  order: 0;                    /* Lower values appear first; default is 0 */
-
-  /* Individual cross-axis alignment */
-  align-self: auto;            /* auto | flex-start | flex-end | center |
-                                  baseline | stretch */
-}
-```
-
-### Common Patterns
-
-```css
-/* Equal-width columns */
-.item { flex: 1; }
-
-/* Centering an item vertically and horizontally */
-.container {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-/* Responsive wrapping layout */
-.container {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 1rem;
-}
-.item {
-  flex: 1 1 300px;   /* Grow, shrink, min-width 300px */
-}
-
-/* Sticky footer layout */
-body {
-  display: flex;
-  flex-direction: column;
-  min-height: 100vh;
-}
-main { flex: 1; }
-```
-
----
-
-## 8. Grid Layout
-
-> Source: https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/CSS_layout/Grids
-
-CSS Grid is a **two-dimensional** layout system for organizing content into rows and columns.
-
-### Container Properties
-
-```css
-.container {
-  display: grid;               /* or inline-grid */
-
-  /* Define columns and rows */
-  grid-template-columns: 200px 1fr 200px;
-  grid-template-rows: auto 1fr auto;
-
-  /* Using repeat() */
-  grid-template-columns: repeat(3, 1fr);
-
-  /* Responsive auto-fill / auto-fit */
-  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
-  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-
-  /* Named areas */
-  grid-template-areas:
-    "header  header  header"
-    "sidebar content content"
-    "footer  footer  footer";
-
-  /* Gaps between tracks */
-  gap: 20px;
-  column-gap: 20px;
-  row-gap: 20px;
-
-  /* Size for implicitly created tracks */
-  grid-auto-rows: minmax(100px, auto);
-  grid-auto-columns: 1fr;
-
-  /* Auto-placement algorithm */
-  grid-auto-flow: row;         /* row | column | dense */
-
-  /* Align all items within their cells */
-  justify-items: stretch;      /* start | end | center | stretch */
-  align-items: stretch;        /* start | end | center | stretch */
-
-  /* Align the grid within its container */
-  justify-content: start;      /* start | end | center | stretch |
-                                  space-between | space-around | space-evenly */
-  align-content: start;
-}
-```
-
-### Key Functions
-
-| Function | Description |
-|---|---|
-| `repeat(count, size)` | Repeats a track definition (e.g., `repeat(3, 1fr)`) |
-| `minmax(min, max)` | Sets a minimum and maximum size for a track |
-| `auto-fill` | Creates as many tracks as fit the container (empty tracks remain) |
-| `auto-fit` | Creates as many tracks as fit, then collapses empty tracks |
-| `fit-content(max)` | Sizes track to content, up to a maximum |
-
-### The `fr` Unit
-
-The `fr` unit represents one fraction of available space:
-```css
-grid-template-columns: 2fr 1fr 1fr;
-/* First column gets 50%, others get 25% each */
-```
-
-### Item Properties
-
-```css
-.item {
-  /* Placement by line numbers */
-  grid-column: 1 / 3;         /* Start at line 1, end at line 3 */
-  grid-row: 1 / 2;
-
-  /* Placement by span */
-  grid-column: 1 / span 2;    /* Start at line 1, span 2 columns */
-
-  /* Full-width item */
-  grid-column: 1 / -1;        /* Line 1 to the last line */
-
-  /* Placement by named area */
-  grid-area: header;
-
-  /* Self-alignment within cell */
-  justify-self: center;       /* start | end | center | stretch */
-  align-self: center;
-}
-```
-
-### Named Grid Areas Example
-
-```css
-.container {
-  display: grid;
-  grid-template-columns: 1fr 3fr;
-  grid-template-areas:
-    "header  header"
-    "sidebar content"
-    "footer  footer";
-  gap: 20px;
-}
-
-header  { grid-area: header; }
-aside   { grid-area: sidebar; }
-main    { grid-area: content; }
-footer  { grid-area: footer; }
-```
-
-### Subgrid
-
-A grid item can inherit its parent's track definitions:
-```css
-.nested {
-  display: grid;
-  grid-template-columns: subgrid;
-}
-```
-
-### Explicit vs. Implicit Grid
-
-- **Explicit grid**: Tracks defined by `grid-template-columns` / `grid-template-rows`
-- **Implicit grid**: Auto-generated tracks for content that overflows; controlled by `grid-auto-rows` / `grid-auto-columns`
-
----
-
-## 9. Media Queries
-
-> Source: https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/CSS_layout/Media_queries
-
-### Syntax
-
-```css
-@media media-type and (media-feature) {
-  /* CSS rules */
-}
-```
-
-### Media Types
-
-| Type | Description |
-|---|---|
-| `all` | All devices (default) |
-| `screen` | Screens (monitors, phones, tablets) |
-| `print` | Print preview and printed pages |
-
-### Common Media Features
-
-| Feature | Description | Example |
-|---|---|---|
-| `width` / `min-width` / `max-width` | Viewport width | `(min-width: 768px)` |
-| `height` / `min-height` / `max-height` | Viewport height | `(min-height: 600px)` |
-| `orientation` | Portrait or landscape | `(orientation: landscape)` |
-| `hover` | Can the user hover? | `(hover: hover)` |
-| `pointer` | Pointing device precision | `(pointer: fine)` or `(pointer: coarse)` |
-| `prefers-color-scheme` | User's color scheme preference | `(prefers-color-scheme: dark)` |
-| `prefers-reduced-motion` | User prefers reduced motion | `(prefers-reduced-motion: reduce)` |
-| `aspect-ratio` | Viewport aspect ratio | `(aspect-ratio: 16/9)` |
-| `resolution` | Device pixel density | `(min-resolution: 2dppx)` |
-
-### Logical Operators
-
-```css
-/* AND -- all conditions must be true */
-@media screen and (min-width: 600px) and (orientation: landscape) { }
-
-/* OR -- comma-separated; any condition can be true */
-@media (min-width: 600px), (orientation: landscape) { }
-
-/* NOT -- negates the entire query */
-@media not screen and (min-width: 600px) { }
-
-/* Range syntax (modern) */
-@media (30em <= width <= 50em) { }
-```
-
-### Mobile-First Responsive Design
-
-Start with mobile styles, then add complexity for larger screens:
-
-```css
-/* Base styles (mobile) */
-.container {
-  width: 90%;
-  margin: 0 auto;
-}
-
-/* Medium screens (tablets) */
-@media screen and (min-width: 40em) {
-  .container {
-    display: grid;
-    grid-template-columns: 3fr 1fr;
-    gap: 20px;
-  }
-
-  nav ul {
-    display: flex;
-  }
-}
-
-/* Large screens (desktop) */
-@media screen and (min-width: 70em) {
-  .container {
-    max-width: 1200px;
-  }
-}
-```
-
-### Viewport Meta Tag (Required)
-
-Always include this in your HTML `<head>` for responsive design to work on mobile:
-
-```html
-<meta name="viewport" content="width=device-width, initial-scale=1">
-```
-
-### Common Breakpoints
-
-While there are no universal breakpoints, commonly used values include:
-
-| Label | Breakpoint |
-|---|---|
-| Small phones | `< 576px` |
-| Phones / large phones | `>= 576px` |
-| Tablets | `>= 768px` |
-| Desktops | `>= 992px` |
-| Large desktops | `>= 1200px` |
-| Extra large | `>= 1400px` |
-
-**Best practice**: Do not target specific devices. Instead, add breakpoints where your content needs them -- when line lengths get too long or layouts break.
-
-### Responsive Without Media Queries
-
-Modern CSS layout methods can be inherently responsive:
-
-```css
-/* Auto-responsive grid -- no media query needed */
-.grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
-  gap: 1rem;
-}
-
-/* Fluid typography */
-h1 {
-  font-size: clamp(1.5rem, 4vw, 3rem);
-}
-```
-
-### Print Styles
-
-```css
-@media print {
-  nav, .sidebar, footer {
-    display: none;
-  }
-
-  body {
-    font-size: 12pt;
-    color: black;
-    background: white;
-  }
-
-  a[href]::after {
-    content: " (" attr(href) ")";
-  }
-}
-```
-
-### Dark Mode Support
-
-```css
-@media (prefers-color-scheme: dark) {
-  :root {
-    --bg-color: #1a1a1a;
-    --text-color: #e0e0e0;
-  }
-
-  body {
-    background-color: var(--bg-color);
-    color: var(--text-color);
-  }
-}
-```
-
----
-
-## Quick Syntax Cheat Sheet
-
-```css
-/* Variables (Custom Properties) */
-:root {
-  --primary: #3498db;
-  --spacing: 1rem;
-}
-.element {
-  color: var(--primary);
-  padding: var(--spacing);
-}
-
-/* Nesting (modern CSS) */
-.card {
-  background: white;
-  & .title {
-    font-size: 1.5rem;
-  }
-  &:hover {
-    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
-  }
-}
-
-/* Logical Properties */
-margin-inline: auto;          /* left + right margin */
-margin-block: 1rem;           /* top + bottom margin */
-padding-inline-start: 1rem;   /* left in LTR, right in RTL */
-
-/* Container Queries */
-.card-container {
-  container-type: inline-size;
-}
-@container (min-width: 400px) {
-  .card { flex-direction: row; }
-}
-
-/* Scroll Snap */
-.scroll-container {
-  scroll-snap-type: x mandatory;
-}
-.scroll-item {
-  scroll-snap-align: start;
-}
-```
-
----
-
-*This reference was compiled from content at w3schools.com and developer.mozilla.org (MDN Web Docs). For full details, visit the source URLs listed above each section.*
diff --git a/skills/create-web-form/references/form-basics.md b/skills/create-web-form/references/form-basics.md
deleted file mode 100644
index 4ea2043f7..000000000
--- a/skills/create-web-form/references/form-basics.md
+++ /dev/null
@@ -1,451 +0,0 @@
-# Form Basics Reference
-
-This reference consolidates key educational content from MDN Web Docs covering the fundamentals of creating and structuring HTML web forms.
-
----
-
-## Your First Form
-
-> **Source:** https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/Your_first_form
-
-### What Are Web Forms?
-
-Web forms are one of the main points of interaction between users and websites or applications. They allow users to enter data for server processing and storage, or to update the interface immediately on the client side.
-
-A web form consists of:
-
-- **Form controls (widgets):** text fields, dropdowns, buttons, checkboxes, radio buttons
-- **Additional elements:** mostly built with the `<input>` element, plus other semantic elements
-- **Form labels:** paired with controls for accessibility
-
-Form controls can enforce specific formats via **form validation** and should be paired with text labels for both sighted and visually impaired users.
-
-### Designing Your Form
-
-Best practices before writing any code:
-
-- Step back and plan your form before coding
-- Create a mockup to define the data you need
-- Keep forms simple and focused
-- Ask only for absolutely necessary data
-- Larger forms risk frustrating users and losing engagement
-
-### The `<form>` Element
-
-The `<form>` element formally defines a form container and its behavior.
-
-```html
-<form action="/my-handling-form-page" method="post">...</form>
-```
-
-**Attributes:**
-
-| Attribute | Description |
-|-----------|-------------|
-| `action`  | The URL where form data is sent when submitted |
-| `method`  | The HTTP method for sending data (`get` or `post`) |
-
-Both attributes are optional but it is standard practice to always set them.
-
-### The `<label>`, `<input>`, and `<textarea>` Elements
-
-```html
-<form action="/my-handling-form-page" method="post">
-  <p>
-    <label for="name">Name:</label>
-    <input type="text" id="name" name="user_name" />
-  </p>
-  <p>
-    <label for="mail">Email:</label>
-    <input type="email" id="mail" name="user_email" />
-  </p>
-  <p>
-    <label for="msg">Message:</label>
-    <textarea id="msg" name="user_message"></textarea>
-  </p>
-</form>
-```
-
-#### The `<label>` Element
-
-- The `for` attribute must match the `id` of its associated form control.
-- Clicking or tapping a label activates its associated control.
-- Provides an accessible name for screen readers.
-- Improves usability for mouse, trackpad, and touch devices.
-
-#### The `<input>` Element
-
-The `type` attribute defines how the input appears and behaves.
-
-| Type    | Description |
-|---------|-------------|
-| `text`  | Basic single-line text field (default); accepts any text |
-| `email` | Single-line field that validates for well-formed email addresses; shows an appropriate keyboard on mobile devices |
-
-`<input>` is a **void element** -- it has no closing tag.
-
-Setting a default value:
-
-```html
-<input type="text" value="by default this element is filled with this text" />
-```
-
-#### The `<textarea>` Element
-
-A multi-line text field for longer messages. Unlike `<input>`, it is **not** a void element and requires a closing tag.
-
-Setting a default value:
-
-```html
-<textarea>
-by default this element is filled with this text
-</textarea>
-```
-
-### The `<button>` Element
-
-```html
-<p class="button">
-  <button type="submit">Send your message</button>
-</p>
-```
-
-**`type` attribute values:**
-
-| Value    | Description |
-|----------|-------------|
-| `submit` | Sends form data to the URL defined in in the `<form>` element's `action` attribute (default) |
-| `reset`  | Resets all widgets to their default values (considered a UX anti-pattern -- avoid unless necessary) |
-| `button` | Does nothing by default; useful for custom JavaScript functionality |
-
-The `<button>` element is preferred over `<input type="submit">` because `<button>` allows full HTML content inside it, enabling more complex designs, while `<input>` only allows plain text.
-
-### Basic Form Styling
-
-```css
-body {
-  text-align: center;
-}
-
-form {
-  display: inline-block;
-  padding: 1em;
-  border: 1px solid #cccccc;
-  border-radius: 1em;
-}
-
-p + p {
-  margin-top: 1em;
-}
-
-label {
-  display: inline-block;
-  min-width: 90px;
-  text-align: right;
-}
-
-input,
-textarea {
-  font: 1em sans-serif;
-  width: 300px;
-  box-sizing: border-box;
-  border: 1px solid #999999;
-}
-
-input:focus,
-textarea:focus {
-  outline-style: solid;
-  outline-color: black;
-}
-
-textarea {
-  vertical-align: top;
-  height: 5em;
-}
-
-.button {
-  padding-left: 90px;
-}
-
-button {
-  margin-left: 0.5em;
-}
-```
-
-### Sending Form Data to Your Web Server
-
-Form data is sent as **name/value pairs**. Every form control that should submit data must have a `name` attribute.
-
-```html
-<form action="/my-handling-form-page" method="post">
-  <input type="text" id="name" name="user_name" />
-  <input type="email" id="mail" name="user_email" />
-  <textarea id="msg" name="user_message"></textarea>
-  <button type="submit">Send your message</button>
-</form>
-```
-
-This form sends three pieces of data to `/my-handling-form-page` via HTTP POST:
-
-- `user_name` -- the user's name
-- `user_email` -- the user's email
-- `user_message` -- the user's message
-
-Each server-side language (PHP, Python, Ruby, Java, C#, etc.) has its own mechanism for handling form data using the `name` attributes.
-
-### Complete Example
-
-```html
-<form action="/my-handling-form-page" method="post">
-  <div>
-    <label for="name">Name:</label>
-    <input type="text" id="name" name="user_name" />
-  </div>
-
-  <div>
-    <label for="mail">Email:</label>
-    <input type="email" id="mail" name="user_email" />
-  </div>
-
-  <div>
-    <label for="msg">Message:</label>
-    <textarea id="msg" name="user_message"></textarea>
-  </div>
-
-  <div class="button">
-    <button type="submit">Send your message</button>
-  </div>
-</form>
-```
-
-### Key Takeaways
-
-1. **Accessibility first:** Always use `<label>` elements with `for` attributes.
-2. **Semantic HTML:** Use appropriate `<input>` types (email, text, etc.).
-3. **Keep it simple:** Ask only for necessary data.
-4. **Name your controls:** Every input needs a `name` attribute for form submission.
-5. **Styling matters:** Forms need CSS to look professional.
-
----
-
-## How to Structure a Web Form
-
-> **Source:** https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/How_to_structure_a_web_form
-
-### The `<form>` Element
-
-The `<form>` element formally defines a form and determines its behavior.
-
-Key points:
-
-- All form content must be nested inside `<form>`.
-- Assistive technologies and browser plugins can discover `<form>` elements and provide special features.
-- **It is strictly forbidden to nest a form inside another form** -- doing so causes unpredictable behavior.
-- Form controls can exist outside a `<form>` element but should be associated using the `form` attribute.
-
-### The `<fieldset>` and `<legend>` Elements
-
-`<fieldset>` creates groups of widgets for styling and semantic purposes. `<legend>` labels a fieldset by describing its purpose and is positioned directly after the opening `<fieldset>` tag.
-
-Many assistive technologies (such as JAWS and NVDA) treat the legend text as part of each control's label within the fieldset.
-
-```html
-<form>
-  <fieldset>
-    <legend>Fruit juice size</legend>
-    <p>
-      <input type="radio" name="size" id="size_1" value="small" />
-      <label for="size_1">Small</label>
-    </p>
-    <p>
-      <input type="radio" name="size" id="size_2" value="medium" />
-      <label for="size_2">Medium</label>
-    </p>
-    <p>
-      <input type="radio" name="size" id="size_3" value="large" />
-      <label for="size_3">Large</label>
-    </p>
-  </fieldset>
-</form>
-```
-
-A screen reader would announce: "Fruit juice size small," "Fruit juice size medium," "Fruit juice size large."
-
-**Use cases:**
-
-- Essential for grouping radio buttons
-- Sectioning complex, long forms across multiple pages
-- Improving usability when many controls appear on a single page
-
-### The `<label>` Element
-
-The `<label>` element is the formal way to define a label for an HTML form widget.
-
-#### Two Methods for Associating Labels
-
-**Method 1: Using the `for` attribute (recommended)**
-
-```html
-<label for="name">Name:</label>
-<input type="text" id="name" name="user_name" />
-```
-
-A screen reader would announce: "Name, edit text."
-
-**Method 2: Implicit association (nesting)**
-
-```html
-<label for="name">
-  Name: <input type="text" id="name" name="user_name" />
-</label>
-```
-
-**Best practice:** Always set the `for` attribute even when nesting, to ensure all assistive technologies understand the relationship.
-
-#### Labels Are Clickable
-
-Clicking or tapping a label activates the corresponding widget. This is especially useful for radio buttons and checkboxes which have small hit areas.
-
-```html
-<form>
-  <p>
-    <input type="checkbox" id="taste_1" name="taste_cherry" value="cherry" />
-    <label for="taste_1">I like cherry</label>
-  </p>
-  <p>
-    <input type="checkbox" id="taste_2" name="taste_banana" value="banana" />
-    <label for="taste_2">I like banana</label>
-  </p>
-</form>
-```
-
-#### Handling Multiple Labels
-
-Avoid placing multiple separate labels on one widget. Instead, include all label information in one `<label>` element:
-
-```html
-<div>
-  <label for="username">Name *:</label>
-  <input id="username" type="text" name="username" required />
-</div>
-```
-
-### Common HTML Structures Used with Forms
-
-Recommended structural elements for organizing form content:
-
-- `<ul>` or `<ol>` lists with `<li>` items -- best for multiple checkboxes or radio buttons
-- `<p>` and `<div>` elements for wrapping labels and widgets
-- `<section>` elements to organize complex forms into logical groups
-- HTML headings (`<h1>`, `<h2>`, etc.) for sectioning
-- If a form has required fields, include a statement explaining the notation (e.g., "* required") before the form begins
-
-### Building a Form Structure -- Payment Form Example
-
-```html
-<form>
-  <h1>Payment form</h1>
-  <p>Please complete all required (*) fields.</p>
-
-  <!-- Contact Information Section -->
-  <section>
-    <h2>Contact information</h2>
-    <fieldset>
-      <legend>Title</legend>
-      <ul>
-        <li>
-          <label for="title_1">
-            <input type="radio" id="title_1" name="title" value="A" />
-            Ace
-          </label>
-        </li>
-        <li>
-          <label for="title_2">
-            <input type="radio" id="title_2" name="title" value="K" />
-            King
-          </label>
-        </li>
-        <li>
-          <label for="title_3">
-            <input type="radio" id="title_3" name="title" value="Q" />
-            Queen
-          </label>
-        </li>
-      </ul>
-    </fieldset>
-    <p>
-      <label for="name">Name *:</label>
-      <input type="text" id="name" name="username" required />
-    </p>
-    <p>
-      <label for="mail">Email *:</label>
-      <input type="email" id="mail" name="user-mail" required />
-    </p>
-    <p>
-      <label for="pwd">Password *:</label>
-      <input type="password" id="pwd" name="password" required />
-    </p>
-  </section>
-
-  <!-- Payment Information Section -->
-  <section>
-    <h2>Payment information</h2>
-    <p>
-      <label for="card">
-        <span>Card type:</span>
-      </label>
-      <select id="card" name="user-card">
-        <option value="visa">Visa</option>
-        <option value="mc">Mastercard</option>
-        <option value="amex">American Express</option>
-      </select>
-    </p>
-    <p>
-      <label for="number">Card number *:</label>
-      <input type="tel" id="number" name="card-number" required />
-    </p>
-    <p>
-      <label for="expiration">Expiration date *:</label>
-      <input
-        type="text"
-        id="expiration"
-        name="expiration"
-        required
-        placeholder="MM/YY"
-        pattern="^(0[1-9]|1[0-2])\/([0-9]{2})$" />
-    </p>
-  </section>
-
-  <!-- Submit Section -->
-  <section>
-    <p>
-      <button type="submit">Validate the payment</button>
-    </p>
-  </section>
-</form>
-```
-
-### Important Attributes Reference
-
-| Attribute     | Element        | Purpose |
-|---------------|----------------|---------|
-| `for`         | `<label>`      | Associates a label with a form control by matching the control's `id` |
-| `id`          | Form control   | Unique identifier for associating with labels |
-| `name`        | Form control   | Identifies data submitted with the form |
-| `required`    | Form control   | Marks a field as required for submission |
-| `placeholder` | `<input>`      | Shows example format inside the field (e.g., "MM/YY") |
-| `pattern`     | `<input>`      | Regular expression for client-side validation |
-| `form`        | Form control   | Associates a control with a `<form>`, even if the control is outside it |
-| `type`        | `<input>`, `<button>` | Specifies input behavior (text, email, password, tel, etc.) |
-
-### Key Best Practices for Accessible Form Structure
-
-1. Always use the `<form>` element to wrap all form content.
-2. Use `<fieldset>` and `<legend>` to group related controls, especially radio buttons.
-3. Always associate labels with form controls using the `for` attribute pointing to the control's `id`.
-4. Use semantic HTML (`<section>`, headings) to organize complex forms.
-5. State required-field notation upfront in a paragraph before the form.
-6. Use lists (`<ul>`/`<ol>`) for multiple checkboxes or radio buttons.
-7. Test with screen readers to verify accessibility.
-8. Never nest forms inside other forms.
-9. Make labels clickable to increase hit areas for checkbox and radio button controls.
diff --git a/skills/create-web-form/references/form-controls.md b/skills/create-web-form/references/form-controls.md
deleted file mode 100644
index 6654b38ee..000000000
--- a/skills/create-web-form/references/form-controls.md
+++ /dev/null
@@ -1,851 +0,0 @@
-# Form Controls Reference
-
-A consolidated reference guide covering HTML form structure, native form controls, HTML5 input types, and additional form elements. Content sourced from the Mozilla Developer Network (MDN) Web Docs.
-
----
-
-## Table of Contents
-
-1. [How to Structure a Web Form](#how-to-structure-a-web-form)
-2. [Basic Native Form Controls](#basic-native-form-controls)
-3. [HTML5 Input Types](#html5-input-types)
-4. [Other Form Controls](#other-form-controls)
-
----
-
-## How to Structure a Web Form
-
-> **Source:** https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/How_to_structure_a_web_form
-
-### The `<form>` Element
-
-The `<form>` element formally defines a form and determines its behavior. It must wrap all form contents.
-
-**Important:** Never nest a form inside another form -- this causes unpredictable behavior.
-
-```html
-<form>
-  <!-- form contents -->
-</form>
-```
-
-Form controls can exist outside a `<form>` element using the `form` attribute to associate them with a specific form by its ID.
-
-### Grouping and Semantic Structure
-
-#### The `<fieldset>` and `<legend>` Elements
-
-`<fieldset>` groups widgets that share the same purpose, improving usability and accessibility. `<legend>` provides a descriptive label for the fieldset.
-
-**Key Benefits:**
-- Screen readers (like JAWS and NVDA) speak the legend before each control inside the fieldset
-- Essential for grouping radio buttons and checkboxes
-- Useful for sectioning long forms across multiple pages
-
-```html
-<form>
-  <fieldset>
-    <legend>Fruit juice size</legend>
-    <p>
-      <input type="radio" name="size" id="size_1" value="small" />
-      <label for="size_1">Small</label>
-    </p>
-    <p>
-      <input type="radio" name="size" id="size_2" value="medium" />
-      <label for="size_2">Medium</label>
-    </p>
-    <p>
-      <input type="radio" name="size" id="size_3" value="large" />
-      <label for="size_3">Large</label>
-    </p>
-  </fieldset>
-</form>
-```
-
-**Result:** Screen readers announce: "Fruit juice size small," "Fruit juice size medium," "Fruit juice size large"
-
-### Labels: The Foundation of Accessibility
-
-#### The `<label>` Element
-
-Labels formally associate text with form controls. The `for` attribute connects a label to its input via the input's `id`.
-
-```html
-<label for="name">Name:</label>
-<input type="text" id="name" name="user_name" />
-```
-
-**Implicit Association:** Nest the control inside the label (though explicit `for` attribute is still best practice):
-
-```html
-<label for="name">
-  Name: <input type="text" id="name" name="user_name" />
-</label>
-```
-
-**Accessibility Impact:**
-- Screen readers announce: "Name, edit text"
-- Without proper labels: "Edit text blank" (not helpful)
-
-#### Labels Are Clickable
-
-Clicking or tapping a label activates its associated control -- especially useful for checkboxes and radio buttons with small hit areas.
-
-```html
-<form>
-  <p>
-    <input type="checkbox" id="taste_1" name="taste_cherry" value="cherry" />
-    <label for="taste_1">I like cherry</label>
-  </p>
-</form>
-```
-
-#### Multiple Labels (Best Practices)
-
-Avoid putting multiple labels on a single widget. Instead, include all text within one label:
-
-```html
-<!-- Not recommended -->
-<label for="username">Name:</label>
-<input id="username" type="text" name="username" required />
-<label for="username">*</label>
-
-<!-- Better -->
-<label for="username">
-  <span>Name:</span>
-  <input id="username" type="text" name="username" required />
-  <span>*</span>
-</label>
-
-<!-- Best -->
-<label for="username">Name *:</label>
-<input id="username" type="text" name="username" required />
-```
-
-### Common HTML Structures with Forms
-
-Use these semantic HTML elements to structure forms:
-
-- `<ul>` / `<ol>` with `<li>`: Recommended for grouping checkboxes or radio buttons
-- `<p>`: Wrap label-control pairs
-- `<div>`: General grouping
-- `<section>`: Group related form sections
-- `<h1>`, `<h2>`: Organize complex forms into sections
-
-### Complete Payment Form Example
-
-```html
-<form>
-  <h1>Payment form</h1>
-  <p>Please complete all required (*) fields.</p>
-
-  <!-- Contact Information Section -->
-  <section>
-    <h2>Contact information</h2>
-
-    <fieldset>
-      <legend>Title</legend>
-      <ul>
-        <li>
-          <label for="title_1">
-            <input type="radio" id="title_1" name="title" value="A" />
-            Ace
-          </label>
-        </li>
-        <li>
-          <label for="title_2">
-            <input type="radio" id="title_2" name="title" value="K" />
-            King
-          </label>
-        </li>
-      </ul>
-    </fieldset>
-
-    <p>
-      <label for="name">Name *:</label>
-      <input type="text" id="name" name="username" required />
-    </p>
-
-    <p>
-      <label for="mail">Email *:</label>
-      <input type="email" id="mail" name="user-mail" required />
-    </p>
-
-    <p>
-      <label for="pwd">Password *:</label>
-      <input type="password" id="pwd" name="password" required />
-    </p>
-  </section>
-
-  <!-- Payment Information Section -->
-  <section>
-    <h2>Payment information</h2>
-
-    <p>
-      <label for="card">Card type:</label>
-      <select id="card" name="user-card">
-        <option value="visa">Visa</option>
-        <option value="mc">Mastercard</option>
-        <option value="amex">American Express</option>
-      </select>
-    </p>
-
-    <p>
-      <label for="number">Card number *:</label>
-      <input type="tel" id="number" name="card-number" required />
-    </p>
-  </section>
-
-  <!-- Submit Section -->
-  <section>
-    <p>
-      <button type="submit">Validate the payment</button>
-    </p>
-  </section>
-</form>
-```
-
-### Form Structure Best Practices
-
-| Practice | Benefit |
-|----------|---------|
-| Always use `<form>` wrapper | Recognized by assistive tech and browser plugins |
-| Wrap related controls in `<fieldset>` with `<legend>` | Improves usability and accessibility |
-| Always associate labels with `for` attribute | Screen readers announce label with control |
-| Use semantic HTML (`<section>`, `<h2>`, etc.) | Better form structure and accessibility |
-| Group radio buttons/checkboxes in lists | Clearer visual and semantic organization |
-| Indicate required fields clearly | Users and AT know which fields are mandatory |
-| Test with screen readers | Verify the form is truly accessible |
-
----
-
-## Basic Native Form Controls
-
-> **Source:** https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/Basic_native_form_controls
-
-### Text Input Fields
-
-#### Single Line Text Fields
-
-Created with `<input type="text">` or omitting the type attribute (text is the default).
-
-```html
-<input type="text" id="comment" name="comment" value="I'm a text field" />
-```
-
-**Common text field behaviors:**
-- Can be marked as `readonly` (value shown but not modifiable, still sent in form submission) or `disabled` (not sent with form)
-- Support `placeholder` attribute for brief descriptions
-- Can be constrained with `size` (physical box size) and `maxlength` (character limit)
-- Benefit from `spellcheck` attribute
-- Remove line breaks automatically before sending to server
-
-#### Password Field
-
-Obscures input characters (shown as dots or asterisks) for security.
-
-```html
-<input type="password" id="pwd" name="pwd" />
-```
-
-**Security Note:** This only hides the text visually. Always use HTTPS for secure form transmission to prevent data interception.
-
-#### Hidden Content
-
-Invisible form control sent with form data (e.g., timestamps, tracking information).
-
-```html
-<input type="hidden" id="timestamp" name="timestamp" value="1286705410" />
-```
-
-- Not visible to users
-- Never receives focus
-- Cannot be intentionally edited by users
-- Screen readers will not notice it
-- Must have `name` and `value` attributes
-
-### Checkable Items: Checkboxes and Radio Buttons
-
-#### Checkbox
-
-Multiple selections allowed. Each checkbox can be independently checked or unchecked.
-
-```html
-<fieldset>
-  <legend>Choose all the vegetables you like to eat</legend>
-  <ul>
-    <li>
-      <label for="carrots">Carrots</label>
-      <input
-        type="checkbox"
-        id="carrots"
-        name="vegetable"
-        value="carrots"
-        checked />
-    </li>
-    <li>
-      <label for="peas">Peas</label>
-      <input type="checkbox" id="peas" name="vegetable" value="peas" />
-    </li>
-    <li>
-      <label for="cabbage">Cabbage</label>
-      <input type="checkbox" id="cabbage" name="vegetable" value="cabbage" />
-    </li>
-  </ul>
-</fieldset>
-```
-
-**Properties:**
-- Use same `name` attribute for related checkboxes
-- Include `checked` attribute to pre-select
-- Only values of checked boxes are sent with form
-
-#### Radio Button
-
-Only one selection allowed per group. Tied together by the same `name` attribute.
-
-```html
-<fieldset>
-  <legend>What is your favorite meal?</legend>
-  <ul>
-    <li>
-      <label for="soup">Soup</label>
-      <input type="radio" id="soup" name="meal" value="soup" checked />
-    </li>
-    <li>
-      <label for="curry">Curry</label>
-      <input type="radio" id="curry" name="meal" value="curry" />
-    </li>
-    <li>
-      <label for="pizza">Pizza</label>
-      <input type="radio" id="pizza" name="meal" value="pizza" />
-    </li>
-  </ul>
-</fieldset>
-```
-
-**Properties:**
-- Buttons in same group share `name` attribute
-- Checking one automatically unchecks others
-- Only checked value is sent with form
-- Cannot uncheck all without resetting form
-
-**Accessibility Best Practice:** Wrap related items in `<fieldset>` with `<legend>` describing the group, and place each `<label>`/`<input>` pair together.
-
-### Buttons
-
-#### Submit Button
-
-Sends form data to server.
-
-```html
-<!-- Using <input> -->
-<input type="submit" value="Submit this form" />
-
-<!-- Using <button> -->
-<button type="submit">Submit this form</button>
-```
-
-#### Reset Button
-
-Resets all form widgets to default values.
-
-```html
-<!-- Using <input> -->
-<input type="reset" value="Reset this form" />
-
-<!-- Using <button> -->
-<button type="reset">Reset this form</button>
-```
-
-#### Anonymous Button
-
-No automatic effect; requires JavaScript customization.
-
-```html
-<!-- Using <input> -->
-<input type="button" value="Do Nothing without JavaScript" />
-
-<!-- Using <button> -->
-<button type="button">Do Nothing without JavaScript</button>
-```
-
-**Advantage of `<button>` elements:** Much easier to style and supports HTML content inside tags.
-
-### Image Button
-
-Renders as an image but behaves as a submit button. Submits X and Y coordinates of click.
-
-```html
-<input type="image" alt="Click me!" src="my-img.png" width="80" height="30" />
-```
-
-**Coordinate Submission:**
-- X coordinate key: `[name].x`
-- Y coordinate key: `[name].y`
-
-**Example URL with GET method:**
-```
-https://example.com?pos.x=123&pos.y=456
-```
-
-### File Picker
-
-Allows users to select one or more files to send to server.
-
-```html
-<!-- Single file -->
-<input type="file" name="file" id="file" accept="image/*" />
-
-<!-- Multiple files -->
-<input type="file" name="file" id="file" accept="image/*" multiple />
-```
-
-**Mobile Device Capture** -- access device camera, microphone, or storage directly:
-
-```html
-<input type="file" accept="image/*;capture=camera" />
-<input type="file" accept="video/*;capture=camcorder" />
-<input type="file" accept="audio/*;capture=microphone" />
-```
-
-**Attributes:**
-- `accept`: Constrains file types (e.g., `image/*`, `.pdf`)
-- `multiple`: Allows selecting multiple files
-
-### Common Attributes for All Form Controls
-
-| Attribute | Default | Description |
-|-----------|---------|-------------|
-| `autofocus` | false | Element automatically receives focus when page loads (only one per document) |
-| `disabled` | false | User cannot interact; inherits from containing `<fieldset>` if applicable |
-| `form` | -- | Associates control with `<form>` element by ID (allows control outside form) |
-| `name` | -- | Control name; submitted with form data |
-| `value` | -- | Element's initial value |
-
-### Form Data Submission Behavior
-
-**Checkable Items Special Case:**
-- Values sent only if checked
-- Unchecked items: nothing is sent (not even name)
-- Checked but no value attribute: name is sent with value of `"on"`
-
-```html
-<input type="checkbox" name="subscribe" value="yes" />
-```
-- If checked: `subscribe=yes`
-- If unchecked: (nothing)
-
----
-
-## HTML5 Input Types
-
-> **Source:** https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/HTML5_input_types
-
-HTML5 introduced new `<input type>` values to create native form controls with built-in validation and improved user experience across devices.
-
-### Email Address Field (`type="email"`)
-
-```html
-<label for="email">Enter your email address:</label>
-<input type="email" id="email" name="email" />
-```
-
-**Key Features:**
-- **Validation**: Browser validates email format before submission
-- **Multiple emails**: Use `multiple` attribute for comma-separated addresses
-- **Mobile keyboards**: Displays `@` symbol by default on touch devices
-- **Invalid state**: Matches `:invalid` pseudo-class and returns `typeMismatch` validity
-
-```html
-<input type="email" id="email" name="email" multiple />
-```
-
-**Important Notes:**
-- `a@b` is considered valid (allows intranet addresses)
-- Use the `pattern` attribute for custom validation
-
-### Search Field (`type="search"`)
-
-```html
-<label for="search">Enter a search term:</label>
-<input type="search" id="search" name="search" />
-```
-
-**Key Features:**
-- **Visual styling**: Rounded corners in some browsers
-- **Clear icon**: Displays a clear button to empty the field when focused with a value
-- **Keyboard**: Enter key may display "search" or magnifying glass icon
-- **Auto-completion**: Values saved and reused across site pages
-
-### Phone Number Field (`type="tel"`)
-
-```html
-<label for="tel">Enter a telephone number:</label>
-<input type="tel" id="tel" name="tel" />
-```
-
-**Key Features:**
-- **Mobile keyboards**: Displays numeric keypad on touch devices
-- **No format enforcement**: Allows letters and special characters (accommodates various international formats)
-- **Pattern validation**: Use `pattern` attribute to enforce specific formats
-
-### URL Field (`type="url"`)
-
-```html
-<label for="url">Enter a URL:</label>
-<input type="url" id="url" name="url" />
-```
-
-**Key Features:**
-- **Validation requirements**: Protocol required (e.g., `http:`) and proper URL format enforced
-- **Mobile keyboards**: Displays colon, period, and forward slash by default
-- **Note**: Well-formed URLs do not guarantee the site exists
-
-### Numeric Field (`type="number"`)
-
-```html
-<label for="number">Enter a number:</label>
-<input type="number" id="number" name="number" />
-```
-
-**Attributes:**
-
-| Attribute | Purpose | Example |
-|-----------|---------|---------|
-| `min` | Minimum value | `min="1"` |
-| `max` | Maximum value | `max="10"` |
-| `step` | Increment/decrement value | `step="2"` |
-
-**Examples:**
-
-Odd numbers between 1-10:
-```html
-<input type="number" name="age" id="age" min="1" max="10" step="2" />
-```
-
-Decimal values (0-1):
-```html
-<input type="number" name="change" id="pennies" min="0" max="1" step="0.01" />
-```
-
-**Key Features:**
-- **Spinner buttons**: Increase/decrease values
-- **Mobile**: Numeric keyboard displayed
-- **Default step**: `1` (only allows integers unless changed)
-- **Float numbers**: Use `step="any"` or `step="0.01"`
-
-### Slider Controls (`type="range"`)
-
-```html
-<label for="price">Choose a maximum house price:</label>
-<input
-  type="range"
-  name="price"
-  id="price"
-  min="50000"
-  max="500000"
-  step="1000"
-  value="250000" />
-<output class="price-output" for="price"></output>
-```
-
-**JavaScript to Display Value:**
-```javascript
-const price = document.querySelector("#price");
-const output = document.querySelector(".price-output");
-
-output.textContent = price.value;
-
-price.addEventListener("input", () => {
-  output.textContent = price.value;
-});
-```
-
-**Key Features:**
-- Less precise than text input (best for approximate values)
-- Thumb movement via mouse, touch, or keyboard arrows
-- Use `<output>` element for displaying current value
-- Configure with `min`, `max`, `step` attributes
-
-### Date and Time Pickers
-
-#### Date (`type="date"`)
-
-```html
-<label for="date">Enter the date:</label>
-<input type="date" name="date" id="date" />
-```
-Captures: Year, month, day (no time).
-
-#### Date and Time Local (`type="datetime-local"`)
-
-```html
-<label for="datetime">Enter the date and time:</label>
-<input type="datetime-local" name="datetime" id="datetime" />
-```
-Captures: Date and time (no timezone).
-
-#### Month (`type="month"`)
-
-```html
-<label for="month">Enter the month:</label>
-<input type="month" name="month" id="month" />
-```
-Captures: Month and year.
-
-#### Time (`type="time"`)
-
-```html
-<label for="time">Enter a time:</label>
-<input type="time" name="time" id="time" />
-```
-- **Display format**: 12-hour (in some browsers)
-- **Return format**: Always 24-hour
-
-#### Week (`type="week"`)
-
-```html
-<label for="week">Enter the week:</label>
-<input type="week" name="week" id="week" />
-```
-- Weeks: Monday-Sunday
-- Week 1: Contains first Thursday of the year
-
-#### Date/Time Constraints
-
-```html
-<label for="myDate">When are you available this summer?</label>
-<input
-  type="date"
-  name="myDate"
-  min="2025-06-01"
-  max="2025-08-31"
-  step="7"
-  id="myDate" />
-```
-
-#### Validation Example (CSS)
-
-```css
-input:invalid + span::after {
-  content: " X";
-}
-
-input:valid + span::after {
-  content: " checkmark";
-}
-```
-
-### Color Picker (`type="color"`)
-
-```html
-<label for="color">Pick a color:</label>
-<input type="color" name="color" id="color" />
-```
-
-**Key Features:**
-- Opens OS default color-picking functionality
-- Return value: Always lowercase 6-digit hexadecimal (e.g., `#ff0000`)
-- No manual format entry: System color picker handles selection
-
-### Client-Side Validation Notes
-
-**Advantages:**
-- Immediate user feedback
-- Guides accurate form completion
-- Saves server round trips
-
-**Important Limitations:**
-- NOT a security measure -- easily disabled by users
-- Server-side validation is always required
-- Prevents only obvious mistakes, not malicious data
-
-### HTML5 Input Types Summary
-
-| Type | Purpose | Key Attribute | Mobile Keyboard |
-|------|---------|---------------|-----------------|
-| `email` | Email address | `multiple` | @ symbol |
-| `search` | Search queries | `pattern` | Standard |
-| `tel` | Phone numbers | `pattern` | Numeric |
-| `url` | Web URLs | Required protocol | `:/.` symbols |
-| `number` | Numeric values | `min`, `max`, `step` | Numeric |
-| `range` | Slider selection | `min`, `max`, `step` | N/A |
-| `date` | Date picker | `min`, `max` | Calendar |
-| `time` | Time picker | `min`, `max` | Clock |
-| `color` | Color picker | Default hex | Color picker |
-
----
-
-## Other Form Controls
-
-> **Source:** https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/Other_form_controls
-
-### Multi-Line Text Fields (`<textarea>`)
-
-```html
-<textarea cols="30" rows="8"></textarea>
-```
-
-**Key Characteristics:**
-- Allows users to input multiple lines of text
-- Supports hard line breaks (pressing return)
-- Content is placed between opening and closing tags
-- Requires a closing tag (unlike `<input>`)
-
-**Controlling Multi-Line Rendering:**
-
-| Attribute | Description |
-|-----------|-------------|
-| `cols` | Visible width in average character widths (default: 20) |
-| `rows` | Number of visible text rows (default: 2) |
-| `wrap` | Text wrapping behavior: `soft` (default), `hard`, or `off` |
-
-**Example with wrapping:**
-```html
-<textarea cols="30" rows="8" wrap="hard"></textarea>
-```
-
-**Controlling Resizability (CSS):**
-```css
-textarea {
-  resize: both;        /* horizontal and vertical */
-  resize: horizontal;  /* horizontal only */
-  resize: vertical;    /* vertical only */
-  resize: none;        /* no resizing */
-}
-```
-
-### Drop-Down Controls
-
-#### Select Box (Single Selection)
-
-```html
-<select id="simple" name="simple">
-  <option>Banana</option>
-  <option selected>Cherry</option>
-  <option>Lemon</option>
-</select>
-```
-
-**With Grouping (`<optgroup>`):**
-```html
-<select id="groups" name="groups">
-  <optgroup label="fruits">
-    <option>Banana</option>
-    <option selected>Cherry</option>
-    <option>Lemon</option>
-  </optgroup>
-  <optgroup label="vegetables">
-    <option>Carrot</option>
-    <option>Eggplant</option>
-    <option>Potato</option>
-  </optgroup>
-</select>
-```
-
-**With Value Attributes:**
-```html
-<select id="simple" name="simple">
-  <option value="banana">Big, beautiful yellow banana</option>
-  <option value="cherry">Succulent, juicy cherry</option>
-  <option value="lemon">Sharp, powerful lemon</option>
-</select>
-```
-
-**Attributes:**
-- `selected` -- Sets the default selected option
-- `value` -- The value sent when form is submitted (if omitted, uses option text)
-- `size` -- Number of visible options
-
-#### Multiple Choice Select Box
-
-```html
-<select id="multi" name="multi" multiple size="2">
-  <optgroup label="fruits">
-    <option>Banana</option>
-    <option selected>Cherry</option>
-    <option>Lemon</option>
-  </optgroup>
-  <optgroup label="vegetables">
-    <option>Carrot</option>
-    <option>Eggplant</option>
-    <option>Potato</option>
-  </optgroup>
-</select>
-```
-
-**Notes:**
-- Add `multiple` attribute to allow multiple selections
-- Users select via Cmd/Ctrl+click on desktop
-- All values display as a list (not dropdown)
-
-#### Autocomplete Box (`<datalist>`)
-
-```html
-<label for="myFruit">What's your favorite fruit?</label>
-<input type="text" name="myFruit" id="myFruit" list="mySuggestion" />
-<datalist id="mySuggestion">
-  <option>Apple</option>
-  <option>Banana</option>
-  <option>Blackberry</option>
-  <option>Blueberry</option>
-  <option>Lemon</option>
-  <option>Lychee</option>
-  <option>Peach</option>
-  <option>Pear</option>
-</datalist>
-```
-
-**How It Works:**
-- `<datalist>` provides suggested values
-- Bound to input via `list` attribute (must match datalist `id`)
-- Browsers display matching values as user types
-- Works with various input types (text, email, range, color, etc.)
-
-### Progress Bar (`<progress>`)
-
-```html
-<progress max="100" value="75">75/100</progress>
-```
-
-**Attributes:**
-- `max` -- Maximum value (default: 1.0 if not specified)
-- `value` -- Current progress value
-- Content inside is fallback for unsupported browsers
-
-**Use Cases:** Download progress, questionnaire completion, task progress.
-
-### Meter (`<meter>`)
-
-```html
-<meter min="0" max="100" value="75" low="33" high="66" optimum="0">75</meter>
-```
-
-**Attributes:**
-- `min` / `max` -- Range boundaries
-- `low` / `high` -- Define three ranges (lower, medium, higher)
-- `value` -- Current meter value
-- `optimum` -- Preferred value (determines color coding)
-
-**Color Coding:**
-- Green: Value in preferred range
-- Yellow: Value in average range
-- Red: Value in worst range
-
-**Optimum Logic:**
-- If `optimum` in lower range: lower is preferred
-- If `optimum` in medium range: medium is preferred
-- If `optimum` in higher range: higher is preferred
-
-**Use Cases:** Disk space usage, temperature gauge, ratings.
-
-### Other Form Controls Summary
-
-| Element | Purpose | Input Type |
-|---------|---------|------------|
-| `<textarea>` | Multi-line text input | Text content |
-| `<select>` | Single or multiple selection | Predefined options |
-| `<datalist>` | Suggested autocomplete values | Text input with suggestions |
-| `<progress>` | Progress indication | Read-only display |
-| `<meter>` | Measurement display | Read-only display |
diff --git a/skills/create-web-form/references/form-data-handling.md b/skills/create-web-form/references/form-data-handling.md
deleted file mode 100644
index d4846d731..000000000
--- a/skills/create-web-form/references/form-data-handling.md
+++ /dev/null
@@ -1,627 +0,0 @@
-# Form Data Handling Reference
-
----
-
-## Section 1: Sending and Retrieving Form Data
-
-**Source:** https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/Sending_and_retrieving_form_data
-
-### Overview
-
-Once form data is validated on the client-side, it is ready to submit. This section covers what happens when a user submits a form, where the data goes, and how to handle it on the server.
-
-### Client/Server Architecture
-
-The web uses a basic client/server architecture:
-
-- **Client** (web browser) sends an HTTP request to a **server**.
-- **Server** (Apache, Nginx, IIS, Tomcat) responds using the same protocol.
-- HTML forms are a user-friendly way to configure HTTP requests for sending data.
-
-### On the Client Side: Defining How to Send Data
-
-The `<form>` element controls how data is sent. Two critical attributes are `action` and `method`.
-
-#### The `action` Attribute
-
-The `action` attribute defines where form data gets sent. It must be a valid relative or absolute URL.
-
-**Absolute URL:**
-
-```html
-<form action="https://www.example.com">...</form>
-```
-
-**Relative URL (same origin):**
-
-```html
-<form action="/somewhere_else">...</form>
-```
-
-**Same page (no attributes or empty action):**
-
-```html
-<form>...</form>
-```
-
-**Security Note:** Use HTTPS (secure HTTP) to encrypt data. If a secure form posts to an insecure HTTP URL, browsers display a security warning.
-
-#### The `method` Attribute
-
-Two main HTTP methods transmit form data: **GET** and **POST**.
-
-### GET Method
-
-- Used by browsers to ask the server to send back a resource.
-- Data is appended to the URL as query parameters.
-- Browser sends an empty body.
-
-**Example Form:**
-
-```html
-<form action="https://www.example.com/greet" method="GET">
-  <div>
-    <label for="say">What greeting do you want to say?</label>
-    <input name="say" id="say" value="Hi" />
-  </div>
-  <div>
-    <label for="to">Who do you want to say it to?</label>
-    <input name="to" id="to" value="Mom" />
-  </div>
-  <div>
-    <button>Send my greetings</button>
-  </div>
-</form>
-```
-
-**Result URL:** `https://www.example.com/greet?say=Hi&to=Mom`
-
-**HTTP Request:**
-
-```http
-GET /?say=Hi&to=Mom HTTP/2.0
-Host: example.com
-```
-
-**When to use:** Reading data, non-sensitive information.
-
-### POST Method
-
-- Used to send data that the server should process.
-- Data is included in the HTTP request body, not the URL.
-- More secure for sensitive data (passwords, etc.).
-
-**Example Form:**
-
-```html
-<form action="https://www.example.com/greet" method="POST">
-  <div>
-    <label for="say">What greeting do you want to say?</label>
-    <input name="say" id="say" value="Hi" />
-  </div>
-  <div>
-    <label for="to">Who do you want to say it to?</label>
-    <input name="to" id="to" value="Mom" />
-  </div>
-  <div>
-    <button>Send my greetings</button>
-  </div>
-</form>
-```
-
-**HTTP Request:**
-
-```http
-POST / HTTP/2.0
-Host: example.com
-Content-Type: application/x-www-form-urlencoded
-Content-Length: 13
-
-say=Hi&to=Mom
-```
-
-**When to use:** Sensitive data, large amounts of data, modifying server state.
-
-### Viewing HTTP Requests in Browser DevTools
-
-1. Open Developer Tools (F12).
-2. Select the "Network" tab.
-3. Select "All" to see all requests.
-4. Click the request in the "Name" tab.
-5. View "Request" (Firefox) or "Payload" (Chrome/Edge).
-
-### On the Server Side: Retrieving the Data
-
-The server receives data as a string parsed into key/value pairs. Access method depends on the server platform.
-
-#### Example: Raw PHP
-
-```php
-<?php
-  // Access POST data
-  $say = htmlspecialchars($_POST["say"]);
-  $to  = htmlspecialchars($_POST["to"]);
-
-  // Access GET data
-  // $say = htmlspecialchars($_GET["say"]);
-
-  echo $say, " ", $to;
-?>
-```
-
-**Output:** `Hi Mom`
-
-#### Example: Python with Flask
-
-```python
-from flask import Flask, render_template, request
-
-app = Flask(__name__)
-
-@app.route('/', methods=['GET', 'POST'])
-def form():
-    return render_template('form.html')
-
-@app.route('/hello', methods=['GET', 'POST'])
-def hello():
-    return render_template('greeting.html',
-                         say=request.form['say'],
-                         to=request.form['to'])
-
-if __name__ == "__main__":
-    app.run()
-```
-
-#### Other Server-Side Frameworks
-
-| Language   | Frameworks                              |
-|------------|-----------------------------------------|
-| Python     | Django, Flask, web2py, py4web           |
-| Node.js    | Express, Next.js, Nuxt, Remix          |
-| PHP        | Laravel, Laminas, Symfony               |
-| Ruby       | Ruby On Rails                           |
-| Java       | Spring Boot                             |
-
-### A Special Case: Sending Files
-
-Files are binary data and require special handling. Three steps are needed:
-
-#### The `enctype` Attribute
-
-This specifies the `Content-Type` HTTP header.
-
-- **Default:** `application/x-www-form-urlencoded`
-- **For files:** `multipart/form-data`
-
-**File Upload Example:**
-
-```html
-<form
-  method="post"
-  action="https://example.com/upload"
-  enctype="multipart/form-data">
-  <div>
-    <label for="file">Choose a file</label>
-    <input type="file" id="file" name="myFile" />
-  </div>
-  <div>
-    <button>Send the file</button>
-  </div>
-</form>
-```
-
-**Requirements:**
-
-- Set `method` to `POST` (file content cannot go in a URL).
-- Set `enctype` to `multipart/form-data`.
-- Include one or more `<input type="file">` controls.
-
-**Note:** Servers can limit file and request sizes to prevent abuse.
-
-### Security Considerations
-
-#### Be Paranoid: Never Trust Your Users
-
-All incoming data must be checked and sanitized:
-
-1. **Escape Dangerous Characters** -- Watch for executable code patterns (JavaScript, SQL commands). Use server-side escaping functions. Different contexts require different escaping.
-2. **Limit Incoming Data** -- Only accept what is necessary. Set maximum sizes for requests.
-3. **Sandbox Uploaded Files** -- Store on a different server. Serve through a different subdomain or domain. Never execute uploaded files directly.
-
-**Key Rule:** Never trust client-side validation alone -- always validate on the server. Client-side validation can be bypassed; the server has no way to verify what truly happened on the client.
-
-### Quick Reference: GET vs POST
-
-| Aspect             | GET                                  | POST                                   |
-|--------------------|--------------------------------------|----------------------------------------|
-| Data location      | Visible in URL as query parameters   | Hidden in request body                 |
-| Data size          | Limited by URL length                | No inherent limit                      |
-| Security           | Not suitable for sensitive data      | Better for sensitive/large data        |
-| Caching            | Can be cached                        | Not cached                             |
-| Use case           | Reading/retrieving data              | Modifying server state, sending files  |
-
-### Important Notes
-
-- **Form data format:** Name/value pairs joined with ampersands (`name=value&name2=value2`).
-- **URL encoding:** Special characters are URL-encoded in query parameters.
-- **Default form target:** Without `action`, data submits to the current page.
-- **Secure protocol:** Always use HTTPS for sensitive data.
-
----
-
-## Section 2: Form Validation
-
-**Source:** https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/Form_validation
-
-### Overview
-
-Client-side form validation helps ensure data entered matches requirements set by form controls. While important for **user experience**, it must **always** be paired with server-side validation since client-side validation is easily bypassed by malicious users.
-
-### Built-In HTML Validation Attributes
-
-#### `required`
-
-Specifies that a form field must be filled before submission.
-
-```html
-<input id="choose" name="i-like" required />
-```
-
-- Input matches `:required` and `:invalid` pseudo-classes when empty.
-- For radio buttons, one button in a same-named group must be checked.
-
-#### `minlength` and `maxlength`
-
-Constrains character length for text fields and textareas.
-
-```html
-<input type="text" minlength="6" maxlength="6" />
-<textarea maxlength="140"></textarea>
-```
-
-#### `min`, `max`, and `step`
-
-Constrains numeric values and their increments.
-
-```html
-<input type="number" min="1" max="10" step="1" />
-<input type="date" min="2024-01-01" max="2024-12-31" />
-```
-
-#### `type`
-
-Validates against specific formats (email, URL, number, date, etc.).
-
-```html
-<input type="email" />
-<input type="url" />
-<input type="number" />
-```
-
-#### `pattern`
-
-Validates against a regular expression.
-
-```html
-<input
-  type="text"
-  pattern="[Bb]anana|[Cc]herry"
-  required
-/>
-```
-
-**Pattern Examples:**
-
-| Pattern  | Matches                                  |
-|----------|------------------------------------------|
-| `a`      | Single character 'a'                     |
-| `abc`    | 'a' followed by 'b' followed by 'c'     |
-| `ab?c`   | 'ac' or 'abc'                            |
-| `ab*c`   | 'ac', 'abc', 'abbbbbc', etc.             |
-| `a\|b`   | 'a' or 'b'                               |
-
-### CSS Pseudo-Classes for Validation States
-
-#### Valid States
-
-```css
-input:valid {
-  border: 2px solid black;
-}
-
-input:user-valid {
-  /* Matches after user interaction */
-}
-
-input:in-range {
-  /* For inputs with min/max */
-}
-```
-
-#### Invalid States
-
-```css
-input:invalid {
-  border: 2px dashed red;
-}
-
-input:user-invalid {
-  /* Matches after user interaction */
-}
-
-input:out-of-range {
-  /* For inputs with min/max */
-}
-
-input:required {
-  /* Matches required fields */
-}
-```
-
-### Complete Built-In Validation Example
-
-```html
-<form>
-  <p>Please complete all required (*) fields.</p>
-
-  <fieldset>
-    <legend>Do you have a driver's license? *</legend>
-    <input type="radio" required name="driver" id="r1" value="yes" />
-    <label for="r1">Yes</label>
-    <input type="radio" required name="driver" id="r2" value="no" />
-    <label for="r2">No</label>
-  </fieldset>
-
-  <p>
-    <label for="age">How old are you?</label>
-    <input type="number" min="12" max="120" step="1" id="age" name="age" />
-  </p>
-
-  <p>
-    <label for="fruit">What's your favorite fruit? *</label>
-    <input
-      type="text"
-      id="fruit"
-      name="fruit"
-      list="fruits"
-      required
-      pattern="[Bb]anana|[Cc]herry|[Aa]pple"
-    />
-    <datalist id="fruits">
-      <option>Banana</option>
-      <option>Cherry</option>
-      <option>Apple</option>
-    </datalist>
-  </p>
-
-  <p>
-    <label for="email">Email address:</label>
-    <input type="email" id="email" name="email" />
-  </p>
-
-  <button>Submit</button>
-</form>
-```
-
-### Constraint Validation API
-
-The Constraint Validation API provides methods and properties for custom validation logic.
-
-#### Key Properties
-
-**`validationMessage`** -- Returns localized validation error message.
-
-**`validity`** -- Returns a `ValidityState` object with these properties:
-
-| Property          | Description                                         |
-|-------------------|-----------------------------------------------------|
-| `valid`           | `true` if element meets all constraints             |
-| `valueMissing`    | `true` if required but empty                        |
-| `typeMismatch`    | `true` if value does not match type (e.g., email)   |
-| `patternMismatch` | `true` if pattern does not match                    |
-| `tooLong`         | `true` if exceeds `maxlength`                       |
-| `tooShort`        | `true` if below `minlength`                         |
-| `rangeOverflow`   | `true` if exceeds `max`                             |
-| `rangeUnderflow`  | `true` if below `min`                               |
-| `customError`     | `true` if custom error set via `setCustomValidity()` |
-
-**`willValidate`** -- Boolean, `true` if element will be validated on form submission.
-
-#### Key Methods
-
-```javascript
-// Check validity without submitting
-element.checkValidity()    // Returns boolean
-
-// Report validity to user
-element.reportValidity()   // Shows browser's error message
-
-// Set custom error message
-element.setCustomValidity("Custom error text")
-
-// Clear custom error
-element.setCustomValidity("")
-```
-
-### JavaScript Custom Validation Examples
-
-#### Basic Custom Error Message
-
-```javascript
-const email = document.getElementById("mail");
-
-email.addEventListener("input", (event) => {
-  if (email.validity.typeMismatch) {
-    email.setCustomValidity("I am expecting an email address!");
-  } else {
-    email.setCustomValidity("");
-  }
-});
-```
-
-#### Extending Built-In Validation
-
-```javascript
-const email = document.getElementById("mail");
-
-email.addEventListener("input", (event) => {
-  // Reset custom validity
-  email.setCustomValidity("");
-
-  // Check built-in constraints first
-  if (!email.validity.valid) {
-    return;
-  }
-
-  // Add custom constraint
-  if (!email.value.endsWith("@example.com")) {
-    email.setCustomValidity("Please enter an email with @example.com domain");
-  }
-});
-```
-
-#### Complex Form Validation with Custom Messages
-
-```javascript
-const form = document.querySelector("form");
-const email = document.getElementById("mail");
-const emailError = document.querySelector("#mail + span.error");
-
-email.addEventListener("input", (event) => {
-  if (email.validity.valid) {
-    emailError.textContent = "";
-    emailError.className = "error";
-  } else {
-    showError();
-  }
-});
-
-form.addEventListener("submit", (event) => {
-  if (!email.validity.valid) {
-    showError();
-    event.preventDefault();
-  }
-});
-
-function showError() {
-  if (email.validity.valueMissing) {
-    emailError.textContent = "You need to enter an email address.";
-  } else if (email.validity.typeMismatch) {
-    emailError.textContent = "Entered value needs to be an email address.";
-  } else if (email.validity.tooShort) {
-    emailError.textContent =
-      `Email should be at least ${email.minLength} characters; you entered ${email.value.length}.`;
-  }
-  emailError.className = "error active";
-}
-```
-
-#### Disabling Built-In Validation with `novalidate`
-
-Use `novalidate` on the form to disable the browser's automatic validation while retaining CSS pseudo-classes:
-
-```html
-<form novalidate>
-  <input type="email" id="mail" required minlength="8" />
-  <span class="error" aria-live="polite"></span>
-</form>
-```
-
-### Manual Validation Without the Constraint API
-
-For custom form controls or complete control over validation:
-
-```javascript
-const form = document.querySelector("form");
-const email = document.getElementById("mail");
-const error = document.getElementById("error");
-
-const emailRegExp = /^[\w.!#$%&'*+/=?^`{|}~-]+@[a-z\d-]+(?:\.[a-z\d-]+)*$/i;
-
-const isValidEmail = () => {
-  return email.value.length !== 0 && emailRegExp.test(email.value);
-};
-
-const setEmailClass = (isValid) => {
-  email.className = isValid ? "valid" : "invalid";
-};
-
-const updateError = (isValid) => {
-  if (isValid) {
-    error.textContent = "";
-    error.removeAttribute("class");
-  } else {
-    error.textContent = "Please enter a valid email address.";
-    error.setAttribute("class", "active");
-  }
-};
-
-email.addEventListener("input", () => {
-  const validity = isValidEmail();
-  setEmailClass(validity);
-  updateError(validity);
-});
-
-form.addEventListener("submit", (event) => {
-  event.preventDefault();
-  const validity = isValidEmail();
-  setEmailClass(validity);
-  updateError(validity);
-});
-```
-
-### Styling Error Messages
-
-```css
-/* Invalid field styling */
-input:invalid {
-  border-color: #990000;
-  background-color: #ffdddd;
-}
-
-input:focus:invalid {
-  outline: none;
-}
-
-/* Error message container */
-.error {
-  width: 100%;
-  padding: 0;
-  font-size: 80%;
-  color: white;
-  background-color: #990000;
-  border-radius: 0 0 5px 5px;
-}
-
-.error.active {
-  padding: 0.3em;
-}
-```
-
-### Accessibility Best Practices
-
-1. **Mark required fields** with an asterisk in the label:
-   ```html
-   <label for="name">Name *</label>
-   ```
-2. **Use `aria-live`** for dynamic error messages:
-   ```html
-   <span class="error" aria-live="polite"></span>
-   ```
-3. **Provide clear, helpful messages** that explain what is expected and how to fix errors.
-4. **Avoid relying on color alone** to indicate errors.
-
-### Validation Summary
-
-| Approach               | Pros                                        | Cons                                   |
-|------------------------|---------------------------------------------|----------------------------------------|
-| HTML built-in          | No JavaScript needed, fast                  | Limited customization                  |
-| Constraint Validation API | Modern, integrates with built-in features | Requires JavaScript                    |
-| Fully manual (JS)      | Complete control over UI and logic          | More code, must handle everything      |
-
-- **HTML validation** is faster and does not require JavaScript.
-- **JavaScript validation** provides more customization and control.
-- **Always validate server-side** -- client-side validation is not secure.
-- **Use the Constraint Validation API** for modern, built-in functionality.
-- **Provide clear error messages** and guidance to users.
-- **Style validation states** with `:valid` and `:invalid` pseudo-classes.
diff --git a/skills/create-web-form/references/html-form-elements.md b/skills/create-web-form/references/html-form-elements.md
deleted file mode 100644
index dd0a4d13a..000000000
--- a/skills/create-web-form/references/html-form-elements.md
+++ /dev/null
@@ -1,822 +0,0 @@
-# HTML Form Elements Reference
-
-A consolidated reference for HTML form-related elements, sourced from the Mozilla Developer Network (MDN) Web Docs.
-
----
-
-## Table of Contents
-
-1. [`<form>`](#form)
-2. [`HTMLFormElement.elements`](#htmlformelementelements)
-3. [`<button>`](#button)
-4. [`<datalist>`](#datalist)
-5. [`<fieldset>`](#fieldset)
-6. [`<input>`](#input)
-7. [`<label>`](#label)
-8. [`<legend>`](#legend)
-9. [`<meter>`](#meter)
-10. [`<optgroup>`](#optgroup)
-11. [`<option>`](#option)
-12. [`<output>`](#output)
-13. [`<progress>`](#progress)
-14. [`<select>`](#select)
-15. [`<textarea>`](#textarea)
-
----
-
-## `<form>`
-
-> **Source:** <https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/form>
-
-### Description
-
-The `<form>` element represents a document section containing interactive controls for submitting information to a server. Both opening and closing tags are mandatory. Forms cannot be nested inside other forms.
-
-### Key Attributes
-
-| Attribute | Description |
-|-----------|-------------|
-| `action` | URL that processes the form submission. Can be overridden by `formaction` on submit buttons. |
-| `method` | HTTP method: `get` (default), `post`, or `dialog`. Defines how data is sent. |
-| `enctype` | MIME type for POST submissions: `application/x-www-form-urlencoded` (default), `multipart/form-data` (for files), `text/plain`. |
-| `novalidate` | Boolean attribute that disables form validation on submission. |
-| `autocomplete` | Controls auto-completion: `on` (default) or `off`. |
-| `accept-charset` | Character encoding accepted (typically `UTF-8`). |
-| `name` | Form identifier; must be unique. Becomes a property of `window`, `document`, and `document.forms`. |
-| `target` | Where to display the response: `_self` (default), `_blank`, `_parent`, `_top`. |
-| `rel` | Link relationship types: `external`, `nofollow`, `noopener`, `noreferrer`, etc. |
-
-### Usage Notes
-
-- Forms **cannot contain nested forms**.
-- Supports CSS pseudo-classes: `:valid` and `:invalid` for styling based on form validity.
-- DOM Interface: `HTMLFormElement`.
-- Implicit ARIA role: `form`.
-
-### Example
-
-```html
-<form action="/submit" method="post">
-  <div>
-    <label for="name">Name:</label>
-    <input type="text" id="name" name="name" required />
-  </div>
-  <div>
-    <label for="email">Email:</label>
-    <input type="email" id="email" name="email" required />
-  </div>
-  <input type="submit" value="Submit" />
-</form>
-```
-
----
-
-## `HTMLFormElement.elements`
-
-> **Source:** <https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/elements>
-
-### Description
-
-The `elements` property returns an `HTMLFormControlsCollection` containing all the form controls associated with a `<form>` element. Controls can be accessed by index or by their `name`/`id` attributes.
-
-### Return Value
-
-- **Type:** `HTMLFormControlsCollection` (a live collection based on `HTMLCollection`)
-- **Live:** Yes -- automatically updates when controls are added or removed.
-- **Order:** Tree order (preorder, depth-first traversal of the document).
-
-### Included Form Controls
-
-The collection includes:
-
-- `<button>`
-- `<fieldset>`
-- `<input>` (except `type="image"`)
-- `<object>`
-- `<output>`
-- `<select>`
-- `<textarea>`
-- Form-associated custom elements
-
-**Note:** `<label>` and `<legend>` elements are **not** included.
-
-### Example
-
-```javascript
-// Access form controls
-const inputs = document.getElementById("my-form").elements;
-const firstControl = inputs[0];           // By index
-const byName = inputs["username"];        // By name attribute
-
-// Iterate over controls
-for (const control of inputs) {
-  if (control.nodeName === "INPUT" && control.type === "text") {
-    control.value = control.value.toUpperCase();
-  }
-}
-
-// Get number of controls
-console.log(inputs.length);
-```
-
----
-
-## `<button>`
-
-> **Source:** <https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/button>
-
-### Description
-
-The `<button>` element is an interactive element activated by a user (via mouse, keyboard, finger, voice, or assistive technology) that performs an action, such as submitting a form or opening a dialog. By default, its appearance reflects the user's platform but can be fully customized with CSS.
-
-### Key Attributes
-
-| Attribute | Description |
-|-----------|-------------|
-| `type` | Specifies behavior: `submit` (default for forms), `reset` (clears form), `button` (no default behavior). |
-| `disabled` | Boolean; prevents user interaction. |
-| `name` | Button name for form submission. |
-| `value` | Value submitted with form data. |
-| `form` | Associates button with a form by ID. |
-| `formaction` | Overrides form's `action` URL. |
-| `formmethod` | Overrides form's HTTP method (`post`/`get`). |
-| `autofocus` | Gives button focus on page load. |
-| `popovertarget` | Controls a popover element by ID. |
-| `popovertargetaction` | Popover action: `show`, `hide`, or `toggle`. |
-
-### Usage Notes
-
-- `<button>` is easier to style than `<input type="button">` because it supports inner HTML content (text, images, icons, pseudo-elements).
-- Always set `type="button"` for non-form buttons to prevent unintended form submission.
-- Default display is `flow-root`; buttons center children both horizontally and vertically.
-
-### Accessibility Considerations
-
-- Icon-only buttons must include visible text or ARIA attributes describing functionality.
-- Minimum recommended interactive target size: 44x44 CSS pixels.
-- Space buttons adequately to prevent accidental activation.
-- Use `:focus-visible` for keyboard focus indicators with sufficient contrast (4.5:1 ratio).
-- Use `aria-pressed` to describe toggle button state (not `aria-checked` or `aria-selected`).
-
-### Example
-
-```html
-<!-- Basic button -->
-<button type="button">Click me</button>
-
-<!-- Form submission button -->
-<form>
-  <input type="text" name="username" />
-  <button type="submit">Submit</button>
-</form>
-
-<!-- Styled button -->
-<button class="favorite" type="button">Add to favorites</button>
-
-<style>
-  .favorite {
-    padding: 10px 20px;
-    background-color: tomato;
-    color: white;
-    border: none;
-    border-radius: 5px;
-    cursor: pointer;
-  }
-
-  .favorite:hover {
-    background-color: red;
-  }
-</style>
-```
-
----
-
-## `<datalist>`
-
-> **Source:** <https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/datalist>
-
-### Description
-
-The `<datalist>` element contains a set of `<option>` elements that represent permissible or recommended options available to choose from within other controls, such as `<input>` elements. It provides autocomplete/suggestion functionality without restricting user input.
-
-### How It Works
-
-The `<datalist>` is associated with an `<input>` element via:
-
-1. Give the `<datalist>` a unique `id`.
-2. Add the `list` attribute to the `<input>` with the same `id` value.
-
-### Key Attributes
-
-- **`<datalist>` itself:** No specific attributes (only global attributes like `id`).
-- **`<option>` children:** `value` (the suggestion; required), `label` (display text; optional).
-
-### Supported Input Types
-
-- Text-based: `text`, `search`, `url`, `tel`, `email`, `number`
-- Date/Time: `month`, `week`, `date`, `time`, `datetime-local`
-- Visual: `range`, `color`
-
-### Usage Notes
-
-- **Not a replacement for `<select>`** -- users can still enter values not in the list.
-- Provides suggestions, not restrictions.
-- Browser styling of the dropdown is limited.
-- Some screen readers may not announce suggestions.
-
-### Example
-
-```html
-<label for="ice-cream-choice">Choose a flavor:</label>
-<input list="ice-cream-flavors" id="ice-cream-choice" />
-
-<datalist id="ice-cream-flavors">
-  <option value="Chocolate"></option>
-  <option value="Coconut"></option>
-  <option value="Mint"></option>
-  <option value="Strawberry"></option>
-  <option value="Vanilla"></option>
-</datalist>
-```
-
----
-
-## `<fieldset>`
-
-> **Source:** <https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/fieldset>
-
-### Description
-
-The `<fieldset>` element is used to group several form controls and labels together within a web form. It provides semantic grouping and visual organization of related form fields.
-
-### Key Attributes
-
-| Attribute | Description |
-|-----------|-------------|
-| `disabled` | Boolean attribute that disables all form controls inside the fieldset (except those in `<legend>`). Disabled controls will not be editable or submitted. |
-| `form` | Links the fieldset to a `<form>` by referencing the form's `id`, even if the fieldset is not nested inside it. |
-| `name` | Specifies the name associated with the group. |
-
-### Usage Notes
-
-- The first `<legend>` element nested in the fieldset provides its caption and should be the first child.
-- Displays as `block` by default with a 2px groove border and padding.
-- When disabled, all descendant form controls become disabled *except* those inside the `<legend>` element.
-- Implicit ARIA role: `group`.
-- DOM Interface: `HTMLFieldSetElement`.
-
-### Example
-
-```html
-<form>
-  <fieldset>
-    <legend>Choose your favorite monster</legend>
-
-    <input type="radio" id="kraken" name="monster" value="K" />
-    <label for="kraken">Kraken</label><br />
-
-    <input type="radio" id="sasquatch" name="monster" value="S" />
-    <label for="sasquatch">Sasquatch</label><br />
-
-    <input type="radio" id="mothman" name="monster" value="M" />
-    <label for="mothman">Mothman</label>
-  </fieldset>
-</form>
-```
-
----
-
-## `<input>`
-
-> **Source:** <https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input>
-
-### Description
-
-The `<input>` element creates interactive controls for web-based forms to accept data from the user. It is one of the most powerful and complex HTML elements due to the numerous combinations of input types and attributes.
-
-### Input Types (24 total)
-
-| Type | Purpose |
-|------|---------|
-| `button` | Push button with no default behavior |
-| `checkbox` | Single value selection/deselection |
-| `color` | Color picker control |
-| `date` | Date input (year, month, day) |
-| `datetime-local` | Date and time without timezone |
-| `email` | Email address field |
-| `file` | File upload control |
-| `hidden` | Non-displayed value submitted to server |
-| `image` | Graphical submit button |
-| `month` | Month and year input |
-| `number` | Numeric input with validation |
-| `password` | Obscured text field |
-| `radio` | Single choice from multiple options |
-| `range` | Numeric value selector (slider) |
-| `reset` | Form reset button |
-| `search` | Search string input |
-| `submit` | Form submission button |
-| `tel` | Telephone number field |
-| `text` | Single-line text (default) |
-| `time` | Time input |
-| `url` | URL field with validation |
-| `week` | Week and year input |
-
-### Key Attributes
-
-| Attribute | Applicable Types | Purpose |
-|-----------|-----------------|---------|
-| `type` | All | Specifies the input control type |
-| `name` | All | Form control identifier for submission |
-| `value` | All | Control's initial/current value |
-| `id` | All | Unique element identifier |
-| `required` | Most | Makes input mandatory |
-| `disabled` | All | Disables user interaction |
-| `readonly` | Text-like | Prevents value editing |
-| `placeholder` | Text-like | Hint text when empty |
-| `min` / `max` | Numeric/date | Value range limits |
-| `minlength` / `maxlength` | Text-like | Character count limits |
-| `pattern` | Text-like | Regex validation pattern |
-| `step` | Numeric/date | Incremental value steps |
-| `autocomplete` | Most | Form autofill hint |
-| `list` | Most | Associates with `<datalist>` |
-| `checked` | Checkbox/radio | Pre-selected state |
-| `multiple` | Email/file | Allow multiple values |
-
-### Usage Notes
-
-- **Labels required:** Always pair inputs with `<label>` elements for accessibility.
-- **Placeholders are not labels:** Placeholders disappear when typing and are not accessible to all screen readers.
-- **Client-side validation:** Use constraint attributes (`required`, `pattern`, `min`, `max`) for browser validation, but always validate server-side as well.
-- **Default type:** If `type` is not specified, it defaults to `text`.
-- **Form association:** Use `name` attribute for form submission; inputs without `name` are not submitted.
-- **CSS pseudo-classes:** Style with `:invalid`, `:valid`, `:checked`, `:disabled`, `:placeholder-shown`, etc.
-
-### Example
-
-```html
-<label for="name">Name (4 to 8 characters):</label>
-<input
-  type="text"
-  id="name"
-  name="name"
-  required
-  minlength="4"
-  maxlength="8"
-  size="10" />
-```
-
----
-
-## `<label>`
-
-> **Source:** <https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/label>
-
-### Description
-
-The `<label>` element represents a caption for an item in a user interface. It associates descriptive text with form controls to enhance usability and accessibility.
-
-### Key Attributes
-
-| Attribute | Description |
-|-----------|-------------|
-| `for` | The `id` of the labelable form control to associate with this label. JavaScript reflection: `htmlFor`. |
-
-### Associating Labels with Controls
-
-**Explicit association (recommended):**
-
-```html
-<label for="username">Enter your username:</label>
-<input id="username" name="username" type="text" />
-```
-
-**Implicit association:**
-
-```html
-<label>
-  I like peas.
-  <input type="checkbox" name="peas" />
-</label>
-```
-
-**Combined (both methods for maximum compatibility):**
-
-```html
-<label for="peas">
-  I like peas.
-  <input type="checkbox" name="peas" id="peas" />
-</label>
-```
-
-### Labelable Elements
-
-Labels can be associated with: `<button>`, `<input>` (except `type="hidden"`), `<meter>`, `<output>`, `<progress>`, `<select>`, and `<textarea>`.
-
-### Accessibility Guidelines
-
-**Do:**
-- Use explicit association with the `for` attribute for broad tool compatibility.
-- Place context (like links to terms) *before* the form control.
-- Use `<legend>` within `<fieldset>` for form section titles.
-
-**Do not:**
-- Place interactive elements (links, buttons) inside labels -- it makes form controls difficult to activate.
-- Use heading elements inside labels -- it interferes with assistive technology navigation.
-- Add labels to `<input type="button">` or `<button>` elements (they have built-in labels via their content/value).
-
----
-
-## `<legend>`
-
-> **Source:** <https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/legend>
-
-### Description
-
-The `<legend>` element represents a caption for the content of its parent `<fieldset>`. It provides a semantic way to label grouped form controls.
-
-### Key Details
-
-- **Must be** the first child of a `<fieldset>` element.
-- Provides an accessible label for the entire fieldset group.
-- Only supports global attributes (no element-specific attributes).
-- Can contain phrasing content and headings (`h1`--`h6`).
-- DOM Interface: `HTMLLegendElement`.
-
-### Example
-
-```html
-<fieldset>
-  <legend>Choose your favorite monster</legend>
-
-  <input type="radio" id="kraken" name="monster" value="K" />
-  <label for="kraken">Kraken</label><br />
-
-  <input type="radio" id="sasquatch" name="monster" value="S" />
-  <label for="sasquatch">Sasquatch</label>
-</fieldset>
-```
-
-```css
-legend {
-  background-color: black;
-  color: white;
-  padding: 3px 6px;
-}
-```
-
----
-
-## `<meter>`
-
-> **Source:** <https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/meter>
-
-### Description
-
-The `<meter>` element represents a scalar value within a known range or a fractional value. It is commonly used to display measurements like fuel levels, temperature, disk usage, or ratings.
-
-### Key Attributes
-
-| Attribute | Default | Description |
-|-----------|---------|-------------|
-| `value` | `0` | Current numeric value (must be between `min` and `max`). |
-| `min` | `0` | Lower bound of the measured range. |
-| `max` | `1` | Upper bound of the measured range. |
-| `low` | `min` value | Upper bound of the "low" end of the range. |
-| `high` | `max` value | Lower bound of the "high" end of the range. |
-| `optimum` | -- | Optimal numeric value; indicates the preferred range section. |
-
-### Usage Notes
-
-- Unless the `value` is between 0 and 1, define `min` and `max` to ensure `value` falls within the range.
-- Browsers color the meter bar differently based on whether the value is below `low`, between `low` and `high`, above `high`, or relative to `optimum`.
-- Cannot contain nested `<meter>` elements.
-- Implicit ARIA role: `meter`.
-
-### Difference from `<progress>`
-
-- **`<meter>`**: Displays a scalar measurement within a range (e.g., temperature, disk usage).
-- **`<progress>`**: Displays task completion progress from 0 to max.
-
-### Example
-
-```html
-<!-- Simple battery level -->
-<p>Battery level: <meter min="0" max="100" value="75">75%</meter></p>
-
-<!-- With low/high ranges -->
-<p>
-  Student's exam score:
-  <meter low="50" high="80" max="100" value="84">84%</meter>
-</p>
-
-<!-- Complete example with optimum -->
-<label for="fuel">Fuel level:</label>
-<meter id="fuel" min="0" max="100" low="33" high="66" optimum="80" value="50">
-  at 50/100
-</meter>
-```
-
----
-
-## `<optgroup>`
-
-> **Source:** <https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/optgroup>
-
-### Description
-
-The `<optgroup>` element creates a grouping of options within a `<select>` element, allowing you to organize related options into labeled groups.
-
-### Key Attributes
-
-| Attribute | Description |
-|-----------|-------------|
-| `label` | The name of the option group (**mandatory**). Browsers display this as a non-selectable label in the UI. |
-| `disabled` | Boolean attribute. When set, all options in this group become non-selectable and appear greyed out. |
-
-### Usage Notes
-
-- Must be a child of a `<select>` element.
-- Contains one or more `<option>` elements.
-- Cannot be nested within other `<optgroup>` elements.
-- The `label` attribute is **mandatory**.
-- Implicit ARIA role: `group`.
-
-### Example
-
-```html
-<label for="dino-select">Choose a dinosaur:</label>
-<select id="dino-select">
-  <optgroup label="Theropods">
-    <option>Tyrannosaurus</option>
-    <option>Velociraptor</option>
-    <option>Deinonychus</option>
-  </optgroup>
-  <optgroup label="Sauropods">
-    <option>Diplodocus</option>
-    <option>Saltasaurus</option>
-    <option>Apatosaurus</option>
-  </optgroup>
-  <optgroup label="Extinct Groups" disabled>
-    <option>Stegosaurus</option>
-  </optgroup>
-</select>
-```
-
----
-
-## `<option>`
-
-> **Source:** <https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/option>
-
-### Description
-
-The `<option>` element defines items contained within `<select>`, `<optgroup>`, or `<datalist>` elements. It represents individual menu items or selectable options.
-
-### Key Attributes
-
-| Attribute | Description |
-|-----------|-------------|
-| `value` | The value submitted with the form if the option is selected. If omitted, the element's text content is used. |
-| `selected` | Boolean attribute that marks the option as initially selected. Only one `<option>` per `<select>` (without `multiple`) can have this attribute. |
-| `disabled` | Boolean attribute that disables the option (greyed out, no interaction). Options are also disabled if their `<optgroup>` ancestor is disabled. |
-| `label` | Text label for the option. If not defined, the element's text content is used. |
-
-### Context of Use
-
-- **Within `<select>`**: Lists selectable options; users choose one (or multiple if `multiple` attribute is set on the select).
-- **Within `<optgroup>`**: Groups related options together.
-- **Within `<datalist>`**: Provides autocomplete suggestions for `<input>` elements.
-
-### Usage Notes
-
-- End tag is optional if immediately followed by another `<option>` or `<optgroup>`.
-- Implicit ARIA role: `option`.
-
-### Example
-
-```html
-<label for="pet-select">Choose a pet:</label>
-<select id="pet-select">
-  <option value="">--Please choose an option--</option>
-  <option value="dog">Dog</option>
-  <option value="cat">Cat</option>
-  <option value="hamster" disabled>Hamster</option>
-  <option value="parrot" selected>Parrot</option>
-</select>
-```
-
----
-
-## `<output>`
-
-> **Source:** <https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/output>
-
-### Description
-
-The `<output>` element is a container element that displays the results of a calculation or the outcome of a user action. It is form-associated and is implemented as an ARIA live region by most browsers, meaning assistive technology will announce changes automatically.
-
-### Key Attributes
-
-| Attribute | Description |
-|-----------|-------------|
-| `for` | Space-separated list of element `id`s that contributed to the calculation. |
-| `form` | Associates the output with a specific `<form>` by its `id` (overrides ancestor forms). |
-| `name` | The element's name; used in `form.elements` API. |
-
-### Usage Notes
-
-- The `<output>` value, name, and contents are **not submitted** with the form.
-- Implemented as an `aria-live` region; assistive technology announces changes automatically.
-- Must have both opening and closing tags.
-
-### Example
-
-```html
-<form id="example-form">
-  <input type="range" id="b" name="b" value="50" /> +
-  <input type="number" id="a" name="a" value="10" /> =
-  <output name="result" for="a b">60</output>
-</form>
-
-<script>
-  const form = document.getElementById("example-form");
-  form.addEventListener("input", () => {
-    const result = form.elements["a"].valueAsNumber +
-                   form.elements["b"].valueAsNumber;
-    form.elements["result"].value = result;
-  });
-</script>
-```
-
----
-
-## `<progress>`
-
-> **Source:** <https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/progress>
-
-### Description
-
-The `<progress>` element displays a progress indicator showing the completion of a task, typically rendered as a progress bar.
-
-### Key Attributes
-
-| Attribute | Description |
-|-----------|-------------|
-| `max` | Total amount of work required. Must be greater than 0 and a valid floating-point number. Default: `1`. |
-| `value` | Completed amount (0 to `max`, or 0 to 1 if `max` is omitted). If omitted, shows an indeterminate progress bar. |
-
-### Difference from `<meter>`
-
-- Minimum value is always 0 (the `min` attribute is **not allowed** for `<progress>`).
-- `<progress>` is specifically for task completion; `<meter>` is for scalar measurements.
-
-### Usage Notes
-
-- Both opening and closing tags are required.
-- Implicit ARIA role: `progressbar`.
-- Text between tags is fallback content for older browsers (not an accessible label).
-- Use the `:indeterminate` pseudo-class to style indeterminate progress bars.
-- Remove the `value` attribute (`element.removeAttribute('value')`) to make an indeterminate progress bar.
-
-### Accessibility Considerations
-
-- Always provide an accessible label using a `<label>` element, `aria-labelledby`, or `aria-label`.
-- For page sections that are loading: set `aria-busy="true"` on the section being updated, use `aria-describedby` to link to the progress element, and remove `aria-busy` when loading completes.
-
-### Example
-
-```html
-<!-- Basic progress bar -->
-<label for="file">File progress:</label>
-<progress id="file" max="100" value="70">70%</progress>
-
-<!-- Accessible with implicit label -->
-<label>
-  Uploading Document: <progress value="70" max="100">70%</progress>
-</label>
-
-<!-- Indeterminate (no value attribute) -->
-<progress max="100"></progress>
-```
-
----
-
-## `<select>`
-
-> **Source:** <https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/select>
-
-### Description
-
-The `<select>` element represents a control that provides a menu of options, allowing users to select from a dropdown list of choices.
-
-### Key Attributes
-
-| Attribute | Description |
-|-----------|-------------|
-| `name` | Specifies the name of the control for form submission. |
-| `multiple` | Boolean attribute allowing selection of multiple options. |
-| `size` | Number of visible rows in a scrolling list box (default: `0`). |
-| `required` | Boolean attribute requiring a non-empty option selection. |
-| `disabled` | Boolean attribute preventing user interaction. |
-| `autofocus` | Boolean attribute giving focus to the control on page load. |
-| `form` | Associates the select with a specific form by ID. |
-| `autocomplete` | Provides hints for autocomplete behavior. |
-
-### Usage Notes
-
-- Each option is defined with nested `<option>` elements.
-- Use `<optgroup>` to group related options visually.
-- Use `<hr>` elements to create visual separators between options.
-- The `value` attribute on `<option>` elements specifies data submitted to the server.
-- If no `value` attribute exists on an option, the option's text content is used.
-- Without a `selected` attribute, the first option defaults as selected.
-- Multiple selections with `multiple` attribute are submitted as `name=value1&name=value2`.
-
-### Accessibility Considerations
-
-- Associate with labels using `<label>` with `for` attribute matching the select's `id`.
-- Implicit ARIA roles: `combobox` (single select), `listbox` (multiple or size > 1).
-
-### Example
-
-```html
-<label for="pet-select">Choose a pet:</label>
-
-<select name="pets" id="pet-select">
-  <option value="">--Please choose an option--</option>
-  <option value="dog">Dog</option>
-  <option value="cat">Cat</option>
-  <option value="hamster">Hamster</option>
-</select>
-```
-
----
-
-## `<textarea>`
-
-> **Source:** <https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/textarea>
-
-### Description
-
-The `<textarea>` element represents a multi-line plain-text editing control for allowing users to enter sizeable amounts of free-form text (e.g., comments, feedback, reviews).
-
-### Key Attributes
-
-| Attribute | Description |
-|-----------|-------------|
-| `rows` | Number of visible text lines (default: `2`). |
-| `cols` | Visible width in average character widths (default: `20`). |
-| `name` | Control name for form submission. |
-| `id` | For associating with `<label>` elements. |
-| `placeholder` | Hint text displayed to the user. |
-| `maxlength` | Maximum string length (UTF-16 code units). |
-| `minlength` | Minimum string length (UTF-16 code units). |
-| `wrap` | Line wrapping behavior: `soft` (default), `hard`, or `off`. |
-| `disabled` | Boolean; disables user interaction. |
-| `readonly` | Boolean; user cannot modify content but it remains focusable and submittable. |
-| `required` | Boolean; user must fill in a value. |
-| `autocomplete` | `on` or `off` for browser auto-completion. |
-| `spellcheck` | `true`, `false`, or `default` for spell-checking behavior. |
-| `autofocus` | Boolean; receives focus on page load. |
-
-### Usage Notes
-
-- Initial content goes between opening and closing tags (not as a `value` attribute).
-- Use `.value` property in JavaScript to get/set content; `.defaultValue` for the initial value.
-- Resizable by default; disable resizing with `resize: none` in CSS.
-- Use `:valid` and `:invalid` pseudo-classes for styling based on `minlength`/`maxlength`/`required` constraints.
-
-### Example
-
-```html
-<label for="story">Tell us your story:</label>
-
-<textarea
-  id="story"
-  name="story"
-  rows="5"
-  cols="33"
-  placeholder="Enter your feedback here..."
-  maxlength="500"
-  required>
-It was a dark and stormy night...
-</textarea>
-```
-
-```css
-textarea {
-  padding: 10px;
-  border: 1px solid #cccccc;
-  border-radius: 5px;
-  font-family: Arial, sans-serif;
-  resize: vertical;
-}
-
-textarea:invalid {
-  border-color: red;
-}
-
-textarea:valid {
-  border-color: green;
-}
-```
diff --git a/skills/create-web-form/references/html-form-example.md b/skills/create-web-form/references/html-form-example.md
deleted file mode 100644
index 5d6c1d89e..000000000
--- a/skills/create-web-form/references/html-form-example.md
+++ /dev/null
@@ -1,990 +0,0 @@
-# HTML Form Examples Reference
-
-This reference consolidates key educational content from W3Schools covering HTML forms, form elements, input types, and form-related attributes.
-
----
-
-## HTML Forms
-
-> **Source:** https://www.w3schools.com/html/html_forms.asp
-
-### The `<form>` Element
-
-The `<form>` element is used to create an HTML form for user input. It acts as a container for different types of input elements such as text fields, checkboxes, radio buttons, submit buttons, and more.
-
-```html
-<form>
-  <!-- form elements go here -->
-</form>
-```
-
-### The `<input>` Element
-
-The `<input>` element is the most used form element. It can be displayed in many ways depending on the `type` attribute.
-
-| Type | Description |
-|------|-------------|
-| `<input type="text">` | Displays a single-line text input field |
-| `<input type="radio">` | Displays a radio button (for selecting one of many choices) |
-| `<input type="checkbox">` | Displays a checkbox (for selecting zero or more of many choices) |
-| `<input type="submit">` | Displays a submit button (for submitting the form) |
-| `<input type="button">` | Displays a clickable button |
-
-### Text Fields
-
-The `<input type="text">` defines a single-line input field for text input.
-
-```html
-<form>
-  <label for="fname">First name:</label><br>
-  <input type="text" id="fname" name="fname"><br>
-  <label for="lname">Last name:</label><br>
-  <input type="text" id="lname" name="lname">
-</form>
-```
-
-**Note:** The form itself is not visible. The default width of an input field is 20 characters.
-
-### The `<label>` Element
-
-The `<label>` element defines a label for many form elements. It is useful for screen-reader users because the screen reader will read the label aloud when the user focuses on the input element. It also helps users who have difficulty clicking on very small regions (such as radio buttons or checkboxes) because clicking on the label text toggles the associated input.
-
-The `for` attribute of the `<label>` tag should be equal to the `id` attribute of the `<input>` element to bind them together.
-
-### Radio Buttons
-
-The `<input type="radio">` defines a radio button. Radio buttons let a user select ONE of a limited number of choices.
-
-```html
-<form>
-  <p>Choose your favorite Web language:</p>
-  <input type="radio" id="html" name="fav_language" value="HTML">
-  <label for="html">HTML</label><br>
-  <input type="radio" id="css" name="fav_language" value="CSS">
-  <label for="css">CSS</label><br>
-  <input type="radio" id="javascript" name="fav_language" value="JavaScript">
-  <label for="javascript">JavaScript</label>
-</form>
-```
-
-### Checkboxes
-
-The `<input type="checkbox">` defines a checkbox. Checkboxes let a user select ZERO or MORE options of a limited number of choices.
-
-```html
-<form>
-  <input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
-  <label for="vehicle1"> I have a bike</label><br>
-  <input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
-  <label for="vehicle2"> I have a car</label><br>
-  <input type="checkbox" id="vehicle3" name="vehicle3" value="Boat">
-  <label for="vehicle3"> I have a boat</label>
-</form>
-```
-
-### The Submit Button
-
-The `<input type="submit">` defines a button for submitting the form data to a form-handler. The form-handler is typically a file on the server with a script for processing input data, specified in the form's `action` attribute.
-
-```html
-<form action="/action_page.php">
-  <label for="fname">First name:</label><br>
-  <input type="text" id="fname" name="fname" value="John"><br>
-  <label for="lname">Last name:</label><br>
-  <input type="text" id="lname" name="lname" value="Doe"><br><br>
-  <input type="submit" value="Submit">
-</form>
-```
-
-### The `name` Attribute for `<input>`
-
-Each input field must have a `name` attribute to be submitted. If the `name` attribute is omitted, the value of the input field will not be sent at all.
-
----
-
-## HTML Form Attributes
-
-> **Source:** https://www.w3schools.com/html/html_forms_attributes.asp
-
-### The `action` Attribute
-
-The `action` attribute defines the action to be performed when the form is submitted. Usually, the form data is sent to a file on the server when the user clicks the submit button.
-
-```html
-<form action="/action_page.php">
-  <label for="fname">First name:</label><br>
-  <input type="text" id="fname" name="fname" value="John"><br>
-  <label for="lname">Last name:</label><br>
-  <input type="text" id="lname" name="lname" value="Doe"><br><br>
-  <input type="submit" value="Submit">
-</form>
-```
-
-**Tip:** If the `action` attribute is omitted, the action is set to the current page.
-
-### The `target` Attribute
-
-The `target` attribute specifies where to display the response that is received after submitting the form.
-
-| Value | Description |
-|-------|-------------|
-| `_blank` | The response is displayed in a new window or tab |
-| `_self` | The response is displayed in the current window (default) |
-| `_parent` | The response is displayed in the parent frame |
-| `_top` | The response is displayed in the full body of the window |
-| `framename` | The response is displayed in a named iframe |
-
-```html
-<form action="/action_page.php" target="_blank">
-```
-
-### The `method` Attribute
-
-The `method` attribute specifies the HTTP method to be used when submitting the form data. The form data can be sent as URL variables (with `method="get"`) or as an HTTP post transaction (with `method="post"`).
-
-```html
-<!-- Using GET -->
-<form action="/action_page.php" method="get">
-
-<!-- Using POST -->
-<form action="/action_page.php" method="post">
-```
-
-**When to use GET:**
-
-- The default method if not specified
-- Form data is appended to the URL in name/value pairs
-- The length of a URL is limited (about 2048 characters)
-- Never use GET to send sensitive data (it will be visible in the URL)
-- Useful for form submissions where a user wants to bookmark the result
-- GET is suitable for non-secure data, like query strings in search engines
-
-**When to use POST:**
-
-- Appends the form data inside the body of the HTTP request (data is not shown in the URL)
-- POST has no size limitations
-- Form submissions with POST cannot be bookmarked
-- Always use POST when submitting sensitive or personal information
-
-### The `autocomplete` Attribute
-
-The `autocomplete` attribute specifies whether a form should have autocomplete on or off. When autocomplete is on, the browser automatically completes values based on values that the user has entered before.
-
-```html
-<form action="/action_page.php" autocomplete="on">
-```
-
-### The `novalidate` Attribute
-
-The `novalidate` attribute is a boolean attribute. When present, it specifies that the form data should not be validated when submitted.
-
-```html
-<form action="/action_page.php" novalidate>
-```
-
-### The `enctype` Attribute
-
-The `enctype` attribute specifies how the form data should be encoded when submitting it to the server. This attribute can only be used with `method="post"`.
-
-| Value | Description |
-|-------|-------------|
-| `application/x-www-form-urlencoded` | Default. All characters are encoded before sent |
-| `multipart/form-data` | Required when the form includes file upload controls (`<input type="file">`) |
-| `text/plain` | Sends data without any encoding (not recommended) |
-
-```html
-<form action="/action_page.php" method="post" enctype="multipart/form-data">
-```
-
-### The `name` Attribute
-
-The `name` attribute specifies the name of the form. It is used to reference elements in JavaScript, or to reference form data after submission. Only forms with a name attribute will have their values passed when submitted.
-
-### The `accept-charset` Attribute
-
-The `accept-charset` attribute specifies the character encodings used for the form submission. The default value is `"unknown"`, which indicates the same encoding as the document.
-
-### All `<form>` Attributes Summary
-
-| Attribute | Description |
-|-----------|-------------|
-| `accept-charset` | Specifies the character encodings for form submission |
-| `action` | Specifies where to send the form data when submitted |
-| `autocomplete` | Specifies whether the form should have autocomplete on or off |
-| `enctype` | Specifies how the form data should be encoded when submitting (for `method="post"`) |
-| `method` | Specifies the HTTP method to use when sending form data |
-| `name` | Specifies the name of the form |
-| `novalidate` | Specifies that the form should not be validated when submitted |
-| `rel` | Specifies the relationship between a linked resource and the current document |
-| `target` | Specifies where to display the response after submitting the form |
-
----
-
-## HTML Form Elements
-
-> **Source:** https://www.w3schools.com/html/html_form_elements.asp
-
-### The `<input>` Element
-
-The most important form element. Can be displayed in several ways depending on the `type` attribute. If `type` is omitted, the input field gets the default type `text`.
-
-### The `<label>` Element
-
-Defines a label for several form elements. The `for` attribute should equal the `id` of a related input to bind them. Users can also click the label to toggle focus/selection on the input control.
-
-### The `<select>` Element
-
-The `<select>` element defines a drop-down list.
-
-```html
-<label for="cars">Choose a car:</label>
-<select id="cars" name="cars">
-  <option value="volvo">Volvo</option>
-  <option value="saab">Saab</option>
-  <option value="fiat" selected>Fiat</option>
-  <option value="audi">Audi</option>
-</select>
-```
-
-- The `<option>` elements define options that can be selected.
-- By default, the first item in the drop-down list is selected.
-- The `selected` attribute pre-selects an option.
-- Use the `size` attribute to specify the number of visible values.
-- Use the `multiple` attribute to allow the user to select more than one value.
-
-```html
-<!-- Visible values -->
-<select id="cars" name="cars" size="3">
-
-<!-- Allow multiple selections -->
-<select id="cars" name="cars" size="4" multiple>
-```
-
-### The `<textarea>` Element
-
-The `<textarea>` element defines a multi-line input field (a text area).
-
-```html
-<textarea name="message" rows="10" cols="30">
-The cat was playing in the garden.
-</textarea>
-```
-
-- The `rows` attribute specifies the visible number of lines in a text area.
-- The `cols` attribute specifies the visible width of a text area.
-- You can also define the size with CSS using `height` and `width` properties.
-
-```css
-textarea {
-  width: 100%;
-  height: 200px;
-}
-```
-
-### The `<button>` Element
-
-The `<button>` element defines a clickable button.
-
-```html
-<button type="button" onclick="alert('Hello World!')">Click Me!</button>
-```
-
-**Note:** Always specify the `type` attribute for the `<button>` element. Different browsers may use different default types.
-
-### The `<fieldset>` and `<legend>` Elements
-
-The `<fieldset>` element groups related data in a form. The `<legend>` element defines a caption for the `<fieldset>` element.
-
-```html
-<form action="/action_page.php">
-  <fieldset>
-    <legend>Personalia:</legend>
-    <label for="fname">First name:</label><br>
-    <input type="text" id="fname" name="fname" value="John"><br>
-    <label for="lname">Last name:</label><br>
-    <input type="text" id="lname" name="lname" value="Doe"><br><br>
-    <input type="submit" value="Submit">
-  </fieldset>
-</form>
-```
-
-### The `<datalist>` Element
-
-The `<datalist>` element specifies a list of pre-defined options for an `<input>` element. Users will see a drop-down list of the pre-defined options as they input data. The `list` attribute of the `<input>` element must refer to the `id` attribute of the `<datalist>` element.
-
-```html
-<form action="/action_page.php">
-  <input list="browsers" name="browser">
-  <datalist id="browsers">
-    <option value="Edge">
-    <option value="Firefox">
-    <option value="Chrome">
-    <option value="Opera">
-    <option value="Safari">
-  </datalist>
-  <input type="submit">
-</form>
-```
-
-### The `<output>` Element
-
-The `<output>` element represents the result of a calculation (typically performed using JavaScript).
-
-```html
-<form action="/action_page.php"
-  oninput="x.value=parseInt(a.value)+parseInt(b.value)">
-  0
-  <input type="range" id="a" name="a" value="50">
-  100 +
-  <input type="number" id="b" name="b" value="50">
-  =
-  <output name="x" for="a b"></output>
-  <br><br>
-  <input type="submit">
-</form>
-```
-
-### The `<optgroup>` Element
-
-The `<optgroup>` element is used to group related options in a `<select>` element (drop-down list).
-
-```html
-<label for="cars">Choose a car:</label>
-<select name="cars" id="cars">
-  <optgroup label="Swedish Cars">
-    <option value="volvo">Volvo</option>
-    <option value="saab">Saab</option>
-  </optgroup>
-  <optgroup label="German Cars">
-    <option value="mercedes">Mercedes</option>
-    <option value="audi">Audi</option>
-  </optgroup>
-</select>
-```
-
-### Form Elements Summary
-
-| Element | Description |
-|---------|-------------|
-| `<form>` | Defines an HTML form for user input |
-| `<input>` | Defines an input control |
-| `<textarea>` | Defines a multiline input control (text area) |
-| `<label>` | Defines a label for an `<input>` element |
-| `<fieldset>` | Groups related elements in a form |
-| `<legend>` | Defines a caption for a `<fieldset>` element |
-| `<select>` | Defines a drop-down list |
-| `<optgroup>` | Defines a group of related options in a drop-down list |
-| `<option>` | Defines an option in a drop-down list |
-| `<button>` | Defines a clickable button |
-| `<datalist>` | Specifies a list of pre-defined options for input controls |
-| `<output>` | Defines the result of a calculation |
-
----
-
-## HTML Form Input Types
-
-> **Source:** https://www.w3schools.com/html/html_form_input_types.asp
-
-### Input Type: text
-
-`<input type="text">` defines a single-line text input field.
-
-```html
-<form>
-  <label for="fname">First name:</label><br>
-  <input type="text" id="fname" name="fname"><br>
-  <label for="lname">Last name:</label><br>
-  <input type="text" id="lname" name="lname">
-</form>
-```
-
-### Input Type: password
-
-`<input type="password">` defines a password field. The characters are masked (shown as asterisks or circles).
-
-```html
-<form>
-  <label for="username">Username:</label><br>
-  <input type="text" id="username" name="username"><br>
-  <label for="pwd">Password:</label><br>
-  <input type="password" id="pwd" name="pwd">
-</form>
-```
-
-### Input Type: submit
-
-`<input type="submit">` defines a button for submitting form data to a form-handler. The form-handler is typically a server page specified by the form's `action` attribute.
-
-```html
-<form action="/action_page.php">
-  <label for="fname">First name:</label><br>
-  <input type="text" id="fname" name="fname" value="John"><br>
-  <label for="lname">Last name:</label><br>
-  <input type="text" id="lname" name="lname" value="Doe"><br><br>
-  <input type="submit" value="Submit">
-</form>
-```
-
-If you omit the submit button's `value` attribute, the button will get a default text.
-
-### Input Type: reset
-
-`<input type="reset">` defines a reset button that will reset all form values to their default values.
-
-```html
-<form action="/action_page.php">
-  <label for="fname">First name:</label><br>
-  <input type="text" id="fname" name="fname" value="John"><br>
-  <label for="lname">Last name:</label><br>
-  <input type="text" id="lname" name="lname" value="Doe"><br><br>
-  <input type="submit" value="Submit">
-  <input type="reset">
-</form>
-```
-
-### Input Type: radio
-
-`<input type="radio">` defines a radio button. Radio buttons let a user select only ONE of a limited number of choices.
-
-```html
-<form>
-  <input type="radio" id="html" name="fav_language" value="HTML">
-  <label for="html">HTML</label><br>
-  <input type="radio" id="css" name="fav_language" value="CSS">
-  <label for="css">CSS</label><br>
-  <input type="radio" id="javascript" name="fav_language" value="JavaScript">
-  <label for="javascript">JavaScript</label>
-</form>
-```
-
-### Input Type: checkbox
-
-`<input type="checkbox">` defines a checkbox. Checkboxes let a user select ZERO or MORE options.
-
-```html
-<form>
-  <input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
-  <label for="vehicle1"> I have a bike</label><br>
-  <input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
-  <label for="vehicle2"> I have a car</label><br>
-  <input type="checkbox" id="vehicle3" name="vehicle3" value="Boat">
-  <label for="vehicle3"> I have a boat</label>
-</form>
-```
-
-### Input Type: button
-
-`<input type="button">` defines a button.
-
-```html
-<input type="button" onclick="alert('Hello World!')" value="Click Me!">
-```
-
-### Input Type: color
-
-`<input type="color">` is used for input fields that should contain a color. Depending on browser support, a color picker can be shown.
-
-```html
-<form>
-  <label for="favcolor">Select your favorite color:</label>
-  <input type="color" id="favcolor" name="favcolor" value="#ff0000">
-</form>
-```
-
-### Input Type: date
-
-`<input type="date">` is used for input fields that should contain a date. Depending on browser support, a date picker can be shown.
-
-```html
-<form>
-  <label for="birthday">Birthday:</label>
-  <input type="date" id="birthday" name="birthday">
-</form>
-```
-
-You can use the `min` and `max` attributes to add restrictions:
-
-```html
-<input type="date" id="datemin" name="datemin" min="2000-01-02">
-<input type="date" id="datemax" name="datemax" max="1979-12-31">
-```
-
-### Input Type: datetime-local
-
-`<input type="datetime-local">` specifies a date and time input field, with no time zone.
-
-```html
-<form>
-  <label for="birthdaytime">Birthday (date and time):</label>
-  <input type="datetime-local" id="birthdaytime" name="birthdaytime">
-</form>
-```
-
-### Input Type: email
-
-`<input type="email">` is used for input fields that should contain an e-mail address. Depending on browser support, the e-mail address can be automatically validated. Some smartphones recognize the email type and add `.com` to the keyboard.
-
-```html
-<form>
-  <label for="email">Enter your email:</label>
-  <input type="email" id="email" name="email">
-</form>
-```
-
-### Input Type: file
-
-`<input type="file">` defines a file-select field and a "Browse" button for file uploads.
-
-```html
-<form>
-  <label for="myfile">Select a file:</label>
-  <input type="file" id="myfile" name="myfile">
-</form>
-```
-
-### Input Type: hidden
-
-`<input type="hidden">` defines a hidden input field (not visible to the user). A hidden field lets web developers include data that cannot be seen or modified by users when a form is submitted.
-
-```html
-<form>
-  <label for="fname">First name:</label>
-  <input type="text" id="fname" name="fname"><br><br>
-  <input type="hidden" id="custId" name="custId" value="3487">
-  <input type="submit" value="Submit">
-</form>
-```
-
-### Input Type: image
-
-`<input type="image">` defines an image as a submit button. The path to the image is specified in the `src` attribute.
-
-```html
-<form>
-  <input type="image" src="img_submit.gif" alt="Submit" width="48" height="48">
-</form>
-```
-
-### Input Type: month
-
-`<input type="month">` allows the user to select a month and year.
-
-```html
-<form>
-  <label for="bdaymonth">Birthday (month and year):</label>
-  <input type="month" id="bdaymonth" name="bdaymonth">
-</form>
-```
-
-### Input Type: number
-
-`<input type="number">` defines a numeric input field. You can set restrictions on what numbers are accepted.
-
-```html
-<form>
-  <label for="quantity">Quantity (between 1 and 5):</label>
-  <input type="number" id="quantity" name="quantity" min="1" max="5">
-</form>
-```
-
-**Input restrictions:**
-
-| Attribute | Description |
-|-----------|-------------|
-| `disabled` | Specifies that an input field should be disabled |
-| `max` | Specifies the maximum value for an input field |
-| `maxlength` | Specifies the maximum number of characters for an input field |
-| `min` | Specifies the minimum value for an input field |
-| `pattern` | Specifies a regular expression to check the input value against |
-| `readonly` | Specifies that an input field is read only (cannot be changed) |
-| `required` | Specifies that an input field is required (must be filled out) |
-| `size` | Specifies the width (in characters) of an input field |
-| `step` | Specifies the legal number intervals for an input field |
-| `value` | Specifies the default value for an input field |
-
-### Input Type: range
-
-`<input type="range">` defines a control for entering a number whose exact value is not important (like a slider control). Default range is 0 to 100. You can set restrictions with `min`, `max`, and `step`.
-
-```html
-<form>
-  <label for="vol">Volume (between 0 and 50):</label>
-  <input type="range" id="vol" name="vol" min="0" max="50">
-</form>
-```
-
-### Input Type: search
-
-`<input type="search">` is used for search fields (behaves like a regular text field).
-
-```html
-<form>
-  <label for="gsearch">Search Google:</label>
-  <input type="search" id="gsearch" name="gsearch">
-</form>
-```
-
-### Input Type: tel
-
-`<input type="tel">` is used for input fields that should contain a telephone number.
-
-```html
-<form>
-  <label for="phone">Enter your phone number:</label>
-  <input type="tel" id="phone" name="phone"
-    pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}">
-</form>
-```
-
-### Input Type: time
-
-`<input type="time">` allows the user to select a time (no time zone).
-
-```html
-<form>
-  <label for="appt">Select a time:</label>
-  <input type="time" id="appt" name="appt">
-</form>
-```
-
-### Input Type: url
-
-`<input type="url">` is used for input fields that should contain a URL address. Depending on browser support, the url field can be automatically validated. Some smartphones recognize the url type and add `.com` to the keyboard.
-
-```html
-<form>
-  <label for="homepage">Add your homepage:</label>
-  <input type="url" id="homepage" name="homepage">
-</form>
-```
-
-### Input Type: week
-
-`<input type="week">` allows the user to select a week and year.
-
-```html
-<form>
-  <label for="week">Select a week:</label>
-  <input type="week" id="week" name="week">
-</form>
-```
-
-### Input Types Summary
-
-| Input Type | Description |
-|------------|-------------|
-| `text` | Default. Single-line text input |
-| `password` | Password field (characters are masked) |
-| `submit` | Submit button |
-| `reset` | Reset button |
-| `radio` | Radio button |
-| `checkbox` | Checkbox |
-| `button` | Clickable button |
-| `color` | Color picker |
-| `date` | Date control (year, month, day) |
-| `datetime-local` | Date and time control (no timezone) |
-| `email` | Field for an e-mail address |
-| `file` | File-select field and a "Browse" button |
-| `hidden` | Hidden input field |
-| `image` | Image as a submit button |
-| `month` | Month and year control |
-| `number` | Field for entering a number |
-| `range` | Slider control for entering a number in a range |
-| `search` | Text field for searching |
-| `tel` | Field for entering a telephone number |
-| `time` | Control for entering a time |
-| `url` | Field for entering a URL |
-| `week` | Week and year control |
-
----
-
-## HTML Input Attributes
-
-> **Source:** https://www.w3schools.com/html/html_form_attributes.asp
-
-### The `value` Attribute
-
-The `value` attribute specifies an initial value for an input field.
-
-```html
-<form>
-  <label for="fname">First name:</label><br>
-  <input type="text" id="fname" name="fname" value="John"><br>
-  <label for="lname">Last name:</label><br>
-  <input type="text" id="lname" name="lname" value="Doe">
-</form>
-```
-
-### The `readonly` Attribute
-
-The `readonly` attribute specifies that an input field is read-only. A read-only input field cannot be modified but can be tabbed to, highlighted, and copied. The value of a read-only field will be sent when submitting the form.
-
-```html
-<input type="text" id="fname" name="fname" value="John" readonly>
-```
-
-### The `disabled` Attribute
-
-The `disabled` attribute specifies that an input field should be disabled. A disabled field is unusable and un-clickable. The value of a disabled field will **not** be sent when submitting the form.
-
-```html
-<input type="text" id="fname" name="fname" value="John" disabled>
-```
-
-### The `size` Attribute
-
-The `size` attribute specifies the visible width, in characters, of an input field. The default value for `size` is 20. Works with: text, search, tel, url, email, and password.
-
-```html
-<input type="text" id="fname" name="fname" size="50">
-```
-
-### The `maxlength` Attribute
-
-The `maxlength` attribute specifies the maximum number of characters allowed in an input field. When a `maxlength` is set, the input field will not accept more than the specified number of characters.
-
-```html
-<input type="text" id="fname" name="fname" maxlength="10">
-```
-
-### The `min` and `max` Attributes
-
-The `min` and `max` attributes specify the minimum and maximum values for an input field. Work with: number, range, date, datetime-local, month, time, and week.
-
-```html
-<input type="date" id="datemin" name="datemin" min="2000-01-02">
-<input type="date" id="datemax" name="datemax" max="1979-12-31">
-<input type="number" id="quantity" name="quantity" min="1" max="5">
-```
-
-### The `multiple` Attribute
-
-The `multiple` attribute specifies that the user is allowed to enter more than one value in an input field. Works with email and file.
-
-```html
-<input type="file" id="files" name="files" multiple>
-```
-
-### The `pattern` Attribute
-
-The `pattern` attribute specifies a regular expression that the input field's value is checked against when the form is submitted. Works with: text, date, search, url, tel, email, and password.
-
-```html
-<input type="text" id="country_code" name="country_code"
-  pattern="[A-Za-z]{3}" title="Three letter country code">
-```
-
-**Tip:** Use the global `title` attribute to describe the pattern to help the user.
-
-### The `placeholder` Attribute
-
-The `placeholder` attribute specifies a short hint that describes the expected value of an input field. The hint is displayed in the input field before the user enters a value. Works with: text, search, url, tel, email, and password.
-
-```html
-<input type="tel" id="phone" name="phone"
-  placeholder="123-45-678">
-```
-
-### The `required` Attribute
-
-The `required` attribute specifies that an input field must be filled out before submitting the form.
-
-```html
-<input type="text" id="username" name="username" required>
-```
-
-### The `step` Attribute
-
-The `step` attribute specifies the legal number intervals for an input field. Works with: number, range, date, datetime-local, month, time, and week.
-
-```html
-<!-- Accept values at intervals of 3 -->
-<input type="number" id="points" name="points" step="3">
-```
-
-**Note:** Input restrictions are not foolproof. JavaScript provides additional ways to restrict illegal input. Server-side validation is always required.
-
-### The `autofocus` Attribute
-
-The `autofocus` attribute specifies that an input field should automatically get focus when the page loads.
-
-```html
-<input type="text" id="fname" name="fname" autofocus>
-```
-
-### The `height` and `width` Attributes
-
-The `height` and `width` attributes specify the height and width of an `<input type="image">` element. Always specify the size of images to prevent page flickering during load.
-
-```html
-<input type="image" src="img_submit.gif" alt="Submit" width="48" height="48">
-```
-
-### The `list` Attribute
-
-The `list` attribute refers to a `<datalist>` element that contains pre-defined options for an `<input>` element.
-
-```html
-<input list="browsers">
-<datalist id="browsers">
-  <option value="Edge">
-  <option value="Firefox">
-  <option value="Chrome">
-  <option value="Opera">
-  <option value="Safari">
-</datalist>
-```
-
-### The `autocomplete` Attribute
-
-The `autocomplete` attribute specifies whether a form or an input field should have autocomplete on or off. When on, the browser automatically completes values based on previously entered values.
-
-```html
-<form action="/action_page.php" autocomplete="on">
-  <label for="fname">First name:</label>
-  <input type="text" id="fname" name="fname"><br><br>
-  <label for="email">Email:</label>
-  <input type="email" id="email" name="email" autocomplete="off"><br><br>
-  <input type="submit">
-</form>
-```
-
-**Tip:** `autocomplete` works with the `<form>` element and the following `<input>` types: text, search, url, tel, email, password, datepickers, range, and color.
-
-### Input Attributes Summary
-
-| Attribute | Description |
-|-----------|-------------|
-| `value` | Specifies the default value of an input element |
-| `readonly` | Specifies that an input field is read-only |
-| `disabled` | Specifies that an input field is disabled |
-| `size` | Specifies the visible width of an input field |
-| `maxlength` | Specifies the maximum number of characters in an input field |
-| `min` | Specifies the minimum value for an input field |
-| `max` | Specifies the maximum value for an input field |
-| `multiple` | Specifies that a user can enter more than one value |
-| `pattern` | Specifies a regular expression to check the value against |
-| `placeholder` | Specifies a short hint describing the expected value |
-| `required` | Specifies that an input field must be filled out |
-| `step` | Specifies the legal number intervals |
-| `autofocus` | Specifies that an input field should get focus on page load |
-| `height` | Specifies the height of an `<input type="image">` |
-| `width` | Specifies the width of an `<input type="image">` |
-| `list` | Refers to a `<datalist>` element with pre-defined options |
-| `autocomplete` | Specifies whether autocomplete is on or off |
-
----
-
-## HTML Input form* Attributes
-
-> **Source:** https://www.w3schools.com/html/html_form_attributes_form.asp
-
-### The `form` Attribute
-
-The input `form` attribute specifies the form the `<input>` element belongs to. The value of this attribute must be equal to the `id` attribute of the `<form>` element it belongs to. This allows an input field located outside the form to still be associated with it.
-
-```html
-<form action="/action_page.php" id="form1">
-  <label for="fname">First name:</label>
-  <input type="text" id="fname" name="fname"><br><br>
-  <input type="submit" value="Submit">
-</form>
-
-<!-- This input is outside the form but still part of it -->
-<label for="lname">Last name:</label>
-<input type="text" id="lname" name="lname" form="form1">
-```
-
-### The `formaction` Attribute
-
-The input `formaction` attribute specifies the URL of the file that will process the input when the form is submitted. This attribute overrides the `action` attribute of the `<form>` element. Works with submit and image input types.
-
-```html
-<form action="/action_page.php">
-  <label for="fname">First name:</label>
-  <input type="text" id="fname" name="fname"><br><br>
-  <input type="submit" value="Submit">
-  <input type="submit" formaction="/action_page2.php" value="Submit as Admin">
-</form>
-```
-
-### The `formenctype` Attribute
-
-The input `formenctype` attribute specifies how the form data should be encoded when submitted (only for forms with `method="post"`). This attribute overrides the `enctype` attribute of the `<form>` element. Works with submit and image input types.
-
-```html
-<form action="/action_page_binary.asp" method="post">
-  <label for="fname">First name:</label>
-  <input type="text" id="fname" name="fname"><br><br>
-  <input type="submit" value="Submit">
-  <input type="submit" formenctype="multipart/form-data"
-    value="Submit as Multipart/form-data">
-</form>
-```
-
-### The `formmethod` Attribute
-
-The input `formmethod` attribute defines the HTTP method for sending form data to the action URL. This attribute overrides the `method` attribute of the `<form>` element. Works with submit and image input types.
-
-```html
-<form action="/action_page.php" method="get">
-  <label for="fname">First name:</label>
-  <input type="text" id="fname" name="fname"><br><br>
-  <label for="lname">Last name:</label>
-  <input type="text" id="lname" name="lname"><br><br>
-  <input type="submit" value="Submit using GET">
-  <input type="submit" formmethod="post" value="Submit using POST">
-</form>
-```
-
-### The `formtarget` Attribute
-
-The input `formtarget` attribute specifies a name or keyword that indicates where to display the response after submitting the form. This attribute overrides the `target` attribute of the `<form>` element. Works with submit and image input types.
-
-```html
-<form action="/action_page.php">
-  <label for="fname">First name:</label>
-  <input type="text" id="fname" name="fname"><br><br>
-  <label for="lname">Last name:</label>
-  <input type="text" id="lname" name="lname"><br><br>
-  <input type="submit" value="Submit">
-  <input type="submit" formtarget="_blank" value="Submit to a new window/tab">
-</form>
-```
-
-### The `formnovalidate` Attribute
-
-The input `formnovalidate` attribute specifies that an `<input>` element should not be validated when submitted. This attribute overrides the `novalidate` attribute of the `<form>` element. Works with the submit input type.
-
-```html
-<form action="/action_page.php">
-  <label for="email">Enter your email:</label>
-  <input type="email" id="email" name="email"><br><br>
-  <input type="submit" value="Submit">
-  <input type="submit" formnovalidate="formnovalidate"
-    value="Submit without validation">
-</form>
-```
-
-### The `novalidate` Attribute
-
-The `novalidate` attribute is a `<form>` attribute. When present, it specifies that all form data should not be validated when submitted.
-
-```html
-<form action="/action_page.php" novalidate>
-  <label for="email">Enter your email:</label>
-  <input type="email" id="email" name="email"><br><br>
-  <input type="submit" value="Submit">
-</form>
-```
-
-### form* Attributes Summary
-
-| Attribute | Description |
-|-----------|-------------|
-| `form` | Specifies the form the input element belongs to |
-| `formaction` | Specifies the URL for form submission (overrides form's `action`) |
-| `formenctype` | Specifies how form data should be encoded (overrides form's `enctype`) |
-| `formmethod` | Specifies the HTTP method for sending data (overrides form's `method`) |
-| `formnovalidate` | Specifies that the input should not be validated (overrides form's `novalidate`) |
-| `formtarget` | Specifies where to display the response (overrides form's `target`) |
diff --git a/skills/create-web-form/references/hypertext-transfer-protocol.md b/skills/create-web-form/references/hypertext-transfer-protocol.md
deleted file mode 100644
index 962f10c0a..000000000
--- a/skills/create-web-form/references/hypertext-transfer-protocol.md
+++ /dev/null
@@ -1,1227 +0,0 @@
-# Hypertext Transfer Protocol (HTTP) Reference
-
-A consolidated reference guide covering the HTTP protocol, its messages, cookies, authentication, sessions, headers, methods, status codes, and specifications. All content sourced from the Mozilla Developer Network (MDN) Web Docs.
-
----
-
-## Table of Contents
-
-1. [HTTP Overview (Introduction)](#1-http-overview)
-2. [An Overview of HTTP](#2-an-overview-of-http)
-3. [HTTP Messages](#3-http-messages)
-4. [HTTP Cookies](#4-http-cookies)
-5. [HTTP Authentication](#5-http-authentication)
-6. [HTTP Sessions](#6-http-sessions)
-7. [HTTP Headers Reference](#7-http-headers-reference)
-8. [HTTP Request Methods](#8-http-request-methods)
-9. [HTTP Response Status Codes](#9-http-response-status-codes)
-10. [HTTP Resources and Specifications](#10-http-resources-and-specifications)
-
----
-
-## 1. HTTP Overview
-
-> **Source:** <https://developer.mozilla.org/en-US/docs/Web/HTTP>
-
-### Definition
-
-**HTTP (Hypertext Transfer Protocol)** is an application-layer protocol for transmitting hypermedia documents, such as HTML. While designed for communication between web browsers and web servers, it is also used for machine-to-machine communication and programmatic API access.
-
-### Key Characteristics
-
-- **Client-Server Model**: A classical architecture where a client opens a connection to make a request and waits for a server response.
-- **Stateless Protocol**: The server does not keep session data between requests, though cookies add state capability.
-- **Extensible**: Built on concepts of resources, URIs, and a basic message structure; the protocol has evolved with numerous extensions over time.
-
-### Major Topic Areas
-
-#### Guides (Foundational and Specialized)
-
-- **Overview of HTTP** -- Basic features and protocol stack position
-- **Evolution of HTTP** -- HTTP/0.9, 1.0, 1.1, 2.0, and 3.0
-- **HTTP Messages** -- Request/response structure and types
-- **MIME Types** -- Content-Type headers and standards
-- **HTTP Caching** -- Methods and header controls
-- **HTTP Authentication** -- Client identity verification
-- **Cookies** -- Set-Cookie and Cookie headers for state management
-- **Redirections** -- URL forwarding techniques (3xx status codes)
-- **Conditional Requests** -- Validator-dependent outcomes
-- **Range Requests** -- Partial resource retrieval
-- **Content Negotiation** -- Accept headers and format preference
-- **Connection Management (HTTP/1.x)** -- Persistent connections and pipelining
-- **Protocol Upgrade** -- Upgrading to HTTP/2, WebSocket
-- **Proxy Servers and Tunneling**
-- **Client Hints** -- Device and preference metadata
-- **Network Error Logging** -- Failed fetch reporting
-
-#### Security and Privacy
-
-- **Permissions Policy** -- Control feature access
-- **CORS (Cross-Origin Resource Sharing)** -- Cross-site request handling
-- **CSP (Content Security Policy)** -- Resource loading restrictions and attack mitigation
-- **CORP (Cross-Origin Resource Policy)** -- Speculative side-channel attack prevention
-
-### Reference Documentation Summary
-
-- **HTTP Headers**: 169+ documented headers, including `Content-Type`, `Accept`, `Authorization`, `Cache-Control`, `Set-Cookie`, `Cookie`, `Access-Control-Allow-Origin`, `Content-Security-Policy`, and many more.
-- **HTTP Request Methods**: `GET`, `POST`, `PUT`, `PATCH`, `DELETE`, `HEAD`, `OPTIONS`, `CONNECT`, `TRACE`.
-- **HTTP Response Status Codes**: Organized into five classes -- 1xx Informational, 2xx Successful, 3xx Redirection, 4xx Client Error, 5xx Server Error.
-
-### Tools and Resources
-
-- **Firefox Developer Tools** -- Network Monitor
-- **HTTP Observatory** -- Site security configuration assessment
-- **RedBot** -- Cache header validation
-- **nghttp2** -- HTTP/2 client/server implementation
-- **curl** -- Command-line data transfer tool
-
----
-
-## 2. An Overview of HTTP
-
-> **Source:** <https://developer.mozilla.org/en-US/docs/Web/HTTP/Guides/Overview>
-
-### What is HTTP?
-
-HTTP is a protocol for fetching resources such as HTML documents. It is the foundation of any data exchange on the Web and operates as a **client-server protocol**, where requests are initiated by the recipient (typically a web browser). Complete documents are constructed from multiple resources including text, layout instructions, images, videos, and scripts.
-
-HTTP is an **application layer protocol** sent over TCP or TLS-encrypted TCP connections. While designed in the early 1990s, it remains extensible and continues to evolve.
-
-### Architecture: Components of HTTP-Based Systems
-
-#### Client: The User-Agent
-
-- Any tool acting on behalf of the user (primarily web browsers).
-- **Always** initiates requests; the server never initiates.
-- Sends an initial request to fetch HTML documents, then makes additional requests for CSS, scripts, and sub-resources.
-- Interprets HTTP responses and presents content to users.
-
-#### The Web Server
-
-- Serves documents as requested by clients.
-- May be a single virtual machine or a collection of servers sharing load.
-- With HTTP/1.1 and the `Host` header, multiple servers can share the same IP address.
-
-#### Proxies
-
-Located between client and server, proxies perform various functions:
-
-- **Caching** (public or private, like browser cache)
-- **Filtering** (antivirus, parental controls)
-- **Load balancing** (distribute requests across servers)
-- **Authentication** (control resource access)
-- **Logging** (store historical information)
-
-Proxies can be **transparent** (forward requests unchanged) or **non-transparent** (modify requests).
-
-### Basic Aspects of HTTP
-
-#### HTTP is Simple
-
-- Generally designed to be human-readable.
-- HTTP messages can be read and understood by humans, providing easier testing for developers.
-
-#### HTTP is Extensible
-
-- **HTTP headers** make the protocol easy to extend and experiment with.
-- New functionality can be introduced by agreement between client and server, a concept introduced in HTTP/1.0.
-
-#### HTTP is Stateless, But Not Sessionless
-
-- **Stateless**: No link between two successive requests on the same connection.
-- Despite this, **HTTP Cookies** enable stateful sessions that allow sharing context and state across requests.
-
-#### HTTP and Connections
-
-HTTP requires a reliable transport protocol. TCP is connection-based and reliable while UDP is not.
-
-- **HTTP/1.0**: Opens a separate TCP connection for each request/response pair (inefficient).
-- **HTTP/1.1**: Introduced **pipelining** and **persistent connections** via the `Connection` header.
-- **HTTP/2**: Multiplexes messages over a single connection for efficiency.
-- **Experimental**: The QUIC protocol is being tested as a transport layer (builds on UDP with reliability).
-
-### HTTP Flow
-
-When a client wants to communicate with a server:
-
-1. **Open a TCP connection**: Used to send request(s) and receive answer(s). Client may open new connection, reuse existing, or open several connections.
-
-2. **Send an HTTP message**:
-
-   ```
-   GET / HTTP/1.1
-   Host: developer.mozilla.org
-   Accept-Language: fr
-   ```
-
-3. **Read the response**:
-
-   ```
-   HTTP/1.1 200 OK
-   Date: Sat, 09 Oct 2010 14:28:02 GMT
-   Server: Apache
-   Last-Modified: Tue, 01 Dec 2009 20:18:22 GMT
-   ETag: "51142bc1-7449-479b075b2891b"
-   Accept-Ranges: bytes
-   Content-Length: 29769
-   Content-Type: text/html
-
-   <!doctype html>... (29769 bytes of requested web page)
-   ```
-
-4. **Close or reuse connection** for further requests.
-
-### What Can Be Controlled by HTTP
-
-- **Caching**: Server instructs proxies and clients what to cache and for how long.
-- **Relaxing the Origin Constraint**: Browsers enforce strict same-origin separation; HTTP headers can relax this via CORS.
-- **Authentication**: Protected pages accessible only to specific users via `WWW-Authenticate` or HTTP Cookies.
-- **Proxy and Tunneling**: Navigate network barriers, handle protocols like FTP through proxies.
-- **Sessions**: HTTP Cookies link requests with server state, creating sessions despite the stateless protocol.
-
-### APIs Based on HTTP
-
-- **Fetch API**: The most commonly used API for HTTP requests from JavaScript, replacing the older `XMLHttpRequest` API.
-- **Server-Sent Events**: A one-way service for the server to send events to the client using HTTP as a transport mechanism.
-
----
-
-## 3. HTTP Messages
-
-> **Source:** <https://developer.mozilla.org/en-US/docs/Web/HTTP/Guides/Messages>
-
-### Overview
-
-HTTP messages are the mechanism for exchanging data between server and client. There are two types:
-
-- **Requests**: Sent by the client to trigger an action on the server.
-- **Responses**: The server's answer to a request.
-
-HTTP/1.x messages are text-based and straightforward to read. HTTP/2 wraps messages in binary framing but maintains the same underlying semantics.
-
-### HTTP Message Anatomy
-
-Both requests and responses share a common structure:
-
-```
-1. Start-line (single line describing HTTP version + request method or outcome)
-2. HTTP Headers (optional metadata about the message)
-3. Empty line (marks end of metadata)
-4. Body (optional data associated with message)
-```
-
-The **start-line** and **headers** are collectively called the **head**. The content after is the **body**.
-
-### HTTP Requests
-
-#### Request-Line Format
-
-```
-<method> <request-target> <protocol>
-```
-
-#### Components
-
-**Method (HTTP Verb)**: Describes the meaning and desired outcome of the request. Common methods include `GET`, `POST`, `PUT`, `PATCH`, `DELETE`, `HEAD`, `OPTIONS`, `CONNECT`. Only `PATCH`, `POST`, and `PUT` requests typically have a body.
-
-**Request-Target (URL)** -- four types depending on context:
-
-1. **Origin Form** (most common): Absolute path with Host header.
-   ```http
-   GET /en-US/docs/Web/HTTP/Guides/Messages HTTP/1.1
-   ```
-
-2. **Absolute Form**: Complete URL; used with proxies.
-   ```http
-   GET https://developer.mozilla.org/en-US/docs/Web/HTTP/Guides/Messages HTTP/1.1
-   ```
-
-3. **Authority Form**: Authority and port with colon; used with `CONNECT`.
-   ```http
-   CONNECT developer.mozilla.org:443 HTTP/1.1
-   ```
-
-4. **Asterisk Form**: Only with `OPTIONS` to represent the server as a whole.
-   ```http
-   OPTIONS * HTTP/1.1
-   ```
-
-**Protocol (HTTP Version)**: Usually `HTTP/1.1`. In HTTP/2+, the protocol version is not included in messages.
-
-#### Request Headers
-
-After the start-line and before the body. Case-insensitive, followed by colon and value:
-
-```http
-Host: example.com
-Content-Type: application/x-www-form-urlencoded
-Content-Length: 49
-```
-
-**Categories**:
-- **Request Headers**: Provide additional context (e.g., conditional requests).
-- **Representation Headers**: Describe the original form of message data and encoding applied.
-
-#### Request Body
-
-Only for `PATCH`, `POST`, and `PUT` methods. Examples:
-
-**Form data**:
-```
-name=FirstName+LastName&email=bsmth%40example.com
-```
-
-**JSON**:
-```json
-{
-  "firstName": "Brian",
-  "lastName": "Smith",
-  "email": "bsmth@example.com"
-}
-```
-
-**Multipart form data**:
-```http
---delimiter123
-Content-Disposition: form-data; name="field1"
-
-value1
---delimiter123
-Content-Disposition: form-data; name="field2"; filename="example.txt"
-
-Text file contents
---delimiter123--
-```
-
-### HTTP Responses
-
-#### Status-Line Format
-
-```
-<protocol> <status-code> <reason-phrase>
-```
-
-#### Components
-
-- **Protocol**: The HTTP version of the message.
-- **Status Code**: Numeric code indicating request success or failure.
-  - 2xx Success: `200 OK`, `201 Created`, `204 No Content`
-  - 3xx Redirection: `302 Found`, `304 Not Modified`
-  - 4xx Client Error: `400 Bad Request`, `404 Not Found`
-  - 5xx Server Error: `500 Internal Server Error`, `503 Service Unavailable`
-- **Reason Phrase**: Optional brief text description, e.g., "Created" or "Not Found".
-
-#### Response Headers
-
-Metadata sent with the response:
-
-```http
-Content-Type: application/json
-Content-Length: 256
-Cache-Control: max-age=604800
-Date: Fri, 13 Sep 2024 12:56:07 GMT
-```
-
-#### Response Body
-
-Included in most messages. May be:
-- **Single-Resource Body**: Defined by `Content-Type` and `Content-Length` headers, or chunked with `Transfer-Encoding: chunked`.
-- **Multiple-Resource Body**: Multiple parts with different information, associated with HTML forms and range requests.
-
-Note: Status codes like `201 Created` or `204 No Content` may not have a body.
-
-### HTTP/2 Messages
-
-Key differences from HTTP/1.x:
-
-- Wraps messages in binary frames (more efficient).
-- Header compression via the HPACK algorithm.
-- **Multiplexing**: Single TCP connection for multiple concurrent requests and responses.
-- Eliminates head-of-line (HOL) blocking at the protocol level.
-
-HTTP/2 uses **pseudo-header fields** beginning with `:` instead of a start-line:
-
-**Request pseudo-headers**:
-```
-:method: GET
-:scheme: https
-:authority: www.example.com
-:path: /
-```
-
-**Response pseudo-header**:
-```
-:status: 200
-```
-
-### HTTP/3 Considerations
-
-- Uses QUIC (a protocol built on UDP instead of TCP).
-- Fixes TCP-level head-of-line blocking.
-- Reduced connection setup time.
-- Enhanced stability on unreliable networks.
-- Maintains the same core HTTP semantics (methods, status codes, headers).
-
----
-
-## 4. HTTP Cookies
-
-> **Source:** <https://developer.mozilla.org/en-US/docs/Web/HTTP/Guides/Cookies>
-
-### What Are Cookies?
-
-A **cookie** (web cookie or browser cookie) is a small piece of data a server sends to a user's web browser. The browser may store cookies, create new ones, modify existing ones, and send them back to the same server with later requests. Cookies enable web applications to store limited amounts of data and remember state information.
-
-### Primary Use Cases
-
-1. **Session Management**: User sign-in status, shopping cart contents, game scores, and other session-related details.
-2. **Personalization**: User preferences such as display language and UI theme.
-3. **Tracking**: Recording and analyzing user behavior.
-
-### Setting Cookies
-
-#### Server-Side (HTTP Headers)
-
-Use the `Set-Cookie` response header:
-
-```http
-HTTP/2.0 200 OK
-Content-Type: text/html
-Set-Cookie: yummy_cookie=chocolate
-Set-Cookie: tasty_cookie=strawberry
-```
-
-#### Client-Side (JavaScript)
-
-Use the `Document.cookie` property:
-
-```javascript
-document.cookie = "yummy_cookie=chocolate";
-document.cookie = "tasty_cookie=strawberry";
-console.log(document.cookie);
-// logs "yummy_cookie=chocolate; tasty_cookie=strawberry"
-```
-
-### Sending Cookies
-
-When a new request is made to a domain, the browser automatically sends stored cookies via the `Cookie` request header:
-
-```http
-GET /sample_page.html HTTP/2.0
-Host: www.example.org
-Cookie: yummy_cookie=chocolate; tasty_cookie=strawberry
-```
-
-### Cookie Attributes
-
-#### Lifetime Control
-
-**Permanent Cookies** persist beyond the current session using `Expires` or `Max-Age`:
-
-```http
-Set-Cookie: id=a3fWa; Expires=Thu, 31 Oct 2021 07:28:00 GMT;
-Set-Cookie: id=a3fWa; Max-Age=2592000
-```
-
-- `Expires`: Specifies an expiration date/time.
-- `Max-Age`: Specifies duration in seconds (preferred over `Expires`; takes precedence if both are set).
-
-**Session Cookies** are deleted when the current session ends (no `Max-Age` or `Expires` attribute).
-
-#### Removing Cookies
-
-Set the cookie again with `Max-Age=0` or a past `Expires` date, or use the `Clear-Site-Data` header:
-
-```http
-Set-Cookie: id=a3fWa; Max-Age=0
-Clear-Site-Data: "cookies"
-```
-
-#### Scope Control
-
-**Domain Attribute**: Specifies which domains can receive the cookie.
-
-```http
-Set-Cookie: id=a3fWa; Domain=mozilla.org
-```
-
-- If not specified: cookie sent to the server that set it but NOT subdomains.
-- If specified: sent to domain and all subdomains.
-
-**Path Attribute**: Specifies the URL path that must exist in the request URL.
-
-```http
-Set-Cookie: id=a3fWa; Path=/docs
-```
-
-Matching paths: `/docs`, `/docs/`, `/docs/Web/`, `/docs/Web/HTTP`. Non-matching: `/`, `/docsets`, `/fr/docs`.
-
-#### Security Attributes
-
-**Secure**: Only sent over HTTPS (never with unsecured HTTP, except on localhost).
-
-```http
-Set-Cookie: id=a3fWa; Secure
-```
-
-**HttpOnly**: Prevents JavaScript access via `Document.cookie`; only accessible via HTTP requests. Mitigates XSS attacks.
-
-```http
-Set-Cookie: id=a3fWa; HttpOnly
-```
-
-**Combined**:
-
-```http
-Set-Cookie: id=a3fWa; Expires=Thu, 21 Oct 2021 07:28:00 GMT; Secure; HttpOnly
-```
-
-#### SameSite Attribute
-
-Controls whether cookies are sent with cross-site requests:
-
-| Value | Behavior |
-|-------|----------|
-| **Strict** | Only sent in requests originating from the cookie's origin site. Use for sensitive functionality (authentication, cart). |
-| **Lax** | Sent with site navigation but not with other cross-site requests. Default if `SameSite` is not set. |
-| **None** | Sent with both originating and cross-site requests. Requires `Secure` attribute. |
-
-### Cookie Prefixes (Defense-in-Depth)
-
-- **`__Secure-`**: Must be set with `Secure` attribute by an HTTPS page.
-- **`__Host-`**: Must be set with `Secure` attribute, cannot have `Domain` attribute, must have `Path=/`.
-- **`__Http-`**: Must be set with `Secure` flag, must have `HttpOnly` attribute.
-
-### Security Best Practices
-
-1. Use `Secure` and `HttpOnly` attributes on sensitive cookies.
-2. Limit scope with `Domain` and `Path` appropriately.
-3. Control cross-site requests with `SameSite`.
-4. Keep sensitive cookies short-lived.
-5. Regenerate session cookies on authentication to prevent session fixation.
-6. Store opaque identifiers instead of sensitive data directly in cookies.
-7. Use cookie prefixes (`__Secure-`, `__Host-`) for defense-in-depth.
-
-### Storage Limitations
-
-- Maximum cookies per domain varies by browser, generally hundreds.
-- Maximum size per cookie is usually 4KB.
-- Modern alternatives for client-side storage: Web Storage API (`localStorage`, `sessionStorage`) and IndexedDB.
-
-### Privacy and Third-Party Cookies
-
-- Third-party cookies are set by embedded content from different domains.
-- Most browser vendors now block third-party cookies by default.
-- **Applicable regulations**: GDPR (EU), ePrivacy Directive (EU), California Consumer Privacy Act (US).
-
-### Key Related Headers
-
-- `Set-Cookie` -- Server sets cookies.
-- `Cookie` -- Client sends cookies.
-- `Clear-Site-Data` -- Clears cookies and other site data.
-
-### Specification
-
-RFC 6265 -- HTTP State Management Mechanism.
-
----
-
-## 5. HTTP Authentication
-
-> **Source:** <https://developer.mozilla.org/en-US/docs/Web/HTTP/Guides/Authentication>
-
-### General HTTP Authentication Framework
-
-HTTP authentication is defined in **RFC 7235** and provides a framework for access control using a challenge-and-response mechanism between servers and clients.
-
-#### Challenge-Response Flow
-
-1. **Server Challenge**: Server responds with `401 Unauthorized` status and includes a `WWW-Authenticate` response header with authentication challenge details.
-2. **Client Response**: Client provides credentials via the `Authorization` request header.
-3. **Retry**: Client typically presents a password prompt to the user, then reissues the request with correct credentials.
-
-### Authentication Headers
-
-#### WWW-Authenticate and Proxy-Authenticate
-
-Define the authentication method required to access a resource:
-
-```http
-WWW-Authenticate: <type> realm=<realm>
-Proxy-Authenticate: <type> realm=<realm>
-```
-
-- `<type>`: Authentication scheme (e.g., "Basic", "Bearer").
-- `realm`: Describes the protected area (e.g., "Access to the staging site").
-
-#### Authorization and Proxy-Authorization
-
-Contain credentials to authenticate with the server or proxy:
-
-```http
-Authorization: <type> <credentials>
-Proxy-Authorization: <type> <credentials>
-```
-
-### Proxy Authentication
-
-Uses separate headers and status codes:
-
-- **Status Code**: `407 Proxy Authentication Required`
-- **Response Header**: `Proxy-Authenticate`
-- **Request Header**: `Proxy-Authorization`
-
-### Access Control Response Codes
-
-| Status | Meaning | Usage |
-|--------|---------|-------|
-| **401** | Unauthorized | Invalid credentials; user may retry |
-| **403** | Forbidden | Valid credentials but inadequate permissions; no retry |
-| **404** | Not Found | Sometimes preferred to hide resource existence from unauthorized users |
-| **407** | Proxy Authentication Required | Proxy authentication failed |
-
-### Authentication Schemes
-
-| Scheme | Reference | Description |
-|--------|-----------|-------------|
-| **Basic** | RFC 7617 | Base64-encoded username:password (requires HTTPS) |
-| **Bearer** | RFC 6750 | OAuth 2.0 bearer tokens |
-| **Digest** | RFC 7616 | MD5 or SHA-256 hashing |
-| **HOBA** | RFC 7486 | HTTP Origin-Bound Authentication (digital signature) |
-| **Mutual** | RFC 8120 | Mutual authentication |
-| **Negotiate/NTLM** | RFC 4559 | Windows integrated authentication |
-| **VAPID** | RFC 8292 | Voluntary Application Server Identification |
-| **SCRAM** | RFC 7804 | Salted Challenge Response Authentication Mechanism |
-| **AWS4-HMAC-SHA256** | AWS Docs | AWS Signature Version 4 |
-
-Full list maintained by IANA: <https://www.iana.org/assignments/http-authschemes/http-authschemes.xhtml>
-
-### Basic Authentication Scheme
-
-- **Standard**: RFC 7617.
-- **Format**: Transmits user ID and password as base64-encoded pairs (`username:password`).
-- **Charset**: UTF-8.
-
-**Security Concerns**:
-- Base64 is reversible; credentials appear as clear text.
-- Always use HTTPS/TLS with Basic Auth.
-- Vulnerable to CSRF; credentials sent in all requests regardless of origin.
-
-#### Apache Configuration
-
-`.htaccess` file:
-
-```apacheconf
-AuthType Basic
-AuthName "Access to the staging site"
-AuthUserFile /path/to/.htpasswd
-Require valid-user
-```
-
-#### Nginx Configuration
-
-```nginx
-location /status {
-    auth_basic           "Access to the staging site";
-    auth_basic_user_file /etc/apache2/.htpasswd;
-}
-```
-
-### Security Considerations
-
-- Cross-origin images cannot trigger HTTP authentication dialogs (Firefox 59+).
-- Modern browsers use UTF-8 encoding for usernames and passwords.
-- URL-embedded credentials (`https://username:password@www.example.com/`) are deprecated; modern browsers strip credentials from URLs before sending requests.
-
----
-
-## 6. HTTP Sessions
-
-> **Source:** <https://developer.mozilla.org/en-US/docs/Web/HTTP/Guides/Session>
-
-### Overview
-
-An HTTP session in client-server protocols consists of **three phases**:
-
-1. The client establishes a TCP connection (or appropriate transport layer connection).
-2. The client sends its request and waits for the answer.
-3. The server processes the request and sends back a response with status code and data.
-
-As of HTTP/1.1, the connection is no longer closed after completion, allowing the client to make further requests without re-establishing the connection.
-
-### Phase 1: Establishing a Connection
-
-- The **client** initiates the connection (not the server).
-- HTTP typically uses **TCP** as the transport layer.
-- **Default port**: 80 for HTTP servers (other ports like 8000, 8080 can also be used).
-- The server cannot send data to the client without an explicit request, though this can be overcome using Push API, Server-sent events, or the WebSockets API.
-
-### Phase 2: Sending a Client Request
-
-A client request consists of text directives separated by CRLF, divided into three blocks:
-
-#### Block 1: Request Line
-
-Contains the request method, path of the document, and HTTP protocol version.
-
-#### Block 2: HTTP Headers
-
-Information about data types, language preferences, MIME types, and data modifying server behavior. Ends with an empty line that separates headers from the data block.
-
-#### Block 3: Optional Data Block
-
-Contains additional data, mainly used by the POST method.
-
-**Example GET Request**:
-
-```http
-GET / HTTP/1.1
-Host: developer.mozilla.org
-Accept-Language: fr
-
-```
-
-**Example POST Request**:
-
-```http
-POST /contact_form.php HTTP/1.1
-Host: developer.mozilla.org
-Content-Length: 64
-Content-Type: application/x-www-form-urlencoded
-
-name=Joe%20User&request=Send%20me%20one%20of%20your%20catalogue
-```
-
-#### Common Request Methods
-
-| Method | Purpose |
-|--------|---------|
-| **GET** | Requests a data representation of the specified resource; should only retrieve data |
-| **POST** | Sends data to the server to change its state; commonly used for HTML Forms |
-
-### Phase 3: Structure of Server Response
-
-Similar to requests, server responses are text directives separated by CRLF, divided into three blocks:
-
-#### Block 1: Status Line
-
-HTTP version acknowledgment, response status code, and brief human-readable meaning.
-
-#### Block 2: HTTP Headers
-
-Information about the data sent (type, size, compression, caching hints). Ends with an empty line.
-
-#### Block 3: Data Block
-
-Optional data or response content.
-
-**Example Successful Response (200 OK)**:
-
-```http
-HTTP/1.1 200 OK
-Content-Type: text/html; charset=utf-8
-Content-Length: 55743
-Connection: keep-alive
-Cache-Control: s-maxage=300, public, max-age=0
-Content-Language: en-US
-Date: Thu, 06 Dec 2018 17:37:18 GMT
-ETag: "2e77ad1dc6ab0b53a2996dfd4653c1c3"
-Server: meinheld/0.6.1
-Strict-Transport-Security: max-age=63072000
-X-Content-Type-Options: nosniff
-X-Frame-Options: DENY
-X-XSS-Protection: 1; mode=block
-Vary: Accept-Encoding,Cookie
-Age: 7
-
-<!doctype html>
-<html lang="en">
-  ...
-</html>
-```
-
-**Example Redirect (301)**:
-
-```http
-HTTP/1.1 301 Moved Permanently
-Server: Apache/2.4.37 (Red Hat)
-Content-Type: text/html; charset=utf-8
-Location: https://developer.mozilla.org/
-```
-
-**Example Error (404)**:
-
-```http
-HTTP/1.1 404 Not Found
-Content-Type: text/html; charset=utf-8
-Content-Length: 38217
-```
-
----
-
-## 7. HTTP Headers Reference
-
-> **Source:** <https://developer.mozilla.org/en-US/docs/Web/HTTP/Reference/Headers>
-
-### Overview
-
-HTTP headers allow clients and servers to pass additional information with HTTP requests and responses. In HTTP/1.X, headers are case-insensitive name-value pairs (e.g., `Allow: POST`). In HTTP/2 and above, headers appear in lowercase and pseudo-headers are prefixed with a colon (e.g., `:status: 200`).
-
-### Header Categories by Context
-
-- **Request Headers**: Contain information about the resource to be fetched or about the client requesting the resource.
-- **Response Headers**: Hold additional information about the response, such as location or server details.
-- **Representation Headers**: Contain information about the resource body, including MIME type, encoding, and compression.
-- **Payload Headers**: Contain representation-independent information about payload data, including content length and transport encoding.
-
-### Header Categories by Proxy Handling
-
-- **End-to-End Headers**: Must be transmitted to the final recipient. Intermediate proxies must retransmit them unmodified and caches must store them.
-- **Hop-by-Hop Headers**: Meaningful only for a single transport-level connection. Must not be retransmitted by proxies or cached.
-
-### Authentication Headers
-
-| Header | Type | Description |
-|--------|------|-------------|
-| `WWW-Authenticate` | Response | Defines the authentication method to access a resource |
-| `Authorization` | Request | Contains credentials to authenticate a user-agent with a server |
-| `Proxy-Authenticate` | Response | Defines authentication method for proxy server access |
-| `Proxy-Authorization` | Request | Contains credentials to authenticate with a proxy server |
-
-### Caching Headers
-
-| Header | Type | Description |
-|--------|------|-------------|
-| `Age` | Response | Time in seconds the object has been in a proxy cache |
-| `Cache-Control` | Both | Directives for caching mechanisms in requests and responses |
-| `Clear-Site-Data` | Response | Clears browsing data (cookies, storage, cache) |
-| `Expires` | Response | Date/time after which response is considered stale |
-
-### Conditional Headers
-
-| Header | Type | Description |
-|--------|------|-------------|
-| `Last-Modified` | Response | Last modification date of the resource |
-| `ETag` | Response | Unique string identifying the resource version |
-| `If-Match` | Request | Applies method only if resource matches given ETags |
-| `If-None-Match` | Request | Applies method if resource does not match given ETags |
-| `If-Modified-Since` | Request | Transmits resource only if modified after given date |
-| `If-Unmodified-Since` | Request | Transmits resource only if not modified after date |
-| `Vary` | Response | Determines how to match headers for cache decisions |
-
-### Connection Management Headers
-
-| Header | Type | Description |
-|--------|------|-------------|
-| `Connection` | Both | Controls whether network connection stays open |
-| `Keep-Alive` | Both | Controls how long a persistent connection stays open |
-
-### Content Negotiation Headers
-
-| Header | Type | Description |
-|--------|------|-------------|
-| `Accept` | Request | Informs server about acceptable data types |
-| `Accept-Encoding` | Request | Specifies acceptable compression algorithms |
-| `Accept-Language` | Request | Informs server about preferred human language |
-| `Accept-Patch` | Response | Advertises media types acceptable in PATCH requests |
-| `Accept-Post` | Response | Advertises media types acceptable in POST requests |
-
-### Cookie Headers
-
-| Header | Type | Description |
-|--------|------|-------------|
-| `Cookie` | Request | Contains HTTP cookies previously set by server |
-| `Set-Cookie` | Response | Sends cookies from server to user-agent |
-
-### CORS (Cross-Origin Resource Sharing) Headers
-
-| Header | Type | Description |
-|--------|------|-------------|
-| `Access-Control-Allow-Credentials` | Response | Indicates if response can be exposed with credentials |
-| `Access-Control-Allow-Headers` | Response | Lists HTTP headers usable in cross-origin requests |
-| `Access-Control-Allow-Methods` | Response | Specifies allowed methods for cross-origin requests |
-| `Access-Control-Allow-Origin` | Response | Indicates if response can be shared |
-| `Access-Control-Expose-Headers` | Response | Lists headers exposed in cross-origin responses |
-| `Access-Control-Max-Age` | Response | How long preflight request results can be cached |
-| `Access-Control-Request-Headers` | Request | Lists headers used in actual request (preflight) |
-| `Access-Control-Request-Method` | Request | Lists HTTP method used in actual request (preflight) |
-| `Origin` | Request | Indicates where a fetch originates from |
-| `Timing-Allow-Origin` | Response | Specifies origins allowed to see Resource Timing API values |
-
-### Message Body Information Headers
-
-| Header | Type | Description |
-|--------|------|-------------|
-| `Content-Length` | Both | Size of resource in decimal bytes |
-| `Content-Type` | Both | Indicates the media type of the resource |
-| `Content-Encoding` | Response | Specifies compression algorithm used |
-| `Content-Language` | Response | Describes intended human language(s) |
-| `Content-Location` | Response | Indicates alternate location for returned data |
-| `Content-Disposition` | Response | Indicates if resource should display inline or be downloaded |
-
-### Range Request Headers
-
-| Header | Type | Description |
-|--------|------|-------------|
-| `Accept-Ranges` | Response | Indicates if server supports range requests |
-| `Range` | Request | Indicates which part of document server should return |
-| `If-Range` | Request | Creates conditional range request |
-| `Content-Range` | Response | Indicates partial message position in full body |
-
-### Redirect Headers
-
-| Header | Type | Description |
-|--------|------|-------------|
-| `Location` | Response | Indicates URL to redirect page to |
-| `Refresh` | Response | Directs browser to reload page or redirect |
-
-### Request Context Headers
-
-| Header | Type | Description |
-|--------|------|-------------|
-| `From` | Request | Contains email address of user controlling request |
-| `Host` | Request | Specifies domain name and optional port of server |
-| `Referer` | Request | Address of previous web page |
-| `Referrer-Policy` | Response | Governs referrer information in Referer header |
-| `User-Agent` | Request | Identifies application type and software version |
-
-### Response Context Headers
-
-| Header | Type | Description |
-|--------|------|-------------|
-| `Allow` | Response | Lists supported HTTP request methods |
-| `Server` | Response | Contains software info for origin server |
-
-### Security Headers
-
-| Header | Type | Description |
-|--------|------|-------------|
-| `Cross-Origin-Embedder-Policy` (COEP) | Response | Allows server to declare embedder policy |
-| `Cross-Origin-Opener-Policy` (COOP) | Response | Prevents other domains from opening/controlling window |
-| `Cross-Origin-Resource-Policy` (CORP) | Response | Prevents other domains from reading response |
-| `Content-Security-Policy` (CSP) | Response | Controls resources user agent can load |
-| `Content-Security-Policy-Report-Only` | Response | Monitors CSP without enforcement |
-| `Permissions-Policy` | Response | Allows/denies browser features in frames or iframes |
-| `Strict-Transport-Security` (HSTS) | Response | Forces HTTPS communication |
-| `Upgrade-Insecure-Requests` | Request | Signals preference for encrypted response |
-| `X-Content-Type-Options` | Response | Disables MIME sniffing |
-| `X-Frame-Options` (XFO) | Response | Indicates if page can be rendered in frame/iframe |
-| `X-XSS-Protection` | Response | Enables cross-site scripting filtering |
-
-### Fetch Metadata Request Headers
-
-| Header | Type | Description |
-|--------|------|-------------|
-| `Sec-Fetch-Site` | Request | Relationship between initiator and target origin |
-| `Sec-Fetch-Mode` | Request | Request mode (cors, navigate, no-cors, same-origin, websocket) |
-| `Sec-Fetch-User` | Request | Whether navigation was triggered by user activation |
-| `Sec-Fetch-Dest` | Request | Request destination (audio, document, script, style, etc.) |
-
-### Transfer Coding Headers
-
-| Header | Type | Description |
-|--------|------|-------------|
-| `Transfer-Encoding` | Response | Specifies encoding form for safe resource transfer |
-| `TE` | Request | Specifies acceptable transfer encodings |
-| `Trailer` | Response | Allows additional fields at end of chunked message |
-
-### WebSocket Headers
-
-| Header | Type | Description |
-|--------|------|-------------|
-| `Sec-WebSocket-Accept` | Response | Indicates willingness to upgrade to WebSocket |
-| `Sec-WebSocket-Extensions` | Both | Indicates WebSocket extensions supported |
-| `Sec-WebSocket-Key` | Request | Contains key verifying client intent for WebSocket |
-| `Sec-WebSocket-Protocol` | Both | Indicates WebSocket sub-protocols supported |
-| `Sec-WebSocket-Version` | Both | Indicates WebSocket protocol version |
-
-### Proxy Headers
-
-| Header | Type | Description |
-|--------|------|-------------|
-| `Forwarded` | Both | Contains information from client-facing side of proxy servers |
-| `Via` | Both | Added by proxies; appears in request and response headers |
-| `X-Forwarded-For` | Request | Identifies originating IP addresses through proxy (non-standard) |
-| `X-Forwarded-Host` | Request | Identifies original host requested through proxy (non-standard) |
-| `X-Forwarded-Proto` | Request | Identifies protocol used through proxy (non-standard) |
-
-### Other Notable Headers
-
-| Header | Type | Description |
-|--------|------|-------------|
-| `Alt-Svc` | Response | Lists alternate ways to reach this service |
-| `Date` | Response | Date/time message originated |
-| `Link` | Response | Serializes one or more links in HTTP headers |
-| `Retry-After` | Response | Indicates wait time before follow-up request |
-| `Server-Timing` | Response | Communicates metrics for request-response cycle |
-| `Upgrade` | Request | Used to upgrade to different protocol |
-| `Priority` | Both | Provides hint about resource request priority |
-
----
-
-## 8. HTTP Request Methods
-
-> **Source:** <https://developer.mozilla.org/en-US/docs/Web/HTTP/Reference/Methods>
-
-HTTP defines a set of request methods to indicate the purpose of the request and what is expected if successful. Each method has specific semantics and characteristics.
-
-### GET
-
-- **Purpose**: Requests a representation of the specified resource. Should only retrieve data and should not contain request content.
-- **Safe**: Yes | **Idempotent**: Yes | **Cacheable**: Yes
-
-### HEAD
-
-- **Purpose**: Asks for a response identical to a GET request, but without a response body. Useful for retrieving headers only without downloading the full resource.
-- **Safe**: Yes | **Idempotent**: Yes | **Cacheable**: Yes
-
-### POST
-
-- **Purpose**: Submits an entity to the specified resource, often causing a change in state or side effects on the server. Used for creating new resources and submitting data.
-- **Safe**: No | **Idempotent**: No | **Cacheable**: Conditional (when responses include explicit freshness information and a matching `Content-Location` header)
-
-### PUT
-
-- **Purpose**: Replaces all current representations of the target resource with the request content. Used for updating entire resources.
-- **Safe**: No | **Idempotent**: Yes | **Cacheable**: No
-
-### DELETE
-
-- **Purpose**: Deletes the specified resource.
-- **Safe**: No | **Idempotent**: Yes | **Cacheable**: No
-
-### CONNECT
-
-- **Purpose**: Establishes a tunnel to the server identified by the target resource. Used for creating a tunnel for secure connections (e.g., HTTPS through a proxy).
-- **Safe**: No | **Idempotent**: No | **Cacheable**: No
-
-### OPTIONS
-
-- **Purpose**: Describes the communication options for the target resource. Used for discovering allowed methods and capabilities.
-- **Safe**: Yes | **Idempotent**: Yes | **Cacheable**: No
-
-### TRACE
-
-- **Purpose**: Performs a message loop-back test along the path to the target resource. Used for diagnostics and debugging.
-- **Safe**: Yes | **Idempotent**: Yes | **Cacheable**: No
-
-### PATCH
-
-- **Purpose**: Applies partial modifications to a resource (unlike PUT which replaces entirely).
-- **Safe**: No | **Idempotent**: No | **Cacheable**: Conditional
-
-### Method Characteristics Summary
-
-| Method | Safe | Idempotent | Cacheable |
-|--------|------|------------|-----------|
-| GET | Yes | Yes | Yes |
-| HEAD | Yes | Yes | Yes |
-| POST | No | No | Conditional |
-| PUT | No | Yes | No |
-| DELETE | No | Yes | No |
-| CONNECT | No | No | No |
-| OPTIONS | Yes | Yes | No |
-| TRACE | Yes | Yes | No |
-| PATCH | No | No | Conditional |
-
-**Safe Methods**: Methods that do not modify server state -- GET, HEAD, OPTIONS, TRACE.
-
-**Idempotent Methods**: Methods that produce the same result when called multiple times -- GET, HEAD, OPTIONS, TRACE, PUT, DELETE.
-
-**Specification**: All methods are defined in HTTP Semantics (RFC 9110).
-
----
-
-## 9. HTTP Response Status Codes
-
-> **Source:** <https://developer.mozilla.org/en-US/docs/Web/HTTP/Reference/Status>
-
-HTTP response status codes indicate whether an HTTP request has been successfully completed. Responses are grouped into five classes based on their first digit.
-
-### 1xx: Informational Responses (100-199)
-
-| Code | Status | Description |
-|------|--------|-------------|
-| **100** | Continue | Interim response indicating the client should continue the request or ignore if already finished |
-| **101** | Switching Protocols | Sent in response to an `Upgrade` request header; indicates the protocol the server is switching to |
-| **102** | Processing | (Deprecated) Used in WebDAV contexts to indicate a request was received but no status was available |
-| **103** | Early Hints | Primarily used with the `Link` header to allow the user agent to start preloading resources |
-
-### 2xx: Successful Responses (200-299)
-
-| Code | Status | Description |
-|------|--------|-------------|
-| **200** | OK | Request succeeded; meaning depends on HTTP method used |
-| **201** | Created | Request succeeded and a new resource was created (typically after POST or PUT) |
-| **202** | Accepted | Request received but not yet acted upon; intended for async or batch operations |
-| **203** | Non-Authoritative Information | Returned metadata is from a local or third-party copy, not the origin server |
-| **204** | No Content | No content to send, but headers may be useful; user agent may update cached headers |
-| **205** | Reset Content | Tells the user agent to reset the document that sent this request |
-| **206** | Partial Content | Used in response to a range request for part(s) of a resource |
-| **207** | Multi-Status | (WebDAV) Conveys information about multiple resources with multiple status codes |
-| **208** | Already Reported | (WebDAV) Used to avoid repeatedly enumerating internal members |
-| **226** | IM Used | Server fulfilled a GET request with instance-manipulations applied |
-
-### 3xx: Redirection Messages (300-399)
-
-| Code | Status | Description |
-|------|--------|-------------|
-| **300** | Multiple Choices | Request has multiple possible responses; requires agent-driven content negotiation |
-| **301** | Moved Permanently | URL of requested resource has been permanently changed; new URL given in response |
-| **302** | Found | URI of requested resource changed temporarily; future requests should still use the same URI |
-| **303** | See Other | Server directs client to get the resource at another URI using a GET request |
-| **304** | Not Modified | Used for caching; tells client response has not been modified, continue using cached version |
-| **307** | Temporary Redirect | Server directs client to another URI with the same HTTP method as the original request |
-| **308** | Permanent Redirect | Resource is permanently at another URI; must not change the HTTP method (like 301 but stricter) |
-
-### 4xx: Client Error Responses (400-499)
-
-| Code | Status | Description |
-|------|--------|-------------|
-| **400** | Bad Request | Server cannot process request due to client error (malformed syntax, invalid framing) |
-| **401** | Unauthorized | Client must authenticate itself to get the requested response |
-| **402** | Payment Required | Originally for digital payment systems; rarely used with no standard convention |
-| **403** | Forbidden | Client lacks access rights; server refuses (unlike 401, client identity is known) |
-| **404** | Not Found | Server cannot find requested resource |
-| **405** | Method Not Allowed | Request method known but not supported by target resource |
-| **406** | Not Acceptable | Server cannot find content matching criteria given by user agent |
-| **407** | Proxy Authentication Required | Similar to 401 but authentication needed by proxy |
-| **408** | Request Timeout | Sent on idle connection; server wants to shut down unused connection |
-| **409** | Conflict | Request conflicts with server's current state |
-| **410** | Gone | Requested content permanently deleted from server with no forwarding address |
-| **411** | Length Required | Server rejected request because `Content-Length` header not defined |
-| **412** | Precondition Failed | Client's preconditions in headers not met by server |
-| **413** | Content Too Large | Request body larger than limits defined by server |
-| **414** | URI Too Long | URI requested by client longer than server willing to interpret |
-| **415** | Unsupported Media Type | Media format of requested data not supported by server |
-| **416** | Range Not Satisfiable | Ranges specified by `Range` header cannot be fulfilled |
-| **417** | Expectation Failed | Expectation indicated by `Expect` request header cannot be met |
-| **418** | I'm a teapot | Server refuses attempt to brew coffee with a teapot (April Fools' RFC 2324) |
-| **421** | Misdirected Request | Request directed at server unable to produce response |
-| **422** | Unprocessable Content | (WebDAV) Well-formed but unable to process due to semantic errors |
-| **423** | Locked | (WebDAV) Resource being accessed is locked |
-| **424** | Failed Dependency | (WebDAV) Request failed due to failure of a previous request |
-| **425** | Too Early | (Experimental) Server unwilling to risk processing request that might be replayed |
-| **426** | Upgrade Required | Server refuses current protocol but willing after client upgrades |
-| **428** | Precondition Required | Origin server requires request to be conditional |
-| **429** | Too Many Requests | User sent too many requests in given time (rate limiting) |
-| **431** | Request Header Fields Too Large | Server unwilling to process because header fields too large |
-| **451** | Unavailable For Legal Reasons | Resource cannot legally be provided |
-
-### 5xx: Server Error Responses (500-599)
-
-| Code | Status | Description |
-|------|--------|-------------|
-| **500** | Internal Server Error | Server encountered situation it does not know how to handle |
-| **501** | Not Implemented | Request method not supported by server |
-| **502** | Bad Gateway | Server (acting as gateway) got invalid response from upstream server |
-| **503** | Service Unavailable | Server not ready to handle request (maintenance, overloaded) |
-| **504** | Gateway Timeout | Server (acting as gateway) cannot get response in time |
-| **505** | HTTP Version Not Supported | HTTP version used in request not supported by server |
-| **506** | Variant Also Negotiates | Server has internal configuration error in content negotiation |
-| **507** | Insufficient Storage | (WebDAV) Method could not be performed; server unable to store representation |
-| **508** | Loop Detected | (WebDAV) Server detected infinite loop while processing request |
-| **510** | Not Extended | Client request declares HTTP Extension that is not supported |
-| **511** | Network Authentication Required | Client needs to authenticate to gain network access |
-
-**Specification**: Status codes defined by RFC 9110.
-
----
-
-## 10. HTTP Resources and Specifications
-
-> **Source:** <https://developer.mozilla.org/en-US/docs/Web/HTTP/Reference/Resources_and_specifications>
-
-### Core HTTP Specifications
-
-| RFC | Title | Status |
-|-----|-------|--------|
-| RFC 9110 | HTTP Semantics | Internet Standard |
-| RFC 9111 | HTTP Caching | Internet Standard |
-| RFC 9112 | HTTP/1.1 | Internet Standard |
-| RFC 9113 | HTTP/2 | Proposed Standard |
-| RFC 9114 | HTTP/3 | Proposed Standard |
-
-### HTTP Extensions and Features
-
-| Resource | Title | Status |
-|----------|-------|--------|
-| RFC 5861 | HTTP Cache-Control Extensions for Stale Content | Informational |
-| RFC 8246 | HTTP Immutable Responses | Proposed Standard |
-| RFC 6265 | HTTP State Management Mechanism (Cookies) | Proposed Standard |
-| RFC 2145 | Use and Interpretation of HTTP Version Numbers | Informational |
-| RFC 6585 | Additional HTTP Status Codes | Proposed Standard |
-| RFC 7725 | An HTTP Status Code to Report Legal Obstacles | On Standard Track |
-
-### Cookie-Related Specifications
-
-| Resource | Title | Status |
-|----------|-------|--------|
-| Draft Spec | Cookie Prefixes | IETF Draft |
-| Draft Spec | Same-Site Cookies | IETF Draft |
-| Draft Spec | Deprecate modification of 'secure' cookies from non-secure origins | IETF Draft |
-
-### URI and Web Linking
-
-| RFC | Title | Status |
-|-----|-------|--------|
-| RFC 2397 | The "data" URL scheme | Proposed Standard |
-| RFC 3986 | Uniform Resource Identifier (URI): Generic Syntax | Internet Standard |
-| RFC 5988 | Web Linking (Defines Link header) | Proposed Standard |
-
-### Content and Data Handling
-
-| RFC | Title | Status |
-|-----|-------|--------|
-| RFC 7578 | Returning Values from Forms: multipart/form-data | Proposed Standard |
-| RFC 6266 | Use of the Content-Disposition Header Field in HTTP | Proposed Standard |
-| RFC 2183 | Communicating Presentation Information: Content-Disposition Header Field | Proposed Standard |
-
-### Network and Protocol Extensions
-
-| RFC | Title | Status |
-|-----|-------|--------|
-| RFC 7239 | Forwarded HTTP Extension | Proposed Standard |
-| RFC 6455 | The WebSocket Protocol | Proposed Standard |
-
-### Transport Layer Security (TLS/HTTPS)
-
-| RFC | Title | Status |
-|-----|-------|--------|
-| RFC 5246 | TLS Protocol Version 1.2 | Proposed Standard |
-| RFC 8446 | TLS Protocol Version 1.3 (Supersedes 1.2) | Proposed Standard |
-| RFC 2817 | Upgrading to TLS Within HTTP/1.1 | Proposed Standard |
-
-### HTTP/2 and HTTP/3 Support
-
-| RFC | Title | Status |
-|-----|-------|--------|
-| RFC 7541 | HPACK: Header Compression for HTTP/2 | On Standard Track |
-| RFC 7838 | HTTP Alternative Services | On Standard Track |
-| RFC 7301 | TLS Application-Layer Protocol Negotiation Extension | Proposed Standard |
-
-### Security and Privacy
-
-| Resource | Title | Status |
-|----------|-------|--------|
-| RFC 6454 | The Web Origin Concept | Proposed Standard |
-| Fetch Spec | Cross-Origin Resource Sharing (CORS) | Living Standard |
-| RFC 7034 | HTTP Header Field X-Frame-Options | Informational |
-| RFC 6797 | HTTP Strict Transport Security (HSTS) | Proposed Standard |
-| W3C Spec | Upgrade Insecure Requests | Candidate Recommendation |
-| W3C Spec | Content Security Policy Level 3 | Working Draft |
-
-### Additional and Experimental
-
-| RFC | Title | Status |
-|-----|-------|--------|
-| RFC 5689 | HTTP Extensions for WebDAV | Proposed Standard |
-| RFC 7240 | Prefer Header for HTTP | Proposed Standard |
-| RFC 7486 | HTTP Origin-Bound Auth (HOBA) | Experimental |
-
-### Key Standards Bodies
-
-- **IETF** -- Internet Engineering Task Force (RFC specifications)
-- **W3C** -- World Wide Web Consortium
-- **WHATWG** -- Web Hypertext Application Technology Working Group
-- **WICG** -- Web Incubator Community Group
diff --git a/skills/create-web-form/references/javascript.md b/skills/create-web-form/references/javascript.md
deleted file mode 100644
index 9d2f57515..000000000
--- a/skills/create-web-form/references/javascript.md
+++ /dev/null
@@ -1,2413 +0,0 @@
-# JavaScript Reference
-
-A comprehensive reference covering JavaScript fundamentals, advanced features, DOM manipulation, network requests, and modern frameworks. Consolidated from MDN Web Docs and other educational sources.
-
----
-
-## Table of Contents
-
-1. [What is JavaScript?](#what-is-javascript)
-2. [Adding JavaScript to a Page](#adding-javascript-to-a-page)
-3. [Script Loading Strategies](#script-loading-strategies)
-4. [Comments](#comments)
-5. [Variables](#variables)
-6. [Numbers and Math](#numbers-and-math)
-7. [Strings](#strings)
-8. [Useful String Methods](#useful-string-methods)
-9. [Arrays](#arrays)
-10. [Conditionals](#conditionals)
-11. [Loops](#loops)
-12. [Functions](#functions)
-13. [Building Custom Functions](#building-custom-functions)
-14. [Function Return Values](#function-return-values)
-15. [Events](#events)
-16. [Object Basics](#object-basics)
-17. [DOM Scripting](#dom-scripting)
-18. [Network Requests](#network-requests)
-19. [Working with JSON](#working-with-json)
-20. [JavaScript Frameworks: Main Features](#javascript-frameworks-main-features)
-21. [Getting Started with React](#getting-started-with-react)
-22. [React Components](#react-components)
-
----
-
-## What is JavaScript?
-
-> Source: <https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Scripting/What_is_JavaScript>
-
-JavaScript is a scripting or programming language that allows you to implement complex features on web pages. It enables dynamic content updates, interactive maps, animated graphics, scrolling video jukeboxes, and much more.
-
-### The Three Layers of Web Technologies
-
-JavaScript is the third layer of standard web technologies:
-
-- **HTML**: Markup language for structuring and giving meaning to web content
-- **CSS**: Language of style rules for applying styling to HTML content
-- **JavaScript**: Scripting language that creates dynamically updating content, controls multimedia, and animates images
-
-### What Can JavaScript Do?
-
-Core JavaScript features allow you to:
-
-- **Store useful values** in variables
-- **Perform operations on text** (strings) -- combining and manipulating text
-- **Run code in response to events** -- detect user interactions like clicks, keyboard input, etc.
-- **Access and manipulate HTML and CSS** via the DOM (Document Object Model)
-
-### Practical Example
-
-```html
-<button>Player 1: Chris</button>
-```
-
-```javascript
-function updateName() {
-  const name = prompt("Enter a new name");
-  button.textContent = `Player 1: ${name}`;
-}
-
-const button = document.querySelector("button");
-button.addEventListener("click", updateName);
-```
-
-### Browser APIs
-
-Application Programming Interfaces (APIs) provide ready-made code building blocks that enable powerful functionality:
-
-| API | Description |
-|-----|-------------|
-| **DOM API** | Manipulate HTML and CSS dynamically; create, remove, and change HTML elements |
-| **Geolocation API** | Retrieves geographical information |
-| **Canvas and WebGL APIs** | Create animated 2D and 3D graphics |
-| **Audio and Video APIs** | Play audio and video in web pages; capture video from web cameras |
-
-### Third-Party APIs
-
-Not built into browsers by default; requires grabbing code from the web:
-
-- **Google Maps API**: Embed custom maps into websites
-- **OpenStreetMap API**: Add mapping functionality
-- **Social media APIs**: Display posts on your website
-
-### How JavaScript Runs
-
-- JavaScript runs **top to bottom** in the order it appears
-- Each browser tab has its own separate execution environment
-- **JavaScript is interpreted** (though modern interpreters use just-in-time compiling for performance)
-- **Client-side JavaScript** runs on the user's computer in the browser
-- **Server-side JavaScript** runs on the server (e.g., Node.js environment)
-- **Dynamic code** updates display depending on circumstances; **static code** shows the same content all the time
-
----
-
-## Adding JavaScript to a Page
-
-> Source: <https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Scripting/What_is_JavaScript>
-
-### 1. Internal JavaScript
-
-Add JavaScript directly in your HTML file using `<script>` tags:
-
-```html
-<body>
-  <button>Click me!</button>
-
-  <script>
-    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);
-    }
-  </script>
-</body>
-```
-
-### 2. External JavaScript (Recommended)
-
-Keep JavaScript in a separate file for better organization and reusability:
-
-**HTML file:**
-
-```html
-<script type="module" src="script.js"></script>
-```
-
-**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
-<button onclick="createParagraph()">Click me!</button>
-```
-
-Avoid inline handlers because they pollute HTML with JavaScript, are inefficient, and are harder to maintain.
-
-### Comparison
-
-| Method | Location | Best For | Pros | Cons |
-|--------|----------|----------|------|------|
-| **Internal** | `<script>` in body | Small projects | Simple, self-contained | Not reusable |
-| **External** | `<script src="">` | Most projects | Reusable, organized | Requires HTTP server |
-| **Inline** | `onclick=""` | Not recommended | Quick testing | Hard to maintain, pollutes HTML |
-| **Module** | `<script type="module">` | Modern projects | Safe timing, organized | Requires HTTP server |
-
----
-
-## Script Loading Strategies
-
-> Source: <https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Scripting/What_is_JavaScript>
-
-### Place `<script>` at Bottom of Body
-
-```html
-<body>
-  <h1>My Page</h1>
-  <p>Content here</p>
-  <script src="script.js"></script>
-</body>
-```
-
-### Use `<script type="module">` in `<head>` (Recommended)
-
-```html
-<head>
-  <script type="module" src="script.js"></script>
-</head>
-```
-
-Browser waits for all HTML to process before executing.
-
-### Use `defer` Attribute
-
-```html
-<head>
-  <script defer src="script.js"></script>
-</head>
-```
-
-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 async src="analytics.js"></script>
-```
-
-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: <https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Scripting/What_is_JavaScript>
-
-### 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: <https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Scripting/Variables>
-
-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: <https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Scripting/Math>
-
-### 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: <https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Scripting/Strings>
-
-### 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: <https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Scripting/Useful_string_methods>
-
-### 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: <https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Scripting/Arrays>
-
-### 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: <https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Scripting/Conditionals>
-
-### 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: <https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Scripting/Loops>
-
-### 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: <https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Scripting/Functions>
-
-### 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: <https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Scripting/Build_your_own_function>
-
-### 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: <https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Scripting/Return_values>
-
-### 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: <https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Scripting/Events>
-
-### 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: <https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Scripting/Object_basics>
-
-### 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: <https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Scripting/DOM_scripting>
-
-### 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 = "<span>New content</span>";
-```
-
-### 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
-<h1>My shopping list</h1>
-<form>
-  <label for="item">Enter a new item:</label>
-  <input type="text" name="item" id="item" />
-  <button>Add item</button>
-</form>
-<ul></ul>
-```
-
-```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: <https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Scripting/Network_requests>
-
-### 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: <https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Scripting/JSON>
-
-### 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: <https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Frameworks_libraries/Main_features>
-
-### Domain-Specific Languages (DSLs)
-
-**JSX (JavaScript and XML):**
-
-```jsx
-const subject = "World";
-const header = (
-  <header>
-    <h1>Hello, {subject}!</h1>
-  </header>
-);
-```
-
-Compiles to:
-
-```javascript
-const header = React.createElement(
-  "header",
-  null,
-  React.createElement("h1", null, "Hello, ", subject, "!"),
-);
-```
-
-**Handlebars (Ember):**
-
-```handlebars
-<header>
-  <h1>Hello, {{subject}}!</h1>
-</header>
-```
-
-**TypeScript (Angular):**
-
-```typescript
-function add(a: number, b: number) {
-  return a + b;
-}
-```
-
-### Component Props and State
-
-**Props (External Data):**
-
-```jsx
-function AuthorCredit(props) {
-  return (
-    <figure>
-      <img src={props.src} alt={props.alt} />
-      <figcaption>{props.byline}</figcaption>
-    </figure>
-  );
-}
-
-<AuthorCredit
-  src="./assets/zelda.png"
-  alt="Portrait of Zelda Schiff"
-  byline="Zelda Schiff is editor-in-chief of the Library Times."
-/>
-```
-
-**State (Internal Data):**
-
-```jsx
-function CounterButton() {
-  const [count, setCount] = useState(0);
-  return (
-    <button onClick={() => setCount(count + 1)}>
-      Clicked {count} times
-    </button>
-  );
-}
-```
-
-### Rendering Approaches
-
-| Approach | Used By | Description |
-|----------|---------|-------------|
-| **Virtual DOM** | React, Vue | Stores DOM info in JS memory, diffs with real DOM, applies changes |
-| **Incremental DOM** | Angular | Doesn't create complete copy, ignores unchanged parts |
-| **Glimmer VM** | Ember | Transpiles templates into bytecode |
-
-### Dependency Injection
-
-Solutions to "prop drilling" (passing data through many nesting levels):
-
-- **Angular**: Dependency injection system
-- **Vue**: `provide()` and `inject()` methods
-- **React**: Context API
-- **Ember**: Services
-
-### Testing Example (React Testing Library)
-
-```jsx
-import { fireEvent, render, screen } from "@testing-library/react";
-import CounterButton from "./CounterButton";
-
-it("Renders a semantic button with an initial state of 0", () => {
-  render(<CounterButton />);
-  const btn = screen.getByRole("button");
-  expect(btn).toBeInTheDocument();
-  expect(btn).toHaveTextContent("Clicked 0 times");
-});
-
-it("Increments the count when clicked", () => {
-  render(<CounterButton />);
-  const btn = screen.getByRole("button");
-  fireEvent.click(btn);
-  expect(btn).toHaveTextContent("Clicked 1 times");
-});
-```
-
----
-
-## Getting Started with React
-
-> Source: <https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Frameworks_libraries/React_getting_started>
-
-### What is React?
-
-React is **a library for building user interfaces**. It is not a framework -- it is a reusable library used with other libraries like ReactDOM for web development. Its primary goal is to minimize bugs when building UIs through the use of **components**.
-
-### Environment Setup
-
-Requirements:
-
-- **Node.js** (v18 or later; v20 LTS recommended)
-- **npm** (comes with Node.js)
-
-### Creating a React App with Vite
-
-```bash
-npm create vite@latest moz-todo-react -- --template react
-cd moz-todo-react && npm install
-npm run dev -- --open --port 3000
-```
-
-### Project Structure
-
-```
-moz-todo-react/
-  index.html              (Entry HTML file)
-  package.json            (Project metadata & dependencies)
-  src/
-    App.jsx               (Main component)
-    App.css
-    main.jsx              (Entry point - imports App)
-    index.css             (Global styles)
-    assets/
-  vite.config.js
-```
-
-### Understanding JSX
-
-JSX extends JavaScript to allow HTML-like code alongside JavaScript:
-
-```jsx
-const heading = <h1>Mozilla Developer Network</h1>;
-```
-
-Attributes use `className` instead of `class`:
-
-```jsx
-<button type="button" className="primary">
-  Click me!
-</button>
-```
-
-### Basic Component
-
-```jsx
-import "./App.css";
-
-function App() {
-  return (
-    <>
-      <header>
-        <h1>Hello, World!</h1>
-        <button type="button">Click me!</button>
-      </header>
-    </>
-  );
-}
-
-export default App;
-```
-
-### Fragments
-
-Use `<>` (fragments) to return multiple elements without extra `<div>` wrappers:
-
-```jsx
-return (
-  <>
-    <header>Content</header>
-    <main>More content</main>
-  </>
-);
-```
-
-### JavaScript Expressions in JSX
-
-Use curly braces `{}` to embed JavaScript expressions:
-
-```jsx
-const subject = "React";
-
-function App() {
-  return (
-    <>
-      <h1>Hello, {subject}!</h1>
-      <h1>Hello, {subject.toUpperCase()}!</h1>
-      <h1>Hello, {2 + 2}!</h1>
-    </>
-  );
-}
-```
-
-### Props (Component Properties)
-
-Props pass data from parent to child components (unidirectional data flow):
-
-```jsx
-// main.jsx
-<App subject="Clarice" />
-
-// App.jsx
-function App(props) {
-  return (
-    <header>
-      <h1>Hello, {props.subject}!</h1>
-    </header>
-  );
-}
-```
-
-### Rendering the App
-
-```jsx
-import { StrictMode } from "react";
-import { createRoot } from "react-dom/client";
-import App from "./App.jsx";
-
-createRoot(document.getElementById("root")).render(
-  <StrictMode>
-    <App subject="Clarice" />
-  </StrictMode>
-);
-```
-
----
-
-## React Components
-
-> Source: <https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Frameworks_libraries/React_components>
-
-### Creating Components
-
-A functional component is a JavaScript function that returns JSX:
-
-```jsx
-function Todo(props) {
-  return (
-    <li className="todo stack-small">
-      <div className="c-cb">
-        <input id={props.id} type="checkbox" defaultChecked={props.completed} />
-        <label className="todo-label" htmlFor={props.id}>
-          {props.name}
-        </label>
-      </div>
-      <div className="btn-group">
-        <button type="button" className="btn">
-          Edit <span className="visually-hidden">{props.name}</span>
-        </button>
-        <button type="button" className="btn btn__danger">
-          Delete <span className="visually-hidden">{props.name}</span>
-        </button>
-      </div>
-    </li>
-  );
-}
-
-export default Todo;
-```
-
-### Passing Props
-
-```jsx
-<ul role="list" className="todo-list">
-  <Todo name="Eat" id="todo-0" completed />
-  <Todo name="Sleep" id="todo-1" />
-  <Todo name="Repeat" id="todo-2" />
-</ul>
-```
-
-### Rendering Lists with map()
-
-```jsx
-const DATA = [
-  { id: "todo-0", name: "Eat", completed: true },
-  { id: "todo-1", name: "Sleep", completed: false },
-  { id: "todo-2", name: "Repeat", completed: false },
-];
-
-function App(props) {
-  const taskList = props.tasks?.map((task) => (
-    <Todo
-      id={task.id}
-      name={task.name}
-      completed={task.completed}
-      key={task.id}
-    />
-  ));
-
-  return (
-    <ul
-      role="list"
-      className="todo-list stack-large stack-exception"
-      aria-labelledby="list-heading">
-      {taskList}
-    </ul>
-  );
-}
-```
-
-### Unique Keys
-
-Always provide a unique `key` prop to items rendered with iteration:
-
-```jsx
-const taskList = props.tasks?.map((task) => (
-  <Todo
-    id={task.id}
-    name={task.name}
-    completed={task.completed}
-    key={task.id}
-  />
-));
-```
-
-React uses keys to track which items have changed, been added, or removed.
-
-### Component Architecture Example
-
-```jsx
-// src/components/Form.jsx
-function Form() {
-  return (
-    <form>
-      <h2 className="label-wrapper">
-        <label htmlFor="new-todo-input" className="label__lg">
-          What needs to be done?
-        </label>
-      </h2>
-      <input
-        type="text"
-        id="new-todo-input"
-        className="input input__lg"
-        name="text"
-        autoComplete="off"
-      />
-      <button type="submit" className="btn btn__primary btn__lg">
-        Add
-      </button>
-    </form>
-  );
-}
-
-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) => (
-    <Todo
-      id={task.id}
-      name={task.name}
-      completed={task.completed}
-      key={task.id}
-    />
-  ));
-
-  return (
-    <div className="todoapp stack-large">
-      <h1>TodoMatic</h1>
-      <Form />
-      <div className="filters btn-group stack-exception">
-        <FilterButton />
-        <FilterButton />
-        <FilterButton />
-      </div>
-      <h2 id="list-heading">3 tasks remaining</h2>
-      <ul
-        role="list"
-        className="todo-list stack-large stack-exception"
-        aria-labelledby="list-heading">
-        {taskList}
-      </ul>
-    </div>
-  );
-}
-
-export default App;
-```
-
----
-
-## A First Splash into JavaScript
-
-> Source: <https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Scripting/A_first_splash>
-
-### 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: <https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Scripting>
-
-### 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: <https://www.w3schools.com/jsref/jsref_reference.asp> (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. *<https://www.w3schools.com/jsref/jsref_reference.asp>*
-2. *<https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Scripting>*
-3. *<https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Scripting/What_is_JavaScript>*
-4. *<https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Scripting/A_first_splash>*
-5. *<https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Scripting/Variables>*
-6. *<https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Scripting/Math>*
-7. *<https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Scripting/Strings>*
-8. *<https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Scripting/Useful_string_methods>*
-9. *<https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Scripting/Arrays>*
-10. *<https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Scripting/Conditionals>*
-11. *<https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Scripting/Loops>*
-12. *<https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Scripting/Functions>*
-13. *<https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Scripting/Build_your_own_function>*
-14. *<https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Scripting/Return_values>*
-15. *<https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Scripting/Events>*
-16. *<https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Scripting/Object_basics>*
-17. *<https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Frameworks_libraries/React_components>*
-18. *<https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Frameworks_libraries/React_getting_started>*
-19. *<https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Frameworks_libraries/Main_features>*
-20. *<https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Scripting/DOM_scripting>*
-21. *<https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Scripting/Network_requests>*
-22. *<https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Scripting/JSON>*
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 3408527cb..000000000
--- a/skills/create-web-form/references/php-cookies.md
+++ /dev/null
@@ -1,145 +0,0 @@
-# PHP Cookies Reference
-
-> Source: <https://www.w3schools.com/php/php_cookies.asp>
-
-## 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 `<html>` 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
-<?php
-$cookie_name = "user";
-$cookie_value = "John Doe";
-setcookie($cookie_name, $cookie_value, time() + (86400 * 30), "/"); // 86400 = 1 day
-?>
-<html>
-<body>
-
-<?php
-if(!isset($_COOKIE[$cookie_name])) {
-    echo "Cookie named '" . $cookie_name . "' is not set!";
-} else {
-    echo "Cookie '" . $cookie_name . "' is set!<br>";
-    echo "Value is: " . $_COOKIE[$cookie_name];
-}
-?>
-
-</body>
-</html>
-```
-
-**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
-<?php
-if(!isset($_COOKIE["user"])) {
-    echo "Cookie named 'user' is not set!";
-} else {
-    echo "Cookie 'user' is set!<br>";
-    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
-<?php
-$cookie_name = "user";
-$cookie_value = "Alex Porter";
-setcookie($cookie_name, $cookie_value, time() + (86400 * 30), "/");
-?>
-<html>
-<body>
-
-<?php
-if(!isset($_COOKIE[$cookie_name])) {
-    echo "Cookie named '" . $cookie_name . "' is not set!";
-} else {
-    echo "Cookie '" . $cookie_name . "' is set!<br>";
-    echo "Value is: " . $_COOKIE[$cookie_name];
-}
-?>
-
-</body>
-</html>
-```
-
-## Delete a Cookie
-
-To delete a cookie, use the `setcookie()` function with an expiration date in the past:
-
-```php
-<?php
-// Set the expiration date to one hour ago
-setcookie("user", "", time() - 3600);
-?>
-<html>
-<body>
-
-<?php
-echo "Cookie 'user' is deleted.";
-?>
-
-</body>
-</html>
-```
-
-## 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
-<?php
-setcookie("test_cookie", "test", time() + 3600, '/');
-?>
-<html>
-<body>
-
-<?php
-if(count($_COOKIE) > 0) {
-    echo "Cookies are enabled.";
-} else {
-    echo "Cookies are disabled.";
-}
-?>
-
-</body>
-</html>
-```
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 f0545be35..000000000
--- 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:** <https://www.w3schools.com/php/php_forms.asp>
-
-### 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 `<form>` tag.
-
-### A Simple HTML Form
-
-```html
-<html>
-<body>
-
-<form action="welcome.php" method="post">
-  Name: <input type="text" name="name"><br>
-  E-mail: <input type="text" name="email"><br>
-  <input type="submit">
-</form>
-
-</body>
-</html>
-```
-
-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
-<html>
-<body>
-
-Welcome <?php echo $_POST["name"]; ?><br>
-Your email address is: <?php echo $_POST["email"]; ?>
-
-</body>
-</html>
-```
-
-### Using the GET Method
-
-```html
-<form action="welcome_get.php" method="get">
-  Name: <input type="text" name="name"><br>
-  E-mail: <input type="text" name="email"><br>
-  <input type="submit">
-</form>
-```
-
-```php
-<html>
-<body>
-
-Welcome <?php echo $_GET["name"]; ?><br>
-Your email address is: <?php echo $_GET["email"]; ?>
-
-</body>
-</html>
-```
-
-### 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:** <https://www.w3schools.com/php/php_form_validation.asp>
-
-### 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
-<form method="post" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]); ?>">
-```
-
-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
-<form method="post" action="test_form.php/"><script>alert('hacked')</script>
-```
-
-The `<script>` tag is added and the `alert` command is executed. This is just a simple example. Any JavaScript code can be added inside `<script>` tags, and a hacker could redirect the user to a file on another server that holds malicious code that can alter global variables or submit the form to another address.
-
-### How to Avoid `$_SERVER["PHP_SELF"]` Exploits
-
-Use `htmlspecialchars()`:
-
-```php
-<form method="post" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]); ?>">
-```
-
-The `htmlspecialchars()` function converts special characters to HTML entities. Now if a user tries to exploit `PHP_SELF`, the output is safely rendered as:
-
-```html
-<form method="post" action="test_form.php/&quot;&gt;&lt;script&gt;alert('hacked')&lt;/script&gt;">
-```
-
-The exploit attempt fails because the code is escaped and treated as plain text.
-
-### Validate Form Data with PHP
-
-1. Strip unnecessary characters (extra spaces, tabs, newlines) from user input with `trim()`
-2. Remove backslashes from user input with `stripslashes()`
-3. Convert special characters to HTML entities with `htmlspecialchars()`
-
-### The `test_input()` Function
-
-Create a reusable function to do all the checking:
-
-```php
-<?php
-function test_input($data) {
-    $data = trim($data);
-    $data = stripslashes($data);
-    $data = htmlspecialchars($data);
-    return $data;
-}
-?>
-```
-
-### Processing the Form
-
-```php
-<?php
-// Define variables and set to empty values
-$name = $email = $gender = $comment = $website = "";
-
-if ($_SERVER["REQUEST_METHOD"] == "POST") {
-    $name = test_input($_POST["name"]);
-    $email = test_input($_POST["email"]);
-    $website = test_input($_POST["website"]);
-    $comment = test_input($_POST["comment"]);
-    $gender = test_input($_POST["gender"]);
-}
-?>
-```
-
-**Important:** At the start of the script, we check whether the form has been submitted using `$_SERVER["REQUEST_METHOD"]`. If the `REQUEST_METHOD` is `POST`, then the form has been submitted and it should be validated.
-
----
-
-## PHP Form Required Fields
-
-> **Source:** <https://www.w3schools.com/php/php_form_required.asp>
-
-### Making Fields Required
-
-In the previous section, all input fields were optional. In this section, we add validation to make certain fields required and create error messages when needed.
-
-### Adding Error Variables
-
-Define error variables for each required field and initialize them as empty:
-
-```php
-<?php
-// Define variables and set to empty values
-$nameErr = $emailErr = $genderErr = $websiteErr = "";
-$name = $email = $gender = $comment = $website = "";
-
-if ($_SERVER["REQUEST_METHOD"] == "POST") {
-    if (empty($_POST["name"])) {
-        $nameErr = "Name is required";
-    } else {
-        $name = test_input($_POST["name"]);
-    }
-
-    if (empty($_POST["email"])) {
-        $emailErr = "Email is required";
-    } else {
-        $email = test_input($_POST["email"]);
-    }
-
-    if (empty($_POST["website"])) {
-        $website = "";
-    } else {
-        $website = test_input($_POST["website"]);
-    }
-
-    if (empty($_POST["comment"])) {
-        $comment = "";
-    } else {
-        $comment = test_input($_POST["comment"]);
-    }
-
-    if (empty($_POST["gender"])) {
-        $genderErr = "Gender is required";
-    } else {
-        $gender = test_input($_POST["gender"]);
-    }
-}
-?>
-```
-
-### The `empty()` Function
-
-The `empty()` function checks whether a variable is empty, null, or has a falsy value. It returns `true` for empty strings, `null`, `0`, `"0"`, `false`, and undefined variables.
-
-### Displaying Error Messages
-
-In the HTML form, display the error messages next to the corresponding fields:
-
-```html
-<form method="post" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]); ?>">
-
-  Name: <input type="text" name="name">
-  <span class="error">* <?php echo $nameErr; ?></span>
-  <br><br>
-
-  E-mail: <input type="text" name="email">
-  <span class="error">* <?php echo $emailErr; ?></span>
-  <br><br>
-
-  Website: <input type="text" name="website">
-  <span class="error"><?php echo $websiteErr; ?></span>
-  <br><br>
-
-  Comment: <textarea name="comment" rows="5" cols="40"></textarea>
-  <br><br>
-
-  Gender:
-  <input type="radio" name="gender" value="female">Female
-  <input type="radio" name="gender" value="male">Male
-  <input type="radio" name="gender" value="other">Other
-  <span class="error">* <?php echo $genderErr; ?></span>
-  <br><br>
-
-  <input type="submit" name="submit" value="Submit">
-
-</form>
-```
-
-### Styling Error Messages
-
-Use CSS to make error messages stand out:
-
-```css
-.error {
-    color: #FF0000;
-}
-```
-
-### Required Field Indicators
-
-It is common to place an asterisk `*` next to required fields to indicate they must be filled out. The asterisk can be added directly in the HTML or dynamically with PHP.
-
----
-
-## PHP Form URL and Email Validation
-
-> **Source:** <https://www.w3schools.com/php/php_form_url_email.asp>
-
-### Validating a Name
-
-Check that the name field only contains letters, dashes, apostrophes, and whitespace using `preg_match()`:
-
-```php
-$name = test_input($_POST["name"]);
-if (!preg_match("/^[a-zA-Z-' ]*$/", $name)) {
-    $nameErr = "Only letters and white space allowed";
-}
-```
-
-The `preg_match()` function searches a string for a pattern, returning `1` if the pattern was found and `0` if not.
-
-### Validating an E-mail Address
-
-Check that an e-mail address is well-formed using `filter_var()`:
-
-```php
-$email = test_input($_POST["email"]);
-if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
-    $emailErr = "Invalid email format";
-}
-```
-
-The `filter_var()` function filters a variable with the specified filter. `FILTER_VALIDATE_EMAIL` validates whether the value is a valid email address.
-
-### Validating a URL
-
-Check that a URL is valid using `preg_match()`:
-
-```php
-$website = test_input($_POST["website"]);
-if (!preg_match("/\b(?:https?|ftp):\/\/|www\.[-a-z0-9+&@#\/%?=~_|!:,.;]*[-a-z0-9+&@#\/%=~_|]/i", $website)) {
-    $websiteErr = "Invalid URL";
-}
-```
-
-Alternatively, `filter_var()` can also validate URLs:
-
-```php
-if (!filter_var($website, FILTER_VALIDATE_URL)) {
-    $websiteErr = "Invalid URL";
-}
-```
-
-### Combined Validation Logic
-
-Incorporate all validation checks within the form processing block:
-
-```php
-<?php
-$nameErr = $emailErr = $genderErr = $websiteErr = "";
-$name = $email = $gender = $comment = $website = "";
-
-if ($_SERVER["REQUEST_METHOD"] == "POST") {
-    if (empty($_POST["name"])) {
-        $nameErr = "Name is required";
-    } else {
-        $name = test_input($_POST["name"]);
-        if (!preg_match("/^[a-zA-Z-' ]*$/", $name)) {
-            $nameErr = "Only letters and white space allowed";
-        }
-    }
-
-    if (empty($_POST["email"])) {
-        $emailErr = "Email is required";
-    } else {
-        $email = test_input($_POST["email"]);
-        if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
-            $emailErr = "Invalid email format";
-        }
-    }
-
-    if (empty($_POST["website"])) {
-        $website = "";
-    } else {
-        $website = test_input($_POST["website"]);
-        if (!preg_match("/\b(?:https?|ftp):\/\/|www\.[-a-z0-9+&@#\/%?=~_|!:,.;]*[-a-z0-9+&@#\/%=~_|]/i", $website)) {
-            $websiteErr = "Invalid URL";
-        }
-    }
-
-    if (empty($_POST["comment"])) {
-        $comment = "";
-    } else {
-        $comment = test_input($_POST["comment"]);
-    }
-
-    if (empty($_POST["gender"])) {
-        $genderErr = "Gender is required";
-    } else {
-        $gender = test_input($_POST["gender"]);
-    }
-}
-?>
-```
-
-### PHP Validation Functions Reference
-
-| Function | Purpose |
-|----------|---------|
-| `preg_match(pattern, string)` | Tests whether a string matches a regular expression pattern. Returns `1` if matched, `0` if not. |
-| `filter_var(value, filter)` | Filters a variable with a specified filter constant. Returns the filtered data on success, or `false` on failure. |
-| `FILTER_VALIDATE_EMAIL` | Filter constant that validates an email address format. |
-| `FILTER_VALIDATE_URL` | Filter constant that validates a URL format. |
-
----
-
-## PHP Complete Form Example
-
-> **Source:** <https://www.w3schools.com/php/php_form_complete.asp>
-
-### Retaining Form Values After Submission
-
-To show the values in the input fields after the user hits the submit button, add a small PHP script inside the `value` attribute of each input element and inside the textarea element. This way, the form retains the user's entered data even when validation errors occur.
-
-Use `<?php echo $variable; ?>` to output the value:
-
-```html
-Name: <input type="text" name="name" value="<?php echo $name; ?>">
-
-E-mail: <input type="text" name="email" value="<?php echo $email; ?>">
-
-Website: <input type="text" name="website" value="<?php echo $website; ?>">
-
-Comment: <textarea name="comment" rows="5" cols="40"><?php echo $comment; ?></textarea>
-```
-
-### Retaining Radio Button Selection
-
-For radio buttons, check whether the value was previously selected using a conditional:
-
-```html
-Gender:
-<input type="radio" name="gender"
-  <?php if (isset($gender) && $gender == "female") echo "checked"; ?>
-  value="female">Female
-
-<input type="radio" name="gender"
-  <?php if (isset($gender) && $gender == "male") echo "checked"; ?>
-  value="male">Male
-
-<input type="radio" name="gender"
-  <?php if (isset($gender) && $gender == "other") echo "checked"; ?>
-  value="other">Other
-```
-
-### The Complete PHP Form Script
-
-```php
-<?php
-// Define variables and set to empty values
-$nameErr = $emailErr = $genderErr = $websiteErr = "";
-$name = $email = $gender = $comment = $website = "";
-
-function test_input($data) {
-    $data = trim($data);
-    $data = stripslashes($data);
-    $data = htmlspecialchars($data);
-    return $data;
-}
-
-if ($_SERVER["REQUEST_METHOD"] == "POST") {
-    if (empty($_POST["name"])) {
-        $nameErr = "Name is required";
-    } else {
-        $name = test_input($_POST["name"]);
-        // Check if name only contains letters and whitespace
-        if (!preg_match("/^[a-zA-Z-' ]*$/", $name)) {
-            $nameErr = "Only letters and white space allowed";
-        }
-    }
-
-    if (empty($_POST["email"])) {
-        $emailErr = "Email is required";
-    } else {
-        $email = test_input($_POST["email"]);
-        // Check if e-mail address is well-formed
-        if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
-            $emailErr = "Invalid email format";
-        }
-    }
-
-    if (empty($_POST["website"])) {
-        $website = "";
-    } else {
-        $website = test_input($_POST["website"]);
-        // Check if URL address syntax is valid
-        if (!preg_match("/\b(?:https?|ftp):\/\/|www\.[-a-z0-9+&@#\/%?=~_|!:,.;]*[-a-z0-9+&@#\/%=~_|]/i", $website)) {
-            $websiteErr = "Invalid URL";
-        }
-    }
-
-    if (empty($_POST["comment"])) {
-        $comment = "";
-    } else {
-        $comment = test_input($_POST["comment"]);
-    }
-
-    if (empty($_POST["gender"])) {
-        $genderErr = "Gender is required";
-    } else {
-        $gender = test_input($_POST["gender"]);
-    }
-}
-?>
-```
-
-### The Complete HTML Form
-
-```html
-<!DOCTYPE HTML>
-<html>
-<head>
-<style>
-.error {color: #FF0000;}
-</style>
-</head>
-<body>
-
-<h2>PHP Form Validation Example</h2>
-<p><span class="error">* required field</span></p>
-
-<form method="post" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]); ?>">
-
-  Name: <input type="text" name="name" value="<?php echo $name; ?>">
-  <span class="error">* <?php echo $nameErr; ?></span>
-  <br><br>
-
-  E-mail: <input type="text" name="email" value="<?php echo $email; ?>">
-  <span class="error">* <?php echo $emailErr; ?></span>
-  <br><br>
-
-  Website: <input type="text" name="website" value="<?php echo $website; ?>">
-  <span class="error"><?php echo $websiteErr; ?></span>
-  <br><br>
-
-  Comment: <textarea name="comment" rows="5" cols="40"><?php echo $comment; ?></textarea>
-  <br><br>
-
-  Gender:
-  <input type="radio" name="gender"
-    <?php if (isset($gender) && $gender == "female") echo "checked"; ?>
-    value="female">Female
-  <input type="radio" name="gender"
-    <?php if (isset($gender) && $gender == "male") echo "checked"; ?>
-    value="male">Male
-  <input type="radio" name="gender"
-    <?php if (isset($gender) && $gender == "other") echo "checked"; ?>
-    value="other">Other
-  <span class="error">* <?php echo $genderErr; ?></span>
-  <br><br>
-
-  <input type="submit" name="submit" value="Submit">
-
-</form>
-
-<?php
-echo "<h2>Your Input:</h2>";
-echo $name;
-echo "<br>";
-echo $email;
-echo "<br>";
-echo $website;
-echo "<br>";
-echo $comment;
-echo "<br>";
-echo $gender;
-?>
-
-</body>
-</html>
-```
-
-### Summary of Key Functions
-
-| Function | Purpose |
-|----------|---------|
-| `htmlspecialchars()` | Converts special characters (`<`, `>`, `&`, `"`, `'`) to HTML entities to prevent XSS |
-| `trim()` | Strips whitespace (or other characters) from the beginning and end of a string |
-| `stripslashes()` | Removes backslashes from a string |
-| `empty()` | Checks whether a variable is empty, null, or falsy |
-| `isset()` | Checks whether a variable is set and is not null |
-| `preg_match()` | Performs a regular expression match on a string |
-| `filter_var()` | Filters a variable with a specified filter |
-| `$_POST` | Superglobal array that collects form data sent with the POST method |
-| `$_GET` | Superglobal array that collects form data sent with the GET method |
-| `$_SERVER["PHP_SELF"]` | Returns the filename of the currently executing script |
-| `$_SERVER["REQUEST_METHOD"]` | Returns the request method used to access the page (e.g., `POST`, `GET`) |
-
-### Key Takeaways
-
-1. **Always sanitize user input** using `trim()`, `stripslashes()`, and `htmlspecialchars()` via a reusable `test_input()` function.
-2. **Protect against XSS** by passing `$_SERVER["PHP_SELF"]` through `htmlspecialchars()` in the form action attribute.
-3. **Use `$_SERVER["REQUEST_METHOD"]`** to check if the form was submitted before processing.
-4. **Validate required fields** with `empty()` and display error messages next to each field.
-5. **Validate data formats** using `preg_match()` for patterns (names, URLs) and `filter_var()` for emails and URLs.
-6. **Retain form values** after submission by echoing variables back into input `value` attributes and textarea content.
-7. **Retain radio button state** by conditionally adding the `checked` attribute using `isset()` and value comparison.
-8. **POST is preferred** over GET for form submissions that contain sensitive or large amounts of data.
diff --git a/skills/create-web-form/references/php-json.md b/skills/create-web-form/references/php-json.md
deleted file mode 100644
index 58e5dedbe..000000000
--- a/skills/create-web-form/references/php-json.md
+++ /dev/null
@@ -1,202 +0,0 @@
-# PHP JSON Reference
-
-> Source: <https://www.w3schools.com/php/php_json.asp>
-
-## What is JSON?
-
-JSON stands for **JavaScript Object Notation** and is a syntax for storing and exchanging data. JSON is a text format that is completely language independent. Since the JSON format is text only, it can easily be sent to and from a server, and used as a data format by any programming language.
-
-PHP has some built-in functions to handle JSON:
-
-- `json_encode()` -- Encodes a value to JSON format
-- `json_decode()` -- Decodes a JSON string into a PHP variable
-
-## `json_encode()` -- Encoding PHP to JSON
-
-The `json_encode()` function is used to encode a value to JSON format (a valid JSON string).
-
-### Encoding an Associative Array
-
-```php
-<?php
-$age = array("Peter" => 35, "Ben" => 37, "Joe" => 43);
-
-echo json_encode($age);
-?>
-```
-
-Output:
-
-```json
-{"Peter":35,"Ben":37,"Joe":43}
-```
-
-### Encoding an Indexed Array
-
-```php
-<?php
-$cars = array("Volvo", "BMW", "Toyota");
-
-echo json_encode($cars);
-?>
-```
-
-Output:
-
-```json
-["Volvo","BMW","Toyota"]
-```
-
-### Encoding a PHP Object
-
-```php
-<?php
-$myObj = new stdClass();
-$myObj->name = "John";
-$myObj->age = 30;
-$myObj->city = "New York";
-
-echo json_encode($myObj);
-?>
-```
-
-Output:
-
-```json
-{"name":"John","age":30,"city":"New York"}
-```
-
-## `json_decode()` -- Decoding JSON to PHP
-
-The `json_decode()` function is used to decode a JSON string into a PHP object or associative array.
-
-### Syntax
-
-```php
-json_decode(string, assoc, depth, options)
-```
-
-### Parameters
-
-| Parameter | Description                                                                                                   |
-|-----------|---------------------------------------------------------------------------------------------------------------|
-| `string`  | Required. Specifies the JSON string to be decoded.                                                            |
-| `assoc`   | Optional. If set to `true`, the returned object will be converted into an associative array. Default is `false`. |
-| `depth`   | Optional. Specifies the maximum recursion depth. Default is `512`.                                            |
-| `options` | Optional. Specifies a bitmask (e.g., `JSON_BIGINT_AS_STRING`).                                               |
-
-### Decoding JSON into a PHP Object (default)
-
-By default, the `json_decode()` function returns an object:
-
-```php
-<?php
-$jsonobj = '{"Peter":35,"Ben":37,"Joe":43}';
-
-$obj = json_decode($jsonobj);
-
-echo $obj->Peter;  // Outputs: 35
-echo $obj->Ben;    // Outputs: 37
-echo $obj->Joe;    // Outputs: 43
-?>
-```
-
-### Decoding JSON into an Associative Array
-
-When the second parameter is set to `true`, the JSON string is decoded into an associative array:
-
-```php
-<?php
-$jsonobj = '{"Peter":35,"Ben":37,"Joe":43}';
-
-$arr = json_decode($jsonobj, true);
-
-echo $arr["Peter"];  // Outputs: 35
-echo $arr["Ben"];    // Outputs: 37
-echo $arr["Joe"];    // Outputs: 43
-?>
-```
-
-## Accessing Decoded Values
-
-### From an Object
-
-Use the arrow (`->`) operator to access values from a decoded object:
-
-```php
-<?php
-$jsonobj = '{"Peter":35,"Ben":37,"Joe":43}';
-
-$obj = json_decode($jsonobj);
-
-echo $obj->Peter;
-echo $obj->Ben;
-echo $obj->Joe;
-?>
-```
-
-### From an Associative Array
-
-Use square bracket syntax to access values from a decoded associative array:
-
-```php
-<?php
-$jsonobj = '{"Peter":35,"Ben":37,"Joe":43}';
-
-$arr = json_decode($jsonobj, true);
-
-echo $arr["Peter"];
-echo $arr["Ben"];
-echo $arr["Joe"];
-?>
-```
-
-## Looping Through Values
-
-### Looping Through an Object
-
-Use a `foreach` loop to loop through the values of a decoded object:
-
-```php
-<?php
-$jsonobj = '{"Peter":35,"Ben":37,"Joe":43}';
-
-$obj = json_decode($jsonobj);
-
-foreach($obj as $key => $value) {
-    echo $key . " => " . $value . "<br>";
-}
-?>
-```
-
-Output:
-
-```
-Peter => 35
-Ben => 37
-Joe => 43
-```
-
-### Looping Through an Associative Array
-
-Use a `foreach` loop to loop through the values of a decoded associative array:
-
-```php
-<?php
-$jsonobj = '{"Peter":35,"Ben":37,"Joe":43}';
-
-$arr = json_decode($jsonobj, true);
-
-foreach($arr as $key => $value) {
-    echo $key . " => " . $value . "<br>";
-}
-?>
-```
-
-Output:
-
-```
-Peter => 35
-Ben => 37
-Joe => 43
-```
diff --git a/skills/create-web-form/references/php-mysql-database.md b/skills/create-web-form/references/php-mysql-database.md
deleted file mode 100644
index 1d0cfb16d..000000000
--- a/skills/create-web-form/references/php-mysql-database.md
+++ /dev/null
@@ -1,1696 +0,0 @@
-# PHP MySQL Database Reference
-
-A consolidated reference for working with MySQL databases in PHP, covering connections,
-CRUD operations, prepared statements, and query techniques.
-
----
-
-## Table of Contents
-
-1. [MySQL Introduction](#1-mysql-introduction)
-2. [Connect to MySQL](#2-connect-to-mysql)
-3. [Create a Database](#3-create-a-database)
-4. [Create a Table](#4-create-a-table)
-5. [Insert Data](#5-insert-data)
-6. [Get Last Inserted ID](#6-get-last-inserted-id)
-7. [Insert Multiple Records](#7-insert-multiple-records)
-8. [Prepared Statements](#8-prepared-statements)
-9. [Select Data](#9-select-data)
-10. [Select with WHERE](#10-select-with-where)
-11. [Select with ORDER BY](#11-select-with-order-by)
-12. [Delete Data](#12-delete-data)
-13. [Update Data](#13-update-data)
-14. [Select with LIMIT](#14-select-with-limit)
-
----
-
-## 1. MySQL Introduction
-
-> **Source:** <https://www.w3schools.com/php/php_mysql_intro.asp>
-
-### What is MySQL?
-
-MySQL is the most popular open-source relational database management system. Together with PHP,
-MySQL is used to create dynamic, data-driven web applications.
-
-### Key Points
-
-- **MySQL** is a database system used on the web.
-- **MySQL** runs on a server (typically alongside a web server such as Apache).
-- It is ideal for both small and large applications.
-- It is very fast, reliable, and easy to use.
-- It uses standard **SQL** (Structured Query Language).
-- It is free to download and use.
-- MySQL is developed, distributed, and supported by Oracle Corporation.
-
-### Data in MySQL
-
-- Data in MySQL is stored in **tables**.
-- A table is a collection of related data consisting of **columns** and **rows**.
-- Databases are useful for storing information categorically. For example, a company may have
-  databases for Employees, Products, and Customers.
-
-### PHP + MySQL Database System
-
-- PHP combined with MySQL is cross-platform (runs on Windows, Linux, macOS, etc.).
-- The PHP code for querying a MySQL database is executed on the server, and the HTML result
-  is sent to the browser.
-
-### PHP MySQL APIs
-
-PHP offers three ways to connect to and interact with MySQL:
-
-| API | Description |
-|-----|-------------|
-| **MySQLi (Object-Oriented)** | MySQL Improved extension - OO interface |
-| **MySQLi (Procedural)** | MySQL Improved extension - procedural interface |
-| **PDO (PHP Data Objects)** | Works with 12 different database systems |
-
-**Recommendation:** Use **MySQLi** or **PDO**. The older `mysql_*` functions are deprecated and
-removed as of PHP 7.0.
-
-**MySQLi vs PDO:**
-
-- **PDO** works on 12 different database systems; **MySQLi** only works with MySQL.
-- If you need to switch your project to another database, PDO makes the process easier -- you
-  only have to change the connection string and a few queries.
-- Both support **Prepared Statements**, which protect against SQL injection.
-
----
-
-## 2. Connect to MySQL
-
-> **Source:** <https://www.w3schools.com/php/php_mysql_connect.asp>
-
-### Open a Connection to MySQL
-
-Before accessing data in the MySQL database, you need to connect to the server.
-
-### MySQLi Object-Oriented Connection
-
-```php
-<?php
-$servername = "localhost";
-$username = "username";
-$password = "password";
-
-// Create connection
-$conn = new mysqli($servername, $username, $password);
-
-// Check connection
-if ($conn->connect_error) {
-    die("Connection failed: " . $conn->connect_error);
-}
-echo "Connected successfully";
-?>
-```
-
-### MySQLi Procedural Connection
-
-```php
-<?php
-$servername = "localhost";
-$username = "username";
-$password = "password";
-
-// Create connection
-$conn = mysqli_connect($servername, $username, $password);
-
-// Check connection
-if (!$conn) {
-    die("Connection failed: " . mysqli_connect_error());
-}
-echo "Connected successfully";
-?>
-```
-
-### PDO Connection
-
-```php
-<?php
-$servername = "localhost";
-$username = "username";
-$password = "password";
-
-try {
-    $conn = new PDO("mysql:host=$servername;dbname=myDB", $username, $password);
-    // Set the PDO error mode to exception
-    $conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
-    echo "Connected successfully";
-} catch(PDOException $e) {
-    echo "Connection failed: " . $e->getMessage();
-}
-?>
-```
-
-**Note:** In the PDO example, a database (`myDB`) is specified. PDO requires a valid database
-to connect to. If no database is specified, an exception is thrown.
-
-### Closing the Connection
-
-The connection is automatically closed when the script ends. To close it before that:
-
-```php
-// MySQLi Object-Oriented
-$conn->close();
-
-// MySQLi Procedural
-mysqli_close($conn);
-
-// PDO
-$conn = null;
-```
-
----
-
-## 3. Create a Database
-
-> **Source:** <https://www.w3schools.com/php/php_mysql_create.asp>
-
-The `CREATE DATABASE` statement is used to create a database in MySQL.
-
-### MySQLi Object-Oriented
-
-```php
-<?php
-$servername = "localhost";
-$username = "username";
-$password = "password";
-
-// Create connection
-$conn = new mysqli($servername, $username, $password);
-
-// Check connection
-if ($conn->connect_error) {
-    die("Connection failed: " . $conn->connect_error);
-}
-
-// Create database
-$sql = "CREATE DATABASE myDB";
-if ($conn->query($sql) === TRUE) {
-    echo "Database created successfully";
-} else {
-    echo "Error creating database: " . $conn->error;
-}
-
-$conn->close();
-?>
-```
-
-### MySQLi Procedural
-
-```php
-<?php
-$servername = "localhost";
-$username = "username";
-$password = "password";
-
-// Create connection
-$conn = mysqli_connect($servername, $username, $password);
-
-// Check connection
-if (!$conn) {
-    die("Connection failed: " . mysqli_connect_error());
-}
-
-// Create database
-$sql = "CREATE DATABASE myDB";
-if (mysqli_query($conn, $sql)) {
-    echo "Database created successfully";
-} else {
-    echo "Error creating database: " . mysqli_error($conn);
-}
-
-mysqli_close($conn);
-?>
-```
-
-### PDO
-
-```php
-<?php
-$servername = "localhost";
-$username = "username";
-$password = "password";
-
-try {
-    $conn = new PDO("mysql:host=$servername", $username, $password);
-    // Set the PDO error mode to exception
-    $conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
-    $sql = "CREATE DATABASE myDBPDO";
-    // Use exec() because no results are returned
-    $conn->exec($sql);
-    echo "Database created successfully<br>";
-} catch(PDOException $e) {
-    echo $sql . "<br>" . $e->getMessage();
-}
-
-$conn = null;
-?>
-```
-
-**Tip:** When creating a database, you only need to specify the first three arguments to the
-`mysqli` object (servername, username, and password). To select a specific database, add a
-fourth argument.
-
----
-
-## 4. Create a Table
-
-> **Source:** <https://www.w3schools.com/php/php_mysql_create_table.asp>
-
-The `CREATE TABLE` statement is used to create a table in MySQL.
-
-### Key SQL Concepts for Table Creation
-
-- **NOT NULL** - Each row must contain a value for that column; null values are not allowed.
-- **DEFAULT value** - Set a default value that is added when no other value is passed.
-- **UNSIGNED** - Used for number types, limits the stored data to positive numbers and zero.
-- **AUTO_INCREMENT** - MySQL automatically increases the value of the field by 1 each time a
-  new record is added.
-- **PRIMARY KEY** - Used to uniquely identify the rows in a table. The column with PRIMARY KEY
-  setting is often an ID number and is used with `AUTO_INCREMENT`.
-
-### MySQLi Object-Oriented
-
-```php
-<?php
-$servername = "localhost";
-$username = "username";
-$password = "password";
-$dbname = "myDB";
-
-// Create connection
-$conn = new mysqli($servername, $username, $password, $dbname);
-
-// Check connection
-if ($conn->connect_error) {
-    die("Connection failed: " . $conn->connect_error);
-}
-
-// SQL to create table
-$sql = "CREATE TABLE MyGuests (
-    id INT(6) UNSIGNED AUTO_INCREMENT PRIMARY KEY,
-    firstname VARCHAR(30) NOT NULL,
-    lastname VARCHAR(30) NOT NULL,
-    email VARCHAR(50),
-    reg_date TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP
-)";
-
-if ($conn->query($sql) === TRUE) {
-    echo "Table MyGuests created successfully";
-} else {
-    echo "Error creating table: " . $conn->error;
-}
-
-$conn->close();
-?>
-```
-
-### MySQLi Procedural
-
-```php
-<?php
-$servername = "localhost";
-$username = "username";
-$password = "password";
-$dbname = "myDB";
-
-// Create connection
-$conn = mysqli_connect($servername, $username, $password, $dbname);
-
-// Check connection
-if (!$conn) {
-    die("Connection failed: " . mysqli_connect_error());
-}
-
-// SQL to create table
-$sql = "CREATE TABLE MyGuests (
-    id INT(6) UNSIGNED AUTO_INCREMENT PRIMARY KEY,
-    firstname VARCHAR(30) NOT NULL,
-    lastname VARCHAR(30) NOT NULL,
-    email VARCHAR(50),
-    reg_date TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP
-)";
-
-if (mysqli_query($conn, $sql)) {
-    echo "Table MyGuests created successfully";
-} else {
-    echo "Error creating table: " . mysqli_error($conn);
-}
-
-mysqli_close($conn);
-?>
-```
-
-### PDO
-
-```php
-<?php
-$servername = "localhost";
-$username = "username";
-$password = "password";
-$dbname = "myDBPDO";
-
-try {
-    $conn = new PDO("mysql:host=$servername;dbname=$dbname", $username, $password);
-    // Set the PDO error mode to exception
-    $conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
-
-    // SQL to create table
-    $sql = "CREATE TABLE MyGuests (
-        id INT(6) UNSIGNED AUTO_INCREMENT PRIMARY KEY,
-        firstname VARCHAR(30) NOT NULL,
-        lastname VARCHAR(30) NOT NULL,
-        email VARCHAR(50),
-        reg_date TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP
-    )";
-
-    // Use exec() because no results are returned
-    $conn->exec($sql);
-    echo "Table MyGuests created successfully";
-} catch(PDOException $e) {
-    echo $sql . "<br>" . $e->getMessage();
-}
-
-$conn = null;
-?>
-```
-
----
-
-## 5. Insert Data
-
-> **Source:** <https://www.w3schools.com/php/php_mysql_insert.asp>
-
-The `INSERT INTO` statement is used to add new records to a MySQL table.
-
-### SQL Syntax
-
-```sql
-INSERT INTO table_name (column1, column2, column3, ...)
-VALUES (value1, value2, value3, ...)
-```
-
-**Important rules:**
-
-- SQL queries must be quoted in PHP.
-- String values inside the SQL query must be quoted.
-- Numeric values must NOT be quoted.
-- The word NULL must NOT be quoted.
-
-### MySQLi Object-Oriented
-
-```php
-<?php
-$servername = "localhost";
-$username = "username";
-$password = "password";
-$dbname = "myDB";
-
-// Create connection
-$conn = new mysqli($servername, $username, $password, $dbname);
-
-// Check connection
-if ($conn->connect_error) {
-    die("Connection failed: " . $conn->connect_error);
-}
-
-$sql = "INSERT INTO MyGuests (firstname, lastname, email)
-VALUES ('John', 'Doe', 'john@example.com')";
-
-if ($conn->query($sql) === TRUE) {
-    echo "New record created successfully";
-} else {
-    echo "Error: " . $sql . "<br>" . $conn->error;
-}
-
-$conn->close();
-?>
-```
-
-### MySQLi Procedural
-
-```php
-<?php
-$servername = "localhost";
-$username = "username";
-$password = "password";
-$dbname = "myDB";
-
-// Create connection
-$conn = mysqli_connect($servername, $username, $password, $dbname);
-
-// Check connection
-if (!$conn) {
-    die("Connection failed: " . mysqli_connect_error());
-}
-
-$sql = "INSERT INTO MyGuests (firstname, lastname, email)
-VALUES ('John', 'Doe', 'john@example.com')";
-
-if (mysqli_query($conn, $sql)) {
-    echo "New record created successfully";
-} else {
-    echo "Error: " . $sql . "<br>" . mysqli_error($conn);
-}
-
-mysqli_close($conn);
-?>
-```
-
-### PDO
-
-```php
-<?php
-$servername = "localhost";
-$username = "username";
-$password = "password";
-$dbname = "myDBPDO";
-
-try {
-    $conn = new PDO("mysql:host=$servername;dbname=$dbname", $username, $password);
-    // Set the PDO error mode to exception
-    $conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
-    $sql = "INSERT INTO MyGuests (firstname, lastname, email)
-    VALUES ('John', 'Doe', 'john@example.com')";
-    // Use exec() because no results are returned
-    $conn->exec($sql);
-    echo "New record created successfully";
-} catch(PDOException $e) {
-    echo $sql . "<br>" . $e->getMessage();
-}
-
-$conn = null;
-?>
-```
-
-**Note:** The `id` column and `reg_date` column do not need values specified, as `id` is
-`AUTO_INCREMENT` and `reg_date` has a default of `CURRENT_TIMESTAMP`.
-
----
-
-## 6. Get Last Inserted ID
-
-> **Source:** <https://www.w3schools.com/php/php_mysql_insert_lastid.asp>
-
-If you perform an INSERT on a table with an AUTO_INCREMENT column, you can retrieve the ID of
-the last inserted row immediately.
-
-### MySQLi Object-Oriented
-
-```php
-<?php
-$servername = "localhost";
-$username = "username";
-$password = "password";
-$dbname = "myDB";
-
-// Create connection
-$conn = new mysqli($servername, $username, $password, $dbname);
-
-// Check connection
-if ($conn->connect_error) {
-    die("Connection failed: " . $conn->connect_error);
-}
-
-$sql = "INSERT INTO MyGuests (firstname, lastname, email)
-VALUES ('John', 'Doe', 'john@example.com')";
-
-if ($conn->query($sql) === TRUE) {
-    $last_id = $conn->insert_id;
-    echo "New record created successfully. Last inserted ID is: " . $last_id;
-} else {
-    echo "Error: " . $sql . "<br>" . $conn->error;
-}
-
-$conn->close();
-?>
-```
-
-### MySQLi Procedural
-
-```php
-<?php
-$servername = "localhost";
-$username = "username";
-$password = "password";
-$dbname = "myDB";
-
-// Create connection
-$conn = mysqli_connect($servername, $username, $password, $dbname);
-
-// Check connection
-if (!$conn) {
-    die("Connection failed: " . mysqli_connect_error());
-}
-
-$sql = "INSERT INTO MyGuests (firstname, lastname, email)
-VALUES ('John', 'Doe', 'john@example.com')";
-
-if (mysqli_query($conn, $sql)) {
-    $last_id = mysqli_insert_id($conn);
-    echo "New record created successfully. Last inserted ID is: " . $last_id;
-} else {
-    echo "Error: " . $sql . "<br>" . mysqli_error($conn);
-}
-
-mysqli_close($conn);
-?>
-```
-
-### PDO
-
-```php
-<?php
-$servername = "localhost";
-$username = "username";
-$password = "password";
-$dbname = "myDBPDO";
-
-try {
-    $conn = new PDO("mysql:host=$servername;dbname=$dbname", $username, $password);
-    // Set the PDO error mode to exception
-    $conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
-    $sql = "INSERT INTO MyGuests (firstname, lastname, email)
-    VALUES ('John', 'Doe', 'john@example.com')";
-    // Use exec() because no results are returned
-    $conn->exec($sql);
-    $last_id = $conn->lastInsertId();
-    echo "New record created successfully. Last inserted ID is: " . $last_id;
-} catch(PDOException $e) {
-    echo $sql . "<br>" . $e->getMessage();
-}
-
-$conn = null;
-?>
-```
-
-**Key methods:**
-
-- MySQLi OO: `$conn->insert_id`
-- MySQLi Procedural: `mysqli_insert_id($conn)`
-- PDO: `$conn->lastInsertId()`
-
----
-
-## 7. Insert Multiple Records
-
-> **Source:** <https://www.w3schools.com/php/php_mysql_insert_multiple.asp>
-
-Multiple SQL statements can be executed with the `multi_query()` method (MySQLi) or by
-grouping values (PDO).
-
-### MySQLi Object-Oriented (multi_query)
-
-```php
-<?php
-$servername = "localhost";
-$username = "username";
-$password = "password";
-$dbname = "myDB";
-
-// Create connection
-$conn = new mysqli($servername, $username, $password, $dbname);
-
-// Check connection
-if ($conn->connect_error) {
-    die("Connection failed: " . $conn->connect_error);
-}
-
-$sql = "INSERT INTO MyGuests (firstname, lastname, email)
-VALUES ('John', 'Doe', 'john@example.com');";
-$sql .= "INSERT INTO MyGuests (firstname, lastname, email)
-VALUES ('Mary', 'Moe', 'mary@example.com');";
-$sql .= "INSERT INTO MyGuests (firstname, lastname, email)
-VALUES ('Julie', 'Dooley', 'julie@example.com')";
-
-if ($conn->multi_query($sql) === TRUE) {
-    echo "New records created successfully";
-} else {
-    echo "Error: " . $sql . "<br>" . $conn->error;
-}
-
-$conn->close();
-?>
-```
-
-### MySQLi Procedural (multi_query)
-
-```php
-<?php
-$servername = "localhost";
-$username = "username";
-$password = "password";
-$dbname = "myDB";
-
-// Create connection
-$conn = mysqli_connect($servername, $username, $password, $dbname);
-
-// Check connection
-if (!$conn) {
-    die("Connection failed: " . mysqli_connect_error());
-}
-
-$sql = "INSERT INTO MyGuests (firstname, lastname, email)
-VALUES ('John', 'Doe', 'john@example.com');";
-$sql .= "INSERT INTO MyGuests (firstname, lastname, email)
-VALUES ('Mary', 'Moe', 'mary@example.com');";
-$sql .= "INSERT INTO MyGuests (firstname, lastname, email)
-VALUES ('Julie', 'Dooley', 'julie@example.com')";
-
-if (mysqli_multi_query($conn, $sql)) {
-    echo "New records created successfully";
-} else {
-    echo "Error: " . $sql . "<br>" . mysqli_error($conn);
-}
-
-mysqli_close($conn);
-?>
-```
-
-### PDO (Using Prepared Statements for Multiple Inserts)
-
-```php
-<?php
-$servername = "localhost";
-$username = "username";
-$password = "password";
-$dbname = "myDBPDO";
-
-try {
-    $conn = new PDO("mysql:host=$servername;dbname=$dbname", $username, $password);
-    // Set the PDO error mode to exception
-    $conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
-
-    // Begin a transaction
-    $conn->beginTransaction();
-
-    // Prepare the statement
-    $stmt = $conn->prepare("INSERT INTO MyGuests (firstname, lastname, email)
-    VALUES (:firstname, :lastname, :email)");
-
-    // Insert row 1
-    $stmt->execute([
-        ':firstname' => 'John',
-        ':lastname' => 'Doe',
-        ':email' => 'john@example.com'
-    ]);
-
-    // Insert row 2
-    $stmt->execute([
-        ':firstname' => 'Mary',
-        ':lastname' => 'Moe',
-        ':email' => 'mary@example.com'
-    ]);
-
-    // Insert row 3
-    $stmt->execute([
-        ':firstname' => 'Julie',
-        ':lastname' => 'Dooley',
-        ':email' => 'julie@example.com'
-    ]);
-
-    // Commit the transaction
-    $conn->commit();
-    echo "New records created successfully";
-} catch(PDOException $e) {
-    // Roll back the transaction if something failed
-    $conn->rollBack();
-    echo "Error: " . $e->getMessage();
-}
-
-$conn = null;
-?>
-```
-
-**Note:** Each SQL statement in the `multi_query()` string must be separated by a **semicolon**.
-The PDO version uses prepared statements and transactions for safer, more reliable batch inserts.
-
----
-
-## 8. Prepared Statements
-
-> **Source:** <https://www.w3schools.com/php/php_mysql_prepared_statements.asp>
-
-Prepared statements are very useful against **SQL injection**. They are the recommended way to
-execute queries with user-supplied data.
-
-### What Are Prepared Statements?
-
-A prepared statement is a feature used to execute the same (or similar) SQL statements
-repeatedly with high efficiency. They work in two stages:
-
-1. **Prepare:** A SQL statement template is created and sent to the database. Certain values
-   are left unspecified, called **parameters** (labeled `?` or `:name`). Example:
-   `INSERT INTO MyGuests VALUES(?, ?, ?)`
-2. **Execute:** The database parses, compiles, and optimizes the SQL statement template, and
-   stores the result without executing it. The application binds specific values to the
-   parameters and executes the statement. The statement can be executed as many times as needed
-   with different values.
-
-### Benefits of Prepared Statements
-
-- **Reduced parsing time:** The query is prepared only once even if it is executed multiple times.
-- **Reduced bandwidth:** Only the parameters need to be sent each time, not the whole query.
-- **Protection against SQL injection:** Parameter values are transmitted later using a different
-  protocol and do not need to be escaped. If the original statement template is not derived from
-  external input, SQL injection cannot occur.
-
-### MySQLi Prepared Statement (with Bound Parameters)
-
-```php
-<?php
-$servername = "localhost";
-$username = "username";
-$password = "password";
-$dbname = "myDB";
-
-// Create connection
-$conn = new mysqli($servername, $username, $password, $dbname);
-
-// Check connection
-if ($conn->connect_error) {
-    die("Connection failed: " . $conn->connect_error);
-}
-
-// Prepare and bind
-$stmt = $conn->prepare("INSERT INTO MyGuests (firstname, lastname, email) VALUES (?, ?, ?)");
-$stmt->bind_param("sss", $firstname, $lastname, $email);
-
-// Set parameters and execute
-$firstname = "John";
-$lastname = "Doe";
-$email = "john@example.com";
-$stmt->execute();
-
-$firstname = "Mary";
-$lastname = "Moe";
-$email = "mary@example.com";
-$stmt->execute();
-
-$firstname = "Julie";
-$lastname = "Dooley";
-$email = "julie@example.com";
-$stmt->execute();
-
-echo "New records created successfully";
-
-$stmt->close();
-$conn->close();
-?>
-```
-
-**The `bind_param()` type string argument:**
-
-| Character | Description |
-|-----------|-------------|
-| `i` | integer |
-| `d` | double |
-| `s` | string |
-| `b` | BLOB (binary large object) |
-
-Each parameter must have a type specified. By telling MySQL what type of data to expect, you
-minimize the risk of SQL injection.
-
-### PDO Prepared Statement (with Named Parameters)
-
-```php
-<?php
-$servername = "localhost";
-$username = "username";
-$password = "password";
-$dbname = "myDBPDO";
-
-try {
-    $conn = new PDO("mysql:host=$servername;dbname=$dbname", $username, $password);
-    // Set the PDO error mode to exception
-    $conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
-
-    // Prepare SQL and bind parameters
-    $stmt = $conn->prepare("INSERT INTO MyGuests (firstname, lastname, email)
-    VALUES (:firstname, :lastname, :email)");
-    $stmt->bindParam(':firstname', $firstname);
-    $stmt->bindParam(':lastname', $lastname);
-    $stmt->bindParam(':email', $email);
-
-    // Insert row 1
-    $firstname = "John";
-    $lastname = "Doe";
-    $email = "john@example.com";
-    $stmt->execute();
-
-    // Insert row 2
-    $firstname = "Mary";
-    $lastname = "Moe";
-    $email = "mary@example.com";
-    $stmt->execute();
-
-    // Insert row 3
-    $firstname = "Julie";
-    $lastname = "Dooley";
-    $email = "julie@example.com";
-    $stmt->execute();
-
-    echo "New records created successfully";
-} catch(PDOException $e) {
-    echo "Error: " . $e->getMessage();
-}
-
-$conn = null;
-?>
-```
-
-**Note:** In PDO, named parameters (`:firstname`) are used rather than `?` positional
-placeholders (though PDO supports both). Named parameters are more readable.
-
----
-
-## 9. Select Data
-
-> **Source:** <https://www.w3schools.com/php/php_mysql_select.asp>
-
-The `SELECT` statement is used to select data from one or more tables.
-
-### SQL Syntax
-
-```sql
-SELECT column_name(s) FROM table_name
-
--- Or select all columns:
-SELECT * FROM table_name
-```
-
-### MySQLi Object-Oriented
-
-```php
-<?php
-$servername = "localhost";
-$username = "username";
-$password = "password";
-$dbname = "myDB";
-
-// Create connection
-$conn = new mysqli($servername, $username, $password, $dbname);
-
-// Check connection
-if ($conn->connect_error) {
-    die("Connection failed: " . $conn->connect_error);
-}
-
-$sql = "SELECT id, firstname, lastname FROM MyGuests";
-$result = $conn->query($sql);
-
-if ($result->num_rows > 0) {
-    // Output data of each row
-    while($row = $result->fetch_assoc()) {
-        echo "id: " . $row["id"] . " - Name: " . $row["firstname"] . " " . $row["lastname"] . "<br>";
-    }
-} else {
-    echo "0 results";
-}
-
-$conn->close();
-?>
-```
-
-### MySQLi Procedural
-
-```php
-<?php
-$servername = "localhost";
-$username = "username";
-$password = "password";
-$dbname = "myDB";
-
-// Create connection
-$conn = mysqli_connect($servername, $username, $password, $dbname);
-
-// Check connection
-if (!$conn) {
-    die("Connection failed: " . mysqli_connect_error());
-}
-
-$sql = "SELECT id, firstname, lastname FROM MyGuests";
-$result = mysqli_query($conn, $sql);
-
-if (mysqli_num_rows($result) > 0) {
-    // Output data of each row
-    while($row = mysqli_fetch_assoc($result)) {
-        echo "id: " . $row["id"] . " - Name: " . $row["firstname"] . " " . $row["lastname"] . "<br>";
-    }
-} else {
-    echo "0 results";
-}
-
-mysqli_close($conn);
-?>
-```
-
-### PDO (with Prepared Statement)
-
-```php
-<?php
-echo "<table style='border: solid 1px black;'>";
-echo "<tr><th>Id</th><th>Firstname</th><th>Lastname</th></tr>";
-
-class TableRows extends RecursiveIteratorIterator {
-    function __construct($it) {
-        parent::__construct($it, self::LEAVES_ONLY);
-    }
-
-    function current() {
-        return "<td style='width:150px;border:1px solid black;'>" . parent::current() . "</td>";
-    }
-
-    function beginChildren() {
-        echo "<tr>";
-    }
-
-    function endChildren() {
-        echo "</tr>" . "\n";
-    }
-}
-
-$servername = "localhost";
-$username = "username";
-$password = "password";
-$dbname = "myDBPDO";
-
-try {
-    $conn = new PDO("mysql:host=$servername;dbname=$dbname", $username, $password);
-    $conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
-    $stmt = $conn->prepare("SELECT id, firstname, lastname FROM MyGuests");
-    $stmt->execute();
-
-    // Set the resulting array to associative
-    $result = $stmt->setFetchMode(PDO::FETCH_ASSOC);
-    foreach(new TableRows(new RecursiveArrayIterator($stmt->fetchAll())) as $k => $v) {
-        echo $v;
-    }
-} catch(PDOException $e) {
-    echo "Error: " . $e->getMessage();
-}
-
-$conn = null;
-echo "</table>";
-?>
-```
-
-**Simpler PDO Select (common pattern):**
-
-```php
-<?php
-$servername = "localhost";
-$username = "username";
-$password = "password";
-$dbname = "myDBPDO";
-
-try {
-    $conn = new PDO("mysql:host=$servername;dbname=$dbname", $username, $password);
-    $conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
-
-    $stmt = $conn->prepare("SELECT id, firstname, lastname FROM MyGuests");
-    $stmt->execute();
-
-    // Fetch all results as an associative array
-    $results = $stmt->fetchAll(PDO::FETCH_ASSOC);
-
-    foreach ($results as $row) {
-        echo "id: " . $row["id"] . " - Name: " . $row["firstname"] . " " . $row["lastname"] . "<br>";
-    }
-} catch(PDOException $e) {
-    echo "Error: " . $e->getMessage();
-}
-
-$conn = null;
-?>
-```
-
-**Key methods:**
-
-- `$result->num_rows` -- returns the number of rows in the result set (MySQLi OO).
-- `$result->fetch_assoc()` -- fetches a result row as an associative array (MySQLi OO).
-- `$stmt->fetchAll(PDO::FETCH_ASSOC)` -- returns an array of all rows (PDO).
-
----
-
-## 10. Select with WHERE
-
-> **Source:** <https://www.w3schools.com/php/php_mysql_select_where.asp>
-
-The `WHERE` clause is used to filter records and extract only those that fulfill specified
-conditions.
-
-### SQL Syntax
-
-```sql
-SELECT column_name(s) FROM table_name WHERE column_name operator value
-```
-
-### MySQLi Object-Oriented
-
-```php
-<?php
-$servername = "localhost";
-$username = "username";
-$password = "password";
-$dbname = "myDB";
-
-// Create connection
-$conn = new mysqli($servername, $username, $password, $dbname);
-
-// Check connection
-if ($conn->connect_error) {
-    die("Connection failed: " . $conn->connect_error);
-}
-
-$sql = "SELECT id, firstname, lastname FROM MyGuests WHERE lastname='Doe'";
-$result = $conn->query($sql);
-
-if ($result->num_rows > 0) {
-    // Output data of each row
-    while($row = $result->fetch_assoc()) {
-        echo "id: " . $row["id"] . " - Name: " . $row["firstname"] . " " . $row["lastname"] . "<br>";
-    }
-} else {
-    echo "0 results";
-}
-
-$conn->close();
-?>
-```
-
-### MySQLi Procedural
-
-```php
-<?php
-$servername = "localhost";
-$username = "username";
-$password = "password";
-$dbname = "myDB";
-
-// Create connection
-$conn = mysqli_connect($servername, $username, $password, $dbname);
-
-// Check connection
-if (!$conn) {
-    die("Connection failed: " . mysqli_connect_error());
-}
-
-$sql = "SELECT id, firstname, lastname FROM MyGuests WHERE lastname='Doe'";
-$result = mysqli_query($conn, $sql);
-
-if (mysqli_num_rows($result) > 0) {
-    while($row = mysqli_fetch_assoc($result)) {
-        echo "id: " . $row["id"] . " - Name: " . $row["firstname"] . " " . $row["lastname"] . "<br>";
-    }
-} else {
-    echo "0 results";
-}
-
-mysqli_close($conn);
-?>
-```
-
-### PDO (with Prepared Statement -- Recommended)
-
-```php
-<?php
-$servername = "localhost";
-$username = "username";
-$password = "password";
-$dbname = "myDBPDO";
-
-try {
-    $conn = new PDO("mysql:host=$servername;dbname=$dbname", $username, $password);
-    $conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
-
-    $stmt = $conn->prepare("SELECT id, firstname, lastname FROM MyGuests WHERE lastname = :lastname");
-    $stmt->bindParam(':lastname', $lastname);
-
-    $lastname = "Doe";
-    $stmt->execute();
-
-    $results = $stmt->fetchAll(PDO::FETCH_ASSOC);
-    foreach ($results as $row) {
-        echo "id: " . $row["id"] . " - Name: " . $row["firstname"] . " " . $row["lastname"] . "<br>";
-    }
-} catch(PDOException $e) {
-    echo "Error: " . $e->getMessage();
-}
-
-$conn = null;
-?>
-```
-
-**Common WHERE operators:**
-
-| Operator | Description |
-|----------|-------------|
-| `=` | Equal |
-| `<>` or `!=` | Not equal |
-| `>` | Greater than |
-| `<` | Less than |
-| `>=` | Greater than or equal |
-| `<=` | Less than or equal |
-| `BETWEEN` | Between an inclusive range |
-| `LIKE` | Search for a pattern |
-| `IN` | To specify multiple possible values for a column |
-
-**Important:** Always use prepared statements with bound parameters when using user-supplied
-values in WHERE clauses to prevent SQL injection.
-
----
-
-## 11. Select with ORDER BY
-
-> **Source:** <https://www.w3schools.com/php/php_mysql_select_orderby.asp>
-
-The `ORDER BY` clause is used to sort the result-set in ascending or descending order. By
-default, it sorts in **ascending** order. Use the `DESC` keyword to sort in descending order.
-
-### SQL Syntax
-
-```sql
-SELECT column_name(s) FROM table_name ORDER BY column_name ASC|DESC
-```
-
-### MySQLi Object-Oriented
-
-```php
-<?php
-$servername = "localhost";
-$username = "username";
-$password = "password";
-$dbname = "myDB";
-
-// Create connection
-$conn = new mysqli($servername, $username, $password, $dbname);
-
-// Check connection
-if ($conn->connect_error) {
-    die("Connection failed: " . $conn->connect_error);
-}
-
-$sql = "SELECT id, firstname, lastname FROM MyGuests ORDER BY lastname";
-$result = $conn->query($sql);
-
-if ($result->num_rows > 0) {
-    while($row = $result->fetch_assoc()) {
-        echo "id: " . $row["id"] . " - Name: " . $row["firstname"] . " " . $row["lastname"] . "<br>";
-    }
-} else {
-    echo "0 results";
-}
-
-$conn->close();
-?>
-```
-
-### Descending Order Example
-
-```php
-$sql = "SELECT id, firstname, lastname FROM MyGuests ORDER BY lastname DESC";
-```
-
-### Multiple Column Sorting
-
-You can order by more than one column. When ordering by multiple columns, the second column is
-only used when the first column values are the same:
-
-```sql
-SELECT * FROM MyGuests ORDER BY lastname ASC, firstname ASC
-```
-
-### MySQLi Procedural
-
-```php
-<?php
-$servername = "localhost";
-$username = "username";
-$password = "password";
-$dbname = "myDB";
-
-// Create connection
-$conn = mysqli_connect($servername, $username, $password, $dbname);
-
-// Check connection
-if (!$conn) {
-    die("Connection failed: " . mysqli_connect_error());
-}
-
-$sql = "SELECT id, firstname, lastname FROM MyGuests ORDER BY lastname";
-$result = mysqli_query($conn, $sql);
-
-if (mysqli_num_rows($result) > 0) {
-    while($row = mysqli_fetch_assoc($result)) {
-        echo "id: " . $row["id"] . " - Name: " . $row["firstname"] . " " . $row["lastname"] . "<br>";
-    }
-} else {
-    echo "0 results";
-}
-
-mysqli_close($conn);
-?>
-```
-
-### PDO
-
-```php
-<?php
-$servername = "localhost";
-$username = "username";
-$password = "password";
-$dbname = "myDBPDO";
-
-try {
-    $conn = new PDO("mysql:host=$servername;dbname=$dbname", $username, $password);
-    $conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
-
-    $stmt = $conn->prepare("SELECT id, firstname, lastname FROM MyGuests ORDER BY lastname");
-    $stmt->execute();
-
-    $results = $stmt->fetchAll(PDO::FETCH_ASSOC);
-    foreach ($results as $row) {
-        echo "id: " . $row["id"] . " - Name: " . $row["firstname"] . " " . $row["lastname"] . "<br>";
-    }
-} catch(PDOException $e) {
-    echo "Error: " . $e->getMessage();
-}
-
-$conn = null;
-?>
-```
-
----
-
-## 12. Delete Data
-
-> **Source:** <https://www.w3schools.com/php/php_mysql_delete.asp>
-
-The `DELETE` statement is used to delete records from a table.
-
-### SQL Syntax
-
-```sql
-DELETE FROM table_name WHERE some_column = some_value
-```
-
-**Important:** The `WHERE` clause specifies which records should be deleted. If you omit the
-WHERE clause, **ALL records will be deleted!**
-
-### MySQLi Object-Oriented
-
-```php
-<?php
-$servername = "localhost";
-$username = "username";
-$password = "password";
-$dbname = "myDB";
-
-// Create connection
-$conn = new mysqli($servername, $username, $password, $dbname);
-
-// Check connection
-if ($conn->connect_error) {
-    die("Connection failed: " . $conn->connect_error);
-}
-
-// SQL to delete a record
-$sql = "DELETE FROM MyGuests WHERE id=3";
-
-if ($conn->query($sql) === TRUE) {
-    echo "Record deleted successfully";
-} else {
-    echo "Error deleting record: " . $conn->error;
-}
-
-$conn->close();
-?>
-```
-
-### MySQLi Procedural
-
-```php
-<?php
-$servername = "localhost";
-$username = "username";
-$password = "password";
-$dbname = "myDB";
-
-// Create connection
-$conn = mysqli_connect($servername, $username, $password, $dbname);
-
-// Check connection
-if (!$conn) {
-    die("Connection failed: " . mysqli_connect_error());
-}
-
-// SQL to delete a record
-$sql = "DELETE FROM MyGuests WHERE id=3";
-
-if (mysqli_query($conn, $sql)) {
-    echo "Record deleted successfully";
-} else {
-    echo "Error deleting record: " . mysqli_error($conn);
-}
-
-mysqli_close($conn);
-?>
-```
-
-### PDO (with Prepared Statement)
-
-```php
-<?php
-$servername = "localhost";
-$username = "username";
-$password = "password";
-$dbname = "myDBPDO";
-
-try {
-    $conn = new PDO("mysql:host=$servername;dbname=$dbname", $username, $password);
-    $conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
-
-    // Prepare the delete statement
-    $stmt = $conn->prepare("DELETE FROM MyGuests WHERE id = :id");
-    $stmt->bindParam(':id', $id);
-
-    $id = 3;
-    $stmt->execute();
-
-    echo "Record deleted successfully";
-} catch(PDOException $e) {
-    echo "Error: " . $e->getMessage();
-}
-
-$conn = null;
-?>
-```
-
-**Warning:** Be very careful when deleting records. You cannot undo this statement!
-
----
-
-## 13. Update Data
-
-> **Source:** <https://www.w3schools.com/php/php_mysql_update.asp>
-
-The `UPDATE` statement is used to update existing records in a table.
-
-### SQL Syntax
-
-```sql
-UPDATE table_name SET column1=value1, column2=value2, ... WHERE some_column=some_value
-```
-
-**Important:** The `WHERE` clause specifies which record(s) should be updated. If you omit the
-WHERE clause, **ALL records will be updated!**
-
-### MySQLi Object-Oriented
-
-```php
-<?php
-$servername = "localhost";
-$username = "username";
-$password = "password";
-$dbname = "myDB";
-
-// Create connection
-$conn = new mysqli($servername, $username, $password, $dbname);
-
-// Check connection
-if ($conn->connect_error) {
-    die("Connection failed: " . $conn->connect_error);
-}
-
-$sql = "UPDATE MyGuests SET lastname='Doe' WHERE id=2";
-
-if ($conn->query($sql) === TRUE) {
-    echo "Record updated successfully";
-} else {
-    echo "Error updating record: " . $conn->error;
-}
-
-$conn->close();
-?>
-```
-
-### MySQLi Procedural
-
-```php
-<?php
-$servername = "localhost";
-$username = "username";
-$password = "password";
-$dbname = "myDB";
-
-// Create connection
-$conn = mysqli_connect($servername, $username, $password, $dbname);
-
-// Check connection
-if (!$conn) {
-    die("Connection failed: " . mysqli_connect_error());
-}
-
-$sql = "UPDATE MyGuests SET lastname='Doe' WHERE id=2";
-
-if (mysqli_query($conn, $sql)) {
-    echo "Record updated successfully";
-} else {
-    echo "Error updating record: " . mysqli_error($conn);
-}
-
-mysqli_close($conn);
-?>
-```
-
-### PDO (with Prepared Statement)
-
-```php
-<?php
-$servername = "localhost";
-$username = "username";
-$password = "password";
-$dbname = "myDBPDO";
-
-try {
-    $conn = new PDO("mysql:host=$servername;dbname=$dbname", $username, $password);
-    $conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
-
-    $stmt = $conn->prepare("UPDATE MyGuests SET lastname = :lastname WHERE id = :id");
-    $stmt->bindParam(':lastname', $lastname);
-    $stmt->bindParam(':id', $id);
-
-    $lastname = "Doe";
-    $id = 2;
-    $stmt->execute();
-
-    echo "Record updated successfully";
-} catch(PDOException $e) {
-    echo "Error: " . $e->getMessage();
-}
-
-$conn = null;
-?>
-```
-
-**Note:** The `$conn->query($sql)` returns `TRUE` on success. To check how many rows were
-affected, use `$conn->affected_rows` (MySQLi) or `$stmt->rowCount()` (PDO).
-
----
-
-## 14. Select with LIMIT
-
-> **Source:** <https://www.w3schools.com/php/php_mysql_select_limit.asp>
-
-The `LIMIT` clause is used to specify the number of records to return. This is useful for
-paginating results or displaying a fixed number of records per page.
-
-### SQL Syntax
-
-```sql
-SELECT column_name(s) FROM table_name LIMIT number
-
--- With offset (for pagination):
-SELECT column_name(s) FROM table_name LIMIT offset, count
-```
-
-**Note:** The first row starts at offset `0` (not `1`).
-
-### MySQLi Object-Oriented
-
-```php
-<?php
-$servername = "localhost";
-$username = "username";
-$password = "password";
-$dbname = "myDB";
-
-// Create connection
-$conn = new mysqli($servername, $username, $password, $dbname);
-
-// Check connection
-if ($conn->connect_error) {
-    die("Connection failed: " . $conn->connect_error);
-}
-
-$sql = "SELECT * FROM Orders LIMIT 30";
-$result = $conn->query($sql);
-
-if ($result->num_rows > 0) {
-    while($row = $result->fetch_assoc()) {
-        echo "id: " . $row["id"] . "<br>";
-    }
-} else {
-    echo "0 results";
-}
-
-$conn->close();
-?>
-```
-
-### Using LIMIT with an Offset (Pagination)
-
-The `LIMIT` clause can take two values: `LIMIT offset, count`.
-
-- The **offset** specifies where to start returning records (first record is 0).
-- The **count** specifies the maximum number of records to return.
-
-```sql
--- Return records 16-30 (start from offset 15, return 15 records):
-SELECT * FROM Orders LIMIT 15, 15
-```
-
-### Pagination Example
-
-```php
-<?php
-$servername = "localhost";
-$username = "username";
-$password = "password";
-$dbname = "myDB";
-
-// Create connection
-$conn = new mysqli($servername, $username, $password, $dbname);
-
-// Check connection
-if ($conn->connect_error) {
-    die("Connection failed: " . $conn->connect_error);
-}
-
-// Number of results per page
-$results_per_page = 10;
-
-// Current page (from URL parameter)
-$page = isset($_GET['page']) ? (int)$_GET['page'] : 1;
-
-// Calculate the offset
-$offset = ($page - 1) * $results_per_page;
-
-// Select records with LIMIT and OFFSET
-$sql = "SELECT * FROM Orders LIMIT $offset, $results_per_page";
-$result = $conn->query($sql);
-
-if ($result->num_rows > 0) {
-    while($row = $result->fetch_assoc()) {
-        echo "id: " . $row["id"] . "<br>";
-    }
-} else {
-    echo "0 results";
-}
-
-$conn->close();
-?>
-```
-
-### PDO with LIMIT (Prepared Statement)
-
-```php
-<?php
-$servername = "localhost";
-$username = "username";
-$password = "password";
-$dbname = "myDBPDO";
-
-try {
-    $conn = new PDO("mysql:host=$servername;dbname=$dbname", $username, $password);
-    $conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
-
-    $limit = 10;
-    $offset = 0;
-
-    $stmt = $conn->prepare("SELECT * FROM Orders LIMIT :offset, :limit");
-    $stmt->bindParam(':offset', $offset, PDO::PARAM_INT);
-    $stmt->bindParam(':limit', $limit, PDO::PARAM_INT);
-    $stmt->execute();
-
-    $results = $stmt->fetchAll(PDO::FETCH_ASSOC);
-    foreach ($results as $row) {
-        echo "id: " . $row["id"] . "<br>";
-    }
-} catch(PDOException $e) {
-    echo "Error: " . $e->getMessage();
-}
-
-$conn = null;
-?>
-```
-
-**Important:** When using LIMIT with prepared statements in PDO, you must explicitly bind
-the values as integers using `PDO::PARAM_INT`, otherwise PDO treats them as strings and wraps
-them in quotes, which causes a SQL error.
-
----
-
-## Quick Reference Summary
-
-### Connection Patterns
-
-| Method | Connect | Close |
-|--------|---------|-------|
-| MySQLi OO | `new mysqli($host, $user, $pass, $db)` | `$conn->close()` |
-| MySQLi Proc | `mysqli_connect($host, $user, $pass, $db)` | `mysqli_close($conn)` |
-| PDO | `new PDO("mysql:host=$host;dbname=$db", $user, $pass)` | `$conn = null` |
-
-### CRUD Operations
-
-| Operation | SQL Command |
-|-----------|-------------|
-| **Create** | `INSERT INTO table (col1, col2) VALUES (val1, val2)` |
-| **Read** | `SELECT col1, col2 FROM table WHERE condition` |
-| **Update** | `UPDATE table SET col1=val1 WHERE condition` |
-| **Delete** | `DELETE FROM table WHERE condition` |
-
-### Query Modifiers
-
-| Modifier | Purpose | Example |
-|----------|---------|---------|
-| `WHERE` | Filter rows | `WHERE id = 1` |
-| `ORDER BY` | Sort results | `ORDER BY name ASC` |
-| `LIMIT` | Restrict row count | `LIMIT 10` |
-| `LIMIT offset, count` | Pagination | `LIMIT 20, 10` |
-
-### MySQLi bind_param Types
-
-| Type | Character |
-|------|-----------|
-| Integer | `i` |
-| Double | `d` |
-| String | `s` |
-| BLOB | `b` |
-
-### Security Best Practices
-
-1. **Always** use prepared statements with bound parameters for user-supplied data.
-2. **Never** insert user input directly into SQL query strings.
-3. Use `PDO::ERRMODE_EXCEPTION` to handle errors properly.
-4. Validate and sanitize all user input before processing.
-5. Use the principle of least privilege for database user accounts.
-6. Store database credentials outside the web root and use environment variables when possible.
-
----
-
-*This reference was consolidated from W3Schools PHP MySQL tutorial pages.*
-*Source URLs are listed at the beginning of each section.*
diff --git a/skills/create-web-form/references/progressive-web-app.md b/skills/create-web-form/references/progressive-web-app.md
deleted file mode 100644
index defb3bafa..000000000
--- a/skills/create-web-form/references/progressive-web-app.md
+++ /dev/null
@@ -1,211 +0,0 @@
-# Progressive Web App Reference
-
----
-
-## Overview: What Are Progressive Web Apps?
-
-> Source: <https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps>
-
-A **Progressive Web App (PWA)** is an app built using web platform technologies that provides a user experience comparable to a platform-specific (native) app. Key characteristics include:
-
-- Runs on multiple platforms and devices from a single codebase
-- Can be installed on devices like native apps
-- Operates offline and in the background
-- Integrates with device features and other installed apps
-- Appears as a permanent feature users can launch directly from the OS
-
-### Main Guides
-
-| Guide | Description |
-|-------|-------------|
-| **What is a Progressive Web App?** | Comparison with traditional websites and platform-specific apps; introduction to main PWA features |
-| **Making PWAs Installable** | Requirements for installability, device installation process, customizing the install experience |
-| **Installing and Uninstalling Web Apps** | How users install and uninstall PWAs on their devices |
-| **Offline and Background Operation** | Technologies enabling offline functionality, intermittent network connectivity management, background task execution |
-| **Caching** | APIs for local resource caching, common caching strategies for offline functionality |
-| **Best Practices for PWAs** | Cross-browser and device adaptation, accessibility, performance optimization, OS integration |
-
-### How-To Implementation Features
-
-| Feature | Purpose |
-|---------|---------|
-| Create a standalone app | Launch in a dedicated window instead of a browser tab |
-| Define app icons | Customize icons for the installed PWA |
-| Customize app colors | Set background and theme colors |
-| Display badges | Show badges on the app icon (e.g., notification counts) |
-| Expose app shortcuts | Access common actions from the OS shortcut menu |
-| Share data between apps | Use OS app-sharing mechanisms |
-| Trigger installation | Provide custom UI to invite user installation |
-| Associate files | Connect file types to the PWA for handling |
-
-### Core Technologies and APIs
-
-#### Web App Manifest
-
-- Defines PWA metadata and appearance
-- Customizes deep OS integration (name, icons, display mode, colors, etc.)
-
-#### Service Worker APIs
-
-**Communication:**
-
-- `Client.postMessage()` -- Service worker to PWA messaging
-- Broadcast Channel API -- Two-way communication between service worker and client
-
-**Offline Operation:**
-
-- `Cache` API -- Persistent HTTP response storage
-- `Clients` -- Document access control for service-worker-controlled documents
-- `FetchEvent` -- HTTP request interception and caching
-
-**Background Tasks:**
-
-- Background Synchronization API -- Defer tasks until a stable network connection
-- Web Periodic Background Synchronization API -- Register periodic tasks with network connectivity
-- Background Fetch API -- Manage large, long-duration downloads
-
-#### Other Essential Web APIs
-
-| API | Purpose |
-|-----|---------|
-| **IndexedDB** | Client-side storage for structured data and files |
-| **Badging API** | Application icon badge notifications |
-| **Notifications API** | OS-level notification display |
-| **Web Share API** | Share content to user-selected apps |
-| **Window Controls Overlay API** | Desktop PWA window customization (hide title bar, display app over full window) |
-
-### Essential PWA Checklist
-
-- Installable and standalone operation
-- Offline functionality via service workers
-- Caching strategies implemented
-- Web app manifest configured
-- App icons and colors defined
-- Accessible and performant
-- Cross-browser compatible
-- Secure (HTTPS required)
-
----
-
-## Tutorials
-
-> Source: <https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps/Tutorials>
-
-These tutorials provide structured, step-by-step learning paths for building PWAs from start to finish.
-
-### Tutorial 1: CycleTracker -- Creating Your First PWA
-
-**Level:** Novice
-
-A menstrual cycle tracking app that walks through the complete process of turning a web app into a PWA.
-
-**Sub-modules:**
-
-1. **Base HTML and CSS** -- Build the foundational web app structure
-2. **Secure connection** -- Set up a testing environment with HTTPS
-3. **JavaScript functionality** -- Add interactivity and application logic
-4. **Manifest and iconography** -- Create and inspect a web app manifest; define icons
-5. **Offline support using service workers** -- Add service workers and manage stale caches
-
-**Topics Covered:**
-
-- HTML, CSS, and JavaScript fundamentals for creating a functional web app
-- Setting up a testing environment
-- Upgrading a web app into a PWA
-- Manifest development: creating and inspecting a web app manifest
-- Service workers: adding service workers to the application
-- Cache management: using service workers to delete stale caches
-
-### Tutorial 2: js13kGames -- Deep Dive into PWA
-
-**Level:** Intermediate
-
-A game information listing app (from the js13kGames 2017 competition) that explores advanced PWA features.
-
-**Sub-modules:**
-
-1. **PWA structure** -- Understand app architecture and organization
-2. **Offline support using service workers** -- Implement offline functionality
-3. **Making PWAs installable** -- Meet installability requirements
-4. **Using Notifications and Push APIs** -- Implement push notifications
-5. **Progressive loading** -- Optimize loading performance
-
-**Topics Covered:**
-
-- PWA basics and core concepts
-- Notifications and Push APIs: implementing notifications and push functionality
-- App performance: optimizing PWA performance
-- Advanced PWA features beyond the basics
-
----
-
-## API and Manifest Reference
-
-> Source: <https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps/Reference>
-
-### Web App Manifest Members
-
-The web app manifest describes PWA characteristics, customizes its appearance, and enables deeper OS integration. The following members can be defined in the manifest JSON file:
-
-| Member | Status | Description |
-|--------|--------|-------------|
-| `name` | Standard | Full name of the application |
-| `short_name` | Standard | Short name for limited-space contexts |
-| `description` | Standard | Description of the application |
-| `start_url` | Standard | URL that loads when the app is launched |
-| `scope` | Standard | Navigation scope of the PWA |
-| `display` | Standard | Display mode (fullscreen, standalone, minimal-ui, browser) |
-| `display_override` | Experimental | Override display mode preferences |
-| `orientation` | Standard | Default orientation for the app |
-| `icons` | Standard | Array of icon objects for various contexts |
-| `screenshots` | Standard | Screenshots for app stores and install UI |
-| `background_color` | Standard | Background color for the splash screen |
-| `theme_color` | Standard | Default theme color for the application |
-| `categories` | Standard | Expected application categories |
-| `id` | Standard | Unique identifier for the application |
-| `shortcuts` | Standard | Quick-access shortcuts to key tasks |
-| `file_handlers` | Experimental | File types the app can handle |
-| `launch_handler` | Experimental | Control how the app is launched |
-| `protocol_handlers` | Experimental | URL protocols the app can handle |
-| `share_target` | Experimental | Define how the app receives shared data |
-| `scope_extensions` | Experimental | Extend the navigation scope |
-| `note_taking` | Experimental | Note-taking app integration |
-| `related_applications` | Experimental | Related native applications |
-| `prefer_related_applications` | Experimental | Prefer native app over PWA |
-| `serviceworker` | Experimental / Non-standard | Service worker registration info |
-
-### Service Worker APIs
-
-#### Communication with the App
-
-- **`Client.postMessage()`** -- Send messages from the service worker to client pages
-- **Broadcast Channel API** -- Create a two-way communication channel between the service worker and the client PWA
-
-#### Offline Operation
-
-- **`Cache`** -- Persistent storage of HTTP responses for reuse when offline
-- **`Clients`** -- Interface to access service-worker-controlled documents
-- **`FetchEvent`** -- Intercept HTTP requests; enables caching or proxying responses for offline support
-
-#### Background Operation
-
-- **Background Synchronization API** -- Defer tasks until the network connection is stable
-- **Web Periodic Background Synchronization API** -- Register periodic tasks that run with network connectivity
-- **Background Fetch API** -- Manage long-duration downloads such as video and audio files
-
-### Other Web APIs for PWAs
-
-| API | Purpose |
-|-----|---------|
-| **IndexedDB** | Client-side storage for structured data and files |
-| **Badging API** | Set application icon badges for notification indicators |
-| **Notifications API** | Display OS-level system notifications |
-| **Web Share API** | Share text, links, files, and content to user-selected apps |
-| **Window Controls Overlay API** | Hide the title bar and display the app over the full window area (desktop PWAs) |
-
-### Key MDN Reference Paths
-
-- **Main PWA Index:** `/en-US/docs/Web/Progressive_web_apps`
-- **Service Worker API:** `/en-US/docs/Web/API/Service_Worker_API`
-- **Web APIs Overview:** `/en-US/docs/Web/API`
-- **Web App Manifest:** `/en-US/docs/Web/Progressive_web_apps/Manifest`
diff --git a/skills/create-web-form/references/python-as-web-framework.md b/skills/create-web-form/references/python-as-web-framework.md
deleted file mode 100644
index 268321687..000000000
--- a/skills/create-web-form/references/python-as-web-framework.md
+++ /dev/null
@@ -1,567 +0,0 @@
-# Python as Web Framework Reference
-
-> Source: <https://www.topcoder.com/thrive/articles/python-as-web-framework-the-flask-basics>
-
-This reference covers using Python as a web framework through Flask, including setup, routing, templates, request and response handling, form processing, and building practical web applications.
-
----
-
-## Overview
-
-Flask is a lightweight **WSGI** (Web Server Gateway Interface) web framework written in Python. It is classified as a micro-framework because it does not require particular tools or libraries. Flask has no database abstraction layer, form validation, or any other components where pre-existing third-party libraries provide common functions.
-
-### Why Flask?
-
-- **Lightweight and modular** -- only includes what you need
-- **Easy to learn** -- minimal boilerplate to get started
-- **Flexible** -- no enforced project structure or dependencies
-- **Extensible** -- rich ecosystem of extensions for added functionality
-- **Well-documented** with an active community
-- **Built-in development server** and debugger
-
----
-
-## Installation and Setup
-
-### Prerequisites
-
-- Python 3.7+
-- pip (Python package manager)
-
-### Install Flask
-
-```bash
-pip install flask
-```
-
-### Verify Installation
-
-```python
-import flask
-print(flask.__version__)
-```
-
-### Virtual Environment (Recommended)
-
-```bash
-# Create a virtual environment
-python -m venv venv
-
-# Activate (Linux/macOS)
-source venv/bin/activate
-
-# Activate (Windows)
-venv\Scripts\activate
-
-# Install Flask in the virtual environment
-pip install flask
-```
-
----
-
-## Creating a Basic Flask Application
-
-### Hello World
-
-```python
-from flask import Flask
-
-app = Flask(__name__)
-
-@app.route('/')
-def hello_world():
-    return '<h1>Hello, World!</h1>'
-
-if __name__ == '__main__':
-    app.run(debug=True)
-```
-
-### Understanding the Code
-
-| Component | Purpose |
-|-----------|---------|
-| `Flask(__name__)` | Creates a Flask application instance; `__name__` helps Flask locate resources |
-| `@app.route('/')` | A decorator that maps a URL path to a Python function |
-| `app.run(debug=True)` | Starts the development server with auto-reload and debugger |
-
-### Running the Application
-
-```bash
-python app.py
-```
-
-The application runs at `http://127.0.0.1:5000/` by default.
-
-### Debug Mode
-
-Debug mode provides:
-
-- **Auto-reloader** -- restarts the server when code changes
-- **Interactive debugger** -- shows a traceback in the browser with an interactive Python console
-- **Detailed error pages** -- shows full error details instead of generic "500 Internal Server Error"
-
-**Warning:** Never enable debug mode in production -- it allows arbitrary code execution.
-
----
-
-## Routing
-
-### Basic Routes
-
-```python
-@app.route('/')
-def index():
-    return 'Index Page'
-
-@app.route('/hello')
-def hello():
-    return 'Hello, World!'
-
-@app.route('/about')
-def about():
-    return 'About Page'
-```
-
-### Variable Rules (Dynamic URLs)
-
-```python
-@app.route('/user/<username>')
-def show_user_profile(username):
-    return f'User: {username}'
-
-@app.route('/post/<int:post_id>')
-def show_post(post_id):
-    return f'Post {post_id}'
-
-@app.route('/path/<path:subpath>')
-def show_subpath(subpath):
-    return f'Subpath: {subpath}'
-```
-
-### URL Converters
-
-| Converter | Description | Example |
-|-----------|-------------|---------|
-| `string` | Accepts any text without slashes (default) | `/user/<username>` |
-| `int` | Accepts positive integers | `/post/<int:post_id>` |
-| `float` | Accepts positive floating-point values | `/price/<float:amount>` |
-| `path` | Accepts text including slashes | `/file/<path:filepath>` |
-| `uuid` | Accepts UUID strings | `/item/<uuid:item_id>` |
-
-### URL Building with `url_for()`
-
-```python
-from flask import url_for
-
-@app.route('/')
-def index():
-    return 'Index'
-
-@app.route('/login')
-def login():
-    return 'Login'
-
-@app.route('/user/<username>')
-def profile(username):
-    return f'{username} profile'
-
-# Usage:
-with app.test_request_context():
-    print(url_for('index'))                  # /
-    print(url_for('login'))                  # /login
-    print(url_for('profile', username='John'))  # /user/John
-```
-
-### HTTP Methods
-
-```python
-from flask import request
-
-@app.route('/login', methods=['GET', 'POST'])
-def login():
-    if request.method == 'POST':
-        return do_the_login()
-    else:
-        return show_the_login_form()
-```
-
----
-
-## Templates with Jinja2
-
-Flask uses the Jinja2 template engine for rendering HTML.
-
-### Rendering Templates
-
-```python
-from flask import render_template
-
-@app.route('/hello/')
-@app.route('/hello/<name>')
-def hello(name=None):
-    return render_template('hello.html', name=name)
-```
-
-### Template File (`templates/hello.html`)
-
-```html
-<!DOCTYPE html>
-<html>
-<head>
-    <title>Hello</title>
-</head>
-<body>
-    {% if name %}
-        <h1>Hello, {{ name }}!</h1>
-    {% else %}
-        <h1>Hello, World!</h1>
-    {% endif %}
-</body>
-</html>
-```
-
-### Template Syntax
-
-| Syntax | Purpose | Example |
-|--------|---------|---------|
-| `{{ ... }}` | Expression output | `{{ user.name }}` |
-| `{% ... %}` | Statement (control flow) | `{% if user %}...{% endif %}` |
-| `{# ... #}` | Comment (not rendered) | `{# This is a comment #}` |
-
-### Template Inheritance
-
-**Base template (`base.html`):**
-
-```html
-<!DOCTYPE html>
-<html>
-<head>
-    <title>{% block title %}Default Title{% endblock %}</title>
-</head>
-<body>
-    <header>
-        {% block header %}
-            <h1>My Website</h1>
-        {% endblock %}
-    </header>
-
-    <main>
-        {% block content %}{% endblock %}
-    </main>
-
-    <footer>
-        {% block footer %}
-            <p>Footer content</p>
-        {% endblock %}
-    </footer>
-</body>
-</html>
-```
-
-**Child template (`home.html`):**
-
-```html
-{% extends "base.html" %}
-
-{% block title %}Home Page{% endblock %}
-
-{% block content %}
-    <h2>Welcome!</h2>
-    <p>This is the home page.</p>
-{% endblock %}
-```
-
-### Loops and Conditionals
-
-```html
-<!-- For loop -->
-<ul>
-{% for item in navigation %}
-    <li><a href="{{ item.href }}">{{ item.caption }}</a></li>
-{% endfor %}
-</ul>
-
-<!-- Conditionals -->
-{% if users %}
-    <ul>
-    {% for user in users %}
-        <li>{{ user.username }}</li>
-    {% endfor %}
-    </ul>
-{% else %}
-    <p>No users found.</p>
-{% endif %}
-```
-
----
-
-## Request and Response
-
-### The Request Object
-
-```python
-from flask import request
-
-@app.route('/login', methods=['POST', 'GET'])
-def login():
-    error = None
-    if request.method == 'POST':
-        username = request.form['username']
-        password = request.form['password']
-
-        if valid_login(username, password):
-            return log_the_user_in(username)
-        else:
-            error = 'Invalid username/password'
-
-    return render_template('login.html', error=error)
-```
-
-### Request Object Attributes
-
-| Attribute | Description |
-|-----------|-------------|
-| `request.method` | The HTTP method (GET, POST, etc.) |
-| `request.form` | Form data from POST/PUT requests |
-| `request.args` | URL query string parameters |
-| `request.files` | Uploaded files |
-| `request.cookies` | Request cookies |
-| `request.headers` | Request headers |
-| `request.json` | Parsed JSON data (if content type is JSON) |
-| `request.data` | Raw request data as bytes |
-| `request.url` | The full URL of the request |
-| `request.path` | The URL path (without query string) |
-
-### Query String Parameters
-
-```python
-# URL: /search?q=flask&page=2
-@app.route('/search')
-def search():
-    query = request.args.get('q', '')
-    page = request.args.get('page', 1, type=int)
-    return f'Searching for: {query}, Page: {page}'
-```
-
-### Responses
-
-```python
-from flask import make_response, jsonify
-
-# Simple string response
-@app.route('/')
-def index():
-    return 'Hello World'
-
-# Response with status code
-@app.route('/not-found')
-def not_found():
-    return 'Page Not Found', 404
-
-# Custom response object
-@app.route('/custom')
-def custom():
-    response = make_response('Custom Response')
-    response.headers['X-Custom-Header'] = 'custom-value'
-    return response
-
-# JSON response
-@app.route('/api/data')
-def api_data():
-    return jsonify({'name': 'Flask', 'version': '2.0'})
-```
-
----
-
-## Form Handling
-
-### HTML Form
-
-```html
-<form method="POST" action="/submit">
-    <label for="name">Name:</label>
-    <input type="text" id="name" name="name" required>
-
-    <label for="email">Email:</label>
-    <input type="email" id="email" name="email" required>
-
-    <label for="message">Message:</label>
-    <textarea id="message" name="message" required></textarea>
-
-    <button type="submit">Submit</button>
-</form>
-```
-
-### Processing Form Data
-
-```python
-@app.route('/submit', methods=['GET', 'POST'])
-def submit():
-    if request.method == 'POST':
-        name = request.form.get('name')
-        email = request.form.get('email')
-        message = request.form.get('message')
-
-        # Validate the data
-        if not name or not email or not message:
-            return render_template('form.html', error='All fields are required.')
-
-        # Process the data (save to DB, send email, etc.)
-        return render_template('success.html', name=name)
-
-    return render_template('form.html')
-```
-
----
-
-## Static Files
-
-Flask serves static files from the `static/` folder by default.
-
-### Serving Static Files
-
-```html
-<link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
-<script src="{{ url_for('static', filename='js/main.js') }}"></script>
-<img src="{{ url_for('static', filename='images/logo.png') }}" alt="Logo">
-```
-
-### 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/<int:user_id>')
-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 42a064fae..000000000
--- a/skills/create-web-form/references/python-contact-form.md
+++ /dev/null
@@ -1,453 +0,0 @@
-# Python Contact Form Reference
-
-> Source: <https://mailtrap.io/blog/python-contact-form/>
-
-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
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Contact Us</title>
-</head>
-<body>
-    <h1>Contact Us</h1>
-    <form method="POST" action="/contact">
-        <div>
-            <label for="name">Name:</label>
-            <input type="text" id="name" name="name" required />
-        </div>
-        <div>
-            <label for="email">Email:</label>
-            <input type="email" id="email" name="email" required />
-        </div>
-        <div>
-            <label for="subject">Subject:</label>
-            <input type="text" id="subject" name="subject" required />
-        </div>
-        <div>
-            <label for="message">Message:</label>
-            <textarea id="message" name="message" rows="5" required></textarea>
-        </div>
-        <button type="submit">Send Message</button>
-    </form>
-</body>
-</html>
-```
-
-### 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 method="POST" action="/contact">
-    {{ form.hidden_tag() }}
-    <!-- form fields here -->
-</form>
-```
-
----
-
-## 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 80540d89b..000000000
--- a/skills/create-web-form/references/python-flask-app.md
+++ /dev/null
@@ -1,449 +0,0 @@
-# Python Flask App Reference
-
-> Source: <https://realpython.com/python-web-applications/>
-
-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/<username>')
-def show_user(username):
-    return f'User: {username}'
-
-@app.route('/post/<int:post_id>')
-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/<name>')
-def hello(name):
-    return render_template('hello.html', name=name)
-```
-
-### Template Inheritance
-
-**Base template (`templates/base.html`):**
-
-```html
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <title>{% block title %}My App{% endblock %}</title>
-    <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
-</head>
-<body>
-    <nav>
-        <a href="{{ url_for('home') }}">Home</a>
-        <a href="{{ url_for('about') }}">About</a>
-    </nav>
-
-    <main>
-        {% block content %}{% endblock %}
-    </main>
-
-    <footer>
-        <p>My Web App</p>
-    </footer>
-</body>
-</html>
-```
-
-**Child template (`templates/home.html`):**
-
-```html
-{% extends "base.html" %}
-
-{% block title %}Home{% endblock %}
-
-{% block content %}
-    <h1>Welcome to My App</h1>
-    <p>This is the home page.</p>
-{% 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 %}
-    <h1>Hello, {{ user.name }}!</h1>
-{% else %}
-    <h1>Hello, stranger!</h1>
-{% endif %}
-
-<ul>
-{% for item in items %}
-    <li>{{ item }}</li>
-{% endfor %}
-</ul>
-```
-
----
-
-## 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
-<link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
-<script src="{{ url_for('static', filename='script.js') }}"></script>
-<img src="{{ url_for('static', filename='images/logo.png') }}" alt="Logo">
-```
-
----
-
-## 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'<User {self.username}>'
-```
-
-### 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 6010de621..000000000
--- a/skills/create-web-form/references/python-flask.md
+++ /dev/null
@@ -1,432 +0,0 @@
-# Python Flask Forms Reference
-
-> Source: <https://testdriven.io/courses/learn-flask/forms/>
-
-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
-<form method="POST" action="{{ url_for('register') }}">
-    {{ form.hidden_tag() }}
-
-    <div>
-        {{ form.username.label }}
-        {{ form.username(class="form-control", placeholder="Enter username") }}
-        {% for error in form.username.errors %}
-            <span class="error">{{ error }}</span>
-        {% endfor %}
-    </div>
-
-    <div>
-        {{ form.email.label }}
-        {{ form.email(class="form-control", placeholder="Enter email") }}
-        {% for error in form.email.errors %}
-            <span class="error">{{ error }}</span>
-        {% endfor %}
-    </div>
-
-    <div>
-        {{ form.password.label }}
-        {{ form.password(class="form-control") }}
-        {% for error in form.password.errors %}
-            <span class="error">{{ error }}</span>
-        {% endfor %}
-    </div>
-
-    <div>
-        {{ form.confirm_password.label }}
-        {{ form.confirm_password(class="form-control") }}
-        {% for error in form.confirm_password.errors %}
-            <span class="error">{{ error }}</span>
-        {% endfor %}
-    </div>
-
-    {{ form.submit(class="btn btn-primary") }}
-</form>
-```
-
-### Key Template Elements
-
-| Element | Purpose |
-|---------|---------|
-| `{{ form.hidden_tag() }}` | Renders the hidden CSRF token field |
-| `{{ form.field.label }}` | Renders the `<label>` element for the field |
-| `{{ form.field() }}` | Renders the `<input>` element for the field |
-| `{{ form.field(class="...") }}` | Renders the input with additional HTML attributes |
-| `{{ form.field.errors }}` | List of validation error messages for the field |
-| `{{ form.field.data }}` | The current value of the field |
-
----
-
-## CSRF Protection
-
-### How CSRF Protection Works
-
-Flask-WTF automatically includes CSRF protection:
-
-1. A unique token is generated per session and embedded as a hidden form field.
-2. When the form is submitted, Flask-WTF verifies the token matches the session token.
-3. If the token is missing or invalid, the request is rejected with a `400 Bad Request`.
-
-### Including the CSRF Token
-
-In your template, always include one of these:
-
-```html
-<!-- Option 1: Hidden tag (includes CSRF + all hidden fields) -->
-{{ form.hidden_tag() }}
-
-<!-- Option 2: CSRF token only -->
-{{ form.csrf_token }}
-```
-
-### CSRF for AJAX Requests
-
-For JavaScript-based form submissions:
-
-```html
-<meta name="csrf-token" content="{{ csrf_token() }}">
-```
-
-```javascript
-fetch('/api/submit', {
-    method: 'POST',
-    headers: {
-        'Content-Type': 'application/json',
-        'X-CSRFToken': document.querySelector('meta[name="csrf-token"]').content
-    },
-    body: JSON.stringify(data)
-});
-```
-
----
-
-## Custom Validators
-
-### Inline Custom Validator
-
-Define a method on the form class with the naming pattern `validate_<fieldname>`:
-
-```python
-from wtforms import ValidationError
-
-class RegistrationForm(FlaskForm):
-    username = StringField('Username', validators=[DataRequired()])
-    email = StringField('Email', validators=[DataRequired(), Email()])
-
-    def validate_username(self, field):
-        if field.data.lower() in ['admin', 'root', 'superuser']:
-            raise ValidationError('That username is reserved.')
-
-    def validate_email(self, field):
-        # Check if email already exists in database
-        if User.query.filter_by(email=field.data).first():
-            raise ValidationError('That email is already registered.')
-```
-
-### Reusable Custom Validator
-
-```python
-from wtforms import ValidationError
-
-def validate_no_special_chars(form, field):
-    if not field.data.isalnum():
-        raise ValidationError('Field must contain only letters and numbers.')
-
-class MyForm(FlaskForm):
-    username = StringField('Username', validators=[
-        DataRequired(),
-        validate_no_special_chars
-    ])
-```
-
----
-
-## File Uploads
-
-### Form with File Upload
-
-```python
-from flask_wtf.file import FileField, FileAllowed, FileRequired
-
-class UploadForm(FlaskForm):
-    photo = FileField('Profile Photo', validators=[
-        FileRequired(),
-        FileAllowed(['jpg', 'png', 'gif'], 'Images only!')
-    ])
-    submit = SubmitField('Upload')
-```
-
-### Handling File Uploads in Routes
-
-```python
-import os
-from werkzeug.utils import secure_filename
-
-UPLOAD_FOLDER = 'static/uploads'
-
-@app.route('/upload', methods=['GET', 'POST'])
-def upload():
-    form = UploadForm()
-
-    if form.validate_on_submit():
-        file = form.photo.data
-        filename = secure_filename(file.filename)
-        filepath = os.path.join(UPLOAD_FOLDER, filename)
-        file.save(filepath)
-        flash('File uploaded successfully!', 'success')
-        return redirect(url_for('upload'))
-
-    return render_template('upload.html', form=form)
-```
-
-### Multipart Form Encoding
-
-File upload forms must use `enctype="multipart/form-data"`:
-
-```html
-<form method="POST" enctype="multipart/form-data">
-    {{ form.hidden_tag() }}
-    {{ form.photo.label }}
-    {{ form.photo() }}
-    {{ form.submit() }}
-</form>
-```
-
----
-
-## Flash Messages
-
-### Setting Flash Messages
-
-```python
-from flask import flash
-
-flash('Operation successful!', 'success')
-flash('An error occurred.', 'error')
-flash('Please check your input.', 'warning')
-```
-
-### Displaying Flash Messages in Templates
-
-```html
-{% with messages = get_flashed_messages(with_categories=true) %}
-    {% if messages %}
-        {% for category, message in messages %}
-            <div class="alert alert-{{ category }}">
-                {{ message }}
-            </div>
-        {% 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 24fbca0b0..000000000
--- a/skills/create-web-form/references/security.md
+++ /dev/null
@@ -1,136 +0,0 @@
-# Web Security Reference
-
-> Source: <https://developer.mozilla.org/en-US/docs/Web/Security>
-
-## 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 `<frame>`, `<iframe>`, `<embed>`, or `<object>`.
-- **CSP frame-ancestors**: Specifies valid parents that may embed a page.
-
-## Common Security Attacks
-
-| Attack | Description |
-|---|---|
-| Clickjacking | Tricks users into clicking hidden UI elements |
-| Cross-Site Scripting (XSS) | Injects malicious scripts into trusted websites |
-| Cross-Site Request Forgery (CSRF) | Forces authenticated users to perform unwanted actions |
-| Cross-Site Leaks (XS-Leaks) | Infers information about users from side channels |
-| SQL Injection | Inserts malicious SQL via user input |
-| Phishing | Impersonates trusted entities to steal credentials |
-| Man-in-the-Middle (MITM) | Intercepts communication between two parties |
-| Server-Side Request Forgery (SSRF) | Manipulates server into making unintended requests |
-| Subdomain Takeover | Exploits dangling DNS records |
-| Supply Chain Attacks | Compromises third-party dependencies |
-| Prototype Pollution | Injects properties into JavaScript object prototypes |
-
-## Key HTTP Security Headers
-
-| Header | Purpose |
-|---|---|
-| `Strict-Transport-Security` | Enforce HTTPS-only access |
-| `X-Frame-Options` | Prevent clickjacking |
-| `X-Content-Type-Options` | Prevent MIME sniffing |
-| `Content-Security-Policy` | Control resource loading and XSS prevention |
-| `Access-Control-Allow-Origin` | Manage CORS |
-
-## Practical Implementation Guides
-
-1. Content Security Policy (CSP)
-2. Cross-Origin Resource Sharing (CORS)
-3. Subresource Integrity (SRI)
-4. Transport Layer Security (TLS)
-5. Secure Cookie Configuration
-6. MIME Type Verification
-7. Referrer Policy
-8. Cross-Origin Resource Policy (CORP)
-
-## Authentication Methods
-
-- Passkeys
-- One-Time Passwords (OTP)
-- Federated identity
-- Password authentication
-
-## Related Resources
-
-- [Privacy on the Web](https://developer.mozilla.org/en-US/docs/Web/Privacy)
-- [OWASP Cheat Sheet Series](https://cheatsheetseries.owasp.org/)
-- [Mozilla Security Blog](https://blog.mozilla.org/security/)
diff --git a/skills/create-web-form/references/styling-web-forms.md b/skills/create-web-form/references/styling-web-forms.md
deleted file mode 100644
index 7290b419a..000000000
--- a/skills/create-web-form/references/styling-web-forms.md
+++ /dev/null
@@ -1,1643 +0,0 @@
-# Styling Web Forms Reference
-
----
-
-## 1. Styling Web Forms
-
-> **Source:** <https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/Styling_web_forms>
-
-### Overview
-
-This section covers CSS techniques for styling HTML form elements. It is essential for understanding which form elements are easy to style and which require special techniques.
-
-**Prerequisites:**
-
-- Basic understanding of HTML
-- CSS styling basics
-
-**Objective:** Learn styling techniques applicable to form widgets and understand the challenges involved.
-
-### Challenges in Styling Form Widgets
-
-#### Historical Context
-
-- **1995:** HTML 2 specification introduced form controls.
-- **Late 1996:** CSS was released but was not widely supported.
-- **Early era:** Browsers relied on operating system rendering for form widgets.
-- **Modern era:** Most form widgets are now stylable, with some exceptions.
-
-#### Form Widget Classification
-
-**Easy-to-Style Elements:**
-
-1. `<form>`
-2. `<fieldset>` and `<legend>`
-3. Single-line text `<input>` (type: text, url, email)
-4. Multi-line `<textarea>`
-5. Buttons (`<input>` and `<button>`)
-6. `<label>`
-7. `<output>`
-
-**Harder-to-Style Elements:**
-
-- Checkboxes and radio buttons
-- `<input type="search">`
-- (See "Advanced Form Styling" section for techniques)
-
-**Cannot Be Styled with CSS Alone:**
-
-- `<input type="color">`
-- Date-related controls (`<input type="datetime-local">`)
-- `<input type="range">`
-- `<input type="file">`
-- `<select>`, `<option>`, `<optgroup>`, `<datalist>`
-- `<progress>` and `<meter>`
-
-### Styling Simple Form Widgets
-
-#### Fonts and Text
-
-**Problem:** Browsers do not consistently inherit `font-family` and `font-size` -- many use system defaults instead.
-
-**Solution:** Force inheritance for consistent styling:
-
-```css
-button,
-input,
-select,
-textarea {
-  font-family: inherit;
-  font-size: 100%;
-}
-```
-
-The `inherit` value matches the parent element's computed property value.
-
-**Note:** `<input type="submit">` does not inherit in all browsers; use `<button>` instead for better consistency.
-
-#### Box Sizing
-
-**Problem:** Each widget has different default border, padding, and margin rules.
-
-**Solution:** Use `box-sizing` with consistent dimensions:
-
-```css
-input,
-textarea,
-select,
-button {
-  width: 150px;
-  padding: 0;
-  margin: 0;
-  box-sizing: border-box;
-}
-```
-
-This ensures all elements occupy the same space despite native platform defaults.
-
-#### Legend Placement
-
-The `<legend>` element sits over the `<fieldset>` border by default. To reposition it:
-
-```css
-fieldset {
-  position: relative;
-}
-
-legend {
-  position: absolute;
-  bottom: 0;
-  right: 0;
-  color: white;
-  background-color: black;
-  padding: 3px;
-}
-```
-
-Example HTML:
-
-```html
-<form>
-  <fieldset>
-    <legend>Choose all the vegetables you like to eat</legend>
-    <ul>
-      <li>
-        <label for="carrots">Carrots</label>
-        <input
-          type="checkbox"
-          checked
-          id="carrots"
-          name="carrots"
-          value="carrots" />
-      </li>
-      <li>
-        <label for="peas">Peas</label>
-        <input type="checkbox" id="peas" name="peas" value="peas" />
-      </li>
-    </ul>
-  </fieldset>
-</form>
-```
-
-**Accessibility Note:** `<legend>` content is spoken by assistive technologies. Reposition it visually but keep it in the DOM. Consider using `transform` instead of positioning to avoid border gaps.
-
-### Practical Styling Example: Postcard Form
-
-#### HTML Structure
-
-```html
-<form>
-  <h1>to: Mozilla</h1>
-
-  <div id="from">
-    <label for="name">from:</label>
-    <input type="text" id="name" name="user_name" />
-  </div>
-
-  <div id="reply">
-    <label for="mail">reply:</label>
-    <input type="email" id="mail" name="user_email" />
-  </div>
-
-  <div id="message">
-    <label for="msg">Your message:</label>
-    <textarea id="msg" name="user_message"></textarea>
-  </div>
-
-  <div class="button">
-    <button type="submit">Send your message</button>
-  </div>
-</form>
-```
-
-#### Set Up Web Fonts
-
-```css
-@font-face {
-  font-family: "handwriting";
-  src:
-    url("fonts/journal-webfont.woff2") format("woff2"),
-    url("fonts/journal-webfont.woff") format("woff");
-  font-weight: normal;
-  font-style: normal;
-}
-
-@font-face {
-  font-family: "typewriter";
-  src:
-    url("fonts/momot___-webfont.woff2") format("woff2"),
-    url("fonts/momot___-webfont.woff") format("woff");
-  font-weight: normal;
-  font-style: normal;
-}
-```
-
-#### Overall Layout
-
-```css
-body {
-  font: 1.3rem sans-serif;
-  padding: 0.5em;
-  margin: 0;
-  background: #222222;
-}
-
-form {
-  position: relative;
-  width: 740px;
-  height: 498px;
-  margin: 0 auto;
-  padding: 1em;
-  box-sizing: border-box;
-  background: white url("background.jpg");
-
-  /* CSS Grid for layout */
-  display: grid;
-  grid-gap: 20px;
-  grid-template-columns: repeat(2, 1fr);
-  grid-template-rows: 10em 1em 1em 1em;
-}
-```
-
-#### Heading and Layout
-
-```css
-h1 {
-  font:
-    1em "typewriter",
-    monospace;
-  align-self: end;
-}
-
-#message {
-  grid-row: 1 / 5;
-}
-
-#from,
-#reply {
-  display: flex;
-}
-```
-
-#### Labels
-
-```css
-label {
-  font:
-    0.8em "typewriter",
-    sans-serif;
-}
-```
-
-#### Text Fields
-
-```css
-input,
-textarea {
-  font:
-    1.4em/1.5em "handwriting",
-    cursive,
-    sans-serif;
-  border: none;
-  padding: 0 10px;
-  margin: 0;
-  width: 80%;
-  background: none;
-}
-
-input:focus,
-textarea:focus {
-  background: rgb(0 0 0 / 10%);
-  border-radius: 5px;
-}
-```
-
-#### Textarea Adjustments
-
-```css
-textarea {
-  display: block;
-  padding: 10px;
-  margin: 10px 0 0 -10px;
-  width: 100%;
-  height: 90%;
-  border-right: 1px solid;
-  /* resize: none; */
-  overflow: auto;
-}
-```
-
-Tips:
-
-- Use `resize: none` only if necessary (avoid restricting user control).
-- Set `overflow: auto` for consistent cross-browser rendering.
-
-#### Button Styling
-
-```css
-button {
-  padding: 5px;
-  font: bold 0.6em sans-serif;
-  border: 2px solid #333333;
-  border-radius: 5px;
-  background: none;
-  cursor: pointer;
-  transform: rotate(-1.5deg);
-}
-
-button::after {
-  content: " >>>";
-}
-
-button:hover,
-button:focus {
-  background: black;
-  color: white;
-}
-```
-
-### Key CSS Properties for Forms
-
-| Property | Purpose |
-|---|---|
-| `font-family: inherit` | Inherit parent font |
-| `font-size: 100%` | Inherit parent size |
-| `box-sizing: border-box` | Include padding/border in width |
-| `border: none` | Remove default borders |
-| `padding` | Add space inside elements |
-| `margin` | Add space outside elements |
-| `background` | Control background appearance |
-| `:focus` | Style focused form fields |
-| `resize` | Allow/prevent textarea resizing |
-| `overflow: auto` | Handle scrolling consistently |
-
-### Best Practices
-
-1. **Consistency:** Use `box-sizing: border-box` for predictable sizing.
-2. **Inheritance:** Explicitly set `font-family` and `font-size` on form elements.
-3. **Accessibility:** Always include `:focus` styles for keyboard navigation.
-4. **Browser Support:** Test across browsers for consistent rendering.
-5. **User Control:** Avoid removing useful defaults like textarea resizing.
-6. **Custom Fonts:** Use `@font-face` with multiple formats (woff2 + woff) for compatibility.
-
----
-
-## 2. Advanced Form Styling
-
-> **Source:** <https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/Advanced_form_styling>
-
-### Overview
-
-This section covers styling form controls that are difficult to style using CSS, categorized into "bad" (more complex CSS needed) and "ugly" (impossible to style thoroughly) categories.
-
-**The Bad:**
-
-- Checkboxes and radio buttons
-- `<input type="search">`
-
-**The Ugly:**
-
-- Dropdown widgets: `<select>`, `<option>`, `<optgroup>`, `<datalist>`
-- `<input type="color">`
-- Date-related controls: `<input type="datetime-local">`
-- `<input type="range">`
-- `<input type="file">`
-- `<progress>` and `<meter>`
-
-### The `appearance` Property
-
-The `appearance` property controls OS-level styling on form controls. The most useful value is `none`, which removes system-level styling and allows custom CSS styling.
-
-```css
-input {
-  appearance: none;
-}
-```
-
-This stops controls from using system-level styling, allowing you to build custom styles using CSS.
-
-### Styling Checkboxes and Radio Buttons
-
-#### Approach: Using `appearance: none`
-
-Remove the default checkbox/radio styles completely and create custom designs:
-
-```html
-<form>
-  <fieldset>
-    <legend>Fruit preferences</legend>
-    <p>
-      <label>
-        <input type="checkbox" name="fruit" value="cherry" />
-        I like cherry
-      </label>
-    </p>
-    <p>
-      <label>
-        <input type="checkbox" name="fruit" value="banana" disabled />
-        I can't like banana
-      </label>
-    </p>
-  </fieldset>
-</form>
-```
-
-#### CSS Custom Checkbox Styling
-
-```css
-input[type="checkbox"] {
-  appearance: none;
-  position: relative;
-  width: 1em;
-  height: 1em;
-  border: 1px solid gray;
-  /* Adjusts the position of the checkboxes on the text baseline */
-  vertical-align: -2px;
-  /* Set here so that Windows' High-Contrast Mode can override */
-  color: green;
-}
-
-input[type="checkbox"]::before {
-  content: "\2714";
-  position: absolute;
-  font-size: 1.2em;
-  right: -1px;
-  top: -0.3em;
-  visibility: hidden;
-}
-
-input[type="checkbox"]:checked::before {
-  /* Use `visibility` instead of `display` to avoid recalculating layout */
-  visibility: visible;
-}
-
-input[type="checkbox"]:disabled {
-  border-color: black;
-  background: #dddddd;
-  color: gray;
-}
-```
-
-**Key Pseudo-Classes:**
-
-- `:checked` -- checkbox/radio button is in a checked state
-- `:disabled` -- checkbox/radio button is disabled and cannot be interacted with
-
-### Search Boxes and `appearance`
-
-For `<input type="search">` elements, `appearance: none` was historically necessary but is no longer required in Safari 16+.
-
-Removing the "x" delete button:
-
-```css
-input[type="search"]:not(:focus, :active)::-webkit-search-cancel-button {
-  display: none;
-}
-```
-
-### Styling "Ugly" Form Controls
-
-#### Global Normalization
-
-Apply consistent styles across all form controls:
-
-```css
-button,
-label,
-input,
-select,
-progress,
-meter {
-  display: block;
-  font-family: inherit;
-  font-size: 100%;
-  margin: 0;
-  box-sizing: border-box;
-  width: 100%;
-  padding: 5px;
-  height: 30px;
-}
-
-input[type="text"],
-input[type="datetime-local"],
-input[type="color"],
-select {
-  box-shadow: inset 1px 1px 3px #cccccc;
-  border-radius: 5px;
-}
-```
-
-### Styling Select and Datalist Elements
-
-#### Creating a Custom Select Arrow
-
-```html
-<label for="select">Select box:</label>
-<div class="select-wrapper">
-  <select id="select" name="select">
-    <option>Banana</option>
-    <option>Cherry</option>
-    <option>Lemon</option>
-  </select>
-</div>
-```
-
-```css
-select {
-  appearance: none;
-  width: 100%;
-  height: 100%;
-}
-
-.select-wrapper {
-  position: relative;
-}
-
-.select-wrapper::after {
-  content: "\25BC";
-  font-size: 1rem;
-  top: 3px;
-  right: 10px;
-  position: absolute;
-}
-```
-
-**Limitations:**
-
-- You cannot style the dropdown option box that appears when clicked.
-- You cannot style the autocomplete list with `<datalist>`.
-- For full control, use a library, build a custom control, or use the `multiple` attribute.
-
-### Styling Date Input Types
-
-Date/time inputs (`datetime-local`, `time`, `week`, `month`) have limited styling options:
-
-```css
-input[type="datetime-local"] {
-  box-shadow: inset 1px 1px 3px #cccccc;
-  border-radius: 5px;
-}
-```
-
-The containing box can be styled, but internal parts (popup calendar, spinners) cannot. For full control, use a custom control library or build your own.
-
-### Styling Range Input Types
-
-Range sliders can be customized with significant CSS effort:
-
-```css
-input[type="range"] {
-  appearance: none;
-  background: red;
-  height: 2px;
-  padding: 0;
-  outline: 1px solid transparent;
-}
-```
-
-Full range styling requires complex CSS with browser-specific pseudo-elements (`::-webkit-slider-thumb`, `::-moz-range-thumb`, etc.).
-
-### Styling Color Input Types
-
-```css
-input[type="color"] {
-  border: 0;
-  padding: 0;
-}
-```
-
-For more significant customization, a custom solution is required.
-
-### Styling File Input Types
-
-File inputs are mostly stylable except for the file picker button, which is completely unstylable. The recommended approach is to hide the input and style the label.
-
-```html
-<label for="file">Choose a file to upload</label>
-<input id="file" name="file" type="file" multiple />
-```
-
-```css
-input[type="file"] {
-  height: 0;
-  padding: 0;
-  opacity: 0;
-}
-
-label[for="file"] {
-  box-shadow: 1px 1px 3px #cccccc;
-  background: linear-gradient(to bottom, #eeeeee, #cccccc);
-  border: 1px solid darkgrey;
-  border-radius: 5px;
-  text-align: center;
-  line-height: 1.5;
-}
-
-label[for="file"]:hover {
-  background: linear-gradient(to bottom, white, #dddddd);
-}
-
-label[for="file"]:active {
-  box-shadow: inset 1px 1px 3px #cccccc;
-}
-```
-
-#### JavaScript to Display File Information
-
-```javascript
-const fileInput = document.querySelector("#file");
-const fileList = document.querySelector("#file-list");
-
-fileInput.addEventListener("change", updateFileList);
-
-function updateFileList() {
-  while (fileList.firstChild) {
-    fileList.removeChild(fileList.firstChild);
-  }
-
-  const curFiles = fileInput.files;
-
-  if (curFiles.length > 0) {
-    for (const file of curFiles) {
-      const listItem = document.createElement("li");
-      listItem.textContent = `File name: ${file.name}; file size: ${returnFileSize(file.size)}.`;
-      fileList.appendChild(listItem);
-    }
-  }
-}
-
-function returnFileSize(number) {
-  if (number < 1e3) {
-    return `${number} bytes`;
-  } else if (number >= 1e3 && number < 1e6) {
-    return `${(number / 1e3).toFixed(1)} KB`;
-  }
-  return `${(number / 1e6).toFixed(1)} MB`;
-}
-```
-
-### Styling Progress and Meter Elements
-
-Progress bars and meters are the most difficult to style.
-
-```css
-progress,
-meter {
-  display: block;
-  width: 100%;
-  padding: 5px;
-  height: 30px;
-}
-```
-
-**Limitations:**
-
-- Inconsistent height handling between browsers.
-- Cannot style foreground bar color separately.
-- `appearance: none` makes things worse, not better.
-- **Recommendation:** Use custom solutions or third-party libraries.
-
-### Summary of Styling Approaches
-
-| Control Type | Approach | Difficulty |
-|---|---|---|
-| Checkbox/Radio | `appearance: none` + custom design | Medium |
-| Search input | `appearance: none` for older browsers | Low |
-| Select/Datalist | Wrapper + custom arrow, limited control | Medium |
-| Date inputs | Basic styling only | High |
-| Range slider | `appearance: none` + complex pseudo-elements | High |
-| Color input | Remove borders/padding | Low |
-| File input | Hide + style label | Medium |
-| Progress/Meter | Custom solution recommended | Very High |
-
-### Key Takeaways
-
-1. Use `appearance: none` to remove OS-level styling before applying custom CSS.
-2. Pseudo-classes like `:checked` and `:disabled` are essential for form control states.
-3. Some controls (dropdown internals, file button, progress internals) have inherent limitations.
-4. For full customization of "ugly" elements, consider custom JavaScript-based controls, third-party libraries, or modern HTML/CSS features like Customizable Select Elements.
-
----
-
-## 3. Customizable Select Elements
-
-> **Source:** <https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/Customizable_select>
-
-### Overview
-
-Customizable select elements allow you to build fully-styled `<select>` elements using experimental HTML and CSS features with full control over:
-
-- The select button styling
-- Drop-down picker appearance
-- Arrow icon design
-- Current selection checkmark
-- Individual `<option>` element styling
-
-**Warning:** Limited browser support exists for these features. Features may cause hydration failures with Server-Side Rendering (SSR) in some JavaScript frameworks.
-
-### What Features Comprise a Customizable Select?
-
-#### HTML Elements
-
-**`<select>`, `<option>`, `<optgroup>` elements:**
-
-- Work like traditional selects but with additional permitted content types.
-- `<option>` elements can now contain markup (spans, images, semantic elements) not just text.
-
-**`<button>` element inside `<select>`:**
-
-- First child of the `<select>` element (previously not allowed).
-- Replaces default button rendering of the closed select.
-- Known as the **select button** (opens the drop-down picker).
-- The select button is `inert` by default, making child interactive elements non-focusable.
-
-**`<selectedcontent>` element:**
-
-- Optionally placed inside the first `<button>` child.
-- Displays the currently selected value in the closed `<select>`.
-- Contains a clone of the currently-selected `<option>`'s content.
-
-#### CSS Properties and Pseudo-Elements
-
-| Feature | Purpose |
-|---|---|
-| `appearance: base-select` | Opts into browser-defined custom select styles (required on both `select` and `::picker(select)`) |
-| `::picker(select)` | Targets the entire picker contents (all elements except the first `<button>`) |
-| `::picker-icon` | Targets the arrow icon inside the select button |
-| `::checkmark` | Targets the checkmark in the currently-selected `<option>` |
-| `:open` | Targets select button when picker is open |
-| `:checked` | Targets the currently-selected `<option>` |
-| `:popover-open` | Targets picker in showing state (via Popover API) |
-
-#### Automatic Behaviors
-
-- **Invoker/Popover relationship** via the Popover API.
-- **Implicit anchor reference** via CSS anchor positioning (no explicit anchor-name/position-anchor needed).
-- **Automatic positioning** with fallback options to prevent viewport overflow.
-
-### HTML Markup Structure
-
-#### Basic Example: Pet Selector
-
-```html
-<form>
-  <p>
-    <label for="pet-select">Select pet:</label>
-    <select id="pet-select">
-      <button>
-        <selectedcontent></selectedcontent>
-      </button>
-
-      <option value="">Please select a pet</option>
-      <option value="cat">
-        <span class="icon" aria-hidden="true">&#x1F431;</span>
-        <span class="option-label">Cat</span>
-      </option>
-      <option value="dog">
-        <span class="icon" aria-hidden="true">&#x1F436;</span>
-        <span class="option-label">Dog</span>
-      </option>
-      <option value="hamster">
-        <span class="icon" aria-hidden="true">&#x1F439;</span>
-        <span class="option-label">Hamster</span>
-      </option>
-      <option value="chicken">
-        <span class="icon" aria-hidden="true">&#x1F414;</span>
-        <span class="option-label">Chicken</span>
-      </option>
-      <option value="fish">
-        <span class="icon" aria-hidden="true">&#x1F41F;</span>
-        <span class="option-label">Fish</span>
-      </option>
-      <option value="snake">
-        <span class="icon" aria-hidden="true">&#x1F40D;</span>
-        <span class="option-label">Snake</span>
-      </option>
-    </select>
-  </p>
-</form>
-```
-
-**Key Markup Points:**
-
-- Use `aria-hidden="true"` on decorative icons to prevent duplicate announcements to assistive technology.
-- `<button><selectedcontent></selectedcontent></button>` represents the select button and allows style customization.
-- Multi-element `<option>` content is cloned into `<selectedcontent>` and displayed in the closed select.
-- **Progressive enhancement:** Non-supporting browsers ignore the button structure and strip non-text option content.
-
-#### Value Extraction Rules
-
-When `<option>` contains multi-level DOM sub-trees:
-
-1. Browser retrieves the `textContent` property.
-2. Applies `trim()`.
-3. Sets result as the `<select>` value.
-
-### CSS Styling Techniques
-
-#### 1. Opting Into Custom Select Rendering
-
-**Required first step:**
-
-```css
-select,
-::picker(select) {
-  appearance: base-select;
-}
-```
-
-This removes OS-level styling and enables custom browser base styles.
-
-#### 2. Styling the Select Button
-
-```css
-* {
-  box-sizing: border-box;
-}
-
-html {
-  font-family: "Helvetica", "Arial", sans-serif;
-}
-
-select {
-  border: 2px solid #dddddd;
-  background: #eeeeee;
-  padding: 10px;
-  transition: 0.4s;
-  flex: 1;
-}
-
-select:hover,
-select:focus {
-  background: #dddddd;
-}
-```
-
-#### 3. Styling the Picker Icon
-
-```css
-select::picker-icon {
-  color: #999999;
-  transition: 0.4s rotate;
-}
-
-/* Rotate icon when picker opens */
-select:open::picker-icon {
-  rotate: 180deg;
-}
-```
-
-#### 4. Styling the Drop-Down Picker
-
-```css
-::picker(select) {
-  border: none;
-  border-radius: 8px;
-}
-
-option {
-  display: flex;
-  justify-content: flex-start;
-  gap: 20px;
-
-  border: 2px solid #dddddd;
-  background: #eeeeee;
-  padding: 10px;
-  transition: 0.4s;
-}
-
-/* Round top and bottom corners */
-option:first-of-type {
-  border-radius: 8px 8px 0 0;
-}
-
-option:last-of-type {
-  border-radius: 0 0 8px 8px;
-}
-
-/* Remove internal borders except last */
-option:not(option:last-of-type) {
-  border-bottom: none;
-}
-
-/* Zebra striping */
-option:nth-of-type(odd) {
-  background: white;
-}
-
-/* Highlight on hover/focus */
-option:hover,
-option:focus {
-  background: plum;
-}
-
-/* Style option icons */
-option .icon {
-  font-size: 1.6rem;
-  text-box: trim-both cap alphabetic;
-}
-```
-
-#### 5. Styling Selected Content in the Button
-
-Hide icon when displayed in button (but keep it in picker):
-
-```css
-selectedcontent .icon {
-  display: none;
-}
-```
-
-#### 6. Styling the Currently Selected Option
-
-```css
-option:checked {
-  font-weight: bold;
-}
-```
-
-#### 7. Styling the Checkmark
-
-Move to end with custom content:
-
-```css
-option::checkmark {
-  order: 1;
-  margin-left: auto;
-  content: "\2611\FE0F";
-}
-```
-
-**Note:** `::checkmark` is not in the accessibility tree; generated content will not be announced by assistive technology.
-
-### Advanced Techniques
-
-#### Popover Animations
-
-Use Popover API states to animate picker visibility:
-
-```css
-/* Initial hidden state */
-::picker(select) {
-  opacity: 0;
-  transition: all 0.4s allow-discrete;
-}
-
-/* Showing state */
-::picker(select):popover-open {
-  opacity: 1;
-}
-
-/* Required for animating from display: none */
-@starting-style {
-  ::picker(select):popover-open {
-    opacity: 0;
-  }
-}
-```
-
-**Key points:**
-
-- Use `allow-discrete` to enable discrete property animations.
-- Animates both `opacity` and automatically-changed properties (`display`, `overlay`).
-- `@starting-style` specifies the initial state for display transitions.
-
-#### Anchor Positioning
-
-Position picker relative to the select button:
-
-```css
-::picker(select) {
-  top: calc(anchor(bottom) + 1px);
-  left: anchor(10%);
-}
-```
-
-**Details:**
-
-- Implicit anchor reference (no explicit anchor-name needed).
-- `anchor(bottom)` = bottom edge of the select button.
-- `anchor(10%)` = 10% of button's width from its left edge.
-- Browser default styles include position-try fallbacks for viewport overflow.
-
-### Other Select Features
-
-**`<select multiple>`:**
-
-- Currently no support specified for customizable selects.
-- To be addressed in future updates.
-
-**`<optgroup>`:**
-
-- Default styling: bolded and indented less than options.
-- Must be styled to fit overall design.
-- Can now contain `<legend>` element as child for easier targeting.
-- `<legend>` text replaces/clarifies the `label` attribute.
-
-### Browser Support and Compatibility
-
-Check browser compatibility tables for:
-
-- `<selectedcontent>`
-- `::picker(select)`
-- `::checkmark`
-- `::picker-icon`
-- `:open` pseudo-class
-- `appearance: base-select`
-
-**Progressive Enhancement:** Non-supporting browsers fall back to classic select behavior with text-only options.
-
-### Key Benefits
-
-1. **Full CSS customization** of select appearance.
-2. **Rich option content** (images, multiple text spans).
-3. **Smooth animations** via Popover API.
-4. **Smart positioning** with anchor positioning.
-5. **Progressive enhancement** -- works in older browsers.
-6. **No JavaScript required** for basic functionality.
-7. **Accessible by default** with ARIA-compatible structure.
-
----
-
-## 4. UI Pseudo-Classes
-
-> **Source:** <https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/UI_pseudo-classes>
-
-### Overview
-
-UI pseudo-classes in CSS allow you to style form controls based on their different states. This section covers styling forms in various states using CSS selectors.
-
-**Prerequisites:**
-
-- Basic understanding of HTML and CSS
-- Knowledge of pseudo-classes and pseudo-elements
-
-**Objective:** Understand what parts of forms are hard to style and why, and learn how to customize form controls using pseudo-classes.
-
-### Available Pseudo-Classes
-
-#### Common Pseudo-Classes
-
-- **`:hover`** -- Selects an element only when hovered over by a mouse pointer.
-- **`:focus`** -- Selects an element only when focused (tabbed to via keyboard).
-- **`:active`** -- Selects an element only when being activated (clicked or Return/Enter pressed).
-
-#### Form-Specific Pseudo-Classes
-
-**Required and Optional:**
-
-- **`:required`** -- Targets elements with the `required` HTML attribute.
-- **`:optional`** -- Targets form controls that are optional.
-
-**Validation States:**
-
-- **`:valid`** -- Targets form controls with valid data.
-- **`:invalid`** -- Targets form controls with invalid data.
-- **`:in-range`** -- Targets numeric inputs within min/max range.
-- **`:out-of-range`** -- Targets numeric inputs outside min/max range.
-
-**Enabled/Disabled and Read States:**
-
-- **`:enabled`** -- Targets elements that can be activated.
-- **`:disabled`** -- Targets elements that cannot be interacted with.
-- **`:read-only`** -- Targets elements with `readonly` attribute.
-- **`:read-write`** -- Targets editable form controls (default state).
-
-**Checkbox and Radio States:**
-
-- **`:checked`** -- Targets selected checkboxes and radio buttons.
-- **`:indeterminate`** -- Targets elements in neither checked nor unchecked state.
-- **`:default`** -- Targets elements checked by default on page load.
-
-**Additional Useful Pseudo-Classes:**
-
-- **`:focus-within`** -- Matches an element or its descendants when focused.
-- **`:focus-visible`** -- Matches elements focused via keyboard (not touch/mouse).
-- **`:placeholder-shown`** -- Matches inputs/textareas showing placeholder text when empty.
-
-### Styling Inputs Based on Required or Optional
-
-#### HTML Structure
-
-```html
-<form>
-  <fieldset>
-    <legend>Feedback form</legend>
-    <div>
-      <label for="fname">First name: </label>
-      <input id="fname" name="fname" type="text" required />
-    </div>
-    <div>
-      <label for="lname">Last name: </label>
-      <input id="lname" name="lname" type="text" required />
-    </div>
-    <div>
-      <label for="email">Email address (if you want a response): </label>
-      <input id="email" name="email" type="email" />
-    </div>
-    <div><button>Submit</button></div>
-  </fieldset>
-</form>
-```
-
-#### CSS Styling
-
-```css
-body {
-  font-family: sans-serif;
-  margin: 20px auto;
-  max-width: 70%;
-}
-
-fieldset {
-  padding: 10px 30px 0;
-}
-
-legend {
-  color: white;
-  background: black;
-  padding: 5px 10px;
-}
-
-fieldset > div {
-  margin-bottom: 20px;
-  display: flex;
-  flex-flow: row wrap;
-}
-
-button,
-label,
-input {
-  display: block;
-  font-size: 100%;
-  box-sizing: border-box;
-  width: 100%;
-  padding: 5px;
-}
-
-input {
-  box-shadow: inset 1px 1px 3px #cccccc;
-  border-radius: 5px;
-}
-
-input:hover,
-input:focus {
-  background-color: #eeeeee;
-}
-
-button {
-  width: 60%;
-  margin: 0 auto;
-}
-
-/* Required vs Optional Styling */
-input:required {
-  border: 2px solid;
-}
-
-input:optional {
-  border: 2px dashed;
-}
-```
-
-**Key Points:**
-
-- Required controls have a solid border; optional controls have a dashed border.
-- Avoid using color alone to distinguish required vs optional (colorblind accessibility).
-- Standard web convention: use an asterisk (*) or the word "required" for required fields.
-- `:optional` is rarely used since form controls are optional by default.
-
-### Using Generated Content with Pseudo-Classes
-
-Use `::before` and `::after` pseudo-elements with the `content` property to add visual indicators without adding DOM elements. Screen readers will not read the generated content.
-
-#### HTML with Span for Generated Content
-
-```html
-<form>
-  <fieldset>
-    <legend>Feedback form</legend>
-
-    <p>Required fields are labeled with "required".</p>
-    <div>
-      <label for="fname">First name: </label>
-      <input id="fname" name="fname" type="text" required />
-      <span></span>
-    </div>
-    <div>
-      <label for="lname">Last name: </label>
-      <input id="lname" name="lname" type="text" required />
-      <span></span>
-    </div>
-    <div>
-      <label for="email">Email address (include if you want a response):</label>
-      <input id="email" name="email" type="email" />
-      <span></span>
-    </div>
-    <div><button>Submit</button></div>
-  </fieldset>
-</form>
-```
-
-#### CSS for Generated Content
-
-```css
-fieldset > div {
-  margin-bottom: 20px;
-  display: flex;
-  flex-flow: row wrap;
-}
-
-button,
-label,
-input {
-  display: block;
-  font-family: inherit;
-  font-size: 100%;
-  margin: 0;
-  box-sizing: border-box;
-  width: 100%;
-  padding: 5px;
-  height: 30px;
-}
-
-input {
-  box-shadow: inset 1px 1px 3px #cccccc;
-  border-radius: 5px;
-}
-
-input:hover,
-input:focus {
-  background-color: #eeeeee;
-}
-
-/* Generated content styling */
-input + span {
-  position: relative;
-}
-
-input:required + span::after {
-  font-size: 0.7rem;
-  position: absolute;
-  content: "required";
-  color: white;
-  background-color: black;
-  padding: 5px 10px;
-  top: -26px;
-  left: -70px;
-}
-
-button {
-  width: 60%;
-  margin: 0 auto;
-}
-```
-
-**Key Technique:**
-
-- Set `<span>` to `position: relative` to serve as a positioning context.
-- Generated content can be positioned absolutely within that context.
-- Use the adjacent sibling combinator (`+`) to target the span after the input.
-- Text inputs (`text`, `password`, `button`) do not display generated content. Other types (`range`, `color`, `checkbox`, etc.) do support it.
-
-### Styling Controls Based on Validity
-
-#### :valid and :invalid
-
-**Key Points:**
-
-- Controls with no constraint validation always match `:valid`.
-- Inputs with `required` and no value match both `:invalid` and `:required`.
-- Email/URL inputs match `:invalid` when data does not match required pattern.
-- Inputs with values outside range (min/max) match both `:invalid` and `:out-of-range`.
-
-#### CSS Styling
-
-```css
-input + span {
-  position: relative;
-}
-
-input:required + span::after {
-  font-size: 0.7rem;
-  position: absolute;
-  content: "required";
-  color: white;
-  background-color: black;
-  padding: 5px 10px;
-  top: -26px;
-  left: -70px;
-}
-
-/* Validation indicators */
-input + span::before {
-  position: absolute;
-  right: -20px;
-  top: 5px;
-}
-
-input:invalid {
-  border: 2px solid red;
-}
-
-input:invalid + span::before {
-  content: "\2716";
-  color: red;
-}
-
-input:valid + span::before {
-  content: "\2713";
-  color: green;
-}
-```
-
-#### :in-range and :out-of-range
-
-For numeric inputs with `min` and `max` attributes:
-
-```html
-<div>
-  <label for="age">Age (must be 12+): </label>
-  <input id="age" name="age" type="number" min="12" max="120" required />
-  <span></span>
-</div>
-```
-
-```css
-input + span {
-  position: relative;
-}
-
-input + span::after {
-  font-size: 0.7rem;
-  position: absolute;
-  padding: 5px 10px;
-  top: -26px;
-}
-
-input:required + span::after {
-  color: white;
-  background-color: black;
-  content: "required";
-  left: -70px;
-}
-
-input:out-of-range + span::after {
-  color: white;
-  background-color: red;
-  width: 155px;
-  content: "Outside allowable value range";
-  left: -182px;
-}
-
-input + span::before {
-  position: absolute;
-  right: -20px;
-  top: 5px;
-}
-
-input:invalid {
-  border: 2px solid red;
-}
-
-input:invalid + span::before {
-  content: "\2716";
-  color: red;
-}
-
-input:valid + span::before {
-  content: "\2713";
-  color: green;
-}
-```
-
-**Important Notes:**
-
-- `:out-of-range` inputs also match `:invalid`.
-- CSS cascade applies: later rules override earlier ones.
-- Use `:out-of-range` when you want a more specific error message for range violations.
-- **Numeric input types:** `date`, `month`, `week`, `time`, `datetime-local`, `number`, `range`.
-
-### Styling Enabled and Disabled Inputs
-
-#### Use Case
-
-Disable form fields that do not apply based on user input (e.g., billing address fields when same as shipping).
-
-#### HTML Structure
-
-```html
-<form>
-  <fieldset id="shipping">
-    <legend>Shipping address</legend>
-    <div>
-      <label for="name1">Name: </label>
-      <input id="name1" name="name1" type="text" required />
-    </div>
-    <div>
-      <label for="address1">Address: </label>
-      <input id="address1" name="address1" type="text" required />
-    </div>
-    <div>
-      <label for="zip-code1">Zip/postal code: </label>
-      <input id="zip-code1" name="zip-code1" type="text" required />
-    </div>
-  </fieldset>
-  <fieldset id="billing">
-    <legend>Billing address</legend>
-    <div>
-      <label for="billing-checkbox">Same as shipping address:</label>
-      <input type="checkbox" id="billing-checkbox" checked />
-    </div>
-    <div>
-      <label for="name" class="billing-label">Name: </label>
-      <input id="name" name="name" type="text" disabled required />
-    </div>
-    <div>
-      <label for="address2" class="billing-label">Address:</label>
-      <input id="address2" name="address2" type="text" disabled required />
-    </div>
-    <div>
-      <label for="zip-code2" class="billing-label">Zip/postal code:</label>
-      <input id="zip-code2" name="zip-code2" type="text" disabled required />
-    </div>
-  </fieldset>
-
-  <div><button>Submit</button></div>
-</form>
-```
-
-#### CSS Styling
-
-```css
-input[type="text"]:disabled {
-  background: #eeeeee;
-  border: 1px solid #cccccc;
-}
-
-label:has(+ :disabled) {
-  color: #aaaaaa;
-}
-```
-
-#### JavaScript to Toggle Disabled State
-
-```javascript
-function toggleBilling() {
-  const billingItems = document.querySelectorAll('#billing input[type="text"]');
-  for (const item of billingItems) {
-    item.disabled = !item.disabled;
-  }
-}
-
-document
-  .getElementById("billing-checkbox")
-  .addEventListener("change", toggleBilling);
-```
-
-**Key Points:**
-
-- **Disabled inputs:** Cannot be interacted with, data not sent to server.
-- **Enabled inputs:** Can be selected, clicked, typed into (default state).
-- Use `:disabled` and `:enabled` pseudo-classes to target these states.
-- Style labels using `:has()` pseudo-class to gray them out alongside disabled inputs.
-
-### Read-Only and Read-Write Inputs
-
-#### Difference from Disabled
-
-- **Read-only inputs:** Cannot be edited by user, but values ARE submitted to server.
-- **Read-write inputs:** Can be edited (default state).
-- Use the `readonly` attribute on the input element.
-
-#### CSS Styling
-
-```css
-input:read-only,
-textarea:read-only {
-  border: 0;
-  box-shadow: none;
-  background-color: white;
-}
-
-textarea:read-write {
-  box-shadow: inset 1px 1px 3px #cccccc;
-  border-radius: 5px;
-}
-```
-
-**Key Points:**
-
-- Remove borders/shadows for read-only elements to show they are not editable.
-- Add styling to read-write elements to make them clearly editable.
-- `:enabled` and `:read-write` are rarely used since they represent default states.
-
-### Radio and Checkbox States
-
-#### :checked
-
-The `:checked` pseudo-class targets selected checkboxes and radio buttons.
-
-```css
-input[type="radio"] {
-  appearance: none;
-}
-
-input[type="radio"] {
-  width: 20px;
-  height: 20px;
-  border-radius: 10px;
-  border: 2px solid gray;
-  vertical-align: -2px;
-  outline: none;
-}
-
-input[type="radio"]::before {
-  display: block;
-  content: " ";
-  width: 10px;
-  height: 10px;
-  border-radius: 6px;
-  background-color: red;
-  font-size: 1.2em;
-  transform: translate(3px, 3px) scale(0);
-  transform-origin: center;
-  transition: all 0.3s ease-in;
-}
-
-input[type="radio"]:checked::before {
-  transform: translate(3px, 3px) scale(1);
-  transition: all 0.3s cubic-bezier(0.25, 0.25, 0.56, 2);
-}
-```
-
-**Advantages:**
-
-- Using transforms instead of width/height prevents layout jumping.
-- `transform-origin` allows animation from the center.
-- `transition` provides a smooth animation effect.
-
-#### :default
-
-The `:default` pseudo-class matches radios/checkboxes checked by default (with `checked` attribute), even if unchecked later.
-
-```css
-input ~ span {
-  position: relative;
-}
-
-input:default ~ span::after {
-  font-size: 0.7rem;
-  position: absolute;
-  content: "Default";
-  color: white;
-  background-color: black;
-  padding: 5px 10px;
-  right: -65px;
-  top: -3px;
-}
-```
-
-- Uses subsequent-sibling combinator (`~`) instead of next-sibling (`+`).
-- Needed because `<span>` does not come immediately after `<input>`.
-- Shows which option was selected by default on page load.
-
-#### :indeterminate
-
-The `:indeterminate` pseudo-class matches elements in neither checked nor unchecked state.
-
-**Elements that are indeterminate:**
-
-- `<input type="radio">` when all same-named radio buttons are unchecked.
-- `<input type="checkbox">` when `indeterminate` property set to `true` via JavaScript.
-- `<progress>` elements with no value.
-
-```css
-input[type="radio"]:indeterminate {
-  border: 2px solid red;
-  animation: 0.4s linear infinite alternate border-pulse;
-}
-
-@keyframes border-pulse {
-  from {
-    border: 2px solid red;
-  }
-
-  to {
-    border: 6px solid red;
-  }
-}
-```
-
-**Use Case:** An animated visual indicator reminding users they need to select a radio button before proceeding.
-
-### Additional Useful Pseudo-Classes
-
-#### :focus-within
-
-Matches an element **or its descendants** when focused.
-
-```css
-form:focus-within {
-  border: 2px solid blue;
-}
-```
-
-**Use Case:** Highlight an entire form when any input inside receives focus.
-
-#### :focus-visible
-
-Matches elements focused via **keyboard interaction** (not touch or mouse).
-
-```css
-input:focus-visible {
-  outline: 3px solid blue;
-}
-```
-
-**Use Case:** Show keyboard focus indicator while hiding mouse focus styling.
-
-#### :placeholder-shown
-
-Matches `<input>` and `<textarea>` elements showing their placeholder text (when empty).
-
-```css
-input:placeholder-shown {
-  color: #999;
-}
-```
-
-**Use Case:** Style inputs differently when placeholder is visible.
-
-### Summary
-
-This section covered all major UI pseudo-classes for form styling, including:
-
-1. Required vs Optional styling with visual indicators.
-2. Generated content techniques for accessible labeling.
-3. Validation states (valid, invalid, in-range, out-of-range).
-4. Enabled/disabled and read-only/read-write states.
-5. Radio and checkbox states (checked, default, indeterminate).
-6. Additional pseudo-classes for advanced styling.
-
-These pseudo-classes enable sophisticated form styling without JavaScript, improve accessibility through semantic HTML, and provide better user experience through visual feedback on form states.
diff --git a/skills/create-web-form/references/web-api.md b/skills/create-web-form/references/web-api.md
deleted file mode 100644
index 0f035e57e..000000000
--- a/skills/create-web-form/references/web-api.md
+++ /dev/null
@@ -1,165 +0,0 @@
-# Web API Reference
-
-> Source: <https://developer.mozilla.org/en-US/docs/Web/API>
-
-## Overview
-
-Web APIs are programming interfaces available to developers for web applications, typically used with JavaScript. They enable building modern web applications with capabilities previously restricted to native apps (camera access, offline support, background processing, and more).
-
-## API Categories
-
-### Audio and Accessibility
-
-- **Audio Output Devices API** -- Select audio output devices (Experimental).
-
-### Background and Bluetooth
-
-- **Background Fetch API** -- Manage long-running downloads.
-- **Background Synchronization API** -- Sync data in the background.
-- **Badging API** -- Display badges on app icons.
-- **Beacon API** -- Send analytics data.
-- **Web Bluetooth API** -- Connect to Bluetooth devices.
-
-### Canvas, CSS, and Communication
-
-- **Canvas API** -- 2D drawing on web pages.
-- **CSS APIs** (Painting, Font Loading, Typed Object Model).
-- **Clipboard API** -- Access clipboard data.
-- **Console API** -- Debugging tools.
-- **Cookie Store API** -- Manage cookies.
-- **Credential Management API** -- Handle authentication.
-
-### DOM and Device
-
-- **Document Object Model (DOM)** -- Core web API for manipulating page structure.
-- **Device Motion/Orientation Events** -- Access device sensors.
-- **Device Memory API** -- Detect device capabilities.
-
-### Fetch and File System
-
-- **Fetch API** -- Modern HTTP requests.
-- **File API** -- Access file data.
-- **File System API** -- Work with local files.
-- **Fullscreen API** -- Enter fullscreen mode.
-
-### Geolocation and Graphics
-
-- **Geolocation API** -- Get user location.
-- **Gamepad API** -- Connect game controllers.
-- **WebGL** -- 3D graphics rendering.
-- **WebGPU API** -- GPU computing.
-
-### History and HTML
-
-- **History API** -- Navigate browser history.
-- **HTML DOM API** -- Manipulate HTML elements.
-- **HTML Drag and Drop API** -- Native drag-and-drop support.
-
-### Input and IndexedDB
-
-- **IndexedDB API** -- Client-side structured database.
-- **Intersection Observer API** -- Track element visibility.
-
-### Media and MediaStream
-
-- **Media Capture and Streams API** -- Access camera and microphone.
-- **MediaStream Recording API** -- Record audio and video.
-- **Media Session API** -- Control playback.
-- **Media Source Extensions** -- Stream media content.
-
-### Navigation and Network
-
-- **Navigation API** -- Client-side routing.
-- **Network Information API** -- Detect connection type.
-
-### Payment and Performance
-
-- **Payment Request API** -- Checkout processing.
-- **Performance APIs** -- Monitor application performance.
-- **Permissions API** -- Request feature permissions.
-- **Picture-in-Picture API** -- Float video players.
-- **Pointer Events** -- Handle input devices.
-- **Push API** -- Receive push notifications.
-
-### Storage and Sensors
-
-- **Service Worker API** -- Offline functionality.
-- **Storage API** -- Persistent storage.
-- **Streams API** -- Work with data streams.
-- **Screen Capture API** -- Record screen content.
-
-### Video and Virtual Reality
-
-- **ViewTransition API** -- Animate page transitions.
-- **WebXR Device API** -- VR/AR experiences.
-
-### WebSocket and Web Workers
-
-- **WebSocket API** -- Real-time bidirectional communication.
-- **Web Workers API** -- Background processing.
-- **Web Audio API** -- Audio processing and synthesis.
-- **Web Authentication API** -- WebAuthn support.
-- **Web Storage API** -- `localStorage` and `sessionStorage`.
-
-### XML
-
-- **XMLHttpRequest API** -- Legacy HTTP requests (largely superseded by Fetch).
-
-## Key Interface Examples
-
-### Core DOM Interfaces
-
-```javascript
-Document, Element, HTMLElement
-Node, NodeList
-DocumentFragment
-Attr, NamedNodeMap
-```
-
-### Event Handling
-
-```javascript
-Event, EventTarget, CustomEvent
-MouseEvent, KeyboardEvent, TouchEvent
-PointerEvent, DragEvent
-```
-
-### Async Operations
-
-```javascript
-// Promise-based APIs
-AbortController, AbortSignal
-Fetch, Request, Response
-```
-
-### Media and Graphics
-
-```javascript
-HTMLMediaElement, AudioContext
-Canvas, CanvasRenderingContext2D
-WebGL2RenderingContext, GPU
-```
-
-### Storage and Databases
-
-```javascript
-Storage             // localStorage, sessionStorage
-IndexedDB           // IDBDatabase, IDBTransaction
-CacheStorage        // Service Worker caching
-```
-
-## Key Concepts
-
-1. **Progressive Enhancement** -- APIs gracefully degrade on older browsers.
-2. **Standards-based** -- Follow W3C and WHATWG specifications.
-3. **Experimental APIs** -- Marked for features still in development; may change or be removed.
-4. **Deprecated APIs** -- Legacy features being phased out; avoid in new projects.
-5. **Non-standard APIs** -- Browser-specific implementations; use with caution.
-
-## Important Notes
-
-- Web APIs are typically used with JavaScript but are not limited to it.
-- Many APIs require **user permission** (Geolocation, Camera, Microphone).
-- Some APIs are **experimental** and may change or be removed.
-- Browser support varies by API -- always check compatibility before use.
-- Older deprecated APIs should be avoided in new projects.
diff --git a/skills/create-web-form/references/web-performance.md b/skills/create-web-form/references/web-performance.md
deleted file mode 100644
index d8f7d51c6..000000000
--- a/skills/create-web-form/references/web-performance.md
+++ /dev/null
@@ -1,974 +0,0 @@
-# Web Performance Reference
-
-A consolidated reference guide covering web performance concepts, optimization techniques, and the Performance API, sourced from the Mozilla Developer Network (MDN).
-
----
-
-## Table of Contents
-
-1. [Web Performance Overview](#1-web-performance-overview)
-2. [Performance Fundamentals](#2-performance-fundamentals)
-3. [Performance Best Practices](#3-performance-best-practices)
-4. [HTML Performance](#4-html-performance)
-5. [JavaScript Performance](#5-javascript-performance)
-6. [CSS Performance](#6-css-performance)
-7. [Performance API](#7-performance-api)
-8. [Performance Data](#8-performance-data)
-9. [Server Timing](#9-server-timing)
-10. [User Timing](#10-user-timing)
-
----
-
-## 1. Web Performance Overview
-
-> **Source:** <https://developer.mozilla.org/en-US/docs/Web/Performance>
-
-### Definition
-
-**Web performance** encompasses:
-
-- Objective measurements (load time, frames per second, time to interactive)
-- Perceived user experience of load and response times
-- Smoothness during user interactions (scrolling, animations, button responsiveness)
-
-### Recommended Timings
-
-| Target | Threshold |
-|--------|-----------|
-| Page load indication | 1 second |
-| Idling | 50ms |
-| Animations | 16.7ms (60 FPS) |
-| User input response | 50-200ms |
-
-Users abandon sites that respond slowly. The goal is to minimize loading and response times while adding features that conceal latency by maximizing availability and interactivity as soon as possible.
-
-### Key Performance Metrics
-
-| Metric | Full Name | Definition |
-|--------|-----------|------------|
-| **FCP** | First Contentful Paint | First time any content appears |
-| **LCP** | Largest Contentful Paint | Largest content element visible |
-| **CLS** | Cumulative Layout Shift | Visual stability during interactions |
-| **INP** | Interaction to Next Paint | Responsiveness to user input |
-| **TTFB** | Time to First Byte | Server response time |
-| **TTI** | Time to Interactive | Page becomes fully interactive |
-| **Jank** | -- | Non-smooth animation or scrolling |
-
-### Performance API Categories
-
-- **High-precision timing**: Sub-millisecond monitoring via stable monotonic clock
-- **Navigation Timing**: Metrics for page navigation (DOMContentLoaded, load time)
-- **Resource Timing**: Detailed network timing for individual resources
-- **User Timing**: Custom marks and measures
-- **Long Animation Frames (LoAF)**: Identifies janky animations
-- **Server Timing**: Backend performance metrics
-
-### Related Browser APIs
-
-- **Page Visibility API**: Track document visibility state
-- **Background Tasks API** (`requestIdleCallback()`): Queue non-blocking tasks
-- **Intersection Observer API**: Asynchronously monitor element visibility
-- **Network Information API**: Detect connection type for adaptive content
-- **Battery Status API**: Optimize for power-constrained devices
-- **Beacon API**: Send performance data to analytics
-- **Media Capabilities API**: Check device media support
-
-### Resource Loading Hints
-
-- **DNS-prefetch**: Pre-resolve domain names
-- **Preconnect**: Establish early connections
-- **Prefetch**: Load resources before needed
-- **Preload**: Load critical resources early
-
-### Monitoring Approaches
-
-- **Real User Monitoring (RUM)**: Long-term trend analysis from actual users
-- **Synthetic Monitoring**: Controlled regression testing during development
-
----
-
-## 2. Performance Fundamentals
-
-> **Source:** <https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Performance>
-
-### Why Web Performance Matters
-
-- Promotes accessibility and inclusive design
-- Enhances user experience and retention
-- Directly impacts business goals and conversions
-
-### Core Components
-
-- Web page loading performance
-- Content rendering in browsers
-- User agent capabilities and constraints
-- Performance across different user groups
-
-### Perceived Performance
-
-Metrics focused on user perception rather than raw milliseconds:
-
-- **Page load time** -- initial content availability
-- **Responsiveness** -- interaction feedback speed
-- **Animation smoothness** -- visual fluidity
-- **Scrolling smoothness** -- scroll interaction quality
-
-### Optimization Areas
-
-| Area | Focus | Impact |
-|------|-------|--------|
-| **Multimedia (Images)** | Media optimization based on device capability, size, pixel density | Reduces bytes per image |
-| **Multimedia (Video)** | Video compression, audio track removal from background videos | Reduces file size |
-| **JavaScript** | Best practices for interactive experiences | Improves responsiveness, battery life |
-| **HTML** | DOM node minimization, optimal attribute ordering | Improves load and render time |
-| **CSS** | Feature-specific optimization | Prevents negative performance impact |
-
-### Performance Strategy
-
-- **Performance budgets**: Set limits on asset sizes
-- **Performance culture**: Organizational commitment
-- **Regression prevention**: Avoid bloat over time
-- **Mobile-first approaches**: Responsive images and adaptive media delivery
-
----
-
-## 3. Performance Best Practices
-
-> **Source:** <https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Performance/Best_practices>
-
-### Core Best Practices
-
-1. **Learn the Critical Rendering Path** -- Understand how browsers render pages to optimize performance
-2. **Use Resource Hints** -- `rel=preconnect`, `rel=dns-prefetch`, `rel=prefetch`, `rel=preload`
-3. **Minimize JavaScript** -- Only load JavaScript needed for the current page
-4. **Optimize CSS** -- Address CSS performance factors, load CSS asynchronously when possible
-5. **Use HTTP/2** -- Deploy HTTP/2 on your server or CDN
-6. **Use a CDN** -- Significantly reduces resource load times
-7. **Compress Resources** -- Use gzip, Brotli, or Zopfli compression
-8. **Optimize Images** -- Use CSS animations or SVG when possible
-9. **Implement Lazy Loading** -- Load content outside viewport lazily; use the `loading` attribute on `<img>` elements
-10. **Focus on User Perception** -- Perceived performance matters as much as actual timing
-
-### Asynchronous CSS Loading
-
-```html
-<link
-  id="my-stylesheet"
-  rel="stylesheet"
-  href="/path/to/my.css"
-  media="print" />
-<noscript><link rel="stylesheet" href="/path/to/my.css" /></noscript>
-```
-
-```javascript
-const stylesheet = document.getElementById("my-stylesheet");
-stylesheet.addEventListener("load", () => {
-  stylesheet.media = "all";
-});
-```
-
-### Critical CSS Inlining
-
-- Inline CSS for above-the-fold content using `<style>` tags
-- Prevents Flash of Unstyled Text (FOUT)
-- Improves perceived performance
-
-### JavaScript Loading
-
-- Use `async` or `defer` attributes on script tags
-- JavaScript only blocks rendering for elements after the script tag in the DOM
-
-### Web Font Best Practices
-
-1. **Font Format Selection**: Use WOFF and WOFF2 (built-in compression); compress EOT and TTF with gzip or Brotli
-2. **Font Loading Strategy**: Use `font-display: swap` to prevent rendering blocks; optimize `font-weight` to match the web font closely
-3. **Avoid Icon Fonts**: Use compressed SVG instead; inline SVG data in HTML to avoid additional HTTP requests
-
-### Tools and Measurement
-
-- [Firefox Dev Tools](https://firefox-source-docs.mozilla.org/devtools-user/performance/index.html)
-- [PageSpeed Insights](https://pagespeed.web.dev/)
-- [Lighthouse](https://developer.chrome.com/docs/lighthouse/overview/)
-- [WebPageTest.org](https://www.webpagetest.org/)
-- [Chrome User Experience Report](https://developer.chrome.com/docs/crux/)
-- `window.performance.timing` (native Performance API)
-
-### Practices to Avoid
-
-- Downloading everything unnecessarily
-- Using uncompressed media files
-
----
-
-## 4. HTML Performance
-
-> **Source:** <https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Performance/HTML>
-
-### Main HTML-Related Performance Bottlenecks
-
-- Image and video file sizes (replaced elements)
-- Embedded content delivery (`<iframe>` elements)
-- Resource loading order
-
-### Responsive Image Handling
-
-**Using `srcset` and `sizes` for different screen widths:**
-
-```html
-<img
-  srcset="480w.jpg 480w, 800w.jpg 800w"
-  sizes="(width <= 600px) 480px, 800px"
-  src="800w.jpg"
-  alt="Family portrait" />
-```
-
-**Using `srcset` for different device resolutions:**
-
-```html
-<img
-  srcset="320w.jpg, 480w.jpg 1.5x, 640w.jpg 2x"
-  src="640w.jpg"
-  alt="Family portrait" />
-```
-
-**Using the `<picture>` element:**
-
-```html
-<picture>
-  <source media="(width < 800px)" srcset="narrow-banner-480w.jpg" />
-  <source media="(width >= 800px)" srcset="wide-banner-800w.jpg" />
-  <img src="large-banner-800w.jpg" alt="Dense forest scene" />
-</picture>
-```
-
-### Lazy Loading
-
-**Images:**
-
-```html
-<img src="800w.jpg" alt="Family portrait" loading="lazy" />
-```
-
-**Video (disable preload):**
-
-```html
-<video controls preload="none" poster="poster.jpg">
-  <source src="video.webm" type="video/webm" />
-  <source src="video.mp4" type="video/mp4" />
-</video>
-```
-
-**Iframes:**
-
-```html
-<iframe src="https://example.com" loading="lazy" width="600" height="400"></iframe>
-```
-
-### Iframe Best Practices
-
-Avoid embedded `<iframe>` elements unless absolutely necessary. Problems include:
-
-- Extra HTTP requests required
-- Creates a separate page instance (expensive)
-- Cannot share cached assets
-- Separate CSS and JavaScript handling required
-
-**Alternative:** Use `fetch()` and DOM scripting to load content into the same page.
-
-### JavaScript Loading in HTML
-
-**`async` attribute** -- fetches in parallel with DOM parsing, does not block rendering:
-
-```html
-<script async src="index.js"></script>
-```
-
-**`defer` attribute** -- executes after document parsing but before `DOMContentLoaded` event.
-
-**Module loading** -- split code into modules and load parts as needed.
-
-### Resource Preloading
-
-```html
-<link rel="preload" href="sintel-short.mp4" as="video" type="video/mp4" />
-```
-
-Other `rel` attributes for performance:
-
-- `rel="dns-prefetch"` -- prefetch DNS lookups
-- `rel="preconnect"` -- pre-establish connections
-- `rel="modulepreload"` -- preload JavaScript modules
-- `rel="prefetch"` -- load resources for future navigation
-
-### Resource Loading Order
-
-1. **HTML** is parsed first in source order
-2. **CSS** is parsed; linked assets (images, fonts) start fetching
-3. **JavaScript** is parsed and executed (blocks subsequent HTML parsing by default)
-4. **Styling** is computed for HTML elements
-5. **Rendering** of styled content to the screen
-
-### Key Takeaway
-
-HTML is simple and fast by default. Focus on:
-
-- Minimizing bytes downloaded (images and videos)
-- Controlling asset loading order (async, defer, preload)
-- Reducing unnecessary embedded content (iframes)
-- Responsive serving of replaced elements (srcset, picture, media queries)
-
-HTML file size minification provides negligible benefits compared to optimizing media assets.
-
----
-
-## 5. JavaScript Performance
-
-> **Source:** <https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Performance/JavaScript>
-
-### Core Principle
-
-**Measure first.** Use browser network and performance tools to identify what actually needs optimizing before implementing techniques.
-
-### Optimizing Downloads
-
-- **Use minimal JavaScript** -- avoid frameworks for static experiences
-- **Remove unused code** -- delete functionality not being used
-- **Leverage built-in browser features**: built-in form validation, native `<video>` players, CSS animations instead of JavaScript libraries
-- **Minification** -- reduces file character count and bytes
-- **Compression** -- gzip (standard) or Brotli (generally outperforms gzip)
-- **Module bundlers** -- use webpack for optimization and code splitting
-
-### Loading Critical Assets Early
-
-```html
-<!-- Preload standard JavaScript -->
-<link rel="preload" href="important-js.js" as="script" />
-
-<!-- Preload JavaScript module -->
-<link rel="modulepreload" href="important-module.js" />
-```
-
-### Deferring Non-Critical JavaScript
-
-**Async:**
-
-```html
-<script async src="main.js"></script>
-```
-
-**Defer:**
-
-```html
-<script defer src="main.js"></script>
-```
-
-**Dynamic loading:**
-
-```javascript
-const scriptElem = document.createElement("script");
-scriptElem.src = "index.js";
-scriptElem.addEventListener("load", () => {
-  init();
-});
-document.head.append(scriptElem);
-```
-
-**Dynamic module import:**
-
-```javascript
-import("./modules/myModule.js").then((module) => {
-  // Use the loaded module
-});
-```
-
-### Breaking Down Long Tasks
-
-Tasks taking more than 50ms are "long tasks" that block the main thread. Use task yielding:
-
-```javascript
-function yieldFunc() {
-  if ("scheduler" in window && "yield" in scheduler) {
-    return scheduler.yield();
-  }
-  return new Promise((resolve) => {
-    setTimeout(resolve, 0);
-  });
-}
-
-async function main() {
-  const tasks = [a, b, c, d, e];
-  while (tasks.length > 0) {
-    const task = tasks.shift();
-    task();
-    await yieldFunc();
-  }
-}
-```
-
-### Animation Best Practices
-
-- Reduce non-essential animations
-- Provide an opt-out for users on low-power devices
-- Prefer CSS animations over JavaScript (much faster and more efficient)
-- For canvas animations, use `requestAnimationFrame()`:
-
-```javascript
-function loop() {
-  ctx.fillStyle = "rgb(0 0 0 / 25%)";
-  ctx.fillRect(0, 0, width, height);
-  for (const ball of balls) {
-    ball.draw();
-    ball.update();
-  }
-  requestAnimationFrame(loop);
-}
-loop();
-```
-
-### Event Performance
-
-- Remove unnecessary event listeners with `removeEventListener()`
-- Use event delegation (single listener on parent instead of multiple on children):
-
-```javascript
-parent.addEventListener("click", (event) => {
-  if (event.target.matches(".child")) {
-    // Handle child click
-  }
-});
-```
-
-### Efficient Code Patterns
-
-**Batch DOM changes:**
-
-```javascript
-const fragment = document.createDocumentFragment();
-for (let i = 0; i < items.length; i++) {
-  const li = document.createElement("li");
-  li.textContent = items[i];
-  fragment.appendChild(li);
-}
-ul.appendChild(fragment); // Single DOM operation
-```
-
-**Exit loops early:**
-
-```javascript
-for (let i = 0; i < array.length; i++) {
-  if (array[i] === toFind) {
-    processMatchingArray(array);
-    break;
-  }
-}
-```
-
-**Move work outside loops:**
-
-```javascript
-// Fetch once, iterate in-memory
-const response = await fetch(`/results?number=${number}`);
-const results = await response.json();
-for (let i = 0; i < number; i++) {
-  processResult(results[i]);
-}
-```
-
-### Offload Computation
-
-- **Asynchronous JavaScript** -- `async`/`await` for non-blocking I/O
-- **Web Workers** -- offload heavy computation to a separate thread
-- **WebGPU** -- use the system GPU for high-performance computations
-
----
-
-## 6. CSS Performance
-
-> **Source:** <https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Performance/CSS>
-
-### Rendering and CSSOM Optimization
-
-**Remove unnecessary styles:**
-
-- Parse only used CSS rules
-- Clean up unused styles added during development
-
-**Split CSS into separate modules:**
-
-```html
-<!-- Render-blocking -->
-<link rel="stylesheet" href="styles.css" />
-
-<!-- Non-blocking with media queries -->
-<link rel="stylesheet" href="print.css" media="print" />
-<link rel="stylesheet" href="mobile.css" media="screen and (width <= 480px)" />
-```
-
-**Minify and compress CSS** as part of the build process with gzip compression on servers.
-
-**Simplify selectors:**
-
-```css
-/* Avoid overly complex selectors */
-body div#main-content article.post h2.headline {
-  font-size: 24px;
-}
-
-/* Prefer simple selectors */
-.headline {
-  font-size: 24px;
-}
-```
-
-**Avoid universal over-application:**
-
-```css
-/* Problematic */
-body * {
-  font-size: 14px;
-  display: flex;
-}
-```
-
-**Reduce HTTP requests with CSS sprites** -- combine multiple small images into one file and use `background-position`.
-
-**Preload critical assets:**
-
-```html
-<link rel="preload" href="style.css" as="style" />
-<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin />
-```
-
-### Animation Performance
-
-**Properties that cause reflow/repaint (avoid animating):**
-
-- Dimensions: `width`, `height`, `border`, `padding`
-- Position: `margin`, `top`, `bottom`, `left`, `right`
-- Layout: `align-content`, `align-items`, `flex`
-- Visual effects: `box-shadow`
-
-**Safe properties to animate (GPU-accelerated):**
-
-- `transform`
-- `opacity`
-- `filter`
-
-**Respect user preferences:**
-
-```css
-@media (prefers-reduced-motion: reduce) {
-  * {
-    animation: none !important;
-    transition: none !important;
-  }
-}
-```
-
-### Advanced Optimization
-
-**`will-change` property** (use as a last resort only):
-
-```css
-.element {
-  will-change: opacity, transform;
-}
-```
-
-**CSS Containment:**
-
-```css
-article {
-  contain: content;
-}
-```
-
-**`content-visibility` (skip rendering until needed):**
-
-```css
-article {
-  content-visibility: auto;
-  contain-intrinsic-size: 1000px;
-}
-```
-
-### Font Performance
-
-**Load important fonts early:**
-
-```html
-<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin />
-```
-
-**Load only required glyphs:**
-
-```css
-@font-face {
-  font-family: "Open Sans";
-  src: url("font.woff2") format("woff2");
-  unicode-range: U+0025-00FF;
-}
-```
-
-**Define font display behavior:**
-
-```css
-@font-face {
-  font-family: "someFont";
-  src: url("font.woff") format("woff");
-  font-display: fallback;
-}
-```
-
-**Font tips:**
-
-- Use only 2-3 fonts maximum
-- Prefer web-safe fonts when possible
-- Consider `rel="preconnect"` for third-party font providers
-
----
-
-## 7. Performance API
-
-> **Source:** <https://developer.mozilla.org/en-US/docs/Web/API/Performance_API>
-
-### Overview
-
-The Performance API is a group of standards used to measure web application performance. It provides built-in metrics and enables developers to add custom measurements to the browser's performance timeline with high-precision timestamps.
-
-Available in both `Window` and `Worker` global scopes via `Window.performance` and `WorkerGlobalScope.performance`.
-
-### Core Concepts
-
-Each performance metric is represented by a `PerformanceEntry` with: `name`, `duration`, `startTime`, and `type`.
-
-Most entries are automatically recorded and accessible via:
-
-- `Performance.getEntries()`
-- `PerformanceObserver` (preferred method)
-
-### Main Interfaces
-
-**Performance Management:**
-
-- `Performance` -- main interface for accessing performance measurements
-- `PerformanceEntry` -- base interface for all performance metrics
-- `PerformanceObserver` -- listens for new performance entries as they are recorded
-
-**Custom Measurements:**
-
-- `PerformanceMark` -- custom markers on the performance timeline
-- `PerformanceMeasure` -- custom measurements between two entries
-
-**Built-in Metrics:**
-
-| Interface | Purpose |
-|-----------|---------|
-| `PerformanceNavigationTiming` | Document navigation timings (load time, etc.) |
-| `PerformanceResourceTiming` | Network metrics for resources (images, scripts, CSS, fetch calls) |
-| `PerformancePaintTiming` | Render operations during page construction |
-| `PerformanceEventTiming` | Event latency and Interaction to Next Paint (INP) |
-| `LargestContentfulPaint` | Render time of largest visible content |
-| `LayoutShift` | Page layout stability metrics |
-| `PerformanceLongTaskTiming` | Long-running tasks blocking rendering |
-| `PerformanceLongAnimationFrameTiming` | Long animation frame metrics |
-| `PerformanceServerTiming` | Server metrics from `Server-Timing` HTTP header |
-
-### Usage Pattern
-
-```javascript
-// Using PerformanceObserver (recommended)
-const observer = new PerformanceObserver((list) => {
-  for (const entry of list.getEntries()) {
-    console.log(`${entry.name}: ${entry.duration}ms`);
-  }
-});
-observer.observe({ entryTypes: ["navigation", "resource", "paint"] });
-
-// Custom measurements
-performance.mark("start-operation");
-// ... perform work ...
-performance.mark("end-operation");
-performance.measure("operation-duration", "start-operation", "end-operation");
-```
-
----
-
-## 8. Performance Data
-
-> **Source:** <https://developer.mozilla.org/en-US/docs/Web/API/Performance_API/Performance_data>
-
-### Types of Performance Entries
-
-| Entry Type | Interface | Purpose |
-|------------|-----------|---------|
-| `"element"` | PerformanceElementTiming | Load and render time for specific DOM elements |
-| `"event"` | PerformanceEventTiming | Browser response time to event triggers |
-| `"first-input"` | PerformanceEventTiming | First Input Delay measurement |
-| `"largest-contentful-paint"` | LargestContentfulPaint | Largest paint during page load |
-| `"layout-shift"` | LayoutShift | Page layout shift metrics |
-| `"longtask"` | PerformanceLongTaskTiming | Tasks taking 50ms or more |
-| `"mark"` | PerformanceMark | Custom developer timestamps |
-| `"measure"` | PerformanceMeasure | Custom measurements between timestamps |
-| `"navigation"` | PerformanceNavigationTiming | Navigation and initial page load metrics |
-| `"paint"` | PerformancePaintTiming | Key rendering moments during page load |
-| `"resource"` | PerformanceResourceTiming | Resource fetch duration |
-| `"visibility-state"` | VisibilityStateEntry | Tab visibility state changes |
-
-### Accessing Performance Data
-
-**Method 1: PerformanceObserver (preferred)**
-
-```javascript
-function logEventDuration(entries) {
-  const events = entries.getEntriesByType("event");
-  for (const event of events) {
-    console.log(
-      `Event handler took: ${event.processingEnd - event.processingStart} milliseconds`
-    );
-  }
-}
-
-const observer = new PerformanceObserver(logEventDuration);
-observer.observe({ type: "event", buffered: true });
-```
-
-Advantages of PerformanceObserver:
-
-- Automatically filters duplicate entries
-- Asynchronous delivery during idle time
-- Required for some entry types
-- Lower performance impact
-
-**Method 2: Direct query methods**
-
-```javascript
-performance.getEntries();              // All entries
-performance.getEntriesByType(type);    // Entries of specific type
-performance.getEntriesByName(name);    // Entries with specific name
-```
-
-### Performance Entry Buffer Sizes
-
-| Entry Type | Max Buffer Size |
-|------------|----------------|
-| `"resource"` | 250 (adjustable) |
-| `"longtask"` | 200 |
-| `"element"` | 150 |
-| `"event"` | 150 |
-| `"layout-shift"` | 150 |
-| `"largest-contentful-paint"` | 150 |
-| `"visibility-state"` | 50 |
-| `"mark"` | Infinite |
-| `"measure"` | Infinite |
-| `"navigation"` | Infinite |
-| `"paint"` | 2 (fixed) |
-| `"first-input"` | 1 (fixed) |
-
-### Handling Dropped Entries
-
-```javascript
-function perfObserver(list, observer, droppedEntriesCount) {
-  list.getEntries().forEach((entry) => {
-    // process entries
-  });
-  if (droppedEntriesCount > 0) {
-    console.warn(
-      `${droppedEntriesCount} entries were dropped because the buffer was full.`
-    );
-  }
-}
-const observer = new PerformanceObserver(perfObserver);
-observer.observe({ type: "resource", buffered: true });
-```
-
-### JSON Serialization
-
-All performance entries provide a `toJSON()` method:
-
-```javascript
-const observer = new PerformanceObserver((list) => {
-  list.getEntries().forEach((entry) => {
-    console.log(entry.toJSON());
-  });
-});
-observer.observe({ type: "event", buffered: true });
-```
-
-### Opt-In Metrics
-
-Some metrics require explicit configuration:
-
-- **Element Timing** -- add `elementtiming` attribute to elements
-- **User Timing** -- call Performance API methods at relevant points
-- **Server Timing** -- server sends `Server-Timing` HTTP header
-
----
-
-## 9. Server Timing
-
-> **Source:** <https://developer.mozilla.org/en-US/docs/Web/API/Performance_API/Server_timing>
-
-### What is Server Timing?
-
-Server Timing is part of the Performance API and allows servers to communicate metrics about the request-response cycle to the user agent. It surfaces backend server timing metrics such as database read/write times, CPU time, and file system access.
-
-### Server-Timing HTTP Header Examples
-
-```http
-// Single metric without value
-Server-Timing: missedCache
-
-// Single metric with value
-Server-Timing: cpu;dur=2.4
-
-// Single metric with description and value
-Server-Timing: cache;desc="Cache Read";dur=23.2
-
-// Two metrics with values
-Server-Timing: db;dur=53, app;dur=47.2
-
-// Server-Timing as trailer
-Trailer: Server-Timing
---- response body ---
-Server-Timing: total;dur=123.4
-```
-
-### Retrieving Server Metrics in JavaScript
-
-Server timing metrics are stored as `PerformanceServerTiming` entries, accessed within `"navigation"` and `"resource"` performance entries via the `PerformanceResourceTiming.serverTiming` property.
-
-```javascript
-const observer = new PerformanceObserver((list) => {
-  list.getEntries().forEach((entry) => {
-    entry.serverTiming.forEach((serverEntry) => {
-      console.log(
-        `${serverEntry.name} (${serverEntry.description}) duration: ${serverEntry.duration}`
-      );
-      // Logs "cache (Cache Read) duration: 23.2"
-      // Logs "db () duration: 53"
-      // Logs "app () duration: 47.2"
-    });
-  });
-});
-
-["navigation", "resource"].forEach((type) =>
-  observer.observe({ type, buffered: true })
-);
-```
-
-### Privacy and Security Considerations
-
-- The `Server-Timing` header may expose sensitive application and infrastructure information; metrics should only be returned to authenticated users
-- `PerformanceServerTiming` is restricted to the same origin by default
-- Use the `Timing-Allow-Origin` header to specify allowed cross-origin domains
-- Only available in secure contexts (HTTPS) in some browsers
-- There is no clock synchronization between server, client, and intermediate proxies; server timestamps may not meaningfully map to the client timeline `startTime`
-
----
-
-## 10. User Timing
-
-> **Source:** <https://developer.mozilla.org/en-US/docs/Web/API/Performance_API/User_timing>
-
-### Overview
-
-User Timing is part of the Performance API and allows you to measure application performance using high-precision timestamps. It consists of two main components:
-
-- **`PerformanceMark`** entries -- named marks at any location in an application
-- **`PerformanceMeasure`** entries -- time measurements between two marks
-
-### Adding Performance Markers
-
-```javascript
-// Basic marks
-performance.mark("login-started");
-performance.mark("login-finished");
-
-// Advanced mark with options
-performance.mark("login-started", {
-  startTime: 12.5,
-  detail: { htmlElement: myElement.id },
-});
-```
-
-### Measuring Duration Between Markers
-
-```javascript
-const loginMeasure = performance.measure(
-  "login-duration",
-  "login-started",
-  "login-finished"
-);
-console.log(loginMeasure.duration);
-```
-
-**Advanced measurement from an event timestamp to a mark:**
-
-```javascript
-loginButton.addEventListener("click", (clickEvent) => {
-  fetch(loginURL).then((data) => {
-    renderLoggedInUser(data);
-    const marker = performance.mark("login-finished");
-    performance.measure("login-click", {
-      detail: { htmlElement: myElement.id },
-      start: clickEvent.timeStamp,
-      end: marker.startTime,
-    });
-  });
-});
-```
-
-### Observing Performance Measures
-
-```javascript
-function perfObserver(list, observer) {
-  list.getEntries().forEach((entry) => {
-    if (entry.entryType === "mark") {
-      console.log(`${entry.name}'s startTime: ${entry.startTime}`);
-    }
-    if (entry.entryType === "measure") {
-      console.log(`${entry.name}'s duration: ${entry.duration}`);
-    }
-  });
-}
-const observer = new PerformanceObserver(perfObserver);
-observer.observe({ entryTypes: ["measure", "mark"] });
-```
-
-### Retrieving Markers and Measures
-
-```javascript
-// All entries
-const entries = performance.getEntries();
-
-// Filter by type
-const marks = performance.getEntriesByType("mark");
-const measures = performance.getEntriesByType("measure");
-
-// Retrieve by name
-const debugMarks = performance.getEntriesByName("debug-mark", "mark");
-```
-
-### Removing Markers and Measures
-
-```javascript
-// Clear all marks
-performance.clearMarks();
-
-// Remove specific mark
-performance.clearMarks("myMarker");
-
-// Clear all measures
-performance.clearMeasures();
-
-// Remove specific measure
-performance.clearMeasures("myMeasure");
-```
-
-### Advantages Over Date.now() and performance.now()
-
-- Meaningful names for better organization
-- Integrates with browser developer tools (Performance Panels)
-- Works seamlessly with other Performance APIs like `PerformanceObserver`
-- Better tooling integration overall
diff --git a/skills/create-web-form/references/xml.md b/skills/create-web-form/references/xml.md
deleted file mode 100644
index a6b137794..000000000
--- a/skills/create-web-form/references/xml.md
+++ /dev/null
@@ -1,366 +0,0 @@
-# XML Reference
-
----
-
-## XML Introduction
-
-> Source: <https://developer.mozilla.org/en-US/docs/Web/XML/Guides/XML_introduction>
-
-### Overview
-
-**XML (Extensible Markup Language)** is a markup language similar to HTML, but without predefined tags. Instead, you define your own tags designed for your specific needs. It enables powerful data storage in a standardized format that can be stored, searched, and shared across systems and platforms.
-
-**XML-based languages include:** XHTML, MathML, SVG, RSS, and RDF.
-
-### Structure of an XML Document
-
-#### XML Declaration
-
-An XML declaration transmits metadata about the document.
-
-```xml
-<?xml version="1.0" encoding="UTF-8"?>
-```
-
-**Attributes:**
-
-- **`version`** -- The XML version used in the document.
-- **`encoding`** -- The character encoding used in the document.
-
-#### Comments
-
-```xml
-<!-- Comment -->
-```
-
-### "Correct" XML (Valid and Well-Formed)
-
-For an XML document to be correct, it must fulfill these conditions:
-
-1. Document must be **well-formed**.
-2. Document must conform to **all XML syntax rules**.
-3. Document must conform to **semantic rules** (usually set in an XML schema or DTD).
-
-#### Example -- Incorrect XML
-
-```xml
-<?xml version="1.0" encoding="UTF-8"?>
-<message>
-    <warning>
-        Hello World
-    <!--missing </warning> -->
-</message>
-```
-
-#### Example -- Corrected XML
-
-```xml
-<?xml version="1.0" encoding="UTF-8"?>
-<message>
-    <warning>
-         Hello World
-    </warning>
-</message>
-```
-
-A document containing undefined tags is invalid. Tags must be properly defined in a schema or DTD.
-
-### Character References
-
-Like HTML, XML uses character references for special reserved characters:
-
-| Entity    | Character | Description              |
-|-----------|-----------|--------------------------|
-| `&lt;`    | `<`       | Less than sign           |
-| `&gt;`    | `>`       | Greater than sign        |
-| `&amp;`   | `&`       | Ampersand                |
-| `&quot;`  | `"`       | Double quotation mark    |
-| `&apos;`  | `'`       | Apostrophe / single quote |
-
-#### Custom Entity Definition
-
-```xml
-<?xml version="1.0" encoding="UTF-8"?>
-<!DOCTYPE body [
-  <!ENTITY warning "Warning: Something bad happened... please refresh and try again.">
-]>
-<body>
-  <message> &warning; </message>
-</body>
-```
-
-#### Numeric Character References
-
-Use numeric references for special characters:
-
-- `&#xA9;` = (c) (copyright symbol)
-
-### Displaying XML
-
-#### Using a CSS Stylesheet
-
-```xml
-<?xml-stylesheet type="text/css" href="stylesheet.css"?>
-```
-
-#### Using XSLT (Recommended for Complex Transformations)
-
-```xml
-<?xml-stylesheet type="text/xsl" href="transform.xsl"?>
-```
-
-**XSLT (Extensible Stylesheet Language Transformations)** is a powerful method to transform XML into other languages such as HTML, making XML incredibly versatile.
-
-### Key Takeaways
-
-- XML is **standardized**, ensuring data can be parsed consistently across systems.
-- XML documents require proper **nesting and closing of tags** to be well-formed.
-- XML is **platform and language agnostic**.
-- Use **DTD or XML Schema** to define valid tag structures.
-- Use **XSLT** for powerful XML transformation capabilities.
-
----
-
-## Parsing and Serializing XML
-
-> Source: <https://developer.mozilla.org/en-US/docs/Web/XML/Guides/Parsing_and_serializing_XML>
-
-### Overview
-
-At times, you may need to parse XML content and convert it into a DOM tree, or conversely, serialize an existing DOM tree into XML.
-
-### Key Web Platform Objects
-
-| Object               | Purpose                                                                                      |
-|----------------------|----------------------------------------------------------------------------------------------|
-| **XMLSerializer**    | Serializes DOM trees, converting them into strings containing XML                            |
-| **DOMParser**        | Constructs a DOM tree by parsing a string containing XML, returning an XMLDocument or Document |
-| **fetch()**          | Loads content from a URL; XML content is returned as a text string you can parse with DOMParser |
-| **XMLHttpRequest**   | Precursor to fetch(); can return a resource as a Document via its `responseXML` property      |
-| **XPath**            | Creates address strings for specific portions of an XML document                              |
-
-### Creating an XML Document
-
-#### Parsing Strings into DOM Trees
-
-```javascript
-const xmlStr = '<q id="a"><span id="b">hey!</span></q>';
-const parser = new DOMParser();
-const doc = parser.parseFromString(xmlStr, "application/xml");
-// print the name of the root element or error message
-const errorNode = doc.querySelector("parsererror");
-if (errorNode) {
-  console.log("error while parsing");
-} else {
-  console.log(doc.documentElement.nodeName);
-}
-```
-
-#### Parsing URL-Addressable Resources into DOM Trees
-
-Using `fetch()`:
-
-```javascript
-fetch("example.xml")
-  .then((response) => response.text())
-  .then((text) => {
-    const parser = new DOMParser();
-    const doc = parser.parseFromString(text, "text/xml");
-    console.log(doc.documentElement.nodeName);
-  });
-```
-
-This fetches the resource as a text string, then uses `DOMParser.parseFromString()` to construct an `XMLDocument`.
-
-**Note:** If the document is HTML, the code returns a `Document`. If the document is XML, the resulting object is an `XMLDocument`. The two types are essentially the same; the difference is largely historical.
-
-### Serializing an XML Document
-
-#### Serializing DOM Trees to Strings
-
-To serialize a DOM tree `doc` into XML text, call `XMLSerializer.serializeToString()`:
-
-```javascript
-const serializer = new XMLSerializer();
-const xmlStr = serializer.serializeToString(doc);
-```
-
-#### Serializing HTML Documents
-
-If the DOM is an HTML document, you can use:
-
-Using `innerHTML` (descendants only):
-
-```javascript
-const docInnerHtml = document.documentElement.innerHTML;
-```
-
-Using `outerHTML` (node and all descendants):
-
-```javascript
-const docOuterHtml = document.documentElement.outerHTML;
-```
-
-### Related Technologies
-
-- XPath
-- fetch()
-- XMLHttpRequest
-- Document, XMLDocument, and HTMLDocument APIs
-
----
-
-## OpenSearch Description Format
-
-> Source: <https://developer.mozilla.org/en-US/docs/Web/XML/Guides/OpenSearch>
-
-### Overview
-
-The **OpenSearch description format** allows websites to describe their search engine interface, enabling browsers and client applications to integrate site-specific search functionality into the address bar. Supported by Firefox, Edge, Safari, and Chrome.
-
-- Browsers query search engines via URL templates.
-- The browser fills in the user's search terms at specified placeholders.
-- Example: `https://example.com/search?q={searchTerms}` becomes `https://example.com/search?q=foo`.
-- Sites register search engines via an XML description file linked in HTML.
-- **Note:** Chrome registers site search engines as "inactive" by default; users must manually activate them.
-
-### OpenSearch Description File
-
-#### Basic XML Template
-
-```xml
-<OpenSearchDescription
-  xmlns="http://a9.com/-/spec/opensearch/1.1/"
-  xmlns:moz="http://www.mozilla.org/2006/browser/search/">
-  <ShortName>[SNK]</ShortName>
-  <Description>[Search engine full name and summary]</Description>
-  <InputEncoding>[UTF-8]</InputEncoding>
-  <Image width="16" height="16" type="image/x-icon">[https://example.com/favicon.ico]</Image>
-  <Url type="text/html" template="[searchURL]"/>
-  <Url type="application/x-suggestions+json" template="[suggestionURL]"/>
-</OpenSearchDescription>
-```
-
-### Element Specifications
-
-#### ShortName
-
-- Short name for the search engine.
-- **Must be 16 or fewer characters.**
-- Plain text only; no HTML or markup.
-
-#### Description
-
-- Brief description of the search engine.
-- **Maximum 1024 characters.**
-- Plain text only; no HTML or markup.
-
-#### InputEncoding
-
-- Character encoding for submitting input to the search engine.
-- Example: `UTF-8`.
-
-#### Image
-
-- URL or data URL for the search engine icon.
-- **Recommended sizes:**
-  - 16x16 image of type `image/x-icon` (e.g., `/favicon.ico`)
-  - 64x64 image of type `image/jpeg` or `image/png`
-
-**Icon URL examples:**
-
-```xml
-<Image height="16" width="16" type="image/x-icon">https://example.com/favicon.ico</Image>
-```
-
-```xml
-<Image height="16" width="16">data:image/x-icon;base64,AAABAAEAEBAAA...DAAA=</Image>
-```
-
-**Important icon notes:**
-
-- Firefox caches icons as base64 `data:` URLs.
-- Search plug-ins are stored in the profile's `searchplugins/` folder.
-- `http:` and `https:` URLs are converted to `data:` URLs.
-- **Firefox rejects remotely-loaded icons larger than 10 kilobytes.**
-
-#### Url
-
-Describes the URL(s) to use for search queries using the `template` attribute.
-
-**Firefox-supported URL types:**
-
-| Type                                      | Purpose                                    |
-|-------------------------------------------|--------------------------------------------|
-| `type="text/html"`                        | Actual search query URL                    |
-| `type="application/x-suggestions+json"`   | Search suggestions in JSON format          |
-| `type="application/x-moz-keywordsearch"`  | Keyword search in location bar (Firefox-only) |
-
-**Dynamic parameters:**
-
-- `{searchTerms}` -- The user's search terms.
-- Other OpenSearch 1.1 parameters are also supported.
-
-### Linking to an OpenSearch Description File
-
-#### HTML Link Element
-
-```html
-<link
-  rel="search"
-  type="application/opensearchdescription+xml"
-  title="[searchTitle]"
-  href="[descriptionURL]" />
-```
-
-**Required attributes:**
-
-- `rel="search"` -- Establishes search engine relationship.
-- `type="application/opensearchdescription+xml"` -- MIME type.
-- `title="[searchTitle]"` -- Name of search (must match `<ShortName>`).
-- `href="[descriptionURL]"` -- URL to the XML description file.
-
-#### Multiple Search Engines Example
-
-```html
-<link
-  rel="search"
-  type="application/opensearchdescription+xml"
-  title="MySite: By Author"
-  href="http://example.com/mysiteauthor.xml" />
-
-<link
-  rel="search"
-  type="application/opensearchdescription+xml"
-  title="MySite: By Title"
-  href="http://example.com/mysitetitle.xml" />
-```
-
-### Supporting Automatic Updates
-
-Include an extra `Url` element with automatic update capability:
-
-```xml
-<Url
-  type="application/opensearchdescription+xml"
-  rel="self"
-  template="https://example.com/mysearchdescription.xml" />
-```
-
-This allows the OpenSearch description file to update automatically.
-
-### Troubleshooting Tips
-
-1. **Server Content-Type** -- Serve OpenSearch descriptions with `Content-Type: application/opensearchdescription+xml`.
-2. **XML Well-Formedness** -- Load the file directly in a browser to validate. Ampersands (`&`) must be escaped as `&amp;`. Tags must be closed with a trailing slash or matching end tag.
-3. **Missing xmlns Attribute** -- Always include `xmlns="http://a9.com/-/spec/opensearch/1.1/"` or Firefox will report: "Firefox could not download the search plugin."
-4. **Missing text/html URL** -- A `text/html` URL type **must** be included; Atom or RSS-only URLs will generate an error.
-5. **Favicon Size** -- Remotely fetched favicons must not exceed 10KB.
-6. **Browser Activation** -- Browsers may not activate site search shortcuts by default; check browser settings and manually activate if needed.
-
-#### Firefox Debugging
-
-Use `about:config` to enable logging:
-
-1. Set preference `browser.search.log` to `true`.
-2. View logs in Firefox Browser Console: Tools > Browser Tools > Browser Console.

From cd16dccae7a09fe5068c1c5c45bf57489f4e8ba8 Mon Sep 17 00:00:00 2001
From: Aaron Powell <me@aaron-powell.com>
Date: Fri, 13 Mar 2026 12:09:02 +1100
Subject: [PATCH 5/5] Updating readmes

---
 docs/README.instructions.md | 6 ------
 docs/README.skills.md       | 3 +--
 2 files changed, 1 insertion(+), 8 deletions(-)

diff --git a/docs/README.instructions.md b/docs/README.instructions.md
index f50183be3..671ac8e38 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)<br />[![Install in VS Code](https://img.shields.io/badge/VS_Code-Install-0098FF?style=flat-square&logo=visualstudiocode&logoColor=white)](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)<br />[![Install in VS Code Insiders](https://img.shields.io/badge/VS_Code_Insiders-Install-24bfa5?style=flat-square&logo=visualstudiocode&logoColor=white)](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)<br />[![Install in VS Code](https://img.shields.io/badge/VS_Code-Install-0098FF?style=flat-square&logo=visualstudiocode&logoColor=white)](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)<br />[![Install in VS Code Insiders](https://img.shields.io/badge/VS_Code_Insiders-Install-24bfa5?style=flat-square&logo=visualstudiocode&logoColor=white)](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)<br />[![Install in VS Code](https://img.shields.io/badge/VS_Code-Install-0098FF?style=flat-square&logo=visualstudiocode&logoColor=white)](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)<br />[![Install in VS Code Insiders](https://img.shields.io/badge/VS_Code_Insiders-Install-24bfa5?style=flat-square&logo=visualstudiocode&logoColor=white)](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)<br />[![Install in VS Code](https://img.shields.io/badge/VS_Code-Install-0098FF?style=flat-square&logo=visualstudiocode&logoColor=white)](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)<br />[![Install in VS Code Insiders](https://img.shields.io/badge/VS_Code_Insiders-Install-24bfa5?style=flat-square&logo=visualstudiocode&logoColor=white)](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)<br />[![Install in VS Code](https://img.shields.io/badge/VS_Code-Install-0098FF?style=flat-square&logo=visualstudiocode&logoColor=white)](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)<br />[![Install in VS Code Insiders](https://img.shields.io/badge/VS_Code_Insiders-Install-24bfa5?style=flat-square&logo=visualstudiocode&logoColor=white)](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)<br />[![Install in VS Code](https://img.shields.io/badge/VS_Code-Install-0098FF?style=flat-square&logo=visualstudiocode&logoColor=white)](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)<br />[![Install in VS Code Insiders](https://img.shields.io/badge/VS_Code_Insiders-Install-24bfa5?style=flat-square&logo=visualstudiocode&logoColor=white)](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)<br />[![Install in VS Code](https://img.shields.io/badge/VS_Code-Install-0098FF?style=flat-square&logo=visualstudiocode&logoColor=white)](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)<br />[![Install in VS Code Insiders](https://img.shields.io/badge/VS_Code_Insiders-Install-24bfa5?style=flat-square&logo=visualstudiocode&logoColor=white)](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)<br />[![Install in VS Code](https://img.shields.io/badge/VS_Code-Install-0098FF?style=flat-square&logo=visualstudiocode&logoColor=white)](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)<br />[![Install in VS Code Insiders](https://img.shields.io/badge/VS_Code_Insiders-Install-24bfa5?style=flat-square&logo=visualstudiocode&logoColor=white)](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)<br />[![Install in VS Code](https://img.shields.io/badge/VS_Code-Install-0098FF?style=flat-square&logo=visualstudiocode&logoColor=white)](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)<br />[![Install in VS Code Insiders](https://img.shields.io/badge/VS_Code_Insiders-Install-24bfa5?style=flat-square&logo=visualstudiocode&logoColor=white)](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)<br />[![Install in VS Code](https://img.shields.io/badge/VS_Code-Install-0098FF?style=flat-square&logo=visualstudiocode&logoColor=white)](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)<br />[![Install in VS Code Insiders](https://img.shields.io/badge/VS_Code_Insiders-Install-24bfa5?style=flat-square&logo=visualstudiocode&logoColor=white)](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)<br />[![Install in VS Code](https://img.shields.io/badge/VS_Code-Install-0098FF?style=flat-square&logo=visualstudiocode&logoColor=white)](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)<br />[![Install in VS Code Insiders](https://img.shields.io/badge/VS_Code_Insiders-Install-24bfa5?style=flat-square&logo=visualstudiocode&logoColor=white)](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)<br />[![Install in VS Code](https://img.shields.io/badge/VS_Code-Install-0098FF?style=flat-square&logo=visualstudiocode&logoColor=white)](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)<br />[![Install in VS Code Insiders](https://img.shields.io/badge/VS_Code_Insiders-Install-24bfa5?style=flat-square&logo=visualstudiocode&logoColor=white)](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)<br />[![Install in VS Code](https://img.shields.io/badge/VS_Code-Install-0098FF?style=flat-square&logo=visualstudiocode&logoColor=white)](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)<br />[![Install in VS Code Insiders](https://img.shields.io/badge/VS_Code_Insiders-Install-24bfa5?style=flat-square&logo=visualstudiocode&logoColor=white)](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)<br />[![Install in VS Code](https://img.shields.io/badge/VS_Code-Install-0098FF?style=flat-square&logo=visualstudiocode&logoColor=white)](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)<br />[![Install in VS Code Insiders](https://img.shields.io/badge/VS_Code_Insiders-Install-24bfa5?style=flat-square&logo=visualstudiocode&logoColor=white)](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)<br />[![Install in VS Code](https://img.shields.io/badge/VS_Code-Install-0098FF?style=flat-square&logo=visualstudiocode&logoColor=white)](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)<br />[![Install in VS Code Insiders](https://img.shields.io/badge/VS_Code_Insiders-Install-24bfa5?style=flat-square&logo=visualstudiocode&logoColor=white)](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)<br />[![Install in VS Code](https://img.shields.io/badge/VS_Code-Install-0098FF?style=flat-square&logo=visualstudiocode&logoColor=white)](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)<br />[![Install in VS Code Insiders](https://img.shields.io/badge/VS_Code_Insiders-Install-24bfa5?style=flat-square&logo=visualstudiocode&logoColor=white)](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)<br />[![Install in VS Code](https://img.shields.io/badge/VS_Code-Install-0098FF?style=flat-square&logo=visualstudiocode&logoColor=white)](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)<br />[![Install in VS Code Insiders](https://img.shields.io/badge/VS_Code_Insiders-Install-24bfa5?style=flat-square&logo=visualstudiocode&logoColor=white)](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)<br />[![Install in VS Code](https://img.shields.io/badge/VS_Code-Install-0098FF?style=flat-square&logo=visualstudiocode&logoColor=white)](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)<br />[![Install in VS Code Insiders](https://img.shields.io/badge/VS_Code_Insiders-Install-24bfa5?style=flat-square&logo=visualstudiocode&logoColor=white)](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)<br />[![Install in VS Code](https://img.shields.io/badge/VS_Code-Install-0098FF?style=flat-square&logo=visualstudiocode&logoColor=white)](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)<br />[![Install in VS Code Insiders](https://img.shields.io/badge/VS_Code_Insiders-Install-24bfa5?style=flat-square&logo=visualstudiocode&logoColor=white)](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)<br />[![Install in VS Code](https://img.shields.io/badge/VS_Code-Install-0098FF?style=flat-square&logo=visualstudiocode&logoColor=white)](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)<br />[![Install in VS Code Insiders](https://img.shields.io/badge/VS_Code_Insiders-Install-24bfa5?style=flat-square&logo=visualstudiocode&logoColor=white)](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)<br />[![Install in VS Code](https://img.shields.io/badge/VS_Code-Install-0098FF?style=flat-square&logo=visualstudiocode&logoColor=white)](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)<br />[![Install in VS Code Insiders](https://img.shields.io/badge/VS_Code_Insiders-Install-24bfa5?style=flat-square&logo=visualstudiocode&logoColor=white)](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)<br />[![Install in VS Code](https://img.shields.io/badge/VS_Code-Install-0098FF?style=flat-square&logo=visualstudiocode&logoColor=white)](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)<br />[![Install in VS Code Insiders](https://img.shields.io/badge/VS_Code_Insiders-Install-24bfa5?style=flat-square&logo=visualstudiocode&logoColor=white)](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)<br />[![Install in VS Code](https://img.shields.io/badge/VS_Code-Install-0098FF?style=flat-square&logo=visualstudiocode&logoColor=white)](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)<br />[![Install in VS Code Insiders](https://img.shields.io/badge/VS_Code_Insiders-Install-24bfa5?style=flat-square&logo=visualstudiocode&logoColor=white)](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)<br />[![Install in VS Code](https://img.shields.io/badge/VS_Code-Install-0098FF?style=flat-square&logo=visualstudiocode&logoColor=white)](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)<br />[![Install in VS Code Insiders](https://img.shields.io/badge/VS_Code_Insiders-Install-24bfa5?style=flat-square&logo=visualstudiocode&logoColor=white)](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)<br />[![Install in VS Code](https://img.shields.io/badge/VS_Code-Install-0098FF?style=flat-square&logo=visualstudiocode&logoColor=white)](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)<br />[![Install in VS Code Insiders](https://img.shields.io/badge/VS_Code_Insiders-Install-24bfa5?style=flat-square&logo=visualstudiocode&logoColor=white)](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)<br />[![Install in VS Code](https://img.shields.io/badge/VS_Code-Install-0098FF?style=flat-square&logo=visualstudiocode&logoColor=white)](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)<br />[![Install in VS Code Insiders](https://img.shields.io/badge/VS_Code_Insiders-Install-24bfa5?style=flat-square&logo=visualstudiocode&logoColor=white)](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)<br />[![Install in VS Code](https://img.shields.io/badge/VS_Code-Install-0098FF?style=flat-square&logo=visualstudiocode&logoColor=white)](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)<br />[![Install in VS Code Insiders](https://img.shields.io/badge/VS_Code_Insiders-Install-24bfa5?style=flat-square&logo=visualstudiocode&logoColor=white)](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)<br />[![Install in VS Code](https://img.shields.io/badge/VS_Code-Install-0098FF?style=flat-square&logo=visualstudiocode&logoColor=white)](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)<br />[![Install in VS Code Insiders](https://img.shields.io/badge/VS_Code_Insiders-Install-24bfa5?style=flat-square&logo=visualstudiocode&logoColor=white)](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)<br />[![Install in VS Code](https://img.shields.io/badge/VS_Code-Install-0098FF?style=flat-square&logo=visualstudiocode&logoColor=white)](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)<br />[![Install in VS Code Insiders](https://img.shields.io/badge/VS_Code_Insiders-Install-24bfa5?style=flat-square&logo=visualstudiocode&logoColor=white)](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)<br />[![Install in VS Code](https://img.shields.io/badge/VS_Code-Install-0098FF?style=flat-square&logo=visualstudiocode&logoColor=white)](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)<br />[![Install in VS Code Insiders](https://img.shields.io/badge/VS_Code_Insiders-Install-24bfa5?style=flat-square&logo=visualstudiocode&logoColor=white)](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)<br />[![Install in VS Code](https://img.shields.io/badge/VS_Code-Install-0098FF?style=flat-square&logo=visualstudiocode&logoColor=white)](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)<br />[![Install in VS Code Insiders](https://img.shields.io/badge/VS_Code_Insiders-Install-24bfa5?style=flat-square&logo=visualstudiocode&logoColor=white)](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)<br />[![Install in VS Code](https://img.shields.io/badge/VS_Code-Install-0098FF?style=flat-square&logo=visualstudiocode&logoColor=white)](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)<br />[![Install in VS Code Insiders](https://img.shields.io/badge/VS_Code_Insiders-Install-24bfa5?style=flat-square&logo=visualstudiocode&logoColor=white)](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)<br />[![Install in VS Code](https://img.shields.io/badge/VS_Code-Install-0098FF?style=flat-square&logo=visualstudiocode&logoColor=white)](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)<br />[![Install in VS Code Insiders](https://img.shields.io/badge/VS_Code_Insiders-Install-24bfa5?style=flat-square&logo=visualstudiocode&logoColor=white)](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)<br />[![Install in VS Code](https://img.shields.io/badge/VS_Code-Install-0098FF?style=flat-square&logo=visualstudiocode&logoColor=white)](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)<br />[![Install in VS Code Insiders](https://img.shields.io/badge/VS_Code_Insiders-Install-24bfa5?style=flat-square&logo=visualstudiocode&logoColor=white)](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)<br />[![Install in VS Code](https://img.shields.io/badge/VS_Code-Install-0098FF?style=flat-square&logo=visualstudiocode&logoColor=white)](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)<br />[![Install in VS Code Insiders](https://img.shields.io/badge/VS_Code_Insiders-Install-24bfa5?style=flat-square&logo=visualstudiocode&logoColor=white)](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)<br />[![Install in VS Code](https://img.shields.io/badge/VS_Code-Install-0098FF?style=flat-square&logo=visualstudiocode&logoColor=white)](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)<br />[![Install in VS Code Insiders](https://img.shields.io/badge/VS_Code_Insiders-Install-24bfa5?style=flat-square&logo=visualstudiocode&logoColor=white)](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)<br />[![Install in VS Code](https://img.shields.io/badge/VS_Code-Install-0098FF?style=flat-square&logo=visualstudiocode&logoColor=white)](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)<br />[![Install in VS Code Insiders](https://img.shields.io/badge/VS_Code_Insiders-Install-24bfa5?style=flat-square&logo=visualstudiocode&logoColor=white)](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)<br />[![Install in VS Code](https://img.shields.io/badge/VS_Code-Install-0098FF?style=flat-square&logo=visualstudiocode&logoColor=white)](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)<br />[![Install in VS Code Insiders](https://img.shields.io/badge/VS_Code_Insiders-Install-24bfa5?style=flat-square&logo=visualstudiocode&logoColor=white)](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)<br />[![Install in VS Code](https://img.shields.io/badge/VS_Code-Install-0098FF?style=flat-square&logo=visualstudiocode&logoColor=white)](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)<br />[![Install in VS Code Insiders](https://img.shields.io/badge/VS_Code_Insiders-Install-24bfa5?style=flat-square&logo=visualstudiocode&logoColor=white)](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)<br />[![Install in VS Code](https://img.shields.io/badge/VS_Code-Install-0098FF?style=flat-square&logo=visualstudiocode&logoColor=white)](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)<br />[![Install in VS Code Insiders](https://img.shields.io/badge/VS_Code_Insiders-Install-24bfa5?style=flat-square&logo=visualstudiocode&logoColor=white)](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 dd426af4c..54f3d60ca 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`<br />`references/aria-form-role.md`<br />`references/css-styling.md`<br />`references/form-basics.md`<br />`references/form-controls.md`<br />`references/form-data-handling.md`<br />`references/html-form-elements.md`<br />`references/html-form-example.md`<br />`references/hypertext-transfer-protocol.md`<br />`references/javascript.md`<br />`references/php-cookies.md`<br />`references/php-forms.md`<br />`references/php-json.md`<br />`references/php-mysql-database.md`<br />`references/progressive-web-app.md`<br />`references/python-as-web-framework.md`<br />`references/python-contact-form.md`<br />`references/python-flask-app.md`<br />`references/python-flask.md`<br />`references/security.md`<br />`references/styling-web-forms.md`<br />`references/web-api.md`<br />`references/web-performance.md`<br />`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 |
@@ -241,7 +240,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`<br />`references/architecture-patterns.md`<br />`references/browsers-engines.md`<br />`references/css-styling.md`<br />`references/data-formats-encoding.md`<br />`references/development-tools.md`<br />`references/glossary.md`<br />`references/html-markup.md`<br />`references/http-networking.md`<br />`references/javascript-programming.md`<br />`references/media-graphics.md`<br />`references/performance-optimization.md`<br />`references/security-authentication.md`<br />`references/servers-infrastructure.md`<br />`references/web-apis-dom.md`<br />`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`<br />`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`<br />`scripts/Invoke-WinMdQuery.ps1`<br />`scripts/Update-WinMdCache.ps1`<br />`scripts/cache-generator` |