Editorial Anti-Patterns and Universal Negative Constraints

Editorial Anti-Patterns and Universal Negative Constraints

Document Status: Living True Specification (Single Source of Truth)
Authority: Platform Governance, Editorial Architecture & Agent Briefing
Related Epics: #137 (Editorial Anti-Patterns & AI Slop Registry), #37 (Client Scaffolding Blueprint), #97 (Static Architectural Linters), #108 (Automated AST Architectural Linters), #119 (Jacob Miller Portfolio)
Related Documents: docs/specs/CLIENT_BUSINESS_INTAKE_AND_SCAFFOLDING.md, docs/specs/ARCHITECTURAL_LINTERS.md, docs/specs/CLIENT_APPLICATION_ANATOMY.md, docs/specs/CAPABILITY_PACKAGE_ANATOMY.md, HIGH_LEVEL_DESIGN.md

---

1. Executive Summary & Strategic Purpose

Large Language Models (LLMs) executing autonomous frontend and editorial tasks exhibit a universal regression toward the mean: when tasked with generating copy, layouts, or marketing components without strict boundaries, they default to a sycophantic blend of LinkedIn influencer parody, generic SaaS template chrome, and synthetic corporate bravado.

In SiteSwarm, where autonomous AI coding agents scaffold and refine client applications across diverse industries (from artisanal bakeries and local automotive repair to high-end systems architecture consultancies), this default behavior represents a critical failure mode:

flowchart TD
    subgraph UngovernedGen["Ungoverned AI First-Draft (The Slop Vector)"]
        Sycophancy["Sycophantic Corporate Clichés\n('Flagship Architecture', 'Initiate Direct Dialogue')"]
        VisualNoise["Visual Noise & Badge Clutter\n(5 stacked candy pills, pulsing green status dots)"]
        AmateurChrome["Faux-Terminal & Security Theater\n(Fake macOS window traffic lights, paranoid banners)"]
        SyntheticVanity["Synthetic Metrics\n('< 5ms latency', '99.95% SLA confidence')"]
    end

    subgraph NegativeConstraintEngine["Negative Constraint Enforcement (#137)"]
        Specs["EDITORIAL_ANTI_PATTERNS_AND_NEGATIVE_CONSTRAINTS.md"]
        VibeContract["apps/<app>/VIBE.md Contract"]
        GovernanceAST["@siteswarm/governance AST Linters"]
    end

    subgraph ProductionOutput["SiteSwarm Editorial Standard"]
        Restraint["Quiet Authority & Understated Craftsmanship"]
        SemanticClarity["Scannable Prose & Authentic Typography"]
        FactualRigor["Zero Hallucinated Numbers & Zero Template Chrome"]
    end

    UngovernedGen --> NegativeConstraintEngine
    NegativeConstraintEngine --> ProductionOutput

Why Negative Constraints Matter

Positive instructions (“write high-quality copy”, “make it look modern”, “be professional”) are ineffective at steering LLMs away from clichés because the models interpret generic positive adjectives as requests for hyperbolic corporate marketing speak.

Negative constraints—explicit, unambiguous prohibitions on specific words, structures, and visual patterns—are mathematically and empirically superior at cutting through LLM sycophancy. By defining what an agent must never do, we bound the solution space and force the model into substantive, grounded, high-character human craftsmanship.

---

2. The Six Universal Negative Constraints

SiteSwarm establishes six non-negotiable negative constraints across all client applications, internal packages, and documentation.

flowchart LR
    C1["1. Corporate Parody Syndrome\n(Banned Phrase Registry)"]
    C2["2. The Badge Disease\n(Max 1 Pill per Card)"]
    C3["3. The Faux-Terminal Trap\n(No Fake OS Chrome)"]
    C4["4. The Hidden Accordion Trap\n(No Buried Case Studies)"]
    C5["5. Security Theater Overkill\n(No Aggressive Banners)"]
    C6["6. Synthetic Metrics\n(No Simulated SLAs/Latencies)"]

---

2.1 Constraint 1: The ‘LinkedIn Influencer / Corporate Parody’ Syndrome

The Failure Mode

