Taste

Taste — Quality Enforcement Layer

1. Purpose & Activation

Taste is a quality enforcement layer that complements the frontend-design skill. The relationship is:

• frontend-design = "what to build" — creative direction, brand lock, aesthetic choice
• taste = "how to build it with premium quality" — anti-slop rules, detail enforcement, interaction fidelity

Neither skill replaces the other. Run frontend-design for direction, then apply taste to enforce craft standards throughout implementation.

Activate this skill when:

• Starting any new page or component from scratch
• Reviewing existing UI for quality issues before shipping
• Auditing a page for AI-generated aesthetic patterns
• Implementing animations or micro-interactions
• Choosing between implementation approaches at the detail level

Load reference files selectively:

• Auditing an existing page → load references/redesign-audit.md
• Starting a checkout or editorial page → load references/style-archetypes.md
• Reviewing code for AI patterns → load references/anti-slop-patterns.md
• Implementing complex animations → load references/motion-choreography.md

2. Configuration Dials

Three tunable parameters govern the intensity of taste enforcement. LGJ defaults are calibrated for conversion-focused marketing pages.

When to override defaults:

• Checkout/payment pages → DESIGN_VARIANCE: 4, MOTION_INTENSITY: 3 (reduce friction)
• Resource/editorial pages → DESIGN_VARIANCE: 5, VISUAL_DENSITY: 3 (readability priority)
• Hero/above-fold sections → MOTION_INTENSITY: 7 (first impression matters)

3. LGJ Brand Lock (Overrides)

When taste rules conflict with LGJ brand rules, use the Resolution column. Brand rules always win.

4. Anti-Slop Rules

Full pattern library in references/anti-slop-patterns.md. This is the summary for fast recall.

Visual Bans

• Equal-width columns on every layout element
• Cards forced to identical heights with min-h
• text-center on everything — center only headlines and CTAs, left-align body text
• shadow-md applied uniformly to all cards and buttons
• Generic hero: large heading + subtext + button + stock photo background

Layout Bans

• Symmetric padding on every section (py-16 everywhere)
• Predictable section order: hero → features → testimonials → pricing → CTA
• Three-column equal feature grid as the only layout pattern
• Divider <hr> lines between every section (use whitespace instead)

Clarity-Over-Aesthetics Rule

• Design serves clarity. If a visual effect slows comprehension by even 1 second, remove it.
• No complex parallax on landing pages. No cognitive overload.
• Test: can a new visitor understand the offer in 4-5 seconds? If no, design is too complex.
• This doesn't mean boring — bold typography, clean spacing, and striking color all serve clarity.
• See hero-section-designer for the Above-Fold Constraint (6 elements max).

Content Bans

• Generic section headings that communicate nothing when scanned: "How It Works", "Features", "About Us", "Our Process", "Why Choose Us", "What You Get" (see conversion-copywriting Scan-Only Headline Rule for replacements)
• Superlatives: "Revolutionary", "Game-changing", "Supercharge", "Revolutionize", "Unlock", "Seamlessly", "Cutting-edge"
• Vague social proof: "Trusted by 1,000+ companies"
• Generic testimonials: "Great product! — John D."
• Round numbers: "100+ clients", "10x growth"
• Emoji as bullet points or list markers
• Any Lorem ipsum or placeholder text shipped to production

Code Bans

• Inline styles for positioning (style={{ position: 'absolute', top: 20 }})
• !important more than twice per file
• z-index values above 50
• motion.div wrapping every element regardless of purpose
• Hardcoded hex colors inline instead of Tailwind classes or CSS variables

5. Premium Implementation Patterns

Apply these patterns by default when implementing components.

Tactile Feedback

// Button press feedback
<motion.button
  whileHover={{ scale: 1.02 }}
  whileTap={{ scale: 0.97 }}
  transition={{ type: "spring", stiffness: 400, damping: 30 }}
>

// Input focus glow — use brand color at 20% opacity
<input className="focus:ring-2 focus:ring-[#ED0D51]/20 focus:border-[#ED0D51]" />

Tinted Shadows

// Never use generic grey shadows
// Wrong:
className="shadow-md"
// Right: tinted with brand color at 5–10% opacity
className="shadow-[0_4px_24px_rgba(237,13,81,0.08)]"
// Or for cards and containers:
className="shadow-[0_2px_16px_rgba(1,68,248,0.06)]"

Spring Physics

