Common Error Patterns in Nutlope/hallmark Skills: A Complete Guide to Anti‑Patterns

Hallmark codifies AI‑generated UI tells into three severity levels—Critical, Major, and Minor—that you can detect and fix using the hallmark audit verb and the 58‑gate Slop Test.

The Hallmark design system treats repetitive AI‑generated layouts as anti‑patterns—visual tells that signal "template‑generated" rather than thoughtful design. According to the source code in skills/hallmark/references/anti-patterns.md, these common error patterns are organized by severity and enforced through automated auditing to ensure outputs avoid the "slop" aesthetic common to generic SaaS landing pages.

The Three Severity Levels of Hallmark Anti‑Patterns

Hallmark classifies every error pattern into one of three severity bands. Each band represents a different level of risk to the perception of quality and originality.

Critical Errors (Ships as Slop)

Critical anti‑patterns are the canonical templates that appear on thousands of AI‑generated SaaS landing pages. These are immediate red flags that indicate copy‑and‑paste output.

Key critical error patterns include:

• Purple‑gradient hero – Backgrounds using purple‑to‑blue gradients
• Full‑viewport centred hero – Heroes that consume 100vh with centered content
• 3‑column feature grid – Symmetrical three‑column layouts without variation
• Card‑in‑card – Nested card containers creating visual clutter
• Gradient headline – Text with gradient fills using background-clip: text
• Side‑stripe card – Cards with accent borders on one side
• Pure black / pure white backgrounds – Untinted neutrals that feel default
• Repeated macrostructure – Using the same layout pattern across multiple pages

To fix these, choose a single anchor hue, break symmetry by varying column widths, remove redundant cards, use solid ink instead of gradient text, and tint neutrals toward your anchor color rather than using pure black or white.

Major Errors (Looks AI‑Generated)

Major anti‑patterns were popular in UI kits and design trend cycles, immediately signaling "copy‑and‑paste" output without necessarily looking like a specific template.

Common major error patterns include:

• Bouncy / elastic easing – Animation curves that feel playful rather than purposeful
• Centre‑all‑content – Excessive center alignment throughout the page
• Italic headers – Using font-style: italic for headings instead of roman weights
• Eyebrow on every section – Over‑use of small uppercase labels above headings
• Shadow‑glow on dark surfaces – Glow effects that simulate elevation
• Icon‑tile feature cards – Icons positioned above headings in uniform grids
• Glass‑morphism without purpose – Translucent backgrounds without functional reason
• Hover‑only affordances – Critical interactions hidden behind hover states
• Tabular data without tabular‑nums – Misaligned numeric data in tables
• Animate‑on‑scroll everywhere – Excessive entrance animations

Remediations include using exponential ease‑out curves, biasing layouts left or right, keeping headers roman, dropping eyebrows unless numbering sections, replacing glow with elevation via lightness adjustments, and limiting animations to a single orchestrated entrance per viewport.

Minor Errors (Taste Issues)

Minor anti‑patterns are small visual or copy quirks that do not break the experience but betray a "quick‑generation" mindset.

These include:

• Straight quotes and double‑hyphens – Using " instead of curly quotes "" or -- instead of em‑dashes
• Placeholder names – Using "Jane Doe" or "Acme" instead of realistic data
• z-index: 9999 – Arbitrary high z‑indices instead of named scales
• Uniform 100vw widths – Using viewport units where percentage‑based widths are more appropriate
• Lottie shortcuts – Using Lottie animations for simple motion that could be hand‑crafted CSS

Fixes involve using proper typographic punctuation, realistic placeholder data, named z‑scale variables, width: 100%, and hand‑crafted CSS or SVG for simple animations.

How to Detect Error Patterns with hallmark audit

The hallmark audit verb scans your project and reports each occurrence of an anti‑pattern. Located in skills/hallmark/references/verbs/audit.md, this tool reads each anti‑pattern name, severity, file path, and suggests a one‑line fix.

Run the audit from your CLI:

hallmark audit src/pages/landing.html

Typical output follows this structured format:

[critical] purple‑gradient hero — src/pages/landing.html:12‑18
  why: the hero uses a purple‑to‑blue gradient background
  → fix: pick a single anchor hue and use a solid background

[major] italic header — src/components/header.css:5
  why: header is set to `font-style: italic`
  → fix: use roman weight; apply accent colour for emphasis

[minor] straight quotes — src/content/copy.md:23
  why: uses "straight" double quotes
  → fix: replace with curly quotes “”

The audit prints a summary (N critical · M major · K minor) letting you prioritize fixes by severity.

