leonxlnx/taste-skill

tasteskill: Skill de Frontend Anti-Cliché

Landing pages, portafolios y rediseños. No paneles de control, no tablas de datos, no UI de productos con múltiples pasos. Cada regla a continuación es contextual. Ninguna se activa automáticamente. Primero lee el brief, luego usa solo lo que encaje.

---

0. INFERENCIA DEL BRIEF (Lee la sala antes que cualquier otra cosa)

Antes de tocar código o ajustar controles, infiere lo que el usuario realmente quiere. La mayoría de los diseños generados por LLM son malos porque el modelo salta a una estética predeterminada en lugar de leer la sala.

0.A Lee estas señales primero

1. Tipo de página - landing (SaaS / consumidor / agencia / evento), portafolio (dev / diseñador / estudio creativo), rediseño (preservar vs. renovar), editorial / blog.
2. Palabras de estilo que usó el usuario - "minimalista", "tranquilo", "estilo Linear", "Awwwards", "brutalista", "consumidor premium", "tipo Apple", "divertido", "B2B serio", "editorial", "estilo agencia", "glassy", "tecnología oscura".
3. Señales de referencia - URLs que enlazó, capturas de pantalla que pegó, productos que nombró, marcas con las que compite.
4. Audiencia - Panel de adquisiciones B2B vs. consumidor consciente del diseño vs. reclutador que escanea un portafolio. La audiencia elige la estética, no tu gusto.
5. Activos de marca que ya existen - logotipo, color, tipografía, fotografía. Para rediseños, estos son material de partida, no una entrada opcional (ver Sección 11).
6. Restricciones silenciosas - audiencias que priorizan la accesibilidad, sector público, industrias reguladas, comercio basado en confianza, productos para niños. Estas restricciones ANULAN la preferencia estética.

0.B Emite una "Lectura de Diseño" de una línea antes de generar

Antes de cualquier código, indica en una línea: "Leyendo esto como: <tipo de página> para , con un lenguaje , inclinándose hacia <sistema de diseño o familia estética>."

Ejemplos de lecturas:

• "Leyendo esto como: landing B2B SaaS para compradores técnicos, con un lenguaje minimalista estilo Linear, inclinándose hacia utilidades de Tailwind + Geist + movimiento moderado."
• "Leyendo esto como: portafolio de diseñador independiente para gerentes de contratación, con un lenguaje editorial / tipo cinético, inclinándose hacia CSS nativo + animación impulsada por scroll + tipografía personalizada."
• "Leyendo esto como: rediseño de un sitio de servicio del sector público, con un lenguaje de confianza primero, inclinándose hacia GOV.UK Frontend o USWDS."

0.C Si el brief es ambiguo, haz una pregunta, no adivines

Haz exactamente una pregunta aclaratoria - nunca un volcado de múltiples preguntas - y solo cuando la lectura de diseño realmente diverja. Ejemplo: "¿Debería sentirse más cercano a Linear-limpio o Awwwards-experimental?"

Si puedes inferir con confianza del contexto, no preguntes. Simplemente declara la lectura de diseño y procede.

0.D Disciplina Anti-Defecto

No uses por defecto: gradientes morados de IA, héroe centrado sobre malla oscura, tres tarjetas de características iguales, glassmorphism genérico en todo, microanimaciones de bucle infinito en todas partes, Inter + slate-900. Estos son los defectos de los LLM. Alcanza más allá de ellos deliberadamente basándote en la lectura de diseño.

---

1. LOS TRES CONTROLES (Configuración Principal)

Después de la lectura de diseño, establece tres controles. Cada decisión de diseño, movimiento y densidad a continuación está condicionada por estos.

• DESIGN_VARIANCE: 8 - 1 = Simetría Perfecta, 10 = Caos Artístico
• MOTION_INTENSITY: 6 - 1 = Estático, 10 = Cinematográfico / Física
• VISUAL_DENSITY: 4 - 1 = Galería de Arte / Espacioso, 10 = Cabina de Mando / Datos Compactos

Línea base: 8 / 6 / 4. Úsalos a menos que la lectura de diseño los anule. No le pidas al usuario que edite este archivo; las anulaciones ocurren conversacionalmente.

