impeccable

name	impeccable
description	Design skill para frontend. Obliga al agente a clarificar audiencia, proposito y direccion visual antes de escribir codigo. Detecta patrones genericos de IA (Inter, purple gradients, cards anidadas, gray-on-color) y propone alternativas con caracter.
license	MIT
compatibility	opencode

Impeccable — Design Skill para El Primor

Adaptado de pbakaus/impeccable (38k estrellas).

Cuando activar

Cuando el usuario pide crear una web, landing, dashboard, UI o cualquier interfaz visual. Activala durante Fase 2 (Investigar) y Fase 3 (Planificar).

Pre-design: clarificar antes de diseñar

Antes de escribir una linea de CSS, asegura estas respuestas:

1. ¿Marca o producto? — Si es marca (landing, marketing) → visual mas expresivo. Si es producto (dashboard, app) → funcional, denso, escaneable.
2. ¿Audiencia? — tecnica, general, ejecutiva, joven...
3. ¿Personalidad visual? — seria, juguetona, minimalista, tecnica, editorial...
4. ¿Referencias? — pide ejemplos de sitios que le gusten al usuario

Anti-patrones a evitar

JAMAS uses estos patrones genericos de IA:

• ❌ Inter como fuente (demasiado comun, parece template)
• ❌ Gradientes purple-to-blue (el clasico de IA)
• ❌ Cards anidadas dentro de cards
• ❌ Texto gris sobre fondo de color
• ❌ Iconos cuadrados redondeados sobre cada heading
• ❌ Negro puro (#000) o gris puro — siempre tinta ligeramente
• ❌ Easing bounce/elastic (parece anticuado)
• ❌ Hero sections con SVG generico o gradiente

Flujo de diseño

1. Clarifica las 4 preguntas pre-design
2. Busca referencias visuales que coincidan con la direccion
3. Define la paleta antes de codificar (2-3 colores, no mas)
4. Elige la fuente (nunca Inter/Arial — busca algo con caracter)
5. Diseña mobile-first y expande a desktop
6. Audita el resultado contra los anti-patrones