How to Interpret Slop-Test Results in Nutlope/hallmark: A Complete Guide

To interpret slop-test results in Nutlope/hallmark, decode the pre-emit critique axes (P, H, E, S, R, V), identify failed gate numbers in the stamp, cross-reference them with the 58-gate checklist in slop-test.md, and apply the specific CSS or structural fixes required.

The slop-test is Hallmark’s built-in quality-gate system that evaluates generated pages against 58 automated checks before marking them as complete. When you run Hallmark from the Nutlope/hallmark repository, the output includes a concise "stamp" that records which gates passed or failed. Understanding how to read this stamp allows you to transform generic AI-generated layouts into polished, handcrafted-quality designs.

Understanding the Pre-Emit Self-Critique (Axes P, H, E, S, R, V)

The first line of every slop-test stamp contains the pre-emit critique, a six-axis score that determines whether Hallmark triggers an automatic revision before evaluating the remaining gates.

/* Hallmark · pre‑emit critique: P5 H4 E5 S4 R5 V5 */

Each letter represents a specific quality axis:

• P (Philosophy) – Does the page articulate a clear "why"? Pass if ≥ 3.
• H (Hierarchy) – Is the primary-secondary-tertiary hierarchy obvious? Pass if ≥ 3.
• E (Execution) – Are details (spacing, colors, focus rings) precise? Pass if ≥ 3.
• S (Specificity) – Does the design feel bespoke to the brief? Pass if ≥ 3.
• R (Restraint) – Are unnecessary decorations removed? Pass if ≥ 3.
• V (Variety) – Is the macro-structure distinct from prior outputs? Pass if ≥ 3.

If any score falls below 3, the system automatically triggers a revision pass before proceeding to the gate checks. This logic is documented in skills/hallmark/references/slop-test.md under the Pre-emit self-critique section.

Decoding the Visual Gates (1–7)

Visual gates verify design fundamentals like typography, color usage, and layout patterns. These checks ensure the output avoids common AI-generated "slop" patterns.

Gate	Check	Typical Failure	Solution
1	Display font approval	Uses non-tokenized font family	Switch to --font-display or --font-body tokens
2	Gradient text violations	Gradient applied to headline text	Move gradients to backgrounds only
3	3-column card grid	Missing required grid structure	Add grid-template-columns: repeat(3, 1fr)
4	Nested cards	Cards inside cards	Flatten the hierarchy
5	Thick side-stripes	Heavy left/right borders	Replace with subtle outlines or spacing
6	Hero centered-everything	More than two centered elements	Offset eyebrow or CTA off-axis
7	Pure black/white usage	#000 or #fff appears	Use var(--color-paper) and tokenized colors

Source: skills/hallmark/references/slop-test.md – Visual section.

Analyzing Structural and Micro-Interaction Gates (8–27)

These gates enforce macro-structure uniqueness and sensible motion design. They prevent repetitive patterns and ensure accessibility-compliant interactions.

• Gate 8 – Checks for forbidden macrostructure reuse. If the page fingerprint matches a previous output, select a different macrostructure from structure.md.
• Gates 12–17 – Validate transition properties. Avoid transition: all or animating layout-changing properties; scope transitions to specific properties like opacity or transform.
• Gate 26 – Verifies interactive states. Every interactive element must include :focus-visible, :active, and :disabled styles.
• Gate 27 – Requires reduced-motion fallbacks. Wrap animations in @media (prefers-reduced-motion: reduce) guards.

Source: skills/hallmark/references/slop-test.md – Implementation gates.

Evaluating Layout Safety and Mobile Responsiveness (34–57)

Layout gates prevent horizontal scrolling, ensure clickable elements remain accessible, and verify grid resilience across viewports.

• Gate 34 – Enforces zero horizontal overflow between 320 px and 1920 px widths. Fix by adding overflow-x: clip to html and body.
• Gate 49 – Prevents clickable text from wrapping. Enforce white-space: nowrap on navigation and CTA elements.
• Gate 50 – Validates image-bearing grid tracks use minmax(0, 1fr) to accommodate narrow viewports.

Failures in this category typically manifest as horizontal scrollbars or wrapped button labels that break the design on mobile devices.

