# Understanding the Section-Layout-Repetition Ban in Taste Skill: Compliance Guide

> Learn to comply with the Section-Layout-Repetition Ban in Taste Skill. Avoid visual monotony and ensure your skill pages are unique by understanding layout restrictions.

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

---

**The Section-Layout-Repetition Ban in Taste Skill prohibits using any layout family (such as `3-column-image-cards` or `split-text-image`) more than once per page to prevent visual monotony and template-spam aesthetics.**

Taste Skill, an open-source project hosted at `Leonxlnx/taste-skill`, enforces strict design rules to ensure generated landing pages maintain high visual quality. The Section-Layout-Repetition Ban serves as a critical safeguard against repetitive layouts that make AI-generated sites feel generic. According to the core specification in [`skills/taste-skill/SKILL.md`](https://github.com/Leonxlnx/taste-skill/blob/main/skills/taste-skill/SKILL.md), this rule mandates that each **layout family** may appear only once per page, with additional minimum diversity requirements for longer pages.

## What Is the Section-Layout-Repetition Ban?

The Section-Layout-Repetition Ban is a mandatory constraint within Taste Skill's "Hardened design rules" that restricts how often specific layout patterns can be reused.

### Core Rule Definition

A **layout family**—such as `3-column-image-cards`, `full-width-quote`, `split-text-image`, or `bento-grid`—may be used **only once** on any given page. This means you cannot repeat the same structural pattern for multiple sections, even if the content differs. As documented in [[`SKILL.md`](https://github.com/Leonxlnx/taste-skill/blob/main/SKILL.md) line 251](https://github.com/Leonxlnx/taste-skill/blob/main/skills/taste-skill/SKILL.md#L251), violating this triggers an immediate **Pre-Flight Fail**, aborting the build process.

### Minimum Diversity Requirements

For pages containing eight or more sections, the rule specifies a stricter constraint: you must employ **at least four distinct layout families**. This requirement, noted in the project changelog at [[`CHANGELOG.md`](https://github.com/Leonxlnx/taste-skill/blob/main/CHANGELOG.md) line 60](https://github.com/Leonxlnx/taste-skill/blob/main/CHANGELOG.md#L60), ensures that longer pages maintain sufficient visual variety to avoid monotonous rhythmic patterns.

## Why Taste Skill Enforces This Ban

Repeating identical layouts creates a "template-spam" feel that undermines perceived design quality. When sections like "Selected Commissions" and "What We Do" use the exact same `split-text-image` structure, they become visually interchangeable, reducing user engagement and professionalism. The ban works alongside related constraints like the **Zigzag Alternation Cap** and **Bento Cell Count Rule** to force varied, purposeful composition across every generated page.

## How the Rule Is Enforced

Taste Skill implements a mechanical validation system during the build process to ensure compliance.

1. **Pre-flight Check**: When the skill finishes building a page, the validator—invoked via the entry-point [[`skill.sh`](https://github.com/Leonxlnx/taste-skill/blob/main/skill.sh)](https://github.com/Leonxlnx/taste-skill/blob/main/skill.sh)—scans the rendered markup for layout-family identifiers.
2. **Count Uniqueness**: The system tallies occurrences of each family. If any family appears more than once, it flags a *Section-Layout-Repetition* failure.
3. **Error Feedback**: The skill returns a concise message indicating which family is duplicated and suggests alternative families to use, preventing the page from being shipped.

## Strategies to Stay Compliant

| Situation | Recommended Approach |
|-----------|----------------------|
| **Many content blocks** | Distribute content across different families: use a **bento grid** for features, a **full-width quote** for testimonials, a **split-text-image** for case studies, and **3-column image-cards** for portfolios. |
| **Near the 8-section limit** | Introduce a **vertical-stack** or **marquee** section to increase family count without adding redundant content. |
| **Repeatable content patterns** | Collapse similar items into a single **bento grid** rather than replicating the same layout multiple times. The Bento Cell Count Rule ensures the grid size matches item count. |
| **Automated verification** | Implement a helper utility to extract and verify layout families before final output. |

## Implementing a Pre-Flight Validator

You can programmatically enforce the Section-Layout-Repetition Ban using a JavaScript utility. The following helper assumes each section stores its layout family in a `layoutFamily` property:

```javascript
// utils/checkLayoutRepetition.js
/**
 * Returns an array of error messages if any layout family appears more than once.
 * @param {Array<{layoutFamily:string}>} sections – ordered list of page sections
 * @param {number} minFamilies – required distinct families (default 4 for 8 sections)
 */
export function verifySectionLayoutRepetition(sections, minFamilies = 4) {
  const familyCounts = {};
  const errors = [];

  sections.forEach((sec, idx) => {
    const fam = sec.layoutFamily;
    if (!fam) return;
    familyCounts[fam] = (familyCounts[fam] || 0) + 1;

    if (familyCounts[fam] > 1) {
      errors.push(
        `Section ${idx + 1} uses layout family "${fam}" which already appears ${familyCounts[fam] -
          1} time(s). Each family may be used only once.`
      );
    }
  });

  const distinctFamilies = Object.keys(familyCounts).length;
  if (sections.length >= 8 && distinctFamilies < minFamilies) {
    errors.push(
      `Page has ${sections.length} sections but only ${distinctFamilies} distinct layout families. ` +
        `At least ${minFamilies} different families are required (Section‑Layout‑Repetition Ban).`
    );
  }

  return errors;
}

```

### Usage Example

```javascript
import { verifySectionLayoutRepetition } from './utils/checkLayoutRepetition.js';

const pageSections = [
  { layoutFamily: 'hero' },
  { layoutFamily: '3-column-image-cards' },
  { layoutFamily: 'split-text-image' },
  { layoutFamily: 'full-width-quote' },
  { layoutFamily: 'bento-grid' },
  { layoutFamily: 'marquee' },
  { layoutFamily: 'vertical-stack' },
  { layoutFamily: 'split-text-image' } // duplicate trigger
];

const problems = verifySectionLayoutRepetition(pageSections);
if (problems.length) {
  console.error('Layout repetition violations:\n', problems.join('\n'));
  // abort generation or swap families
} else {
  console.log('Layout families are compliant ✅');
}

```

Running this during the pre-flight stage catches violations early, allowing you to replace duplicate families (such as swapping the second `split-text-image` for a `full-width-quote`) before the Taste Skill validator rejects the build.

## Summary

- **The Section-Layout-Repetition Ban** prohibits reusing any layout family (e.g., `3-column-image-cards`, `split-text-image`) more than once per page.
- **Minimum diversity**: Pages with eight sections require at least four distinct layout families, as specified in [`SKILL.md`](https://github.com/Leonxlnx/taste-skill/blob/main/SKILL.md) and [`CHANGELOG.md`](https://github.com/Leonxlnx/taste-skill/blob/main/CHANGELOG.md).
- **Enforcement**: The [`skill.sh`](https://github.com/Leonxlnx/taste-skill/blob/main/skill.sh) entry-point runs a pre-flight validator that scans markup and aborts builds on violations.
- **Compliance**: Use varied families like **bento grids**, **marquees**, and **vertical stacks** to diversify layouts without sacrificing content.
- **Validation**: Implement the `verifySectionLayoutRepetition()` helper to check compliance programmatically before submission.

## Frequently Asked Questions

### What counts as a "layout family" in Taste Skill?

A **layout family** is a structural pattern identifier assigned to page sections, such as `3-column-image-cards`, `full-width-quote`, `split-text-image`, or `bento-grid`. These identifiers map to specific Tailwind CSS utility-class groups or component names that define the visual arrangement of content blocks.

### What happens if I accidentally use the same layout twice?

The Taste Skill pre-flight validator will detect the duplication and return a **Pre-Flight Fail** error message identifying the repeated family. The build aborts immediately, preventing the page from being shipped, and the error output suggests alternative layout families to resolve the conflict.

### Can I use similar layouts if I change the colors or images?

No. The Section-Layout-Repetition Ban applies to the **structural family**, not the styling. Even if you change colors, images, or text content, reusing the same `layoutFamily` identifier (such as `split-text-image`) violates the rule. You must select a different structural pattern (e.g., `bento-grid` instead of `split-text-image`) to maintain compliance.

### How do I handle pages with many similar content items?

Rather than repeating the same layout family for similar items, **collapse them into a single bento grid**. The Bento Cell Count Rule ensures the grid accommodates your item count within one section, satisfying the diversity requirement while keeping related content together. For additional variety, intersperse **vertical-stack** or **marquee** sections between major content blocks.