# Section-Layout-Repetition Rule and Layout Family Diversity Requirements
> Understand the Section-Layout-Repetition rule and layout family diversity requirements. Discover how this design guard ensures varied layouts on landing pages for better user experience.
- Repository: [Leon Lin/taste-skill](https://github.com/Leonxlnx/taste-skill)
- Tags: deep-dive
- Published: 2026-06-01
---
**The Section-Layout-Repetition rule is a hard-coded design guard that prohibits landing pages from reusing the same visual layout family more than once, requiring at least four distinct layout families for any page containing eight sections.**
The **Section-Layout-Repetition rule** is a strict design constraint defined in the `Leonxlnx/taste-skill` repository to enforce visual variety in landing-page construction. It mandates that each **layout family**—a reusable section pattern like `3-column-image-cards` or `full-width-quote`—can appear only once per page. According to the design specification in [`skills/taste-skill/SKILL.md`](https://github.com/Leonxlnx/taste-skill/blob/main/skills/taste-skill/SKILL.md), an eight-section page must showcase a minimum of four distinct layout families to pass the pre-flight checklist.
## What Is the Section-Layout-Repetition Rule?
The **Section-Layout-Repetition rule** prevents templated monotony by blocking any layout family from appearing twice on the same landing page. This constraint is hard-coded into the skill’s pre-flight validation logic and documented in [`SKILL.md`](https://github.com/Leonxlnx/taste-skill/blob/main/SKILL.md) at lines 251-252【SKILL.md § 4.3.5】.
### Layout Family Definition
A **layout family** represents any reusable visual pattern used to structure content sections. Examples include:
- `3-column-image-cards`
- `full-width-quote`
- `split-text-image`
Each family provides a distinct visual identity that helps guide the reader’s eye through the content hierarchy.
### The Hard Constraint
According to the specification in [`skills/taste-skill/SKILL.md`](https://github.com/Leonxlnx/taste-skill/blob/main/skills/taste-skill/SKILL.md), the rule enforces two specific conditions:
- **Zero repetition**: Once a layout family is assigned to a section, it **must not appear again** on that page.
- **Minimum diversity**: For an eight-section page, the author must employ **at least four distinct layout families**.
The rule is also summarized in [`CHANGELOG.md`](https://github.com/Leonxlnx/taste-skill/blob/main/CHANGELOG.md) at line 60【CHANGELOG.md § v0.?.?】, confirming its status as a core project requirement.
## Why the Rule Exists
The constraint serves three primary design objectives documented in the repository:
- **Avoid templated sameness**: Repeated sections make landing pages feel generic, causing distinct content blocks like "Selected commissions" and "What we do" to visually blend together.
- **Encourage visual hierarchy**: Distinct layout families give each content block a unique visual identity, creating clear focal points that guide user attention.
- **Support the layout-family diversity metric**: The rule provides concrete enforcement for the metric that an eight-section page must showcase **≥ 4** families.
## How the Rule Is Enforced
Validation occurs during the **pre-flight checklist** phase before any page is considered complete. The process follows three steps:
1. **Identify** the layout family of every section during authoring.
2. **Count** distinct families as sections are added to the page.
3. **Fail validation** if any family appears twice, or if an eight-section page contains fewer than four different families.
The checklist entry appears at the bottom of [`skills/taste-skill/SKILL.md`](https://github.com/Leonxlnx/taste-skill/blob/main/skills/taste-skill/SKILL.md):
```markdown
- [ ] **Section-Layout-Repetition** check: no two sections share the same layout family (at least 4 different families across 8 sections)?
```
If validation fails, the agent must redesign offending sections or add new sections using different families until compliance is achieved.
## Implementing Layout Family Tracking in Code
To support automated validation, components must expose their layout family through machine-readable markers.
### Defining Layout Families in React Components
Mark each section with a `data-layout-family` attribute to enable programmatic detection. For example, in [`components/SectionThreeColumnCards.tsx`](https://github.com/Leonxlnx/taste-skill/blob/main/components/SectionThreeColumnCards.tsx):
```tsx
// components/SectionThreeColumnCards.tsx
export const SectionThreeColumnCards = () => (
);
```
This attribute allows build-time scripts to collect and verify families without parsing component logic.
### Validating Diversity with a Pre-Flight Script
The repository includes a validation script—typically located at [`scripts/check-layout-diversity.ts`](https://github.com/Leonxlnx/taste-skill/blob/main/scripts/check-layout-diversity.ts)—that parses the generated HTML and enforces the diversity requirement:
```ts
// scripts/check-layout-diversity.ts
import * as fs from "fs";
import * as path from "path";
import * as cheerio from "cheerio";
function getLayoutFamilies(html: string): Set {
const $ = cheerio.load(html);
const families = new Set();
$("section[data-layout-family]").each((_i, el) => {
families.add($(el).attr("data-layout-family")!);
});
return families;
}
// Example usage: read the generated page HTML
const html = fs.readFileSync(path.resolve("out/index.html"), "utf-8");
const families = getLayoutFamilies(html);
if (families.size < 4 && families.size > 0) {
console.error(
`❌ Layout‑family diversity violation: only ${families.size} distinct families found (need ≥ 4).`
);
process.exit(1);
}
console.log(`✅ Layout‑family diversity OK (${families.size} families).`);
```
Running this script aborts the build if the page violates the Section-Layout-Repetition rule or fails to meet the four-family minimum for eight-section pages.
### Checklist Integration
The skill surface renders the validation status by checking the markdown checklist. When the agent generates a compliant page, it automatically marks the item complete:
```markdown
- [x] **Section-Layout-Repetition** check: no two sections share the same layout family (at least 4 different families across 8 sections)?
```
## Summary
- The **Section-Layout-Repetition rule** prohibits reusing the same layout family twice on a single landing page.
- An eight-section page must contain **at least four distinct layout families**.
- **Layout families** are reusable patterns (e.g., `3-column-image-cards`, `full-width-quote`) identified by the `data-layout-family` attribute.
- Validation occurs via a **pre-flight checklist** entry in [`skills/taste-skill/SKILL.md`](https://github.com/Leonxlnx/taste-skill/blob/main/skills/taste-skill/SKILL.md) and automated scripts like [`scripts/check-layout-diversity.ts`](https://github.com/Leonxlnx/taste-skill/blob/main/scripts/check-layout-diversity.ts).
- Non-compliant builds fail CI checks, forcing redesign or diversification of section layouts.
## Frequently Asked Questions
### What constitutes a layout family in the taste-skill framework?
A **layout family** is any reusable visual pattern for structuring content sections, such as `3-column-image-cards`, `full-width-quote`, or `split-text-image`. Each family represents a distinct structural approach to displaying content, regardless of the specific text or images it contains. Families are tracked via the `data-layout-family` HTML attribute in React components.
### How does the Section-Layout-Repetition rule affect page design?
Designers must ensure that once a layout family is used for one section, it cannot appear again elsewhere on the same page. For a standard eight-section landing page, this means selecting and implementing **at least four different layout families**, effectively forcing visual variety and preventing repetitive grid patterns that make pages feel templated.
### Where is the Section-Layout-Repetition rule documented?
The rule is formally defined in [`skills/taste-skill/SKILL.md`](https://github.com/Leonxlnx/taste-skill/blob/main/skills/taste-skill/SKILL.md) at lines 251-252【SKILL.md § 4.3.5】, under the "Section-Layout-Repetition Ban" entry. It also appears in the project history within [`CHANGELOG.md`](https://github.com/Leonxlnx/taste-skill/blob/main/CHANGELOG.md) at line 60【CHANGELOG.md § v0.?.?】. The rule is implemented through the pre-flight checklist and validation scripts like [`scripts/check-layout-diversity.ts`](https://github.com/Leonxlnx/taste-skill/blob/main/scripts/check-layout-diversity.ts).
### What happens if my page fails the layout family diversity check?
The **pre-flight validation script** will abort the build process with an error message indicating how many distinct families were found versus the required minimum of four for eight-section pages. To resolve the failure, you must redesign duplicate sections using different layout families or add new sections with unique families until the diversity requirement is satisfied.