DEV Community: Hassam Ali

🚀 How to Tame Your AI: The 5-Pillar Architecture for Award-Winning Next.js Applications

Hassam Ali — Mon, 27 Jul 2026 15:39:55 +0000

Download the MD files HERE
Download the MDc files for Cursor HERE
Download the Single MD file HERE

Stop fighting your AI. Start giving it an architecture.

Large Language Models (LLMs) have become incredible coding assistants. They can scaffold projects, generate components, write tests, and even refactor entire codebases in minutes.

But there's one major problem.

Without clear architectural boundaries, AI will often generate code that works—but doesn't scale.

You'll commonly see it:

🍝 Mixing database queries directly inside React components
🎨 Repeating the same Tailwind utility classes across dozens of files
⚡ Using outdated React patterns instead of modern Next.js App Router features
🔐 Skipping validation and authorization checks
📦 Creating unnecessary client-side state
🚫 Ignoring accessibility, SEO, and Core Web Vitals

The result?

A project that becomes harder to maintain with every AI-generated feature.

If you want your AI to behave like a Senior Software Architect instead of a junior developer, you need to provide it with a clear engineering playbook.

That's exactly what the 5-Pillar Architecture accomplishes.

Instead of placing thousands of lines of instructions into one massive prompt, you split your engineering standards into focused rule files that are automatically loaded when they're needed.

The result is cleaner code, fewer hallucinations, better consistency, and dramatically improved developer experience.

Download the MD files HERE
Download the MDc files for Cursor HERE
Download the Single MD file HERE

🏛️ The 5-Pillar Architecture

The idea is simple.

Rather than giving your AI every instruction every time, divide your project standards into specialized domains.

For example:

Your Request	Rules the AI Should Load
Build a landing page	Global + UI/UX
Create authentication	Global + Security + API
Add database tables	Global + API
Improve SEO	Global + SEO
Create reusable components	Global + UI

This focused approach has several benefits:

🚀 Faster responses
🧠 Better reasoning
💰 Lower token usage
📚 More maintainable instructions
🎯 Consistent architecture across your entire project

Let's explore each pillar.

🧠 Pillar 1 — Global Core Architecture (`global.md` / `global.mdc`)

This is the foundation of your entire application.

Think of it as your project's engineering handbook.

Every AI-generated feature should follow these rules regardless of whether you're building authentication, dashboards, APIs, or UI components.

🔒 Zero-Trust Data Access Layer (DAL)

One of the most common mistakes AI makes is querying the database directly from UI components.

For example:

const users = await prisma.user.findMany()

inside a page or component.

While this works, it tightly couples your presentation layer to your database.

Instead, enforce a Zero-Trust Data Access Layer.

Every database request should follow a predictable flow:

React Component
        ↓
Server Action / Route Handler
        ↓
Data Access Layer (DAL)
        ↓
Database

This separation provides several advantages:

🔐 Improved security
🧪 Easier testing
♻️ Better code reuse
📦 Cleaner abstractions
🚀 Easier migrations later

Your UI should never know how the database works.

♻️ Extreme DRY Enforcement

AI loves copying code.

Unfortunately, that's one of the quickest ways to create technical debt.

Suppose the AI repeatedly generates:

<div className="mx-auto max-w-7xl px-6 py-12">

across multiple pages.

Instead of duplicating the same utilities, your rules should encourage the AI to identify reusable design patterns and extract them into components such as:

<Container />
<Section />
<PageHeader />
<Spacer />

This keeps your codebase:

Cleaner
Easier to update
More consistent
More scalable

If your designer changes spacing six months later, you'll update one component instead of fifty.

🎯 Smart Prompt Routing

Not every request needs every rule.

If you ask:

"Build a Hero Section"

The AI doesn't need database rules.

Likewise, if you're implementing authentication, animation guidelines aren't particularly useful.

Your global rules should encourage the AI to first classify the request before loading additional architectural context.

This keeps prompts lightweight while improving response quality.

🎨 Pillar 2 — UI, UX & Animations (`ui-ux-animations.md`)

Great software isn't only functional.

It should also feel polished.

This pillar transforms your AI from simply generating HTML into producing interfaces that look modern, professional, and enjoyable to use.

🎨 Build with Modern Design Systems

