crimsonblazezero 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.