Understanding the Anti-Pattern System in the Garden Skills Web-Design-Engineer

The anti-pattern system is a structured collection of design-rule checks that guards the Web-Design-Engineer skill against AI-generated "default" clichés by detecting, blocking, and repairing generic visual patterns.

The anti-pattern system defines how the ConardLi/garden-skills repository ensures the Web-Design-Engineer skill produces uniquely styled, brand-faithful web artifacts rather than bland AI defaults. Operating through three integrated, data-driven components, this systemic guardrail validates every design decision against established rules stored in plain-text markdown.

Three Core Components of the Anti-Pattern System

The architecture relies on three tightly integrated layers that work sequentially to prevent design degradation. Each layer is maintained as separate markdown files within the skills/web-design-engineer/ directory.

Cross-Cutting Anti-Patterns (INDEX.md)

The cross-cutting anti-patterns represent a catalog of universal "don't-do" rules applied to every style recipe. Located in references/style-recipes/INDEX.md (lines 98–104), this component prevents mixing incompatible recipes, half-committing to styles, defaulting to generic fonts or colors, and silently adding AI-default touches.

These rules apply regardless of which specific design direction the user selects. When the skill loads any recipe anchor—such as linear—it first parses this universal prohibition list before exposing recipe details.

Failure-Pattern Library (failure-patterns.md)

The failure-pattern library provides contextual failure patterns for specific artifact types including marketing pages, dashboards, and motion designs. Found in references/failure-patterns.md, this component detects recurring mistakes like repeated section headers, over-use of gradients, and using emoji as icons.

Each entry includes concrete repair guidance. For example, the "Zigzag monotony" pattern (lines 25–30) detects repeated left/right layout splits and prescribes inserting full-width sections or adding vertical narrative breaks to restore visual rhythm.

Anti-Cliché Checklist (SKILL.md)

The anti-cliché checklist establishes high-level prohibitions against common AI-default visual choices. Defined in SKILL.md (lines 25–31), this layer enforces brand-recognition fidelity by banning generic gradients, Inter or Roboto fonts, emoji icons, and other "mush" patterns unless explicitly required by brand guidelines.

How the Anti-Pattern System Detects and Repairs Design Flaws

The system operates as a progressive guardrail that intervenes at distinct workflow stages. According to the implementation in SKILL.md (lines 68–71), the detection workflow follows this sequence:

1. Detection: Identifies when the agent attempts to fall back to generic AI patterns (e.g., importing every color in a palette)
2. Blocking: Prevents the offending output from proceeding (e.g., rejecting non-restricted color usage)
3. Repair: Suggests concrete alternatives (e.g., "Use the recipe's restricted palette" or "Replace fake emojis with placeholders")

When a user names an anchor (e.g., linear), the skill loads only that recipe but first reads the cross-cutting anti-patterns before exposing recipe details. When no anchor is provided, the skill runs the Design Direction Advisor—itself built on these anti-patterns—then presents a curated subset of recipes, each still respecting the same validation checks.

Implementation: Code Examples

The following examples demonstrate how agents consult the anti-pattern system during design requests.

Loading Cross-Cutting Anti-Patterns Before Recipe Selection

This workflow mirrors the process described in SKILL.md steps 2–4:

# Step: Read recipe anchor (e.g., "linear")

anchor = "linear"
recipe_path = f"references/style-recipes/{anchor}.md"

# First, load the universal anti-patterns

anti_patterns = read_file("references/style-recipes/INDEX.md")

# → Parse the "Cross-Cutting Anti-Patterns" section (lines 98-104)

# Then load the specific recipe

recipe = read_file(recipe_path)

# Validate: ensure no anti-pattern is violated

assert not violates(anti_patterns, recipe), "Anti-pattern breach!"

Auto-Repairing Layout Issues via Failure Patterns

The system can detect specific layout anti-patterns and apply automated repairs:

# Example: Detecting "Zigzag monotony" (repeated left/right splits)

if detect_zigzag(monotony=True, sections=layout.sections):
    # Apply the "Repair" guidance from failure-patterns.md

    layout.insert_full_width_section()
    layout.add_vertical_narrative()

This implements the repair guidance from failure-patterns.md (lines 25–30).

Enforcing the Anti-Cliché Checklist

Design declarations must explicitly avoid banned defaults:

Design Decisions:
- Color palette: **primary #0A1F44**, secondary #F2EFE8 (recipe-restricted)
- Typography: **Space Grotesk** (no Inter/Roboto fallback)   <!-- anti-cliché rule -->
- Motion: subtle easing, no gratuitous gradients

Summary

The anti-pattern system in ConardLi/garden-skills ensures high-fidelity design outputs through these key mechanisms:

• Three-layer validation: Cross-cutting rules, contextual failure patterns, and anti-cliché checklists work sequentially to prevent generic output
• Data-driven architecture: Rules stored in markdown files (INDEX.md, failure-patterns.md, SKILL.md) allow extension without source code modification
• Progressive application: Validates designs whether users specify an anchor style or require directional guidance
• Concrete repair guidance: Blocks prohibited patterns while suggesting specific fixes (e.g., restricting palettes, replacing emojis)
• Explicit manifest declaration: The capability is listed as "contextual anti-pattern checks" in manifest.json (line 5)

Frequently Asked Questions

What makes the anti-pattern system "systemic" rather than just a list of rules?

The system is systemic because it integrates detection, blocking, and repair into the skill's execution flow. According to SKILL.md (lines 25–31), the components work sequentially: cross-cutting patterns prevent universal mistakes, the failure library handles context-specific errors, and the anti-cliché checklist enforces brand fidelity. This creates a guardrail that operates at multiple workflow stages rather than a simple linting step.

Where are the anti-pattern rules physically stored?

All rules reside in plain-text markdown files within the repository. Universal rules live in references/style-recipes/INDEX.md (lines 98–104), contextual failure patterns are documented in references/failure-patterns.md, and high-level prohibitions are defined in SKILL.md (lines 25–31). This data-driven approach allows maintainers to extend or tune rules without modifying the skill's source code.

How does the system handle zigzag monotony specifically?

The system detects zigzag monotony—repetitive left/right section splits—through the failure-pattern library in references/failure-patterns.md (lines 25–30). When detected, it applies specific repairs such as inserting full-width sections or adding vertical narrative elements to break the visual repetition and restore layout interest.

Can the anti-pattern system work without a specific style anchor?

Yes. When users provide no anchor, the skill first runs the Design Direction Advisor (built on these anti-patterns) and then presents a curated subset of recipes. Each recommended recipe still undergoes the same cross-cutting anti-pattern validation before being presented, ensuring consistent quality regardless of whether a specific style is selected.

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