Instead of creating every component from scratch, encourage your AI to leverage modern UI ecosystems whenever appropriate.

Examples include:

✨ shadcn/ui
🚀 21st.dev
🌈 Origin UI
💎 Aceternity UI
🎭 Magic UI

These libraries provide production-ready components that save development time while maintaining excellent design quality.

⚡ The Animation Split

Not all animations should use the same library.

Your AI should understand which tool is appropriate for the job.

🎯 Framer Motion

Ideal for:

Hover interactions
Buttons
Cards
Dialogs
Tooltips
Page transitions
Micro-interactions

🚀 GSAP

Best suited for:

Scroll-triggered animations
Landing pages
Storytelling experiences
Complex timelines
Hero reveals
Interactive marketing websites

A simple rule works well:

Small interactions → Framer Motion

Large storytelling animations → GSAP

🎨 Emotion CSS Boundaries

Tailwind CSS should remain the default styling solution.

However, occasionally you'll need styles driven by runtime props that Tailwind cannot reasonably express.

In those situations, Emotion can be used—but only within "use client" components and only for truly dynamic styling.

This prevents unnecessary runtime styling throughout the application.

🗄️ Pillar 3 — API, Database & State Management (`api-db-state.md`)

Modern Next.js applications don't need a massive state management library for every feature.

Unfortunately, AI assistants often default to unnecessary complexity.

This pillar teaches your AI how data should flow through the application.

🚀 Prefer Native Next.js Features

Before introducing additional libraries, the AI should first consider:

✅ Server Components
✅ Server Actions
✅ URL Search Params
✅ React Cache
✅ Suspense
✅ Streaming

The less client-side JavaScript your application ships, the better.

🪶 Zustand vs Redux

Every state management library has its place.

Use Zustand for lightweight UI state:

Dark mode
Mobile navigation
Modals
Toasts
Filters
Preferences

Use Redux Toolkit only when your application genuinely requires enterprise-level state management, such as:

Complex dashboards
Collaborative applications
Offline synchronization
Deeply nested shared state

Choosing the simplest solution keeps your application easier to maintain.

⚡ Optimistic UI

Waiting for every server response creates a sluggish user experience.

Instead, encourage your AI to implement optimistic updates whenever possible.

Use tools like:

useOptimistic
Cache mutation
React transitions

This allows the interface to update immediately while the server processes the request in the background.

Users perceive the application as significantly faster.

🔐 Pillar 4 — Security Hardening (`security.md`)

Security shouldn't be an afterthought.

Unfortunately, AI often prioritizes convenience over safety.

Your security rules establish non-negotiable guardrails.

🚫 Never Leak Internal Errors

Never expose:

SQL errors
Prisma errors
Stack traces
Environment variables
Internal exception messages

Instead, return predictable responses such as:

{
  success: false,
  error: "Unable to update profile."
}

Detailed logs should remain on the server where developers can safely inspect them.

✅ Validate Everything Twice

Client-side validation improves user experience.

Server-side validation protects your application.

Your AI should always validate data twice.

Client:

Server:

schema.parseAsync(data)

Never assume the client is trustworthy.

👤 Authorization Before Mutation

Authentication only proves who the user is.

Authorization determines what they're allowed to do.

Before updating or deleting data, verify:

Is the user authenticated?
Does the user own this resource?
Does their role permit this action?

These checks dramatically reduce accidental security vulnerabilities.

🌍 Pillar 5 — SEO & Core Web Vitals (`seo-web-vitals.md`)

Building a beautiful application isn't enough.

People—and increasingly AI systems—need to discover it.

This pillar helps your application perform well for both traditional search engines and AI-powered search experiences.

🤖 Generative Engine Optimization (GEO)

Search is changing.

Platforms like ChatGPT, Perplexity, Gemini, and Claude increasingly summarize content instead of simply returning links.

To improve discoverability, encourage your AI to generate:

Semantic HTML
Structured data
Clear factual content
llms.txt
Consistent metadata
Verifiable references where appropriate

These practices make your content easier for AI systems to understand and reference.

🚀 Protect Core Web Vitals

Performance directly impacts user experience and search visibility.

Your rules should remind the AI to:

Prioritize hero images
Lazy-load non-critical assets
Optimize fonts
Prevent layout shifts
Minimize unnecessary JavaScript

Small improvements here can have a significant impact on perceived performance.