1.A Inferencia de Controles (lectura de diseño → valores de los controles)

Señal	VARIANCE	MOTION	DENSITY
"minimalista / limpio / tranquilo / editorial / estilo Linear"	5-6	3-4	2-3
"consumidor premium / tipo Apple / lujo / marca"	7-8	5-7	3-4
"divertido / salvaje / Dribbble / Awwwards / experimental / agencia"	9-10	8-10	3-4
"landing page / portafolio / sitio de marketing (por defecto)"	7-9	6-8	3-5
"confianza primero / sector público / regulado / accesibilidad crítica"	3-4	2-3	4-5
"rediseño - preservar"	igualar existente	+1	igualar existente
"rediseño - renovar"	+2	+2	igualar existente

1.B Preajustes por Caso de Uso

Caso de uso	VARIANCE	MOTION	DENSITY
Landing (SaaS, tradicional)	7	6	4
Landing (Agencia / creativa)	9	8	3
Landing (Consumidor premium)	7	6	3
Portafolio (Diseñador / estudio)	8	7	3
Portafolio (Desarrollador)	6	5	4
Editorial / Blog	6	4	3
Servicio del sector público	3	2	5
Rediseño - preservar	igualar	igualar+1	igualar
Rediseño - renovar	+2	+2	igualar

1.C Cómo los Controles Guían la Salida

Usa estos (o los valores anulados por el usuario) como variables globales. Las referencias cruzadas a lo largo de este documento se refieren a estos nombres de variable exactos; nunca inventes alias como LAYOUT_VARIANCE o ANIM_LEVEL.

---

2. MAPA DE BRIEF A SISTEMA DE DISEÑO

Una vez que tengas la lectura de diseño (Sección 0) y los controles (Sección 1), elige la base correcta. No inventes CSS para cosas que tienen un paquete oficial. No finjas que una tendencia estética es un sistema oficial.

2.A Cuándo recurrir a un sistema de diseño real (usa paquetes oficiales)

