What Anti-Patterns Are Blocked by the Web-Design-Engineer Skill? Complete Catalog of Blocked Failure Patterns

The web-design-engineer skill actively blocks 24 specific anti-patterns across six categories—Marketing & Multi-section Pages, Layout & Components, Typography & Content, Imagery & Brand, Motion & Interaction, and Dashboards & Product UI—by enforcing rules defined in failure-patterns.md that automatically repair designs violating these guardrails.

The Web-Design-Engineer skill in the ConardLi/garden-skills repository functions as an architectural guardrail system for generative web design. Rather than producing arbitrary layouts, the skill references a comprehensive catalog of failure patterns (anti-patterns) stored in skills/web-design-engineer/references/failure-patterns.md to prevent common design mistakes before they reach production code.

How the Web-Design-Engineer Skill Detects Anti-Patterns

The skill employs heuristic detection criteria defined alongside each blocked pattern. When processing a design prompt, it scans for structural signatures—such as repetitive layout rhythms, generic typography choices, or missing state handling—and automatically repairs the output by applying corrective actions. These rules operate as defaults and can only be overridden through documented exceptions in brand-specific guidelines.

Marketing & Multi-Section Page Anti-Patterns

Repeated Section-Header Formula

The skill blocks mechanically templated sections featuring a tiny uppercase eyebrow label above every heading. This pattern creates a templated rhythm that reduces originality. Detection triggers when the same label + headline + paragraph stack appears across most sections without contextual variation.

Zigzag Monotony

Alternating left/right image-text splits for three or more consecutive sections is flagged because mirroring alone does not constitute meaningful composition. The skill detects this when mirroring represents the only difference between adjacent sections.

Default Centered Hero

Centered headlines paired with gradients and dual CTAs (but no supporting copy) are identified as statistical defaults rather than intentional design decisions. The skill blocks layouts matching the centered-hero template without contextual justification or unique value propositions.

Decorative "Trust Theater"

Fabricated metrics, testimonials, logos, security badges, and "used by" claims are blocked because false credibility damages user trust more than honest gaps. The skill identifies placeholder credibility elements that lack real data backing.

CTA Duplication

Multiple calls-to-action with identical intent (e.g., "Get started," "Try free," and "Create account" all routing to the same action) confuse users and dilute conversion focus. The skill consolidates these into singular, clear actions.

Layout & Component Anti-Patterns

Cardification

Wrapping every paragraph, metric, and icon in rounded cards adds visual noise rather than meaning. The skill detects cardification when every atomic element lives inside a card component, and instead promotes purposeful containment hierarchies.

Bento Without Rhythm

Empty or filler cells within bento-grid layouts provide no visual hierarchy. The skill flags blank filler cells or uniform text-only tiles that lack distinct functional roles within the grid architecture.

Shape Drift

Inconsistent border radii across pills, cards, and controls break visual grammar. The skill enforces token-based consistency by detecting mixed radii appearing without a defined design token grammar.

Split-Header Filler

Large left headlines paired with tiny right paragraphs that add no functional value represent wasteful split layouts. The skill identifies this pattern when the right-side content fails to complement or justify the left-side prominence.

Typography & Content Anti-Patterns

Generic Display Typography

Defaulting to Inter, Roboto, Arial, or system-ui as primary display fonts prevents unique brand expression. The skill blocks these generic system fonts unless specifically overridden by brand guidelines requiring system-font stacks.

Micro-Label Noise

Decorative version numbers, fake coordinates, weather indicators, and status dots add meaningless distraction. The skill removes decorative metadata that does not aid user comprehension or task completion.

Copy-Shaped Decoration

Vague claims, fake precision, and filler slogans that exist solely to fill space without factual basis are flagged as copy-shaped decoration. The skill requires text to convey substantive information rather than occupying negative space.

Unreadable Hero

Hero sections where CTAs fall below the initial viewport, text appears clipped, or copy competes directly with imagery break visual hierarchy. The skill ensures primary actions remain visible without scrolling and text maintains sufficient contrast against backgrounds.

Imagery & Brand Anti-Patterns

CSS as Counterfeit Asset

Replacing recognizable logos or products with decorative CSS shapes undermines brand authenticity. The skill detects when CSS-only graphics substitute for real brand assets that should use actual image files or SVG logos.

Image-Label Clutter

Overlaying pills or captions on images without explanatory purpose clutters visual hierarchy. The skill removes labels that do not identify or contextualize the underlying imagery.

Generated-World Drift

When multiple AI-generated images diverge in palette, lighting, or typography within the same interface, the skill flags generated-world drift. It enforces visual consistency across generated assets to maintain cohesive brand presentation.

Motion & Interaction Anti-Patterns

Motion for Spectacle Only