LLMs instinctively produce breathless, self-aggrandizing prose that reads like a satirical parody of executive marketing communications. It replaces concrete technical reality with vacuous buzzwords, creating copy that sounds polished to a machine but hollow and condescending to human readers.

Banned Phrase Registry & Restrained Replacement Table

Forbidden Phrase / Cliché	Risk & Parody Category	Recommended Restrained Replacement	Contextual Rationale
“Flagship Architecture”	Hyperbolic puffery	“Primary system architecture”, “Core platform”, or name the system directly	Legitimate architectures are described by their topology, not marketing superlatives.
“Master Engineer” / “Architect Extraordinaire”	Sycophantic flattery	“Software engineer”, “Systems architect”, “Staff engineer”	High-craft practitioners state their actual role without unearned royalty honorifics.
“Initiate Direct Dialogue”	Corporate abstraction	“Contact us”, “Send an email”, “Get in touch”, “Start a conversation”	Normal human beings invite people to talk, not run communication protocols.
“Mission-Critical Paradigm”	Meaningless jargon	“Production service”, “Core workflow”, “Reliable infrastructure”	Replaces empty buzzwords with specific operational realities.
“Bespoke Enterprise Solutions”	Empty sales-deck cliché	“Custom software”, “Client applications”, “Tailored tooling”	Name the actual deliverable rather than wrapping it in generic enterprise packaging.
“Cutting-Edge Synergy” / “Synergistic Innovations”	Executive parody	“Integrated tooling”, “Collaborative workflow”, “Complementary systems”	“Synergy” is universally recognized as hollow filler copy.
“Empowering Next-Gen Experiences”	Tech conference fluff	“Building fast, accessible interfaces”, “Improving workflow latency”	State what the user actually experiences or gains.
“Seamlessly Orchestrating”	Vague automation claim	“Coordinating”, “Automating”, “Managing”, “Routing”	“Seamless” is almost always false; describe the concrete mechanism.
“Unlocking Unprecedented Value”	Pitch-deck hype	“Lowering operational costs”, “Shortening turnaround times”, “Reducing defects”	Quantify or describe authentic business outcomes.
“World-Class Thought Leader”	Unverifiable self-praise	“Practitioner”, “Author”, “Engineer”, or list actual published work	Let citations and case studies demonstrate authority.
“Revolutionizing the Landscape”	Grandiose delusion	“Modernizing legacy systems”, “Improving developer ergonomics”	Ground claims in tangible engineering impact.
“Deep-Dive Into Excellence”	LinkedIn content-farm cliché	“System breakdown”, “Technical postmortem”, “Architecture walk-through”	Use precise engineering terminology for technical deep dives.
“Transformative Value Proposition”	MBA textbook filler	“Key advantages”, “Core benefits”, “Capabilities”	Speak directly to what the customer receives.
“Hyper-Scalable Cloud Fabric”	Synthetic infrastructure hype	“Distributed edge workers”, “Cloudflare network”, “Multi-region SQLite”	Name the actual runtime platform and primitives.

The Quiet Authority Rule

Rule of Thumb: If a sentence could be uttered unironically by a satirical caricature of a Silicon Valley executive or corporate influencer, it is strictly forbidden. Rewrite using concrete nouns, active verbs, and understated technical precision.

---

2.2 Constraint 2: The Badge Disease (Visual Pill Clutter)

The Failure Mode

AI models obsessively append rounded pill badges (<span class="badge">) to every visual element. A single project card frequently ends up smothered in five multi-colored pills (FEATURED, TYPESCRIPT, ASTRO, ENTERPRISE, STABLE, ACTIVE), creating severe visual noise and destroying typography hierarchy.

flowchart LR
    subgraph BadCard["Bad: The Badge Disease (Visual Chaos)"]
        B1["[FEATURED] [v2.4] [ENTERPRISE] [ASTRO] [EDGE]"]
        B2["Card Heading with Pulsing Green Dot 🟢"]
        B3["Paragraph smothered by chip soup"]
    end

    subgraph GoodCard["Good: Restrained Quiet Authority"]
        G1["Card Heading (Crisp Typography)"]
        G2["Clear descriptive paragraph"]
        G3["Single subtle category tag: 'Edge Infrastructure'"]
    end

    BadCard -.->|"Refactor to Negative Constraint"| GoodCard

