What Is the Eyebrow Restraint Rule in Taste Skill?

The Eyebrow Restraint rule limits uppercase eyebrow labels to a maximum of one per three sections, enforcing a ceiling of ⌈sectionCount/3⌉ to eliminate repetitive visual rhythms in AI-generated layouts.

The Taste Skill framework imposes mandatory design constraints to combat generic, templated aesthetics common in automated site generation. Defined in skills/taste-skill/SKILL.md, the Eyebrow Restraint specifically governs eyebrows—the tiny, uppercase, wide-tracking labels (e.g., FOUR COLORWAYS, SELECTED WORK) positioned above section headlines. By restricting their frequency, the rule ensures cleaner visual hierarchy and maintains the framework’s "no-copy-pasting" philosophy.

Core Specifications of the Eyebrow Restraint Rule

Maximum Frequency and Spacing Constraints

According to lines 254–256 of SKILL.md, the rule enforces strict mathematical limits on eyebrow placement:

• Frequency limit: No more than one eyebrow per three sections. The hero section counts as the first section, meaning a page containing nine total sections may display at most three eyebrows.
• Spacing mandate: If a section (A) contains an eyebrow, the next two sections (B and C) must not contain an eyebrow. This creates a mandatory cooling-off period between decorative labels.

Mechanical Pre-Flight Validation

The framework implements an automated check at lines 256–257 to enforce compliance programmatically. The validation logic counts occurrences of the CSS signature uppercase tracking (or equivalent small-caps/mono label patterns) across all sections. The eyebrow count must satisfy:

eyebrowCount ≤ ⌈sectionCount / 3⌉

If the count exceeds this limit, the generated page fails the pre-flight test and is rejected.

Design Purpose and Philosophy

As stated in the introductory paragraph at line 253, the rule exists to prevent the repetitive "templated rhythm" where every AI-generated site repeats identical eyebrow-above-headline patterns. This overuse signals low-effort, generic design. The framework recommends dropping eyebrows entirely rather than exceeding limits, as headlines alone provide sufficient categorical hierarchy.

Implementation Examples

Compliant Usage: One Eyebrow Per Three Sections

The following HTML structure satisfies the restraint by placing eyebrows only in the hero (section 1) and section 4, maintaining the required two-section gap between decorative labels:

<!-- Hero (counts as section 1 with eyebrow) -->
<h2 class="text-[11px] uppercase tracking-[0.18em]">FOUR COLORWAYS</h2>
<h1 class="text-4xl">Our New Palette</h1>

<!-- Section 2: No eyebrow allowed -->
<h2 class="text-3xl">Why Color Matters</h2>

<!-- Section 3: No eyebrow allowed -->
<h2 class="text-3xl">Design Process</h2>

<!-- Section 4: Second eyebrow permitted -->
<h2 class="text-[11px] uppercase tracking-[0.18em]">SELECTED WORK</h2>
<h1 class="text-4xl">Featured Projects</h1>

This pattern ensures three sections (hero plus two regular sections) separate each eyebrow instance.

Common Violations to Avoid

The code below violates the rule by placing three eyebrows in three consecutive sections:

<h2 class="text-[11px] uppercase tracking-[0.18em]">FOUR COLORWAYS</h2>
<h1>Palette</h1>

<h2 class="text-[11px] uppercase tracking-[0.18em]">SELECTED WORK</h2>
<h1>Projects</h1>

<h2 class="text-[11px] uppercase tracking-[0.18em]">THE HARDWARE</h2>
<h1>Specs</h1>

This configuration triggers a pre-flight failure because the eyebrow count (3) exceeds the maximum allowed for three sections (⌈3/3⌉ = 1).

Fixing Violations by Removing Decorative Labels

To resolve the violation above, remove the eyebrow classes from subsequent sections, using standard headlines instead:

<h2 class="text-[11px] uppercase tracking-[0.18em]">FOUR COLORWAYS</h2>
<h1>Palette</h1>

<h2 class="text-3xl">SELECTED WORK</h2>
<h1>Projects</h1>

<h2 class="text-3xl">THE HARDWARE</h2>
<h1>Specs</h1>

Only the hero retains the eyebrow; the remaining sections rely on typography hierarchy alone, complying with the rule at lines 257–258.

Automated Validation Logic

Integrate this Python heuristic into the skill.sh pipeline to enforce the rule programmatically:

def count_eyebrows(html: str) -> int:
    """Detect eyebrow patterns via CSS signature counting."""
    return html.lower().count('uppercase tracking')

def passes_eyebrow_rule(html: str, sections: int) -> bool:
    """Validate against Taste Skill constraints."""
    max_eyebrows = (sections + 2) // 3   # Equivalent to ceil(sections/3)

    return count_eyebrows(html) <= max_eyebrows

This check mirrors the mechanical validation described in SKILL.md and should run before final page generation.

Technical Enforcement and Source Files

The Eyebrow Restraint rule is defined, tracked, and enforced across three critical files in the Leonxlnx/taste-skill repository:

• skills/taste-skill/SKILL.md (lines 253–258): Contains the canonical rule definition, spacing requirements, and fallback recommendations.
• CHANGELOG.md: Documents the rule's impact on production testing, noting it as the "#1 violated rule in production tests" during initial implementation.
• skill.sh: The entry-point script that invokes pre-flight checks; this file triggers the eyebrow counting logic before finalizing page output.

Summary

• The Eyebrow Restraint mandates a maximum of one eyebrow per three sections (⌈sectionCount/3⌉).
• Spacing rules require a two-section gap after any section containing an eyebrow.
• Automated validation counts uppercase tracking CSS patterns to detect violations mechanically.
• Remediation involves removing excess eyebrows entirely rather than restyling them.
• The rule prevents the generic "AI-templated" aesthetic by limiting decorative uppercase labels.

Frequently Asked Questions

How do I calculate the maximum number of eyebrows allowed on a page?

Divide your total section count by three and round up to the nearest integer. For example, a page with eight sections allows ⌈8/3⌉ = 3 eyebrows. Remember that the hero section counts as section one, so if your hero contains an eyebrow, you must skip the next two sections before placing another.

Which CSS patterns trigger the eyebrow detection in Taste Skill?

The pre-flight check searches for the specific CSS signature uppercase tracking or equivalent small-caps/mono label implementations. In the source HTML, this typically appears as classes like class="text-[11px] uppercase tracking-[0.18em]". The validator counts these occurrences and compares them against the section-based limit defined in SKILL.md.

Why was the eyebrow restraint rule added to the framework?

The rule addresses the repetitive visual rhythm common in AI-generated websites, where every section header follows an identical "eyebrow above headline" pattern. According to the introductory documentation at line 253, this repetition creates a "templated" feel that signals low-effort design. By restricting eyebrows, Taste Skill forces more thoughtful information hierarchy and unique layout compositions.

What is the recommended fix when a page exceeds the eyebrow limit?

The framework explicitly recommends dropping the eyebrow entirely rather than attempting to restyle or reposition it. As noted at lines 257–258, the headline text alone is sufficient for categorizing sections, and the page layout already provides adequate visual hierarchy without decorative uppercase prefixes.

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