# No uninterpolated template variables in output

- **Pattern:** `ab-000263` (`ai-slop-half-finished.hardcoded-test-data.placeholder-template-variables`)
- **Severity:** medium
- **Lifecycle:** active
- **Last modified:** 2026-04-18
- **Canonical URL:** https://auditbuffet.com/patterns/ab-000263
- **License:** CC-BY-4.0 — attribute to AuditBuffet Pattern Catalog (https://auditbuffet.com/patterns/ab-000263)

## Why it matters

Strings like `Hello [INSERT_USER_NAME]!` or `Total: {{amount}}` render verbatim in the browser or email client. Users see the literal brackets, support tickets flood in, and the brand takes a direct credibility hit — especially in transactional email, which customers screenshot and share. This is pure placeholder-hygiene rot: the AI emitted a templating stub, no one swapped in real interpolation, and the string shipped.

## Severity rationale

Medium because uninterpolated placeholders damage user trust immediately but rarely cause data loss or security impact.

## Remediation

Replace placeholder tokens with the host language's interpolation and pass real values at render time. For React, use JSX expressions; for emails, use a templating library (React Email, Handlebars, MJML) that binds variables at render. Fix in `src/components/Greeting.tsx`:

```tsx
<h1>Hello {user.name}!</h1>
```

## Detection

- **ID:** `placeholder-template-variables`
- **Severity:** `medium`
- **What to look for:** Walk all source files that produce user-facing output (components, pages, API handlers, email templates). Count all occurrences in string literals of uninterpolated placeholder patterns: `[INSERT_X]`, `[INSERT X]`, `[YOUR_X]`, `{{variable}}` (inside string literals, not JSX expressions), `${VARIABLE}` in single-quoted strings (where the shell-style variable is NOT a template literal), `%VARIABLE%`, `<VARIABLE>` (inside non-JSX strings). EXCLUDE files under `**/templates/**` where the placeholders are part of a templating system that handles interpolation separately.
- **Pass criteria:** 0 uninterpolated placeholder patterns in user-facing output strings. Report: "Scanned X user-facing source files, 0 uninterpolated placeholders found."
- **Fail criteria:** At least 1 source file contains an uninterpolated placeholder pattern in a string that reaches user output.
- **Skip (N/A) when:** Project has 0 component, page, or email template files.
- **Detail on fail:** `"2 uninterpolated placeholders: 'Hello [INSERT_USER_NAME]!' in src/components/Greeting.tsx (JSX text), 'Total: {{amount}}' in src/emails/receipt.tsx (template variable not replaced)"`
- **Remediation:** Placeholder patterns in shipped strings show up verbatim to users — "Hello [INSERT_USER_NAME]" is what the user actually sees. Replace with real interpolation:

  ```tsx
  // Bad: placeholder leaks to user
  <h1>Hello [INSERT_USER_NAME]!</h1>

  // Good: interpolate the actual value
  <h1>Hello {user.name}!</h1>
  ```

  For email templates, use a real templating library (Handlebars, React Email, MJML) and pass the variables at render time.

Taxons: placeholder-hygiene

HTML version: https://auditbuffet.com/patterns/ab-000263