design-taste-frontend

name	design-taste-frontend
description	Anti-slop frontend design taste system. Set visual dials, override default AI aesthetics, and enforce high-fidelity layouts.

Design Taste Frontend (Leonxlnx/taste-skill)

This skill overrides default LLM biases (such as generic purple gradients, centered H1 heroes, and repetitive 3-column card layouts) to build production-grade, visually striking user interfaces.

Configuration Dials

These three global variables steer the layout and density baseline of generated UIs. Adjust them to fine-tune the aesthetic direction:

• DESIGN_VARIANCE: 8 (Scale 1-10)
  • 1 = Perfect Symmetry / Rigid structure.
  • 10 = Asymmetric Chaos / Highly editorial.
  • Rule: When DESIGN_VARIANCE > 4, avoid centered hero/H1 titles. Favor left-aligned content, split-screen designs, or asymmetric layouts.
• MOTION_INTENSITY: 6 (Scale 1-10)
  • 1 = Static / No transitions.
  • 10 = Heavy / Physics-based animations.
• VISUAL_DENSITY: 4 (Scale 1-10)
  • 1 = Spacious / Gallery-like (Airy).
  • 10 = Dense / Dashboard (Packed).

Coding & Architectural Conventions

• Grid Over Flex: Prefer CSS Grid layouts over complex Flexbox margin-math for structural layouts to ensure predictability.
• Responsive Viewports: Always use min-h-[100dvh] to avoid mobile safari viewport resizing issues.
• Typography Pairing: Pair an expressive display serif or brutalist font for headers with a clean sans-serif for body text.
• Color Accents: Rely on custom curated HSL/OKLCH color themes with sharp, intentional accent highlights instead of generic AI-purple color palettes.

Anti-Pattern Ban List

• ❌ No repetitive 3-column grids of cards with identical structure and placeholder icons.
• ❌ No flat, solid background blocks without subtle grid overlays, meshes, or grain textures.
• ❌ No centered everything. Alignment must feel designed, asymmetrical, and purposeful.
• ❌ No emojis used as icons — always use Lucide or inline SVG vectors.