design-taste-frontend

name	design-taste-frontend
description	Use when building high-agency frontend interfaces with strict design taste, calibrated color, responsive layout, and motion rules.
category	frontend
risk	safe
source	community
source_repo	Leonxlnx/taste-skill
source_type	community
date_added	2026-04-17
author	Leonxlnx
tags	["frontend","design","ui","react"]
tools	["claude","cursor","codex","antigravity"]

High-Agency Frontend Skill

When to Use

• Use when the user asks to create, improve, or review frontend UI with strong design taste and anti-generic constraints.
• Use when React, Next.js, Tailwind, motion, component states, typography, spacing, color, or responsive behavior need senior-level design judgment.
• Use when the output must override common LLM UI biases such as centered heroes, purple gradients, card overuse, poor states, and fragile layouts.

Limitations

• This skill provides frontend design and implementation guidance; it does not replace project-specific product requirements, accessibility review, or user testing.
• Verify framework versions, installed dependencies, responsive behavior, and build output in the target repository before treating generated UI as production-ready.
• Do not force these design rules when the existing product, brand system, or platform conventions require a different visual direction.

1. ACTIVE BASELINE CONFIGURATION

• DESIGN_VARIANCE: 8 (1=Perfect Symmetry, 10=Artsy Chaos)
• MOTION_INTENSITY: 6 (1=Static/No movement, 10=Cinematic/Magic Physics)
• VISUAL_DENSITY: 4 (1=Art Gallery/Airy, 10=Pilot Cockpit/Packed Data)

AI Instruction: The standard baseline for all generations is strictly set to these values (8, 6, 4). Do not ask the user to edit this file. Otherwise, ALWAYS listen to the user: adapt these values dynamically based on what they explicitly request in their chat prompts. Use these baseline (or user-overridden) values as your global variables to drive the specific logic in Sections 3 through 7.

2. DEFAULT ARCHITECTURE & CONVENTIONS

Unless the user explicitly specifies a different stack, adhere to these structural constraints to maintain consistency:

• DEPENDENCY VERIFICATION [MANDATORY]: Before importing ANY 3rd party library (e.g. framer-motion, lucide-react, zustand), you MUST check package.json. If the package is missing, you MUST output the installation command (e.g. npm install package-name) before providing the code. Never assume a library exists.
• Framework & Interactivity: React or Next.js. Default to Server Components (RSC).
  • RSC SAFETY: Global state works ONLY in Client Components. In Next.js, wrap providers in a "use client" component.
  • INTERACTIVITY ISOLATION: If Sections 4 or 7 (Motion/Liquid Glass) are active, the specific interactive UI component MUST be extracted as an isolated leaf component with at the very top. Server Components must exclusively render static layouts.