Taste Skill Hero Layout Rules and the 2-Line Iron Rule Explained

The "two-line iron rule" in Taste Skill is a hard constraint that limits hero headlines to a maximum of two lines on desktop, forcing font-size discipline to ensure the entire hero section fits above the fold without scrolling.

Taste Skill, an open-source framework maintained in the Leonxlnx/taste-skill repository, enforces a strict hero-section discipline that governs how landing pages must render above the fold. These constraints—codified in skills/taste-skill/SKILL.md—guarantee that generated pages deliver a clean, immediately actionable first impression.

The Two-Line Iron Rule

The cornerstone of Taste Skill's hero system is the two-line iron rule. This specification dictates that the headline font-scale is bound to a maximum of two lines of text on desktop viewports.

According to the source in SKILL.md L236-L238, if a headline requires more than two lines, you must shrink the font-size or cut the copy. A four-line headline constitutes a font-size error, not a copy-length problem. This rule is non-negotiable—violating it triggers a "Pre-Flight Fail" that blocks generation.

Complete Hero Layout Rules

Beyond the two-line constraint, Taste Skill defines a comprehensive architecture for hero sections. All rules below are hard constraints; breaking any causes the generator to abort or request user clarification.

Viewport Fit Requirements

The entire hero must be visible without scrolling. This means:

• Headline ≤ 2 lines
• Sub-text ≤ 20 words and ≤ 3-4 lines
• CTAs must be immediately visible

This requirement appears in SKILL.md L236.

Font-Scale Discipline

Taste Skill prescribes sensible size ranges based on headline length. The default range is text-4xl md:text-5xl lg:text-6xl (Tailwind classes). Only use larger scales like text-6xl md:text-7xl when the headline contains exactly 3-5 words, as noted in SKILL.md L237-L238.

Top-Padding Cap

Vertical padding must not push content below the fold. The maximum allowed top padding is pt-24 (approximately 6rem) on desktop. If more breathing room is needed, increase font size or image dimensions instead of padding, per SKILL.md L238-L239.

Stack Discipline (Max 4 Text Elements)

A hero section can contain only four textual items total, specified in SKILL.md L239-L244:

1. Eyebrow or brand strip (optional)
2. Headline (≤ 2 lines)
3. Sub-text (≤ 20 words, ≤ 4 lines)
4. CTAs (maximum 1 primary + 1 secondary)

Banned Elements Inside the Hero

Certain UI patterns are prohibited from appearing inside the hero flex row. According to SKILL.md L244-L246, these include:

• Tiny taglines below CTAs
• Micro-trust strips
• Pricing teasers
• Feature bullet lists
• Avatar rows
• "Used-by" logo walls

These elements must be relocated to sections under the hero.

Navigation Constraints

The navigation bar must render on a single line and remain ≤ 80px tall on desktop to avoid consuming excessive viewport real estate, as defined in SKILL.md L247-L248.

CTA Intent Uniqueness

Only one CTA per intent (e.g., "contact", "sign-up", "portfolio") may appear on a page. Duplicate intents constitute a pre-flight failure, referenced in SKILL.md L227-L228.

Real Visual Requirement

The hero must contain a genuine image—either generated or sourced. Pure-gradient or text-only placeholder heroes are considered incomplete and must be replaced before shipping, per SKILL.md L296-L298.

Implementing the Rules in Code

The following React components demonstrate how to implement these constraints using Tailwind CSS, the default styling framework in Taste Skill.

Conforming Hero Component

This component respects the two-line iron rule, viewport fit, and stack discipline:

/* File: src/components/Hero.tsx */
"use client";

import Image from "next/image";

type HeroProps = {
  /** URL of the hero image (must be real, not a placeholder) */
  imageUrl: string;
  /** Optional eyebrow / brand strip (max 1) */
  eyebrow?: string;
  /** Headline – must stay ≤ 2 lines on desktop */
  headline: string;
  /** Sub-text – ≤ 20 words, ≤ 4 lines */
  subtext: string;
  /** Primary CTA (required) */
  primaryCta: { label: string; href: string };
  /** Optional secondary CTA */
  secondaryCta?: { label: string; href: string };
};