The Slop Test: 58 Gates for Quality Assurance

After running the audit, Hallmark enforces quality through the Slop Test defined in skills/hallmark/references/slop-test.md. This 58‑gate checklist runs automatically and ensures the output passes every gate before shipping.

The test covers:

• Visual gates – Color consistency, contrast ratios, and gradient usage
• Structural gates – Macrostructure validation and layout safety
• Micro‑interaction gates – Animation timing and easing curves
• Typography gates – Font pairing, scale, and punctuation
• Token‑discipline gates – Design token usage and variable consistency
• Responsive‑affordance gates – Touch targets and mobile layouts

If any gate fails, the build process flags the specific anti‑pattern and blocks deployment until resolved.

Fixing Common Error Patterns

Replacing Gradient Headlines

The gradient headline is a critical error pattern where text uses gradient fills to mimic depth. This appears frequently in AI‑generated templates.

Before (anti‑pattern):

.hero__title {
  background: linear-gradient(to right, #8a2be2, #ff00ff);
  -webkit-background-clip: text;
  color: transparent;
}

After (fixed):

.hero__title {
  color: var(--color-primary);
}

This change eliminates the gradient headline tell and references a design token for color consistency, as documented in skills/hallmark/references/anti-patterns.md.

Declaring Macrostructures

Hallmark requires explicit declaration of layout patterns via CSS comments to prevent the repeated macrostructure error. The audit checks that actual markup matches the declared macrostructure; a mismatch flags a critical structural error.

/* Hallmark · macrostructure: bento-grid · genre: modern‑minimal */

If your HTML structure deviates from the declared bento‑grid pattern without updating the comment, the audit reports a critical error for structural inconsistency.

Key Files That Define Error Patterns

Understanding these source files helps you navigate the Hallmark error detection system:

• skills/hallmark/references/anti-patterns.md – Master list of named error patterns (critical, major, minor) with detailed fixes and severity classifications.

• skills/hallmark/references/verbs/audit.md – Definition of the hallmark audit verb, including output formatting and remediation suggestions.

• skills/hallmark/references/slop-test.md – Complete 58‑gate quality checklist covering visual, structural, and interaction patterns.

• skills/hallmark/SKILL.md – High‑level design system specification covering macrostructures, token locking, and architectural guardrails.

• skills/hallmark/references/component-cookbook.md – Canonical component library providing standard implementations for navigation, footer, and cards to avoid icon‑set and layout tells.

• skills/hallmark/references/macrostructures.md – Catalogue of the 21 named macrostructures that must be varied across pages to avoid repetition errors.

Summary

• Hallmark identifies common error patterns as anti‑patterns organized into Critical, Major, and Minor severity bands.
• Critical errors include purple gradients, full‑viewport heroes, and card‑in‑card layouts that signal generic AI templates.
• Major errors encompass bouncy animations, italic headers, and glass‑morphism without purpose that suggest UI kit copying.
• Minor errors cover typography details like straight quotes and placeholder names that indicate rushed generation.
• The hallmark audit verb scans codebases and reports specific file locations and line numbers for each anti‑pattern.
• The Slop Test provides 58 automated gates to enforce quality before shipping.
• Fix patterns by replacing gradients with solid colors, declaring macrostructures explicitly, and using design tokens consistently.

Frequently Asked Questions

What triggers a Critical severity error in Hallmark?

Critical errors occur when code contains canonical AI templates such as purple‑gradient heroes, full‑viewport centered layouts, or repeated macrostructures across pages. These patterns appear in skills/hallmark/references/anti-patterns.md as immediate tells that a page was generated rather than designed.

How does the hallmark audit verb identify specific lines of code?

The audit verb parses source files against the anti‑patterns registry, matching CSS properties, HTML structures, and content patterns. It outputs file paths with line numbers (e.g., src/components/header.css:5) and provides specific remediation advice for each match, as defined in skills/hallmark/references/verbs/audit.md.

What is the difference between the audit and the Slop Test?

The hallmark audit is a diagnostic tool that reports anti‑pattern occurrences and suggests fixes, while the Slop Test is a 58‑gate validation suite that runs after fixes to enforce hard quality constraints. The audit helps you find errors; the Slop Test prevents deployment if any gates fail.

Can I customize which error patterns Hallmark checks against?

The error patterns are defined in skills/hallmark/references/anti-patterns.md and enforced consistently across all Hallmark skills. While you cannot disable individual patterns without modifying the source, you can prioritize fixes using the severity summary (N critical · M major · K minor) provided by the audit output to address the highest‑impact issues first.

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