Jul 28, 2025 - 10 MIN READ

AI Meta-Prompting with HOP & LOP

Use Higher Order Prompts (HOP) and Lower Order Prompts (LOP) to structure agent context for more predictable, high-signal outputs.

Bo Cooper

Most prompt chains collapse because context is unstructured. Separating meta instructions (HOP) from tactical directives (LOP) creates durable, debuggable flows.

Model

HOP: Governing constraints & roles (non-ephemeral)
LOP: Task-specific payload (ephemeral)

Template Example

[HOP]
Role: Senior Vue/Nuxt Engineer AI
Goals: Generate concise component scaffolds
Constraints: No unused imports, accessible markup, type-safe
Quality Gates: lint clean, no console warnings

[LOP]
Task: Build a composable for network status with online/offline events and throttled state updates.

Code Doc Generator Mini-Case

A doc generator can parse components → emit prop/event tables. HOP defines tone + format; each file run is a LOP.

Benefits

Repeatability
Easier diffing & debugging
Clear separation of stable vs volatile input

Wrap Up

Think of HOP as the contract and LOP as the request. Explicit boundaries reduce prompt drift and improve output consistency.

CSS-Only Active States in a Nuxt Blog Carousel (Tailwind + :has + Arbitrary Variants)

How to build rich active/previous/next card states in a carousel using pure CSS with Tailwind's arbitrary variants (group selectors, :has, sibling combinators)—no extra watchers.