| name | context-protocol |
| description | Slop-prevention middleware. Run before any design or code task to gather sources, then produce a Plan Mode block before touching any file. Eliminates hardcoded colours and generic components caused by agents assuming design decisions. |
| triggers | ["any /new-feature invocation","any /discuss invocation","any task involving UI, components, or code modification"] |
| context | fork |
Context Protocol — Slop Prevention Middleware
Purpose
Force agents to gather evidence before generating. No file is written until a Plan Mode block is shown and the user approves. This prevents AI SLOP: hardcoded colours, generic components, and assumed design decisions.
Step 1: Detect Path
Scan the task description for DESIGN triggers:
logo, icon, UI, component, colour, color, style, animation, layout,
design, theme, typography, font, button, card, modal, landing page,
hero, navbar, sidebar, dashboard
Match case-insensitively.
- Match found → DESIGN PATH
- No match → CODE PATH
DESIGN PATH
1. Read design tokens (ALWAYS FIRST)
Read apps/web/lib/design-tokens.ts. Extract:
- Background colours (BACKGROUNDS object)
- Spectral colours (SPECTRAL object)
- Text opacities (TEXT object)
- Border styles (BORDERS object)
If the file does not exist, note "design-tokens.ts not found" and ask the user where to find the project's colour tokens.
2. Check for reference in task description
Scan the task description for:
- A URL (http/https) → fetch it, note key visual characteristics
- An image URL → note it for reference
- A style description ("minimal", "dark", "glassmorphism") → note it
3. If no reference found — ask ONE question
"What's the reference? (URL, image URL, or describe the style)"
Wait for the answer. Do NOT ask a second question.
4. Read scientific-luxury colour context
Read the ## Colour System section of .skills/custom/scientific-luxury/SKILL.md.
Read that section only — not the full file.
If the ## Colour System heading is not found, read the first 60 lines of the file only.
5. Produce Plan Mode block
Output this block before writing a single line of code:
CONTEXT GATHERED
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
✓ Design tokens read: [list key values found — e.g. "bg #050505, cyan #00F5FF, rounded-sm"]
✓ Reference: [URL fetched / image URL / style description — if a style description was provided with no URL, quote it verbatim here]
✓ Colour system: Scientific Luxury — OLED black, spectral accents, Framer Motion only
PROPOSED APPROACH
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
[2-4 sentences describing exactly what will be built, using actual token values]
Does this look right? Shall I proceed?
6. Wait for approval
Do NOT write any file until the user confirms. If they change direction, update the proposed approach and show the block again.
CODE PATH
1. Auto-detect relevant files
From the task description, identify file candidates using these signals:
- Route paths mentioned ("auth", "login", "api/users") → look in
apps/web/ and apps/backend/src/
- Function or class names → Grep for them
- Module names → Glob for matching files
Read the identified files silently. No output during this step.
2. If no files can be identified — ask ONE question
"Which files should I look at?"
Wait for the answer. Do NOT ask a second question.
3. Produce Plan Mode block
CONTEXT GATHERED
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
✓ [filename]: [one-line summary of what was found — e.g. "middleware.ts:47 — refresh not awaited"]
✓ [filename]: [one-line summary]
PROPOSED APPROACH
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
[2-4 sentences describing exactly what will change and why, referencing actual line numbers]
Does this look right? Shall I proceed?
4. Wait for approval
Do NOT modify any file until the user confirms. If the user redirects, revise the PROPOSED APPROACH section and show the block again.
Hard Rules
- Design tokens file is always read first on any DESIGN PATH task — before asking for a reference
- One question maximum per path — abbreviated labels: "What's the reference?" (full string in DESIGN Step 3) or "Which files?" (full string in CODE Step 2) — never ask both
- Plan Mode block is non-negotiable — fires every time, for every path, before any file is written
- Never hardcode a colour that is not in
apps/web/lib/design-tokens.ts
- Never use Tailwind default colours as design decisions — only as spacing/layout utilities