// Standard spring for most transitions
const spring = { type: "spring", stiffness: 300, damping: 30 }

// Snappy for toggles and checkboxes
const snappy = { type: "spring", stiffness: 400, damping: 30 }

// Soft for modals and overlays
const soft = { type: "spring", stiffness: 200, damping: 25 }

Skeleton Loaders

// Match actual content shape — never generic bars
// For a testimonial card:
<div className="animate-pulse">
  <div className="flex gap-3 mb-4">
    <div className="h-10 w-10 rounded-full bg-slate-200" />   {/* avatar */}
    <div className="space-y-2 flex-1">
      <div className="h-4 w-32 rounded bg-slate-200" />       {/* name */}
      <div className="h-3 w-24 rounded bg-slate-200" />       {/* company */}
    </div>
  </div>
  <div className="space-y-2">
    <div className="h-3 w-full rounded bg-slate-200" />
    <div className="h-3 w-5/6 rounded bg-slate-200" />
    <div className="h-3 w-4/6 rounded bg-slate-200" />
  </div>
</div>

Staggered Reveals

const containerVariants = {
  hidden: {},
  visible: {
    transition: {
      staggerChildren: 0.08,   // lists
      delayChildren: 0.1,
    },
  },
}
// For card grids: staggerChildren: 0.12
// For nav items: staggerChildren: 0.03

const itemVariants = {
  hidden: { opacity: 0, y: 20 },
  visible: { opacity: 1, y: 0, transition: { type: "spring", stiffness: 300, damping: 30 } },
}

Micro-Interactions

// Checkbox fills with spring
<motion.div
  animate={{ scale: checked ? 1 : 0 }}
  transition={{ type: "spring", stiffness: 400, damping: 30 }}
  className="h-full w-full bg-[#ED0D51] rounded-sm"
/>

// Card hover — lift 2px, tinted shadow increases
<motion.div
  whileHover={{ y: -2, boxShadow: "0 8px 32px rgba(237,13,81,0.10)" }}
  transition={{ duration: 0.2, ease: "easeOut" }}
/>

// Toggle slides with bounce
<motion.div
  layout
  transition={{ type: "spring", stiffness: 300, damping: 15 }}
  className="absolute inset-y-1 rounded-full bg-white shadow-sm"
/>

6. Style Archetypes

Full specs in references/style-archetypes.md. Load that file when starting an archetype page.

Standard (default)

Full LGJ brand expression. All dials at default. Use for: landing pages, homepage, feature pages. Most content at this site uses Standard.

Soft-Premium

For: checkout, payment flows, high-stakes conversions. Reduces visual noise, builds trust, slows the eye down. Key markers: double-bezel cards, 2x padding, muted pink, Manrope throughout. Motion is minimal and purposeful.

Editorial-Minimal

For: resource pages, blog posts, documentation. Readability-first. Key markers: 720px content max-width, warm monochrome, bento grid where applicable, typography dominates, motion is nearly invisible.

7. Performance Guardrails

GPU-Only Animation Rule

Only animate transform and opacity. These properties run on the compositor thread and never trigger layout recalculation.

// Correct — GPU accelerated
animate={{ opacity: 1, y: 0, scale: 1 }}

// Wrong — triggers layout recalculation
animate={{ width: "100%", height: "auto", padding: "16px" }}

RSC Isolation

Animations live in Client Components only. Never import Framer Motion in Server Components.

// Add to any file using motion.*
'use client'
import { motion } from 'framer-motion'

z-index Discipline Scale

Never exceed 49 without documenting why.

Font Loading

// In layout.tsx — preconnect before font load
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="" />

// Google Fonts config
const bigShoulders = Big_Shoulders_Display({
  subsets: ['latin'],
  display: 'swap',
  weight: ['400', '500', '600', '700', '800', '900'],
})

const manrope = Manrope({
  subsets: ['latin'],
  display: 'swap',
  weight: ['400', '500', '600', '700'],
})

Image Optimization

// Always use next/image
<Image
  src={src}
  alt={alt}
  width={800}
  height={600}
  loading="lazy"          // below fold
  placeholder="blur"      // blurDataURL for known images
  className="object-cover"
/>
// Above-fold hero image: loading="eager" priority={true}

8. Reference File Index

Load reference files on demand — they are detail supplements, not required reading for every task. When a task is purely compositional (adding a button, updating copy), apply the core rules in sections 1–7 without loading references.