Animations lacking hierarchy, feedback, or narrative purpose add cognitive load without functional value. The skill detects motion that can be removed without affecting user comprehension or task completion.

Scroll-State Rendering

Updating broad React state on every scroll or pointer frame creates performance bottlenecks. The skill blocks heavyweight state updates tied directly to scroll events, requiring throttled or CSS-based alternatives.

Repeated Spectacle

Multiple simultaneous marquees, pinned chapters, magnetic controls, or competing loops over-stimulate users. The skill limits decorative animations to prevent distraction from core content.

Missing Reduced-Motion Path

Interfaces lacking fallbacks for prefers-reduced-motion settings exclude accessibility-required users. The skill mandates that all motion collapses gracefully under reduced-motion preferences.

Dashboard & Product UI Anti-Patterns

Marketing Styling on Operational UI

Applying giant headlines, excessive whitespace, or cinematic cards to functional dashboards reduces scanning efficiency. The skill differentiates between marketing surfaces and operational UI, enforcing information-dense layouts for productivity tools.

Decorative Data Visualization

Gradients, 3D effects, shadows, or animations that obscure actual data points violate data-ink ratio principles. The skill prioritizes accurate data representation over stylistic flourishes in charts and graphs.

Happy-Path-Only Components

Components implementing only success states while omitting loading, empty, error, permission, disabled, and overflow states create brittle interfaces. The skill enforces comprehensive state handling across all interactive elements.

Implementing the Anti-Pattern Blocks in Code

The skill exposes its guardrails through programmatic interfaces that validate outputs against the failure-pattern catalog.

# Example: Using the skill to generate a landing page while blocking anti-patterns

from garden_skills import SkillRunner

skill = SkillRunner("web-design-engineer")
prompt = """
Create a multi-section marketing page for a new SaaS product.
Include a hero section, three feature sections, and a CTA button.
"""

# The skill will automatically reject any repeated section-header formula

# and default centered hero patterns.

result = skill.run(prompt)
print(result)   # Clean design without the blocked anti-patterns

// Example: Enforcing layout anti-patterns in a React component generator
import { runSkill } from "@garden-skills/web-design-engineer";

const prompt = `
Generate a responsive dashboard with cards for metrics.
Avoid cardification (don't wrap each metric in its own rounded card).
`;
runSkill(prompt).then(output => {
  // Output respects the "Cardification" block rule
  console.log(output);
});

Key Source Files in the Repository

The anti-pattern architecture is defined across four critical files in the skills/web-design-engineer/ directory:

• references/failure-patterns.md — Master catalog containing all 24 anti-patterns, detection heuristics, rationales, and automatic repair guidance.
• references/block-library.md — Index of vetted, reusable components that the skill substitutes when blocked patterns are detected.
• manifest.json — Declares skill metadata, dependencies, and reference file locations.
• SKILL.md — Human-readable overview of capabilities, usage guidelines, and override procedures for documented exceptions.

Summary

• The web-design-engineer skill blocks 24 distinct anti-patterns organized across six thematic categories: Marketing & Multi-section Pages, Layout & Components, Typography & Content, Imagery & Brand, Motion & Interaction, and Dashboards & Product UI.
• Detection occurs through heuristic analysis of layout structures, typography choices, motion implementations, and state completeness as defined in failure-patterns.md.
• Blocked patterns include cardification, zigzag monotony, generic display typography, scroll-state rendering, and happy-path-only components.
• The skill automatically repairs violations by applying corrective actions or substituting vetted alternatives from block-library.md.
• All rules function as defaults requiring explicit documented exceptions for brand-specific overrides.

Frequently Asked Questions

Can the anti-pattern blocks be disabled or overridden?

Yes, but only through documented exceptions specified in brand-specific guidelines or intentional editorial patterns. According to the repository's SKILL.md, default rules exist to prevent common failures, yet teams may override specific blocks when the design system explicitly requires patterns like system-ui typography or specific marketing stylings for operational dashboards.

How does the skill detect "decorative trust theater"?

The skill scans for placeholder credibility elements—including fabricated metrics, testimonials, and security badges—that appear without corresponding real data sources. In failure-patterns.md, the detection criteria specify identifying "presence of placeholder credibility elements without real data," triggering automatic removal or flagging for content verification.

Where are the anti-pattern definitions stored?

All anti-pattern definitions, detection criteria, and repair strategies reside in skills/web-design-engineer/references/failure-patterns.md. This file serves as the single source of truth for the skill's architectural guardrails and is referenced by the skill runner during prompt processing.

What happens when the skill detects cardification in a layout?

When the skill identifies cardification (every atomic element wrapped in rounded containers), it applies repair actions defined in the failure patterns catalog. Typically, this involves restructuring the layout to use purposeful containment—grouping related information meaningfully rather than card-wrapping individual paragraphs or metrics—and may pull replacement components from block-library.md.

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