Architectural Invariants:

1. Hard Limit of 1 Badge per Card: A visual card container (teaser, project showcase, pricing tier, testimonial) MUST contain at most one badge or pill tag.
2. Prohibition of Stacked Colored Pills: Never render clusters of adjacent candy-colored badges.
3. Ban on Pulsing Status Dots for Non-Realtime Content: A pulsing green dot (animation: pulse) signals an active, real-time telemetry stream (e.g. WebSocket connection, live worker health probe). Placing a pulsing green dot next to static portfolio items, static blog posts, or static pricing tiers is strictly forbidden.
4. No Category Chip Soup: Avoid dumping 8 technology pills onto teaser cards. If technology tags must be displayed, present them as plain-text comma-separated typography or move them into the deep-dive case study page.

---

2.3 Constraint 3: The Faux-Terminal Trap

The Failure Mode

AI models tasked with authoring technical or developer-oriented layouts routinely insert fake macOS terminal windows complete with colored traffic-light window controls (🔴 🟡 🟢), simulated bash prompts ($ npm install magic-solution), and raw ASCII border diagrams (+-----+-----+).

Architectural Invariants:

1. No Fake OS Window Chrome in Editorial Layouts: Simulated macOS terminal chrome is strictly forbidden in clean editorial, portfolio, and commercial layouts unless the client’s VIBE.md explicitly mandates a retro CLI theme.
2. No Raw ASCII Box Diagrams: Raw monospace ASCII borders look ragged on mobile devices, break screen readers, and clash with high-craft editorial design. Use clean SVG diagrams, responsive Mermaid charts, or semantic HTML data tables instead.
3. Clean Code Presentation: When presenting code snippets or commands, use semantic, borderless <pre><code> blocks with restrained syntax highlighting, subtle neutral backgrounds, and high-readability monospace fonts (e.g. JetBrains Mono, Fira Code, ui-monospace).

---

2.4 Constraint 4: The Hidden Content / Accordion Trap

The Failure Mode

To create the illusion of neatness, AI agents frequently hide vital case studies, architectural breakdowns, and primary project narratives inside collapsible <details> / <summary> accordions or drawer tabs.

Why This Destroys User Experience:

Visitors scan web pages quickly. Forcing users to click open six different accordion panels to read about a client’s core competency or project methodology destroys discoverability, frustrates readers, and signals that the content is too unimportant to display natively.

Architectural Invariants:

1. Core Narratives Must Be Direct: Case studies, architectural overviews, client credentials, and primary technical narratives MUST be laid out directly on the page using clear headings, readable paragraph measure (60–75 characters per line), and whitespace.
2. Accordions Reserved Strictly for Secondary References: Collapsible accordions are permitted only for long lists of non-critical FAQs, full legal disclosures, or optional raw configuration references. Never bury the primary story behind a click.

---

2.5 Constraint 5: Security Theater Overkill

The Failure Mode

AI agents authoring contact forms and lead capture components frequently surround simple input fields with aggressive, paranoid security banners:

SHIELDED BY CLOUDFLARE TURNSTILE BOT DEFENSE • AES-256 ZERO KNOWLEDGE ROUTING • ZERO 3RD PARTY BROKERS • MILITARY-GRADE INGRESS

Why This Backfires:

Aggressive security theater makes ordinary business visitors anxious rather than reassured. High-end consultancies and legitimate local businesses do not shout their infrastructure defenses at potential clients. It looks amateurish and defensive.

Architectural Invariants:

1. Silent Background Protection: Bot defense (@siteswarm/lead-capture with Cloudflare Turnstile), cryptographic validation, and edge rate limiting must execute silently in the background.
2. Zero Ingress War Banners: Eliminate neon badges, shield icons, and cryptographic jargon from standard lead capture forms.
3. Warm Human Ingress: Form headers and helper text must focus entirely on human clarity and hospitality (e.g., “We typically respond within one business day.” or “Direct email to our engineering team.”).