🏷️ Semantic HTML

Avoid generic <div> structures whenever meaningful HTML elements exist.

Prefer:

<header>
<main>
<section>
<article>
<aside>
<footer>

Semantic HTML improves accessibility, SEO, and overall code readability.

⚙️ Setting Up the Rules

The architecture consists of two file formats:

File Type	Purpose
`.md`	Standard Markdown for AI platforms like Claude, Windsurf, Antigravity, ChatGPT Projects, and documentation
`.mdc`	Cursor Rule Files with YAML frontmatter for automatic rule loading

You may keep both versions in your repository depending on which AI tools your team uses.

🖥️ Installing the Rules in Cursor

Cursor provides first-class support for .mdc files, making it the best experience for modular AI instructions.

Unlike regular Markdown, .mdc files include YAML frontmatter that tells Cursor when a rule should be applied.

Step 1 — Create the Rules Directory

Create the following folder structure inside your project:

my-nextjs-app/
│
├── .cursor/
│   └── rules/
│       ├── global.mdc
│       ├── ui-ux-animations.mdc
│       ├── api-db-state.mdc
│       ├── security.mdc
│       └── seo-web-vitals.mdc
│
├── app/
├── components/
├── lib/
└── package.json

Keeping every rule inside .cursor/rules makes them easy to organize and allows Cursor to discover them automatically.

Step 2 — Configure the Global Rule

Your global architecture should always be active.

At the top of global.mdc, add YAML frontmatter similar to:

---
description: Global Architecture Rules
alwaysApply: true
---

Everything below this frontmatter becomes part of your project's permanent architectural guidance.

Step 3 — Configure Domain-Specific Rules

The remaining rule files should only load when they're relevant.

For example:

---
description: UI & Animation Rules
alwaysApply: false

globs:
  - "**/*.tsx"
  - "**/*.css"
---

Likewise:

Download the MDc files for Cursor HERE

api-db-state.mdc should target API routes, server actions, and database-related files.
security.mdc should target authentication, authorization, and validation logic.
seo-web-vitals.mdc should target layouts, pages, metadata, and SEO-related files.

This selective loading keeps AI context focused and efficient.

Step 4 — Start Building

Once the rules are in place, simply work as you normally would.

As you move between files, Cursor automatically loads the relevant rule files in the background.

For example:

Editing	Rules Loaded
`page.tsx`	Global + UI + SEO
`Button.tsx`	Global + UI
`route.ts`	Global + API + Security
`actions.ts`	Global + API + Security

There's no need to remind Cursor which rules to follow—they're applied automatically based on the file you're editing.

🤖 Installing the Rules in Claude Projects

Claude doesn't currently support .mdc files, so you'll use the standard .md versions instead.

Step 1 — Create a Project

Open Claude and create a new Project for your Next.js application.

Projects allow Claude to retain shared knowledge across conversations, making them ideal for architectural documentation.

Step 2 — Upload the Rule Files

Navigate to Project Knowledge and upload:

global.md
ui-ux-animations.md
api-db-state.md
security.md
seo-web-vitals.md

These documents become part of Claude's project knowledge and can be referenced throughout your development workflow.

Download the MD files HERE

Step 3 — Add a Custom Instruction

In your project's Custom Instructions, add something like:

Before generating any code, review the uploaded architecture documents. Always apply the rules from global.md, then selectively reference the appropriate domain-specific documents based on the current task. Follow these architectural standards unless I explicitly instruct otherwise.

This encourages Claude to consistently follow your architecture without requiring you to repeat the same instructions in every conversation.

🌊 Installing the Rules in Windsurf / Antigravity

Unlike Cursor, Windsurf and Antigravity don't currently support automatic modular loading of .mdc rule files.

Instead, use the standard .md versions and consolidate them into a single project rules file.

Create either a .windsurfrules or .antigravityrules file in the root of your project (depending on your IDE), then merge the contents of your five Markdown rule files into that document.

To keep the file organized and easy for the AI to navigate, separate each section with descriptive XML-style tags, such as:

<GlobalArchitecture>
...
</GlobalArchitecture>

<UI_UX>
...
</UI_UX>

<API_DB_State>
...
</API_DB_State>

<Security>
...
</Security>

<SEO_WebVitals>
...
</SEO_WebVitals>