export function Hero({
  imageUrl,
  eyebrow,
  headline,
  subtext,
  primaryCta,
  secondaryCta,
}: HeroProps) {
  return (
    <section className="relative min-h-[100dvh] flex flex-col items-center justify-center pt-24 text-center">
      {/* Hero image – full-bleed, priority-loaded */}
      <Image
        src={imageUrl}
        alt=""
        fill
        priority
        className="object-cover -z-10"
      />

      {/* Stack – max 4 text elements */}
      <div className="max-w-3xl px-4">
        {eyebrow && (
          <p className="text-xs uppercase tracking-wider text-gray-500">
            {eyebrow}
          </p>
        )}

        {/* Headline – two-line iron rule */}
        <h1 className="text-4xl md:text-5xl lg:text-6xl font-bold mt-2">
          {headline}
        </h1>

        {/* Sub-text */}
        <p className="mt-4 text-lg text-gray-600 max-w-prose">
          {subtext}
        </p>

        {/* CTA block – one primary, optional secondary */}
        <div className="mt-6 flex flex-col sm:flex-row gap-4 justify-center">
          <a
            href={primaryCta.href}
            className="bg-blue-600 text-white py-2 px-6 rounded-md hover:bg-blue-700 transition"
          >
            {primaryCta.label}
          </a>
          {secondaryCta && (
            <a
              href={secondaryCta.href}
              className="border border-blue-600 text-blue-600 py-2 px-6 rounded-md hover:bg-blue-50 transition"
            >
              {secondaryCta.label}
            </a>
          )}
        </div>
      </div>
    </section>
  );
}

Key conformance points:

• Viewport fit: min-h-[100dvh] ensures the hero occupies the initial viewport; padding is capped at pt-24.
• Two-line iron rule: The Tailwind scale text-4xl md:text-5xl lg:text-6xl matches the default sensible range for ≤ 2-line headlines.
• Stack discipline: The JSX renders only four textual elements maximum (eyebrow, h1, p, CTAs).
• Real visual: next/image with priority loading ensures a genuine image asset.

Enforcing Sub-Text Limits Programmatically

To prevent accidental violations of the 20-word sub-text limit, implement a guard function:

/* File: src/components/HeroWithWordGuard.tsx */
"use client";

import { Hero } from "./Hero";

function truncateSubtext(text: string, maxWords = 20) {
  const words = text.split(/\s+/);
  return words.length > maxWords ? words.slice(0, maxWords).join(" ") + "…" : text;
}

/* Example usage */
export function ExampleHero() {
  const sub = "Our AI-powered platform transforms your workflow, delivering faster insights, higher accuracy, and a seamless user experience.";
  return (
    <Hero
      imageUrl="/generated/hero-photo.png"
      eyebrow="AI-POWERED"
      headline="Accelerate Your Design Process"
      subtext={truncateSubtext(sub)}   // enforces ≤ 20 words
      primaryCta={{ label: "Get Started", href: "/signup" }}
    />
  );
}

The truncateSubtext helper enforces the word-count constraint at runtime, preventing pre-flight failures.

Hard Constraints and Pre-Flight Failures

Taste Skill treats all hero layout rules as hard constraints. When the generator detects a violation—whether an excessive headline length, missing real imagery, or duplicate CTA intents—it aborts execution (a "Pre-Flight Fail") rather than producing non-compliant output. This architecture ensures that every generated page maintains the disciplined above-the-fold experience defined in the skills/taste-skill/SKILL.md specification.

Summary

• The two-line iron rule strictly limits hero headlines to two lines on desktop, requiring font-size adjustments or copy editing to comply.
• The hero must fit entirely within the initial viewport (min-h-[100dvh]) with no scrolling required.
• Content is limited to four text elements maximum: optional eyebrow, headline (≤ 2 lines), sub-text (≤ 20 words, ≤ 4 lines), and CTAs (1 primary + 1 secondary).
• Banned elements include logo walls, pricing teasers, and feature lists inside the hero—these must appear below the fold.
• Top padding is capped at pt-24 (6rem); navigation must remain ≤ 80px tall.
• All rules are enforced as hard constraints that trigger pre-flight failures if violated.

Frequently Asked Questions

What happens if a headline exceeds two lines in Taste Skill?

The generator triggers a "Pre-Flight Fail" and aborts. According to the specification in SKILL.md, a headline wrapping to three or four lines indicates a font-size error, not a copy-length issue. You must either reduce the font-size (e.g., from text-6xl to text-4xl) or shorten the headline text to comply with the two-line iron rule.

How many CTAs are allowed in a Taste Skill hero section?

The hero section permits a maximum of two CTAs: one primary and one secondary. Additionally, the CTA intent uniqueness rule prohibits duplicate intents across the entire page. For example, you cannot have two "sign-up" buttons or two "contact" links anywhere on the page, as defined in SKILL.md L227-L228.

Can I use a gradient background instead of an image in the hero?

No. The real visual requirement mandates that every hero contain a genuine image—either generated or sourced. Pure-gradient or text-only placeholder heroes are considered incomplete and will fail pre-flight checks until replaced with actual imagery, per SKILL.md L296-L298.

Where are the hero layout rules defined in the source code?

All hero layout rules, including the two-line iron rule, are defined in skills/taste-skill/SKILL.md within the Leonxlnx/taste-skill repository. Specific line references include lines 236-248 for viewport fit, font-scale, and padding constraints, and lines 227-228 for CTA uniqueness requirements.

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