---

2.6 Constraint 6: Synthetic Metrics & Vanity Claims

The Failure Mode

LLMs invent fictitious quantitative claims to populate marketing stats grids or dashboard cards (e.g., “< 4ms Global Edge Latency”, “99.999% SLA Confidence”, “24-Hour Soak Period Complete”, “10,000+ Happy Customers”).

Architectural Invariants:

1. Ban on Hallucinated Numbers: Never invent simulated performance statistics, SLA guarantees, or client counts lacking empirical production telemetry or explicit client-supplied proof.
2. Empirical Instrumentation Requirement: Any numeric metric displayed on a public site must trace directly to:
   • Live platform instrumentation (e.g. verified Cloudflare Analytics or D1 queries).
   • Audited benchmark suites documented in docs/audits/.
   • Verified commercial figures supplied in the client’s onboarding epic.
3. Qualitative Rigor Over Fake Quantities: When empirical data is unavailable, state the factual architectural property directly (e.g., “Static-first edge generation with zero client-side JavaScript”) rather than inventing a fabricated millisecond benchmark.

---

3. Concrete ‘Bad (AI Slop)’ vs. ‘Good (Restrained Authority)’ Examples

Example 1: Hero Section Component

❌ Bad: The AI Slop Default

<!-- BAD: Corporate parody, badge cluster, pulsing dot, synthetic metrics -->
<section class="hero-container">
  <div class="badge-cluster">
    <span class="badge badge-purple">AI-POWERED</span>
    <span class="badge badge-blue">ENTERPRISE READY</span>
    <span class="badge badge-green"><span class="pulse-dot"></span> 99.999% SLA ACTIVE</span>
  </div>
  <h1>Flagship Architecture & Synergistic Next-Gen Paradigms</h1>
  <p class="hero-subtitle">
    Empowering visionary enterprises by seamlessly orchestrating mission-critical cloud fabrics to unlock unprecedented business velocity and transformative value.
  </p>
  <div class="stats-grid">
    <div class="stat"><span class="number">&lt; 3ms</span> Latency Worldwide</div>
    <div class="stat"><span class="number">10M+</span> Ops Orchestrated</div>
  </div>
  <a href="#contact" class="btn-primary">Initiate Direct Dialogue</a>
</section>

✅ Good: Restrained Quiet Authority

<!-- GOOD: Typographic focus, single subtle tag, authentic facts, human call-to-action -->
<section class="max-w-3xl mx-auto py-16 px-6">
  <p class="text-xs uppercase tracking-widest text-stone-500 font-mono mb-4">
    Distributed Systems & Edge Architecture
  </p>
  <h1 class="text-4xl sm:text-5xl font-serif text-stone-900 leading-tight mb-6">
    Resilient backend systems built for quiet reliability.
  </h1>
  <p class="text-lg text-stone-700 leading-relaxed mb-8">
    We design and build static-first web applications and edge services on Cloudflare Workers.
    Zero cold starts, sub-second deploys, and no bloated client-side JavaScript frameworks.
  </p>
  <div class="flex items-center gap-4">
    <a href="/contact" class="inline-flex px-5 py-2.5 bg-stone-900 text-stone-50 text-sm font-medium rounded hover:bg-stone-800 transition">
      Get in touch
    </a>
    <a href="/work" class="inline-flex px-5 py-2.5 text-stone-700 text-sm font-medium hover:text-stone-900 transition">
      View selected projects &rarr;
    </a>
  </div>
</section>

---

Example 2: Project & Architecture Case Study Card

❌ Bad: The AI Slop Default

<!-- BAD: Faux terminal window chrome, stacked category pills, accordion hiding core narrative -->
<div class="terminal-card">
  <div class="terminal-header">
    <span class="dot red"></span><span class="dot yellow"></span><span class="dot green"></span>
    <span class="terminal-title">bash - flagship-system-v2.sh</span>
  </div>
  <div class="card-body">
    <div class="tags">
      <span class="tag">RUST</span><span class="tag">KAFKA</span><span class="tag">KUBERNETES</span><span class="tag">GRAPHQL</span>
    </div>
    <h3>Hyper-Scale Event Ingestion Engine</h3>
    <details>
      <summary>Click to view deep dive case study...</summary>
      <p>Here is the buried narrative that the user has to click to see...</p>
    </details>
  </div>
