# Taste‑Skill Section‑Layout‑Repetition Ban and Zigzag Alternation Cap Rules Explained

> Understand taste-skill section-layout-repetition ban and zigzag alternation cap rules. Learn how these design system principles prevent repetitive layouts and ensure visual variety for engaging content.

- Repository: [Leon Lin/taste-skill](https://github.com/Leonxlnx/taste-skill)
- Tags: explanation
- Published: 2026-05-31

---

**The taste‑skill design system prevents monotonous, templated layouts by enforcing a strict Section‑Layout‑Repetition Ban that prohibits reusing layout families and a Zigzag Alternation Cap that limits alternating image‑text patterns to two consecutive sections.**

The **taste‑skill** repository by Leonxlnx encodes these "anti‑slop" guardrails to ensure generated landing pages and portfolios maintain visual diversity. These constraints operate as hard stops that override the system's design dials, forcing creative variation even when AI agents attempt to fall back on repetitive patterns. Understanding these rules is essential for developers building compliant front‑ends or extending the design system.

## Section‑Layout‑Repetition Ban: One Family per Page

The **Section‑Layout‑Repetition Ban**, defined at [line 51 of [`skills/taste-skill/SKILL.md`](https://github.com/Leonxlnx/taste-skill/blob/main/skills/taste-skill/SKILL.md)](https://github.com/Leonxlnx/taste-skill/blob/main/skills/taste-skill/SKILL.md#L51), mandates that any specific layout *family* may appear **only once** per page.

Layout families include patterns such as:

- **3‑column image cards**
- **Full‑width quote** blocks
- **Split‑text‑image** sections
- **Bento grids**
- **Marquee** carousels

This constraint guarantees that a page containing eight distinct sections must utilize at least four different layout families. The rule directly combats the "copy‑paste" aesthetic common in AI‑generated sites by preventing agents from duplicating the same structural pattern across multiple sections.

## Zigzag Alternation Cap: Breaking the Rhythm

The **Zigzag Alternation Cap**, specified at [line 52 of [`skills/taste-skill/SKILL.md`](https://github.com/Leonxlnx/taste-skill/blob/main/skills/taste-skill/SKILL.md)](https://github.com/Leonxlnx/taste-skill/blob/main/skills/taste-skill/SKILL.md#L52), restricts the classic alternating pattern where sections switch between "left‑image / right‑text" and "left‑text / right‑image" layouts.

Specifically:

- The zigzag pattern may appear in **no more than two consecutive sections**
- A third consecutive `split-image-text` section triggers a **pre‑flight failure**
- The system forces insertion of alternative families such as **full‑width**, **vertical‑stack**, or **bento‑grid** layouts to break the monotony

This cap eliminates the cheap visual rhythm that dominates templated landing pages, compelling designers to introduce genuine structural variety.

## Architectural Context and Constraint Hierarchy

These guardrails sit **above** the system's **Design Dials** (`DESIGN_VARIANCE`, `MOTION_INTENSITY`, `VISUAL_DENSITY`) as inviolable constraints. Even when high variance settings might theoretically permit repetitive asymmetries, the system refuses pages violating these specific rules.

The constraints are **contextual**, evaluating only after the brief is processed and the design‑read line is emitted (Section 0). During generation, the agent maintains an internal registry of layout families already emitted, checking each new section against prohibited patterns before rendering.

The rules interact with complementary guardrails:

- **Eyebrow Restraint**: Limits repetitive labeling, encouraging layout diversity through content structure
- **Bento Background Diversity**: Forces visual variation within grid families
- **Marquee‑Max‑One‑Per‑Page**: Another "once‑per‑page" rule sharing the same architectural philosophy

## Implementation: Enforcing the Guardrails

The taste‑skill implementation requires tracking layout identifiers during page construction and validating output before delivery.

### Tracking Layout Families with TypeScript

The following `LayoutGuard` class implements the registry logic necessary to enforce both constraints:

```typescript
// src/lib/layoutGuard.ts
type LayoutFamily = 'split-image-text' | 'full-width-quote' | 'bento-grid' | 'marquee' | 'vertical-stack' | string;

export class LayoutGuard {
  private usedFamilies = new Set<LayoutFamily>();
  private recentFamilies: LayoutFamily[] = [];

  /** Register a new layout; returns `true` if allowed, `false` if it violates a rule */
  register(family: LayoutFamily): boolean {
    // Section‑Layout‑Repetition Ban
    if (this.usedFamilies.has(family)) return false;

    // Zigzag Alternation Cap – only relevant for the split family
    if (family === 'split-image-text' && this.isZigzagViolation()) return false;

    // Accept and record
    this.usedFamilies.add(family);
    this.recentFamilies.push(family);
    if (this.recentFamilies.length > 2) this.recentFamilies.shift(); // keep last two
    return true;
  }

  private isZigzagViolation(): boolean {
    // Violation if the two previous sections are also split-image-text
    return this.recentFamilies.every(f => f === 'split-image-text');
  }
}

```

**Usage in a page builder:**

```typescript
import { LayoutGuard } from '@/lib/layoutGuard';

const guard = new LayoutGuard();

function addSection(family: LayoutFamily, Component: React.ReactNode) {
  if (!guard.register(family)) {
    throw new Error(`Layout rule violation: cannot use "${family}" here`);
  }
  return <section>{Component}</section>;
}

// Example – trying three zig‑zag sections will throw on the third call
addSection('split-image-text', <SplitImageLeft />);
addSection('split-image-text', <SplitImageRight />);
addSection('split-image-text', <SplitImageLeft />); // ❌ throws

```

### Runtime Validation for CI/CD

For deterministic audits after generation, implement a validation script that scans rendered JSX/TSX:

```javascript
// scripts/validateLayouts.js
const fs = require('fs');
const src = fs.readFileSync('pages/index.tsx', 'utf8');

const layoutRegex = /layoutFamily\s*=\s*['"]([^'"]+)['"]/g;
const families = [];
let match;
while ((match = layoutRegex.exec(src))) families.push(match[1]);

// Section‑Layout‑Repetition Ban
const dup = families.filter((f, i) => families.indexOf(f) !== i);
if (dup.length) console.error('Duplicate layout families:', [...new Set(dup)]);

// Zigzag Alternation Cap
for (let i = 2; i < families.length; i++) {
  if (families[i] === 'split-image-text' && families[i - 1] === 'split-image-text' && families[i - 2] === 'split-image-text') {
    console.error('Zigzag cap violated at sections', i - 2, i - 1, i);
    break;
  }
}
process.exit(dup.length ? 1 : 0);

```

Running `node scripts/validateLayouts.js` fails the build if either guardrail is broken, ensuring the rules persist even if the LLM inadvertently generates non‑compliant code.

## Summary

- The **Section‑Layout‑Repetition Ban** prohibits reusing any layout family (such as `bento-grid` or `split-image-text`) more than once per page, ensuring visual diversity across sections.
- The **Zigzag Alternation Cap** limits alternating image‑text layouts to two consecutive sections, forcing structural variation on the third occurrence.
- Both rules are hard constraints evaluated contextually after the design brief is read, overriding the `DESIGN_VARIANCE` dial settings.
- Implementation requires maintaining a registry of used families during generation and validating output via deterministic audits.
- Violations trigger pre‑flight failures, requiring regeneration with compliant layout alternatives.

## Frequently Asked Questions

### What happens if I violate the Section‑Layout‑Repetition Ban in taste‑skill?

The system will throw a **pre‑flight failure** error and abort the response, prompting the agent to regenerate the section using an unused layout family. In CI/CD pipelines, the runtime validation script will exit with code 1, preventing deployment of non‑compliant pages.

### Can I use the zigzag pattern more than twice if I alternate the image side?

No. The **Zigzag Alternation Cap** counts any consecutive use of the `split-image-text` family, regardless of whether the image appears on the left or right. Two consecutive split sections are permitted; the third triggers a violation, requiring you to insert a different layout family such as `full-width-quote` or `vertical-stack`.

### Where are these rules defined in the taste‑skill repository?

Both rules are formally specified in [[`skills/taste-skill/SKILL.md`](https://github.com/Leonxlnx/taste-skill/blob/main/skills/taste-skill/SKILL.md)](https://github.com/Leonxlnx/taste-skill/blob/main/skills/taste-skill/SKILL.md) at lines 51 and 52, under the layout guardrails section. This file serves as the canonical reference for the design system's anti‑repetition constraints.

### How do these layout rules interact with the DESIGN_VARIANCE dial?

The Section‑Layout‑Repetition Ban and Zigzag Alternation Cap operate **above** the `DESIGN_VARIANCE`, `MOTION_INTENSITY`, and `VISUAL_DENSITY` dials as absolute constraints. Even at maximum variance settings that might encourage asymmetry, the system will reject any page attempting to reuse layout families or chain three zigzag sections, ensuring the dials control aesthetic flavor rather than structural repetition.