- Grupo: Front y diseño
- Cuándo se activa: Tendencias y principios de diseño web moderno
- Se instala: Opcional: llega con un paquete de skills.
Documentación completa upstream (inglés): SKILL.upstream.md (990 líneas). No la leas entera: usa el mapa y lee solo la sección que necesites (Read con offset/limit o Grep).
- Usar: decidir la dirección visual/interactiva de una landing o portfolio (hero inmersivo, galería horizontal, reveals, cursor personalizado, glass).
- Usar: definir tokens de diseño (OKLCH, tipografía fluida con clamp, elevaciones, timing) o auditar accesibilidad y rendimiento de una página.
- Usar: elegir qué skill de animación/3D aplicar a cada patrón (esta skill es el enrutador).
- NO usar: para escribir el código de una librería concreta →
gsap-scrolltrigger, motion-framer, react-three-fiber, barba-js, etc.
- NO usar: para componentes UI/estilado de sistema →
ui-styling, design-system, animated-component-libraries.
| Tarea |
Lee solo |
| Empezar un proyecto/starter |
SKILL.upstream.md L14-33 (§Performance-First) + L903-946 (§Design System Architecture); no hay starter en assets/ (solo README) |
| Elegir patrón de sección (hero, galería, visor 3D, transiciones) |
L252-510 (§Common Design Patterns) y la skill que cite cada patrón |
| Micro-interacciones, cursor, glass |
L67-222 (§3, §5, §6) + references/interaction_patterns.md |
| Accesibilidad |
L586-687 (§Accessibility Best Practices) + references/accessibility_guide.md |
| Depurar / rendimiento |
L689-790 (§Performance Optimization) + L791-901 (§Common Pitfalls) + references/performance_checklist.md |
| Líneas |
Sección |
Para qué |
| 8-13 |
Overview |
Qué cubre la meta-skill |
| 14-251 |
Core Design Principles (2024-2025) |
7 principios: Performance-First (16), Bold Minimalism (34), Micro-Interactions (67), Scrollytelling (105), Cursor UX (145), Glassmorphism & Depth (194), AI Personalization (224) |
| 252-511 |
Common Design Patterns |
7 patrones con código: Hero (254), Horizontal Gallery (290), 3D Product Viewer (316), Data Viz (349), Page Transitions (402), Cursor Effects (434), Staggered Reveals (470) |
| 512-585 |
Integration with Other Skills |
Qué skill usar para animación (514), 3D (546) y componentes (572) |
| 586-688 |
Accessibility Best Practices |
reduced-motion (588), contraste (615), teclado (634), lector de pantalla (657), touch targets (673) |
| 689-790 |
Performance Optimization |
Animación 60 FPS (691), carga (713), imágenes (733), 3D (759), bundle (775) |
| 791-902 |
Common Pitfalls |
Sobreanimación, móvil, fallbacks, a11y, loading states, scroll hijacking |
| 903-947 |
Design System Architecture |
Tokens CSS (905) y arquitectura atómica (937) |
| 948-990 |
Resources |
Lista de skills relacionadas, references, scripts, assets |
references/design_trends_2024.md — tendencias y previsiones de diseño 2024-25.references/interaction_patterns.md — catálogo de micro-interacciones.references/accessibility_guide.md — patrones WCAG AAA y cómo testearlos.references/performance_checklist.md — checklist de optimización y métricas.scripts/pattern_generator.py — genera boilerplate HTML de un patrón: py -3 scripts/pattern_generator.py --pattern hero --output hero.html.scripts/design_audit.py — audita un HTML (a11y, rendimiento, patrones): py -3 scripts/design_audit.py --file index.html --report audit.txt.assets/README.md — solo describe tokens/plantillas previstas; no hay archivos de starter reales.
- Respeta
prefers-reduced-motion siempre (CSS L592-601 y JS L606-612); la animación debe poder desactivarse.
- Anima solo
transform y opacity; nunca top/left/width/height; will-change solo durante la animación.
- Objetivos Core Web Vitals: LCP < 2,5 s, CLS < 0,1, INP < 200 ms; difiere animaciones no críticas y lazy-load de imágenes/3D.
- Contraste AAA 7:1 (4,5:1 texto grande);
:focus-visible visible; touch targets ≥ 44x44 px.
- Nunca secuestres el scroll nativo ni desactives el scroll; mejora, no reemplaza (L890-901).
- Mejora progresiva: el contenido esencial debe verse sin JS; detecta features antes de usarlas.
- Detecta el stack como indica la skill
front-activation/skill-router (senzu/senzu.json → package.json). Esta skill es agnóstica de framework: los principios y tokens CSS valen para vanilla, Vue, Astro y React.
- Los ejemplos con
motion/Framer y R3F son React-only; en Vue/vanilla/Astro usa gsap-scrolltrigger, animejs, scroll-reveal-libraries o barba-js según el patrón.