</div>

✅ Good: Restrained Quiet Authority

<!-- GOOD: Semantic layout, scannable narrative, single domain tag, authentic detail -->
<article class="border-t border-stone-200 pt-8 pb-10">
  <div class="flex items-baseline justify-between mb-2">
    <h3 class="text-xl font-medium text-stone-900">
      Multi-Tenant Lead Ingestion Pipeline
    </h3>
    <span class="text-xs font-mono text-stone-500">Infrastructure</span>
  </div>
  <p class="text-stone-600 text-sm leading-relaxed mb-4">
    Replaced stateful API server polling with zero-latency Cloudflare Service Bindings
    and asynchronous Cloudflare Queues, eliminating database connection exhaustion
    during traffic spikes.
  </p>
  <div class="text-xs text-stone-500 font-mono">
    Cloudflare Workers &bull; SQLite D1 &bull; Cloudflare Queues
  </div>
</article>

---

Example 3: Lead Capture & Contact Ingress

❌ Bad: The AI Slop Default

<!-- BAD: Aggressive security theater banner, robot phrasing, corporate paranoia -->
<form class="contact-box">
  <div class="security-banner">
    🔒 DIRECT EDGE ROUTING &bull; ZERO 3RD PARTY BROKERS &bull; TURNSTILE BOT SHIELD ACTIVE
  </div>
  <h2>Initiate Direct Strategic Dialogue</h2>
  <p>Our executive client solutions team will review your strategic enterprise inquiry.</p>
  <input type="text" placeholder="Corporate Entity / Full Name" />
  <button type="submit">TRANSMIT INQUIRY PROTOCOL</button>
</form>

✅ Good: Restrained Quiet Authority

<!-- GOOD: Calm, welcoming, human copy; silent background bot defense -->
<form class="space-y-6 max-w-xl">
  <div>
    <h2 class="text-2xl font-serif text-stone-900 mb-2">Start a conversation</h2>
    <p class="text-stone-600 text-sm">
      Tell us about your project or architecture questions. We read every note and reply directly.
    </p>
  </div>

  <div class="space-y-4">
    <div>
      <label for="name" class="block text-xs font-mono text-stone-700 uppercase mb-1">Your Name</label>
      <input id="name" name="name" type="text" required class="w-full border border-stone-300 rounded px-3 py-2 text-stone-900 focus:outline-none focus:border-stone-600" />
    </div>
    <div>
      <label for="email" class="block text-xs font-mono text-stone-700 uppercase mb-1">Email Address</label>
      <input id="email" name="email" type="email" required class="w-full border border-stone-300 rounded px-3 py-2 text-stone-900 focus:outline-none focus:border-stone-600" />
    </div>
    <div>
      <label for="message" class="block text-xs font-mono text-stone-700 uppercase mb-1">Project Details</label>
      <textarea id="message" name="message" rows="4" required class="w-full border border-stone-300 rounded px-3 py-2 text-stone-900 focus:outline-none focus:border-stone-600"></textarea>
    </div>
  </div>

  <div id="turnstile-slot" class="my-2">
    <!-- Headless Turnstile rendered unobtrusively without neon banners -->
  </div>

  <button type="submit" class="px-6 py-2.5 bg-stone-900 text-white text-sm font-medium rounded hover:bg-stone-800 transition">
    Send message
  </button>
</form>

---

4. Integration into Agent Briefing & Execution Protocols

Every AI coding agent assigned to author or modify client applications in apps/<client>/ MUST be briefed with these universal negative constraints before generating any code or copy.

