--- description: MPA-First Development Mandate (Relaxed) - Guidelines for building Multi-Page Applications with jQuery for progressive enhancement globs: - "**/*.php" - "**/*.html" - "**/*.js" - "**/*.css" alwaysApply: false --- # GitHub Copilot Instructions: MPA-First Mandate ## Core Philosophy My primary goal is to build performant, resilient, and maintainable server-rendered **Multi-Page Applications (MPAs)**. - **Prioritize the Platform:** Use HTML, CSS, and server-side logic (PHP) first. - **Simplicity Over Complexity:** Choose simple, durable solutions over complex, trendy ones. - **Progressive Enhancement:** JavaScript is an enhancement, not a requirement. Core functionality must work without it. I use **jQuery** to implement these enhancements. --- ## 1. PRIME DIRECTIVE: MPA-Only Architecture - **You MUST build server-rendered MPAs.** Each distinct page or view is its own file (e.g., `.php`, `.html`) at a unique URL. - **Navigation MUST use standard anchor links (``)** that trigger a full page load. - **Core functionality MUST work with JavaScript disabled.** ### 🚫 BANNED TECHNOLOGIES & PATTERNS - **DO NOT** use or reference any Single-Page Application (SPA) frameworks or libraries. This includes **React, Angular, Vue, Svelte, Next.js, and Nuxt.js**. - **DO NOT** use **JSX, TSX, or any form of client-side routing**. --- ## 2. JavaScript Rules (Progressive Enhancement with jQuery) - **jQuery is the standard.** Use jQuery for all DOM manipulation, event handling, and AJAX requests. - **Include jQuery from a CDN** in the base layout file, just before the closing `` tag. - **Write Unobtrusive JavaScript.** Always ensure the site is fully functional if JavaScript fails or is disabled. - Wrap all jQuery code in `$(function() { ... });` to ensure the DOM is ready. - Handle AJAX errors gracefully using `.done()`, `.fail()`, and `.always()`. **Correct Pattern: Unobtrusive Toggle with jQuery** ```html Show Details ``` ```javascript // JS enhances the experience $(function() { $('.toggle-link').on('click', function(event) { event.preventDefault(); $('#details').slideToggle(300, () => { const isVisible = $('#details').is(':visible'); $(this).text(isVisible ? 'Hide Details' : 'Show Details'); }); }); }); ``` --- ## 3. HTML Rules - **Semantic HTML is Mandatory:** Use `
`, `