el-primor 3.0.1 → 3.0.2

package/.opencode/skills/diseno-excelente/SKILL.md

@@ -1,43 +1,47 @@
 ---
 name: diseno-excelente
-description: "Apply UI/UX anti-pattern detection, accessibility standards (WCAG 2.2 AA), and visual design principles for frontend and full-stack projects. Activate when building or reviewing UI components, pages, or design systems — especially when the output looks generic or cookie-cutter."
+description: "Anti-slop frontend para landing pages, portfolios y rediseños. Actívala al generar o revisar cualquier UI — el agente inferirá la dirección de diseño correcta y evitará que la salida se vea genérica."
 license: MIT
 compatibility: opencode
 metadata:
   phase: "Frontend"
-  activation: "UI code generated or reviewed"
+  activation: "UI/UX tasks, landing pages, portfolios, redesigns"
 ---
 
 # Diseño Excelente
 
 ## Conocimiento que el LLM base NO demuestra consistentemente
 
-1. **Anti-patrones de diseño IA — el "AI Slop" detector**: los LLMs producen UIs con gradientes azul-violeta (#3B82F6 → #8B5CF6), bordes redondeados de 12-16px en todo, tipografía Inter (porque es la default de Tailwind), cards con shadow-xl y backdrop-blur, y layouts centrados de 800px. Esto grita "generado por IA". La skill detecta estos patrones y propone alternativas: sistemas de diseño con personalidad (Stripe usa azul plano #635BFF, Linear usa minimalismo agresivo, Vercel usa geometría), tipografías con carácter (Geist, Mona Sans, Departure Mono), espaciados asimétricos, grids que rompen el molde.
+1. **Sistema de 3 diales para calibrar output**: DESIGN_VARIANCE (1=simetría, 10=caos), MOTION_INTENSITY (1=estático, 10=cinemático), VISUAL_DENSITY (1=galería, 10=cockpit). Usar presets: landing SaaS → 7/6/4, editorial → 6/4/3, sector público → 3/2/5, portfolio diseñador → 8/7/3, agency/experimental → 9/8/3. Los diales guían cada decisión de layout, animación y espaciado.
 
-2. **WCAG 2.2 AA no es opcional**: 98% del código UI generado por LLMs falla accesibilidad. Checklist mínimo: (a) focus visible en todos los elementos interactivos (no `outline: none` sin reemplazo), (b) labels en todos los inputs (no placeholder como label, no aria-label vacío), (c) contraste 4.5:1 para texto normal y 3:1 para texto grande (usar herramienta de verificación, no adivinar), (d) landmarks ARIA (main, nav, banner, contentinfo) en la estructura, (e) alt text en imágenes informativas y alt="" en decorativas, (f) todo operable por teclado (Tab/Shift+Tab/Enter/Escape), (g) focus trapping en modales y focus restoration al cerrar.
+2. **Design Read obligatorio antes de generar código**: declarar en UNA línea: "Lectura: [tipo de página] para [audiencia], lenguaje visual [vibe], inclinándose hacia [sistema/aesthetic]." Esto fuerza al LLM a leer el brief antes de saltar a defaults de training data. Ejemplo: "Lectura: landing B2B SaaS para compradores técnicos, lenguaje Linear-minimalista, hacia Tailwind + Geist."
 
-3. **Diseño responsivo real, no "se apila en mobile"**: mobile-first implica diseñar para 375px primero y luego expandir. Touch targets mínimo 44x44px (WCAG 2.5.5). Breakpoints estratégicos: 375 (mobile), 768 (tablet portrait), 1024 (tablet landscape / small desktop), 1280+ (desktop). El contenido no solo se redimensiona — se reorganiza: navegación horizontal → hamburguesa/bottom sheet, multi-column → single column, hover states → alternativas touch (long press, swipe). Imágenes responsivas con `srcset` y `sizes`, no solo `max-width: 100%`.
+3. **Mapa de sistemas de diseño — cuándo usar qué paquete oficial**: Fluent UI → enterprise/Microsoft; Material 3 → Google-flavored; Carbon → IBM/B2B analytics; shadcn/ui → SaaS moderna; GOV.UK/USWDS → sector público. UN sistema por proyecto. Si el brief pide aesthetic (glassmorphism, brutalismo, editorial), no existe paquete oficial — construir con CSS nativo + Tailwind y etiquetar honestamente como aproximación.
 
-4. **Performance visual (Core Web Vitals)**: CLS (Cumulative Layout Shift) se evita con dimensiones explícitas en imágenes (`width`/`height` + `aspect-ratio`), placeholders del mismo tamaño que el contenido async, y fuentes con `font-display: optional` o `swap`. LCP (Largest Contentful Paint) se optimiza con `loading="lazy"` para imágenes below-the-fold, `fetchpriority="high"` para la hero image, y preload de fuentes críticas. El LLM típicamente genera `<img src="...">` sin atributos y `<div>` que cambian de altura al cargar datos.
+4. **Anti-Default Discipline — lo que JAMÁS se usa sin justificación explícita**: gradientes púrpura-azul (#3B82F6→#8B5CF6), Inter + slate-900 como base, hero centrado sobre mesh oscuro, 3 feature cards iguales, glassmorphism genérico, micro-animaciones infinitas en todo. Cada decisión se toma desde el Design Read y los diales, no desde los defaults del modelo.
 
-5. **Motion y micro-interacciones con propósito**: no animar por animar. Preferir `prefers-reduced-motion` y respetarlo. Transiciones de layout con `transition: width 150ms ease-out` (nunca linear). Estados de carga: skeleton screens con shimmer (no spinners genéricos), optimistic UI con rollback, empty states con ilustraciones + CTA (no "No items found"). Estados de error con mensajes accionables (no "Something went wrong"). El LLM entrega UI que solo contempla el happy path visual.
+5. **WCAG 2.2 AA no es opcional**: focus visible (nunca outline:none sin reemplazo), labels reales en inputs (nunca placeholder como label), contraste 4.5:1 texto normal / 3:1 texto grande, landmarks ARIA (main, nav, banner), operable por teclado, focus trapping en modales. El 98% del código UI generado por LLMs falla accesibilidad.
+
+6. **Core Web Vitals desde el código**: CLS → width/height explícitos en imágenes + font-display:swap; LCP → fetchpriority=high en hero + loading=lazy en below-fold; INP → nunca window.addEventListener('scroll'), siempre Motion useScroll / ScrollTrigger / IntersectionObserver.
 
 ## Cuándo activarme
 
-- Se genera o modifica cualquier interfaz de usuario (HTML, JSX, Vue SFC, Svelte, etc.).
+- Se genera o modifica UI (landing pages, portfolios, componentes visuales).
+- El output se ve genérico o "estilo IA".
 - El usuario pide revisión de diseño, accesibilidad, o responsive.
-- El output visual se ve "genérico" o "como todas las apps IA".
 
 ## Procedimiento
 
-1. Escanear el código UI generado contra los 7 anti-patrones de "AI Slop" (gradientes, border-radius, tipografía, sombras, layout centrado, blur effects, colores pastel).
-2. Ejecutar checklist WCAG 2.2 AA de 7 puntos sobre el markup/live preview.
-3. Verificar responsive: simular en 375px, 768px, 1024px, 1280px — confirmar que no hay overflow horizontal ni touch targets <44px.
-4. Auditar performance visual: cada `<img>` tiene dimensiones explícitas, no hay CLS potencial, LCP está optimizado.
-5. Asegurar que existen estados de loading, empty, error, y edge case (texto muy largo, datos faltantes, roles de usuario distintos). Si faltan, reportarlos como incompletos.
+1. **Design Read**: leer el brief completo, inferir tipo de página + audiencia + vibe, declarar la lectura en una línea. Si el brief es genuinamente ambiguo, preguntar UNA sola cosa — nunca un interrogatorio.
+2. **Calibrar diales**: asignar VARIANCE/MOTION/DENSITY según presets. Los diales son variables de sesión que guían todo lo demás.
+3. **Elegir sistema de diseño**: si el brief coincide con un sistema oficial → instalar paquete oficial. Si es aesthetic → CSS nativo + Tailwind, etiquetado como aproximación.
+4. **Ejecutar checklist WCAG 2.2 AA**: verificar focus, labels, contraste, landmarks, keyboard nav, screen readers, focus trapping.
+5. **Auditar performance**: cada img con dimensiones explícitas, CLS < 0.1, LCP optimizado, motion respeta prefers-reduced-motion.
+6. **Pre-Flight check**: confirmar que no hay defaults IA (gradientes púrpura, Inter, 3 cards iguales), que existen estados loading/empty/error, y que el layout colapsa correctamente en 375px.
 
 ## Errores comunes que prevengo
 
-- **Entregar UI genérica "estilo IA"**: gradientes azul-violeta, sombras excesivas, tipografía Inter default. Yo detecto estos patrones y propongo alternativas con personalidad.
-- **Ignorar accesibilidad**: el LLM entrega código que ningún lector de pantalla puede navegar. Yo aplico el checklist WCAG 2.2 AA y reporto cada violación como bloqueante.
-- **No verificar en mobile**: el LLM diseña para 1440px y asume que "se adapta solo". Yo fuerzo la verificación en viewports reales y rechazo layouts que hacen overflow horizontal en 375px.
+- **UI genérica "estilo IA"**: gradientes azul-violeta, Inter default, shadow-xl en todo, layouts centrados de 800px. Detecto y propongo alternativas con personalidad real basadas en el Design Read.
+- **Accesibilidad ignorada**: aplico checklist WCAG 2.2 AA completo y reporto cada violación como bloqueante.
+- **Diseñar para 1440px y asumir que "se adapta solo"**: fuerzo verificación en 375/768/1024/1280px. Touch targets mínimo 44×44px. Rechazo overflow horizontal o texto cortado en mobile.
+- **Saltar al código sin leer el brief**: fuerzo el Design Read de una línea y la calibración de diales antes de cualquier output. Sin esto, el LLM produce el mismo diseño para cualquier prompt.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "el-primor",
-  "version": "3.0.1",
+  "version": "3.0.2",
   "description": "El Primor — AI coding agent for OpenCode. 9-phase methodology, 7 expert skills, persistent memory (TurboVec). Zero-friction install.",
   "license": "MIT",
   "author": "fxMT-nx",