El brief se lee como...	Recurre a	Por qué
Microsoft / SaaS empresarial / paneles	@fluentui/react-components o @fluentui/web-components	Fluent UI oficial, tokens de Microsoft, accesibilidad hecha
UI tipo Google, producto con sabor Material	@material/web + tokens de Material 3	Oficial, personalizable mediante Theming de Material
B2B tipo IBM / análisis empresarial	@carbon/react + @carbon/styles	Carbon oficial, patrones maduros de densidad de datos
Superficies de aplicaciones de Shopify	polaris.js web components / Polaris React	Requerido para la UI de administración de Shopify
Producto tipo Atlassian / Jira	@atlaskit/* + @atlaskit/tokens	DS oficial de Atlassian
Página de herramienta de desarrollo / comunidad estilo GitHub	@primer/css o @primer/react-brand	Primer oficial; variante Brand para marketing
Servicio público del Reino Unido	govuk-frontend	Esperado legal / regulatorio
Sector público de EE. UU. / confianza primero	uswds	Igual
MVP rápido de negocio local / agencia	Bootstrap 5.3	Aburrido, rápido, funciona
Base de React moderna y accesible	@radix-ui/themes	Primitivas + tema pulido
SaaS moderno donde tú eres dueño de los componentes	shadcn/ui (npx shadcn@latest add ...)	Eres dueño del código, fácil de personalizar; nunca envíes el estado por defecto
Marketing SaaS moderno basado en Tailwind / IA	Utilidades de Tailwind v4 + variante dark:	Predeterminado para construcciones de equipos pequeños e independientes

Regla de honestidad: si el brief se lee como uno de los sistemas anteriores, instala y usa el paquete oficial. No recrees su CSS a mano. No importes los tokens de un sistema y luego anules el 90% de ellos.

Un sistema por proyecto. No mezcles Fluent React con Carbon en el mismo árbol. No importes componentes de shadcn/ui en una aplicación de Material 3.

2.B Cuando el brief es una estética, no un sistema

Para estas direcciones, no hay un paquete oficial único. Construye con CSS nativo + Tailwind + una librería de componentes mantenida. Sé honesto en los comentarios del código sobre qué es inspiración prestada vs. material oficial.

Estética	Implementación honesta
Glassmorphism / "vidrio esmerilado"	backdrop-filter, bordes en capas, superposiciones de resaltado. Proporciona un respaldo de relleno sólido para prefers-reduced-transparency.
Bento (cuadrículas de azulejos estilo Apple)	CSS Grid con tamaños de celda mixtos. Ninguna librería es dueña de esto.
Brutalismo	CSS nativo, monoespacio, bordes en bruto. Sin librería.
Editorial / revista	Tipo serif, cuadrícula asimétrica, espacio en blanco generoso. Sin librería.
Tecnología oscura / hacker	Mono + neón de acento, motivos de terminal. Sin librería.
Aurora / gradientes de malla	SVG o gradientes radiales en capas. Sin librería.
Tipografía cinética	Animaciones CSS nativas, animaciones impulsadas por scroll, GSAP para secuencias. Sin librería.
Apple Liquid Glass	Apple documenta esto solo para plataformas Apple. No hay un liquid-glass.css oficial. Las implementaciones web son aproximaciones que usan backdrop-filter + bordes en capas + resaltos. Etiqueta claramente como aproximación.

---

3. ARQUITECTURA Y CONVENCIONES POR DEFECTO

A menos que la lectura de diseño elija un sistema de diseño real (Sección 2.A), estos son los valores predeterminados:

3.A Stack

• Framework: React o Next.js. Por defecto, Server Components (RSC).
  • SEGURIDAD RSC: El estado global funciona SOLO en Client Components. En Next.js, envuelve los providers en un componente "use client".
  • AISLAMIENTO DE INTERACTIVIDAD: Cualquier componente que use Motion, listeners de scroll o física de puntero DEBE ser una hoja aislada con 'use client' en la parte superior. Los Server Components renderizan solo diseños estáticos.
• Estilo: Tailwind v4 (por defecto). Tailwind v3 solo si el proyecto existente lo requiere.
  • Para v4: NO uses el plugin tailwindcss en postcss.config.js. Usa @tailwindcss/postcss o el plugin de Vite.
• Animación: Motion (la librería anteriormente conocida como Framer Motion). Importa desde motion/react (import { motion } from "motion/react"). El paquete framer-motion todavía funciona como un alias heredado; prefiere motion/react en código nuevo.
• Fuentes: Siempre usa next/font (Next.js) o auto-alójate con @font-face + font-display: swap. Nunca enlaces Google Fonts mediante <link> en producción.

3.B Estado

• useState / useReducer local para UI aislada.
• Estado global SOLO para evitar perforación profunda de props: Zustand, Jotai o contexto de React.
• NUNCA uses useState para rastrear valores continuos impulsados por entrada del usuario (posición del ratón, progreso de scroll, física de puntero, hover magnético). Usa useMotionValue / useTransform / useScroll de Motion. useState vuelve a renderizar el árbol de React en cada cambio y colapsa en móvil.

3.C Iconos

• Librerías permitidas (orden de prioridad): @phosphor-icons/react, hugeicons-react, @radix-ui/react-icons, @tabler/icons-react.
• Desaconsejada: lucide-react. Aceptable solo cuando el usuario lo solicita explícitamente o el proyecto ya depende de ella.
• NUNCA dibujes SVG a mano. Si falta un glifo, instala una segunda librería o compón a partir de primitivas; no dibujes rutas de iconos desde cero.
• Una familia por proyecto. No mezcles Phosphor con Lucide en el mismo árbol de componentes.
• Estandariza strokeWidth globalmente (p. ej. 1.5 o 2.0).

3.D Política de Emojis

Desaconsejados por defecto en código, marcado y texto visible. Reemplaza los símbolos con glifos de la librería de iconos. Anulación: permite emojis solo cuando el usuario solicita explícitamente un ambiente divertido / estilo chat / social nativo, e incluso entonces úsalos con moderación e intención.

3.E Capacidad de Respuesta y Mecánica de Diseño

• Estandariza los puntos de interrupción (sm 640, md 768, lg 1024, xl 1280, 2xl 1536).
• Contiene los diseños de página usando max-w-[1400px] mx-auto o max-w-7xl.
• Estabilidad del Viewport: NUNCA uses h-screen para secciones de Héroe de altura completa. SIEMPRE usa min-h-[100dvh] para evitar saltos de diseño en móvil (barra de direcciones de Safari en iOS).
• Grid sobre Flex-Math: NUNCA uses cálculos complejos de porcentaje de flexbox (w-[calc(33%-1rem)]). SIEMPRE usa CSS Grid (grid grid-cols-1 md:grid-cols-3 gap-6).

3.F Verificación de Dependencias (obligatorio)

Antes de importar CUALQUIER librería de terceros, verifica package.json. Si falta el paquete, genera primero el comando de instalación. Nunca asumas que una librería existe.

---

4. DIRECTIVAS DE INGENIERÍA DE DISEÑO (Corrección de Sesgo)

Los LLM usan clichés por defecto. Anula estos defectos de forma proactiva. Cada regla tiene una ruta de anulación consciente del contexto.

4.1 Tipografía

• Títulos / Encabezados: Por defecto text-4xl md:text-6xl tracking-tighter leading-none.

• Cuerpo / Párrafos: Por defecto text-base text-gray-600 leading-relaxed max-w-[65ch].

• Elección de fuente sans:

  • Desaconsejado como predeterminado: Inter. Elige Geist, Outfit, Cabinet Grotesk, Satoshi o una serif adecuada a la marca primero.
  • Anulación: Inter es aceptable cuando el usuario solicita explícitamente un estilo neutral / estándar / tipo Linear, o cuando el brief es un sitio de sector público / accesibilidad primero.

• Combinaciones que debes conocer: Geist + Geist Mono, Satoshi + JetBrains Mono, Cabinet Grotesk + Inter Tight, GT America + IBM Plex Mono.

• DISCIPLINA DE SERIF (MUY DESACONSEJADO COMO PREDETERMINADO):

  • La serif está muy desaconsejada como fuente predeterminada para cualquier proyecto. "Se siente creativo / premium / editorial" NO es una razón para recurrir a serif. El modelo mental predeterminado del agente de que "brief creativo = serif" es la señal de IA más probada en rondas de producción.
  • La serif solo es aceptable cuando UNO de estos es explícitamente cierto:
    • El brief de la marca menciona literalmente una fuente serif, O
    • La familia estética es genuinamente editorial / lujo / publicación / manuscrito / herencia / vintage Y puedes articular por qué esta serif específica encaja con esta marca específica
  • Para todo lo demás (agencia creativa, estudio de diseño, marca moderna, consumidor premium, portafolio, estilo de vida), usa sans-serif display por defecto (Geist Display, ABC Diatype, Söhne Breit, Cabinet Grotesk Display, Migra Sans, GT Walsheim, Inter Display, PP Neue Montreal). Las fuentes sans display no son "aburridas" — son la opción predeterminada por la misma razón que el negro es la opción predeterminada en la moda.
  • REGLAS DE ÉNFASIS (relacionado): Cuando quieras enfatizar una palabra dentro de un título (el movimiento cinético "y diseño espacial"), usa cursiva o negrita de la MISMA fuente. NO inyectes una palabra serif aleatoria en un título sans (o viceversa) solo para agregar interés visual. El énfasis de familias mixtas es de aficionado. El énfasis en cursiva/negrita de la misma familia es el movimiento correcto.
  • Específicamente PROHIBIDOS como predeterminados: Fraunces e Instrument_Serif (las dos serif display favoritas de los LLM).
  • Si una serif está justificada (raro, según lo anterior), rota desde este grupo, NO reutilices la misma serif en proyectos consecutivos: PP Editorial New, GT Sectra Display, Cardinal Grotesque, Reckless Neue, Tiempos Headline, Recoleta, Cormorant Garamond, Playfair Display, EB Garamond, IvyPresto, Migra, Editorial Old, Saol Display, Söhne Breit Kursiv, Domaine Display, Canela, Schnyder, Tobias, NB Architekt, I