This gives the AI a single source of truth while preserving the logical separation between each architectural pillar.

Download the Single MD file HERE

🎯 Final Thoughts

AI coding assistants are only as good as the architecture you provide.

Instead of relying on massive prompts for every feature, give your AI a structured engineering playbook.

By separating your standards into five focused rule files, you'll get:

🏗️ Cleaner architecture
🔒 Stronger security
🎨 Better UI and animations
⚡ Faster performance
🌍 Improved SEO
🤖 More reliable AI-generated code
🧩 Consistent patterns across your entire codebase

Treat your AI like a new engineer joining your team: give it clear architecture, well-defined boundaries, and reusable standards. The result is cleaner code, fewer surprises, and applications that scale gracefully as your project grows.

Download the MD files HERE
Download the MDc files for Cursor HERE
Download the Single MD file HERE

🕸️ The Ultimate Web Scraping Escalation Path: From Basic Bots to Challenge Decoding

Hassam Ali — Sat, 11 Jul 2026 23:49:16 +0000

Web scraping is a game of escalation. When you first launch a Scrapy project, you might extract thousands of pages without an issue. But soon enough, target websites fight back with HTTP 403 errors, infinite CAPTCHA loops, and intimidating Cloudflare "Checking your browser" screens.

To win this game, you don't start by dropping heavy, resource-intensive tools on a simple problem. You scale your techniques based on the target's defenses, keeping your spiders as fast and lightweight as possible for as long as possible. Here is the complete escalation path to bulletproof your Scrapy projects, ready to be deployed. 🕸️

🛠️ Level 1: The Basics – Disguising Your Bot

Before worrying about complex anti-bot systems, you must ensure your bot isn't openly shouting its identity. Many websites block Scrapy simply because of its default, out-of-the-box settings.

1. Spoofing HTTP Headers