Source: skills/hallmark/references/slop-test.md – Layout-safety gates.

Reading the Final Stamp

A successful slop-test produces a stamp showing all gates passed:

/* Hallmark · pre‑emit critique: P5 H4 E5 S4 R5 V5 */
/* Hallmark · macrostructure: hero‑split · theme: modern‑minimal · contrast: pass (40–41) · nav: N2 · footer: Ft4 · slop: pass (42–45) · honest: pass (46) · chrome: pass (47) · tokens: pass (48) · responsive: pass (49) · icons: pass (30) · mobile: pass (34, 49, 50–57) */

When gates fail, the stamp marks them explicitly:

/* Hallmark · contrast: FAIL gates 40,41 */

To resolve failures:

1. Note the failed gate numbers from the stamp.
2. Open skills/hallmark/references/slop-test.md and locate the corresponding gate descriptions.
3. Apply the prescribed fix (CSS adjustment, ARIA addition, or structural change).
4. Re-run hallmark <verb> <target> until the stamp shows only "pass" entries.

Programmatically Detecting Failures

You can parse the stamp output programmatically to automate quality checks. The CLI parsing logic in site/js/main.js uses regex patterns similar to this example:

// Detecting failed gates programmatically
const stamp = `/* Hallmark · contrast: FAIL gates 40,41 */`;
if (/FAIL/.test(stamp)) {
  const fails = stamp.match(/gates\s([\d,]+)/)[1].split(',').map(Number);
  console.log('Failed gates:', fails);
  // Map these numbers to the slop‑test doc for fixing
}

This pattern extracts failed gate numbers for automated reporting or CI/CD pipelines.

Reference Files for Troubleshooting

File	Purpose
skills/hallmark/references/slop-test.md	Complete list of 58 gates and scoring rules
skills/hallmark/SKILL.md	Core rule-set including token locking requirements
skills/hallmark/references/component-cookbook.md	Nav/footer/component variations for gates 42–45
skills/hallmark/references/layout-and-space.md	Page-edge clipping (gate 34) and spacing rules
skills/hallmark/references/typography.md	Typography limits (gates 37–38) and the 2+1 rule
skills/hallmark/references/responsive.md	Clickable-text wrap rules (gate 49) and breakpoints
site/js/main.js	CLI post-process that prints stamps and error messages

Summary

• Check the pre-emit critique first – any score below 3 in the P, H, E, S, R, or V axes triggers an automatic revision.
• Locate failed gate numbers in the stamp output next to FAIL gates.
• Cross-reference gate numbers with the detailed descriptions in skills/hallmark/references/slop-test.md.
• Apply targeted fixes – replace raw hex colors with tokens, flatten nested cards, add minmax(0, 1fr) to grids, or implement prefers-reduced-motion fallbacks.
• Iterate until clean – re-run Hallmark commands until the stamp contains only "pass" entries for all 58 gates.

Frequently Asked Questions

What does it mean if a pre-emit critique score is below 3?

A score below 3 on any axis (Philosophy, Hierarchy, Execution, Specificity, Restraint, or Variety) indicates the page violates fundamental design principles. According to the slop-test.md logic, Hallmark automatically triggers a revision pass to address these issues before evaluating the remaining 58 gates.

How do I fix failed contrast gates (40 and 41)?

Gates 40 and 41 verify color contrast ratios meet accessibility standards. Failures typically occur when using non-tokenized colors or insufficient contrast between text and backgrounds. Review the color tokens in skills/hallmark/references/slop-test.md and ensure all text uses approved token combinations with adequate contrast ratios.

Where can I find the complete list of slop-test gates?

The authoritative reference for all 58 gates is located at skills/hallmark/references/slop-test.md in the Nutlope/hallmark repository. This file categorizes gates by type (Visual, Structural, Layout-safety, etc.) and provides specific pass criteria and remediation steps for each numbered check.

What is the difference between universal and genre-scoped gates?

Universal gates apply to every output regardless of style, enforcing baseline quality standards like proper focus states and token usage. Genre-scoped gates apply only to specific categories (editorial, atmospheric, modern-minimal, or playful), checking for patterns appropriate to that particular aesthetic. The slop-test stamp indicates which genre rules were active during the evaluation.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}