Cursor rule

.cursor/rules/mpa-relaxed-rules.mdc

MPA-First Development Mandate (Relaxed) - Guidelines for building Multi-Page Applications with jQuery for progressive enhancement

Cursor rules

Quality

77/100

Scores the file, not the repository.

Length

696 words

10 headings · 7 code blocks

Repository

10

— · pushed 241 days ago

Last changed

3 days ago

First indexed 3 days ago.

RealistSec/mpa-first-guidelines/.cursor/rules/mpa-relaxed-rules.mdcRaw GitHub

1---
2description: MPA-First Development Mandate (Relaxed) - Guidelines for building Multi-Page Applications with jQuery for progressive enhancement
3globs:
4  - "**/*.php"
5  - "**/*.html"
6  - "**/*.js"
7  - "**/*.css"
8alwaysApply: false
9---
10 
11# GitHub Copilot Instructions: MPA-First Mandate
12 
13## Core Philosophy
14 
15My primary goal is to build performant, resilient, and maintainable server-rendered **Multi-Page Applications (MPAs)**.
16 
17- **Prioritize the Platform:** Use HTML, CSS, and server-side logic (PHP) first.
18- **Simplicity Over Complexity:** Choose simple, durable solutions over complex, trendy ones.
19- **Progressive Enhancement:** JavaScript is an enhancement, not a requirement. Core functionality must work without it. I use **jQuery** to implement these enhancements.
20 
21---
22 
23## 1. PRIME DIRECTIVE: MPA-Only Architecture
24 
25- **You MUST build server-rendered MPAs.** Each distinct page or view is its own file (e.g., `.php`, `.html`) at a unique URL.
26- **Navigation MUST use standard anchor links (`<a href="...">`)** that trigger a full page load.
27- **Core functionality MUST work with JavaScript disabled.**
28 
29### 🚫 BANNED TECHNOLOGIES & PATTERNS
30 
31- **DO NOT** use or reference any Single-Page Application (SPA) frameworks or libraries. This includes **React, Angular, Vue, Svelte, Next.js, and Nuxt.js**.
32- **DO NOT** use **JSX, TSX, or any form of client-side routing**.
33 
34---
35 
36## 2. JavaScript Rules (Progressive Enhancement with jQuery)
37 
38- **jQuery is the standard.** Use jQuery for all DOM manipulation, event handling, and AJAX requests.
39- **Include jQuery from a CDN** in the base layout file, just before the closing `</body>` tag.
40- **Write Unobtrusive JavaScript.** Always ensure the site is fully functional if JavaScript fails or is disabled.
41- Wrap all jQuery code in `$(function() { ... });` to ensure the DOM is ready.
42- Handle AJAX errors gracefully using `.done()`, `.fail()`, and `.always()`.
43 
44**Correct Pattern: Unobtrusive Toggle with jQuery**
45```html
46<!-- HTML works on its own -->
47<a href="?show_details=true#details" class="toggle-link">Show Details</a>
48<div id="details" style="display: none;">
49    <p>Here are the details you requested.</p>
50</div>
51```
52```javascript
53// JS enhances the experience
54$(function() {
55  $('.toggle-link').on('click', function(event) {
56    event.preventDefault();
57    $('#details').slideToggle(300, () => {
58      const isVisible = $('#details').is(':visible');
59      $(this).text(isVisible ? 'Hide Details' : 'Show Details');
60    });
61  });
62});
63```
64 
65---
66 
67## 3. HTML Rules
68 
69- **Semantic HTML is Mandatory:** Use `<header>`, `<nav>`, `<main>`, `<article>`, `<footer>`, etc., correctly.
70- **Accessibility (A11Y) is critical (WCAG 2.1 AA):**
71  - All form inputs must have a `<label>`.
72  - Use descriptive `alt` text for images. `alt=""` for decorative images.
73- **Use Speculation Rules** in the `<head>` to prerender links for instant navigation.
74```html
75  <script type="speculationrules">
76  { "prerender": [{"source": "document", "where": {"href_matches": "/*"}, "eagerness": "moderate"}] }
77  </script>
78```
79- **SEO is a top priority.** Every page needs a complete `<head>` with `title`, `meta description`, `canonical` link, and Open Graph tags.
80 
81---
82 
83## 4. CSS Rules
84 
85- **Use Modern CSS:** Use Flexbox and Grid for all layouts.
86- **Use Custom Properties (`--var-name`)** for theming and maintainability.
87- **Use Native CSS View Transitions** for fluid "app-like" navigation.
88```css
89  @view-transition { navigation: auto; }
90 
91  ::view-transition-old(root),
92  ::view-transition-new(root) {
93    animation: fade-out 0.3s ease-out both;
94  }
95 
96  @keyframes fade-out {
97    from { opacity: 1; }
98    to { opacity: 0; }
99  }
100```
101 
102---
103 
104## 5. PHP Rules
105 
106- **Target PHP 8.1+** and always start files with `declare(strict_types=1);`.
107- **Adhere to PSR-12** for clean, standardized code.
108- **Use modern PHP features:** constructor property promotion, `readonly` properties, `match` expressions, and enums.
109 
110**Correct Pattern: Modern PHP Class**
111```php
112<?php
113declare(strict_types=1);
114namespace App\Models;
115 
116readonly class User
117{
118    public function __construct(
119        public int $id,
120        public string $name,
121    ) {}
122}
123```
124 
125---
126 
127## 6. Security Rules
128 
129- **Always use parameterized queries** to prevent SQL injection. No exceptions.
130- **All POST forms must have CSRF protection.** Generate a token, store it in the session, and validate it on submission.
131- **Implement a strict Content Security Policy (CSP).** Whitelist any CDNs you use (like for jQuery).
132 
133**Correct Pattern: CSP Header with jQuery CDN**
134```php
135<?php
136$csp = "default-src 'self'; " .
137       "script-src 'self' https://code.jquery.com; " . // Whitelist the CDN
138       "style-src 'self'; " .
139       "img-src 'self'; " .
140       "form-action 'self'; " .
141       "frame-ancestors 'none';";
142header("Content-Security-Policy: " . $csp);
143?>
144```
145 
146---
147 
148## 7. Folder Structure
149 
150Follow this MVC-style folder structure for all projects.
151 
152```
153project-root/
154├── public/                # Web root
155│   ├── assets/
156│   │   ├── css/
157│   │   ├── js/
158│   └── index.php
159├── src/                   # Application source code
160│   ├── controllers/       # Handles user requests
161│   ├── models/            # Business logic and data
162│   ├── views/             # HTML templates/partials
163└── vendor/                # Composer dependencies
164```
165

Also in RealistSec/mpa-first-guidelines

Diff this repo’s formats

One repository carrying more than one format is the comparison this product exists for: does anyone actually write different content in each file, or is one a copy of the other?

The other instruction files in this repository
Repository	Format	Stack	Covers	Score	Changed
RealistSec/mpa-first-guidelines.github/copilot-instructions.md · 10	Copilot instructions	unclassified	styledependenciesuido-not+2	59/100	3 days ago
RealistSec/mpa-first-guidelines.cursor/rules/mpa-strict-rules.mdc · 10	Cursor rules	unclassified	buildstylearchsecurity+4	66/100	3 days ago

Diff against .github/copilot-instructions.md Diff against .cursor/rules/mpa-strict-rules.mdc