By default, Scrapy uses a dead-giveaway User-Agent: Scrapy/VERSION (+http://scrapy.org). Most basic firewalls drop these requests instantly.

Rotate User-Agents: Use middleware to cycle through modern, realistic browser strings (e.g., Chrome on macOS).
Add Missing Headers: Real browsers send more than just a User-Agent. Include Accept-Language, Accept-Encoding, and modern Sec-Ch-Ua headers to blend in with human traffic.

2. Cookie Management

Websites often use cookies to track session health and rate limits.

Session Persistence: For some sites, solving a login or passing an initial check grants a trusted session cookie. Keep COOKIES_ENABLED = True in Scrapy to ride that trusted session.
Cookie Clearing: For strictly rate-limited sites, keeping cookies allows the server to track exactly how many requests you are making. Disabling cookies (COOKIES_ENABLED = False) forces the server to rely solely on your IP address.

3. Standard Datacenter Proxies

If you are sending hundreds of requests from a single IP, you will get banned, regardless of your headers.

The Fix: Route your traffic through a pool of cheap datacenter proxies using a rotating proxy middleware. This distributes your requests across multiple IP addresses, bypassing basic volumetric rate limits.

🏗️ Level 2: The Heavy Artillery – Smart Unblockers & Proxy APIs

If your datacenter IPs are getting flagged or you are hitting hard CAPTCHAs, it is time to upgrade your network layer. Instead of trying to manage browser rendering locally, you can pass the problem to specialized APIs.

Using Zyte API (Formerly Crawlera) 🤖

When you hit CAPTCHAs or aggressive IP bans, you need a proxy network that handles the anti-bot logic on its end. Zyte provides a Scrapy plugin designed exactly for this.

Residential Proxy Network: It routes requests through real household IP addresses, which Web Application Firewalls (WAFs) rarely block.
Automated Challenge Solving: Zyte's backend detects Cloudflare screens, solves the JS challenges, and even bypasses CAPTCHAs automatically before returning the page to you.
Implementation: It requires almost no code changes—just add your API key to your settings.py and enable the middleware. Your scraper stays incredibly fast because the heavy lifting happens on their servers.

📱 Level 3: The Golden Ticket – Uncovering Mobile APIs

Before you resort to the absolute heaviest local solutions, look for a backdoor. Companies often lock down their websites with military-grade protections but leave their Mobile App APIs (iOS/Android) completely exposed.

Because mobile apps communicate via structured JSON rather than rendering HTML, they don't trigger Cloudflare's browser-checking mechanisms or visual CAPTCHAs.

How to Intercept Mobile APIs 🕵️‍♂️

This is the ultimate hacker shortcut for data extraction:

Set Up an Emulator: Use Android Studio to launch an Android Virtual Device (AVD).
Install an Interception Proxy: Use tools like mitmproxy or HTTP Toolkit to monitor the traffic between the emulator and the internet.
Defeat SSL Pinning: Modern apps encrypt their traffic. You will need to install your proxy's CA Certificate on the emulator. If the app refuses to connect (SSL Pinning), use dynamic instrumentation tools like Frida to disable the security checks.
Capture the Traffic: Open the target app, perform the actions you want to scrape, and watch your proxy dashboard for the raw API requests.
Replicate the Request: Find the endpoint returning clean JSON data. Copy it as a cURL command, translate it to Python, and feed it directly into Scrapy.

The Result: You bypass the WAF, CAPTCHAs, and HTML parsing entirely, pulling raw data straight from the backend.

🐢 Level 4: The Last Resort – Headless Browsers

If the mobile API is locked down, Zyte isn't an option for your budget, and you are absolutely forced to decode Cloudflare's JavaScript challenges locally, you must bring out the heaviest tool in the shed: headless browsers.

Enter `scrapy-playwright` or Selenium 🎭

Standard Scrapy only downloads HTML—it cannot execute JavaScript. To pass a WAF's "Checking your browser" test locally, you have to run a real browser.

How it works: Tools like scrapy-playwright integrate a hidden Chromium or Firefox instance directly into your Scrapy workflow.
The Process: When Cloudflare throws a JS challenge, the headless browser executes the scripts, solves the mathematical proofs, waits for the redirect, and hands the fully rendered HTML back to Scrapy.
Why it is the last resort: Running real browsers is incredibly slow and resource-intensive. It will spike your CPU and RAM usage, dramatically reducing how many pages you can scrape per minute. Furthermore, advanced WAFs can still detect headless browsers if your IP reputation is poor.

🧩 Level 5: The Architect's Route – Custom Challenge Decoding & Scrapy Integration

Sometimes, you don't want the overhead of a headless browser, and you want to mathematically solve or reverse-engineer the custom JavaScript challenge yourself. This allows you to generate the required clearance tokens natively and feed them straight into a lightweight Scrapy request.

Here is the exact DevTools workflow to decode a challenge and implement it in Scrapy.

Step 1: Monitoring the Challenge in the Network Tab 🌐

When you hit a protected site, open Chrome DevTools (F12). Turn on Preserve Log in the Network tab so you don't lose the traffic history when the page redirects. Filter by JS or Fetch/XHR to isolate the challenge scripts.

Identify the specific script or endpoint serving the 403/503 challenge payload.

Step 2: Tracing the Initiator 🧵

To find out exactly which JavaScript function is generating the challenge response, look at the Initiator column in the Network tab. Hovering over it shows the call stack. Clicking the top link jumps you straight to the execution point.

Follow the initiator to bypass thousands of lines of code and find the exact challenge logic.

Step 3: Inspecting the Clearance Cookies 🍪

Once a challenge is solved natively in your browser, a token is usually stored as a cookie (like cf_clearance or a custom session token). Go to the Application tab and inspect your Cookies to find the exact key-value pair your Scrapy spider needs.

Identify the trophy cookie. If you delete it and refresh, the challenge will trigger again.

Step 4: Deobfuscating the Source Code 🔍

Challenge scripts are always minified and obfuscated. Jump to the Sources tab and click the Pretty Print {} button to format the code. From here, you can set breakpoints to see how the token is mathematically generated or hashed.

Once deobfuscated, you can translate the token-generation logic into a Python script.

Step 5: Crafting the Scrapy Request 🕷️

Once you have reversed the logic (or if you are manually passing a token generated by a separate solver service), you need to inject this into your Scrapy Spider.

You do this by explicitly passing the generated cookies and headers into scrapy.Request.


python
import scrapy

class CustomChallengeSpider(scrapy.Spider):
    name = "challenge_bypass_spider"
    start_urls = ["[https://protected-target-website.com/data](https://protected-target-website.com/data)"]

    def start_requests(self):
        # 1. Define standard human-like headers
        headers = {
            "User-Agent": "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36",
            "Accept-Language": "en-US,en;q=0.9",
            "Sec-Fetch-Dest": "document",
            "Sec-Fetch-Mode": "navigate",
        }

        # 2. Inject the custom decoded challenge token or clearance cookie
        cookies = {
            "custom_clearance_token": "YOUR_DECODED_TOKEN_HERE",
            "session_id": "YOUR_SESSION_ID_HERE"
        }

        # 3. Yield the Scrapy request with the payload attached
        for url in self.start_urls:
            yield scrapy.Request(
                url=url,
                headers=headers,
                cookies=cookies,
                callback=self.parse
            )

    def parse(self, response):
        # If the token is valid, you will receive a 200 OK and the clean HTML!
        if response.status == 200:
            self.logger.info("Challenge successfully bypassed! Extracting data...")
            yield {
                "title": response.css("h1::text").get(),
                "data": response.css(".content-body::text").getall()
            }
        else:
            self.logger.error(f"Failed to bypass. Received status: {response.status}")

DEV Community: Hassam Ali

🚀 How to Tame Your AI: The 5-Pillar Architecture for Award-Winning Next.js Applications

🏛️ The 5-Pillar Architecture

🧠 Pillar 1 — Global Core Architecture (global.md / global.mdc)

🔒 Zero-Trust Data Access Layer (DAL)

♻️ Extreme DRY Enforcement

🎯 Smart Prompt Routing

🎨 Pillar 2 — UI, UX & Animations (ui-ux-animations.md)

🎨 Build with Modern Design Systems

⚡ The Animation Split

🎯 Framer Motion

🚀 GSAP

🎨 Emotion CSS Boundaries

🗄️ Pillar 3 — API, Database & State Management (api-db-state.md)

🚀 Prefer Native Next.js Features

🪶 Zustand vs Redux

⚡ Optimistic UI

🔐 Pillar 4 — Security Hardening (security.md)

🚫 Never Leak Internal Errors

✅ Validate Everything Twice

👤 Authorization Before Mutation

🌍 Pillar 5 — SEO & Core Web Vitals (seo-web-vitals.md)

🤖 Generative Engine Optimization (GEO)

🚀 Protect Core Web Vitals

🏷️ Semantic HTML

⚙️ Setting Up the Rules

🖥️ Installing the Rules in Cursor

Step 1 — Create the Rules Directory

Step 2 — Configure the Global Rule

Step 3 — Configure Domain-Specific Rules

Step 4 — Start Building

🤖 Installing the Rules in Claude Projects

Step 1 — Create a Project

Step 2 — Upload the Rule Files

Step 3 — Add a Custom Instruction

🌊 Installing the Rules in Windsurf / Antigravity

🎯 Final Thoughts

🕸️ The Ultimate Web Scraping Escalation Path: From Basic Bots to Challenge Decoding

🛠️ Level 1: The Basics – Disguising Your Bot

1. Spoofing HTTP Headers

2. Cookie Management

3. Standard Datacenter Proxies

🏗️ Level 2: The Heavy Artillery – Smart Unblockers & Proxy APIs

Using Zyte API (Formerly Crawlera) 🤖

📱 Level 3: The Golden Ticket – Uncovering Mobile APIs

How to Intercept Mobile APIs 🕵️‍♂️

🐢 Level 4: The Last Resort – Headless Browsers

Enter scrapy-playwright or Selenium 🎭

🧩 Level 5: The Architect's Route – Custom Challenge Decoding & Scrapy Integration

Step 1: Monitoring the Challenge in the Network Tab 🌐

Step 2: Tracing the Initiator 🧵

Step 3: Inspecting the Clearance Cookies 🍪

Step 4: Deobfuscating the Source Code 🔍

Step 5: Crafting the Scrapy Request 🕷️

🧠 Pillar 1 — Global Core Architecture (`global.md` / `global.mdc`)

🎨 Pillar 2 — UI, UX & Animations (`ui-ux-animations.md`)

🗄️ Pillar 3 — API, Database & State Management (`api-db-state.md`)

🔐 Pillar 4 — Security Hardening (`security.md`)

🌍 Pillar 5 — SEO & Core Web Vitals (`seo-web-vitals.md`)

Enter `scrapy-playwright` or Selenium 🎭