sequenceDiagram
    participant User as Human Operator / TPM
    participant Briefing as Agent Briefing Protocol
    participant Spec as EDITORIAL_ANTI_PATTERNS_AND_NEGATIVE_CONSTRAINTS.md
    participant Vibe as apps/<app>/VIBE.md
    participant Agent as Autonomous AI Agent
    participant Gate as AST & Monorepo Verification

    User->>Briefing: Assign Client Task / Issue Epic
    Briefing->>Agent: Inject Issue Context
    Briefing->>Agent: Mandate Spec (#137) & VIBE.md
    Agent->>Spec: Ingest 6 Negative Constraints & Banned Phrases
    Agent->>Vibe: Ingest Client Archetype & Palette
    Agent->>Agent: Generate Bespoke Markup & Restrained Copy
    Agent->>Gate: Run pnpm run check & pnpm swarm audit
    Gate-->>Agent: Validation Pass / Zero Slop Violations
    Agent-->>User: Open Pull Request with Clean Audit Trail

The Three Briefing Mandates:

1. Mandatory Spec Reference: Briefings must include an explicit link to docs/specs/EDITORIAL_ANTI_PATTERNS_AND_NEGATIVE_CONSTRAINTS.md.
2. Preflight Self-Audit: Agents must verify their output against the Six Negative Constraints prior to committing.
3. Zero-Slop PR Certification: The Pull Request template must confirm that no banned phrases, stacked badges, faux-terminals, buried accordions, security banners, or synthetic metrics were introduced.

---

5. Automated Governance & AST Linting Recommendations

To eliminate reliance on human vigilance alone, SiteSwarm defines automated linting rules to be implemented within @siteswarm/governance (extending the architectural rules codified in docs/specs/ARCHITECTURAL_LINTERS.md):

Planned AST & Content Linters:

1. editorial/no-banned-phrases

• Rule ID: editorial/no-banned-phrases
• Severity: Error
• Mechanism: Remark AST and string scanner that checks markdown content, Astro template strings, and JSX text nodes against the Banned Phrase Registry.
• Trigger: Detecting terms such as “Flagship Architecture”, “Initiate Direct Dialogue”, “Cutting-Edge Synergy”, or “Master Engineer”.

2. editorial/max-badge-density

• Rule ID: editorial/max-badge-density
• Severity: Error
• Mechanism: Astro AST parser inspecting sibling elements inside card containers.
• Constraint: Flags any card container containing more than 1 <Badge />, .badge, or .pill element.

3. editorial/no-simulated-metrics

• Rule ID: editorial/no-simulated-metrics
• Severity: Warning
• Mechanism: Flags hardcoded millisecond latencies (< 5ms, < 10ms) or arbitrary SLA claims (99.99%) unless tagged with an explicit data attribute referencing verified telemetry (e.g. data-telemetry-source="...").

4. editorial/no-accordion-narratives

• Rule ID: editorial/no-accordion-narratives
• Severity: Error
• Mechanism: HTML / AST scanner flagging <details> or <Accordion> elements containing primary prose blocks longer than 75 words, preventing case study burial.

5. editorial/no-faux-terminal

• Rule ID: editorial/no-faux-terminal
• Severity: Error
• Mechanism: Flags DOM classes associated with fake terminal chrome (.terminal-window, .mac-dots, .traffic-lights) unless the workspace configuration (swarm.config.ts) explicitly sets theme.allowCliTerminalChrome: true.

6. editorial/no-security-theater-banners

• Rule ID: editorial/no-security-theater-banners
• Severity: Error
• Mechanism: Flags aggressive cryptographic or bot-shield marketing strings in contact form component templates.

---

6. PR Review & Human Governance Checklist

When evaluating client applications and documentation PRs, human reviewers and TPM agents must verify:

• Zero Banned Phrases: Copy is free of corporate buzzwords, hyperbole, and LinkedIn influencer puffery.
• Badge Restraint: No card contains more than 1 badge; zero stacked multi-color pills; no pulsing green dots on static content.
• Clean Code & Typography: No fake macOS terminal headers or raw ASCII box diagrams.
• Open Case Studies: All core narratives, testimonials, and architectural explanations are rendered cleanly on the page without collapsible accordions.
• Quiet Lead Capture: Contact forms operate cleanly without aggressive security theater banners.
• Empirical Metrics Only: Every number or metric is either verified production telemetry or omitted in favor of qualitative architectural descriptions.