Understanding the Anti-Center Bias Layout Rule in Taste Skill

The anti-center bias is a design guardrail that prohibits centered hero sections and H1 headings when DESIGN_VARIANCE exceeds 4, forcing asymmetric compositions such as split-screens or scroll-pinned structures instead.

The anti-center bias layout rule is a core constraint within the Leonxlnx/taste-skill repository that prevents defaulting to symmetrical, centered compositions. According to the source specifications in skills/taste-skill/SKILL.md, this rule activates under specific variance thresholds to ensure every landing page maintains visual distinction and avoids templated aesthetics.

What Is the Anti-Center Bias Rule?

Located in section 4.3 ("Layout Diversification") of the skill definition, the anti-center bias serves as a hard constraint that explicitly bans fully centered heroes or headings. The rule treats centering as a "safe" default that undermines design variance, requiring practitioners to distribute visual weight asymmetrically across the viewport. When active, any composition that places primary content dead-center—without offset margins, floating elements, or split alignment—violates the constraint.

When the Rule Triggers

The constraint evaluates the global DESIGN_VARIANCE dial defined in the project's design tokens. If this value is set higher than 4, the system flags centered layouts as violations and requires asymmetric alternatives. This threshold indicates the project demands "offset" or intentionally imbalanced compositions rather than symmetrical safety. You can inspect the exact trigger logic and variance definitions in skills/taste-skill/SKILL.md.

Layout Patterns That Satisfy Anti-Center Bias

When the rule is active, implement one of the following four patterns to maintain compliance.

Split-Screen Layouts

Use a 50/50 grid where text occupies one side and imagery the other, avoiding any central alignment.

export default function Hero() {
  return (
    <section className="grid md:grid-cols-2 gap-8 min-h-[100dvh]">
      {/* Left – text */}
      <div className="flex flex-col justify-center px-6 md:pl-12">
        <h1 className="text-5xl md:text-6xl font-bold">
          Craft Your Story
        </h1>
        <p className="mt-4 text-lg text-gray-600 max-w-[65ch]">
          A design system that forces variance, so every landing page feels
          handcrafted.
        </p>
        <button className="mt-6 btn-primary">Get Started</button>
      </div>

      {/* Right – image */}
      <div className="relative">
        <img
          src="https://picsum.photos/seed/hero/800/600"
          alt="hero illustration"
          className="object-cover w-full h-full"
        />
      </div>
    </section>
  )
}

Why this works: The layout creates asymmetric visual tension by anchoring typography to the left while the image fills the opposing zone, eliminating the centered "block" composition.

Left-Aligned Content with Right-Aligned Assets

Employ CSS Grid to place content on the left and visual assets on the far right, using empty columns as intentional negative space.

export function LeftAlignedSection() {
  return (
    <section className="grid grid-cols-12 gap-4 items-center min-h-[60dvh]">
      {/* Content – occupies columns 1-7 */}
      <div className="col-span-7 pl-8">
        <h2 className="text-4xl font-medium">Why Choose Us?</h2>
        <p className="mt-2 text-base text-gray-700">
          We bake variance into every pixel, so your brand never looks templated.
        </p>
      </div>

      {/* Asset – occupies columns 9-12, offset by an empty column */}
      <div className="col-span-3 col-start-10">
        <img
          src="https://picsum.photos/seed/asset/400/300"
          alt="illustration"
          className="rounded-lg shadow-lg"
        />
      </div>
    </section>
  )
}

Why this works: The left-aligned heading and right-floating asset produce intentional imbalance, satisfying the variance requirement through explicit grid positioning.

Scroll-Pinned Structures

Implement motion-based pinning where images remain fixed while text scrolls, creating dynamic asymmetry.

"use client"
import { useRef, useEffect } from "react"
import { gsap } from "gsap"
import { ScrollTrigger } from "gsap/ScrollTrigger"
import { useReducedMotion } from "motion/react"

gsap.registerPlugin(ScrollTrigger)

export function PinnedImage() {
  const imgRef = useRef(null)
  const reduced = useReducedMotion()

  useEffect(() => {
    if (reduced || !imgRef.current) return
    const ctx = gsap.context(() => {
      ScrollTrigger.create({
        trigger: imgRef.current,
        start: "top top",
        end: "bottom top",
        pin: true,
        scrub: true,
      })
    }, imgRef)
    return () => ctx.revert()
  }, [reduced])

  return (
    <section className="relative min-h-[120dvh]">
      <div className="grid md:grid-cols-2">
        <div className="flex items-center justify-center p-8">
          <h3 className="text-3xl font-semibold">
            Seamless Motion, No Centered Hero
          </h3>
        </div>
        <div ref={imgRef} className="h-[80dvh]">
          <img
            src="https://picsum.photos/seed/pinned/800/800"
            alt="pinned visual"
            className="w-full h-full object-cover"
          />
        </div>
      </div>
    </section>
  )
}

Why this works: The pinned image creates a non-centered visual hierarchy that evolves during scroll, aligning with high DESIGN_VARIANCE settings through temporal rather than spatial asymmetry.

Exceptions and Overrides

The rule allows explicit overrides for editorial, manifesto, or launch-announcement briefs where the message itself functions as the primary design element. In these cases, a centered hero serves as a deliberate typographic statement rather than a lazy default, and the variance constraint can be bypassed through explicit brief annotation.

Summary

• The anti-center bias rule is codified in skills/taste-skill/SKILL.md under section 4.3 ("Layout Diversification").
• It activates automatically when DESIGN_VARIANCE exceeds 4, banning centered heroes and H1 headings.
• Compliant implementations include split-screen layouts, left-aligned content with right-aligned assets, and scroll-pinned structures.
• Editorial and manifesto briefs provide valid exceptions where centered alignment functions as the design concept itself.

Frequently Asked Questions

What triggers the anti-center bias rule in Taste Skill?

The rule triggers when the global DESIGN_VARIANCE dial is set to a value greater than 4. This threshold indicates the project requires asymmetric, offset compositions rather than centered, symmetrical layouts.

Where is the anti-center bias rule defined in the repository?

The rule is defined in skills/taste-skill/SKILL.md under section 4.3, "Layout Diversification." This file contains the complete specification for when and how the constraint applies to hero sections and headings.

Can I use a centered hero layout with high design variance?

Only if the brief is explicitly categorized as an editorial, manifesto, or launch-announcement where the centered text serves as the design statement itself. Standard landing pages with high variance must use asymmetric alternatives.

What are the best alternatives to centered layouts under this rule?

Use split-screen grids (50/50 content and image), asymmetric white-space with left-aligned text and right-floating assets, or scroll-pinned structures that create dynamic visual hierarchy through motion rather than static centering.

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