Taste-Skill Hero Discipline Rules for Headlines, Subtext, and CTAs

The taste-skill design system enforces strict hero discipline rules that limit headlines to 2 lines, subtext to 20 words, and CTAs to one primary and one secondary button, all fitting within the initial viewport without scrolling.

The taste-skill repository by Leonxln defines mandatory constraints for landing-page hero sections in skills/taste-skill/SKILL.md. These hero discipline rules are applied before code generation and constitute a Pre-Flight Fail scenario if violated, ensuring every hero remains concise, readable, and conversion-focused.

Headline Constraints

Headlines in the taste-skill system face strict spatial limitations to guarantee immediate comprehension.

Line Length and Font Scaling

• Maximum 2 lines on desktop viewports
• Font-scale hierarchy: Use text-4xl md:text-5xl lg:text-6xl for most headlines; deploy larger scales only when the headline contains 3–5 words
• Width constraints: Apply max-w-2xl or similar utilities to force line breaks at optimal reading lengths

According to lines 236–238 in skills/taste-skill/SKILL.md, these constraints guarantee the headline fits within the initial viewport and remains scannable. Overly long headlines become a font-size issue rather than a copy-length issue.

Subtext Limitations

The supporting copy beneath headlines must deliver a clear value proposition without demanding excessive reading time.

Word Count and Line Count

• Maximum 20 words total
• Maximum 3–4 lines on desktop displays
• Overflow handling: If the copy exceeds these limits, either reduce the font scale or cut the text; verbosity indicates a vague concept

As implemented in the Leonxlnx/taste-skill codebase, this 20-word limit forces clarity. If a value proposition cannot be expressed within these boundaries, the underlying concept requires refinement rather than additional explanation.

CTA Guidelines

Call-to-action buttons follow visibility and uniqueness constraints to prevent decision paralysis.

Visibility and Quantity Limits

• Above-the-fold requirement: All CTAs must be visible without scrolling
• Button quota: Only one primary and at most one secondary CTA per hero section
• Contrast standards: All buttons must meet WCAG AA requirements (minimum 4.5:1 contrast ratio)

Label Length and Intent Uniqueness

• Single-line labels: Button text must fit on one line, with approximately 3 words maximum for primary actions
• No duplicate intent: Semantically identical actions count as duplicates. For example, "Get in touch", "Contact us", and "Let's talk" represent the same "contact" intent and may appear only once on the page

These rules in skills/taste-skill/SKILL.md (lines 226–228) prevent visual clutter and contradictory navigation paths.

Overall Hero Layout Constraints

The taste-skill system governs the entire hero container, not just its text elements.

Viewport and Padding Limits

• Initial viewport fit: The hero must not extend below the first screenful of content
• Top-padding cap: Limited to pt-24 (approximately 6rem) on desktop to prevent excessive vertical floating

Element Stack Restrictions

• Maximum 4 text elements in the hero stack:
  1. Optional eyebrow/brand strip
  2. Headline
  3. Subtext
  4. CTA group

Additional elements—tiny taglines, trust badges, pricing teasers, feature lists, or avatar rows—must appear in sections below the hero. Lines 239–246 in skills/taste-skill/SKILL.md enforce this discipline to eliminate information overload at first glance.

Implementation Example

Below is a minimal Tailwind-styled React component that satisfies all taste-skill hero discipline rules:

// components/Hero.tsx
"use client";

export default function Hero() {
  return (
    <section
      className="
        min-h-[100dvh]
        flex flex-col items-center
        pt-20 pb-12 px-6
        text-center
        bg-white dark:bg-zinc-900
      "
    >
      {/* Optional eyebrow */}
      <p className="text-xs uppercase tracking-widest text-gray-500 mb-2">
        LAUNCH
      </p>

      {/* Headline – max 2 lines, proper scale */}
      <h1 className="text-4xl md:text-5xl lg:text-6xl font-bold leading-tight max-w-2xl">
        AI-Powered Design Assistant That Writes Code
      </h1>

      {/* Subtext – ≤20 words, ≤4 lines */}
      <p className="mt-4 text-lg text-gray-700 max-w-xl">
        Generate production-ready landing pages in seconds, with strict accessibility,
        motion, and visual-density controls.
      </p>

      {/* CTA buttons – primary + optional secondary, one-line labels */}
      <div className="mt-6 flex gap-4">
        <a
          href="/demo"
          className="
            inline-block
            px-6 py-3
            bg-indigo-600 text-white
            rounded-md
            hover:bg-indigo-700
            focus:outline-none focus:ring-2 focus:ring-indigo-400
            whitespace-nowrap
          "
        >
          Try Demo
        </a>

        <a
          href="/docs"
          className="
            inline-block
            px-6 py-3
            border border-gray-300
            text-gray-800 dark:text-gray-200
            rounded-md
            hover:bg-gray-100 dark:hover:bg-gray-800
            whitespace-nowrap
          "
        >
          Read Docs
        </a>
      </div>
    </section>
  );
}

Key compliance points demonstrated:

• pt-20 maintains padding below the pt-24 maximum
• The headline uses the prescribed font-scale range with max-w-2xl enforcing the two-line limit
• Subtext stays under 20 words and uses max-w-xl to control line count
• CTA labels ("Try Demo", "Read Docs") remain on single lines via whitespace-nowrap
• Only one primary (bg-indigo-600) and one secondary (border-gray-300) CTA appear, satisfying the no-duplicate-intent rule

Summary

• Headlines are capped at 2 lines with specific responsive font scales (text-4xl through text-6xl)
• Subtext must express the value proposition in ≤20 words and ≤4 lines
• CTAs require above-fold visibility, maximum one-primary/one-secondary pairing, single-line labels (~3 words), and unique intent per button
• Layout constraints enforce pt-24 maximum top-padding and a 4-element text stack limit
• Violations trigger a Pre-Flight Fail in the taste-skill system, blocking code generation until resolved

Frequently Asked Questions

What happens if I violate the taste-skill hero discipline rules?

The taste-skill system treats these constraints as hard requirements. Any violation results in a Pre-Flight Fail that stops the skill from completing code generation. You must resolve the conflict—either by shortening copy, adjusting padding, or removing excess CTAs—before the build process continues.

Can I use more than two CTA buttons in a hero section?

No. The rules in skills/taste-skill/SKILL.md explicitly limit hero CTAs to one primary and at most one secondary button. Additional calls-to-action must appear in subsequent page sections. This restriction prevents choice overload and maintains the above-the-fold visibility requirement.

How does taste-skill handle long headlines that need larger font sizes?

The system permits larger font scales only when the headline contains 3–5 words. For longer headlines, you must use the standard scale (text-4xl md:text-5xl lg:text-6xl) and rely on max-width utilities to enforce the 2-line maximum. This approach prevents oversized typography from dominating the viewport.

Are the hero discipline rules configurable or optional?

These rules are mandatory for all hero sections generated by the taste-skill system unless the project brief explicitly overrides them (for example, an editorial launch may permit a centered hero layout). The constraints are context-aware but strictly enforced at lines 236–246 in the source file.

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