Section-Layout-Repetition Rule and Layout Family Diversity Requirements

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, 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 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, 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 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:

- [ ] **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:

// components/SectionThreeColumnCards.tsx
export const SectionThreeColumnCards = () => (
  <section data-layout-family="three-column-image-cards" className="grid md:grid-cols-3 gap-6">
    {/* …cards… */}
  </section>
);

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—that parses the generated HTML and enforces the diversity requirement:

// 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<string> {
  const $ = cheerio.load(html);
  const families = new Set<string>();
  $("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:

- [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 and automated scripts like 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 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 at line 60【CHANGELOG.md § v0.?.?】. The rule is implemented through the pre-flight checklist and validation scripts like 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.

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