All authors
Claude Skills by petersonsenadevs
github.com/petersonsenadevs50 skills0 installs31 views
- GradersNo description providedVotes: 0GitHub stars: 2
- GradersNo description providedVotes: 0GitHub stars: 2
- GradersNo description providedVotes: 0GitHub stars: 2
- Aframe WebxrEscenas 3D/VR/AR declarativas en HTML con A-Frame (ECS sobre Three.js): WebXR, controladores VR, AR hit-test, visores 360, componentes custom. No para control fino de Three.js (threejs-webgl) ni para React (react-three-fiber).Votes: 0GitHub stars: 2
- Animated Component LibrariesComponentes React animados prefabricados: Magic UI (Tailwind + Motion + shadcn/ui) y React Bits (BlurText, CountUp, Dock, Particles, Aurora). Para landings, hero, marquee, stats, fondos. No para animación a medida, Vue/vanilla ni 3D.Votes: 0GitHub stars: 2
- AnimejsAnimaciones DOM/CSS/SVG con Anime.js: timelines con offsets, stagger (grid, from center), dibujo y morphing de paths SVG, keyframes, easings spring/steps. No para scroll-driven complejo (gsap-scrolltrigger) ni React (motion-framer).Votes: 0GitHub stars: 2
- Babylonjs EngineMotor 3D Babylon.js 7: escenas WebGL/WebGPU, cámaras, luces, PBR, glTF, física Havok, sombras, GUI, WebXR, juegos en navegador. Disparadores: Babylon, @babylonjs/core, Havok. No para Three.js/R3F ni efectos 3D ligeros.Votes: 0GitHub stars: 2
- Banner DesignDiseña banners (cover, header, display ad, hero web, print) en HTML/CSS + visual IA y exporta PNG a medida exacta. Disparadores: banner, cabecera, portada social, Google Ads, hero. No para vídeo, webs completas ni imprenta.Votes: 0GitHub stars: 2
- Barba JsTransiciones de página con Barba.js (@barba/core, router, prefetch, head) en webs multipágina: wrapper/container/namespace, hooks, views, animación con GSAP. No para routers React/Vue ni Astro View Transitions ni animación DOM general.Votes: 0GitHub stars: 2
- Blender Web PipelineExportar modelos Blender a glTF/GLB para web: bpy, Draco, decimación, baking, LODs, texturas, lotes por CLI (blender --background). No para renderizar 3D en navegador (threejs-webgl, babylonjs-engine) ni pintar PBR (substance-3d-texturing).Votes: 0GitHub stars: 2
- BrandIdentidad de marca: voz y tono, identidad visual, mensajes, paleta, tipografía, logo, validación de assets; sincroniza brand-guidelines.md a design tokens. Disparadores: marca, tono, guía de estilo, compliance. No para UI/CSS.Votes: 0GitHub stars: 2
- Design SystemTokens de diseño en 3 capas (primitivo, semántico, componente) con scripts de generación y validación. Úsala DESPUÉS de ui-ux-pro-max para formalizar los tokens del design system ya decidido; en proyectos pequeños basta @theme. No elige paleta.Votes: 0GitHub stars: 2
- Graphic DesignSkill paraguas de diseño: logos e iconos SVG con Gemini, CIP (mockups de papelería), slides HTML con Chart.js, banners y fotos sociales. Disparadores: logo, icono, CIP, mockup, pitch deck, banner, social photo. No para UI/CSS ni tokens.Votes: 0GitHub stars: 2
- Gsap ScrolltriggerAnimación web con GSAP 3 + ScrollTrigger + Lenis: entradas al hacer scroll, pin/scrub, parallax, scroll horizontal, reveals, transiciones de página, sincronía con 3D. Vue/Inertia, Next, Astro, vanilla. No para hovers CSS ni estados simples.Votes: 0GitHub stars: 2
- Lightweight 3d EffectsEfectos 3D ligeros y decorativos con Zdog (pseudo-3D), Vanta.js (fondos animados WebGL) y Vanilla-Tilt (tilt parallax en tarjetas). Para heros, landings, iconos 3D, tilt cards. No para escenas 3D reales, modelos glTF ni WebXR.Votes: 0GitHub stars: 2
- Locomotive ScrollScroll suave y parallax con Locomotive Scroll: data-scroll-*, sticky, scroll horizontal, eventos scroll/call, sync con GSAP ScrollTrigger (scrollerProxy). No para reveals simples (scroll-reveal-libraries) ni scroll sin smooth (gsap).Votes: 0GitHub stars: 2
- Lottie AnimationsAnimaciones Lottie/dotLottie (JSON de After Effects) en web, React, Vue y Svelte: lottie-web, @lottiefiles/dotlottie-*, lottie-react, iconos animados, loaders, scroll/hover. No para animaciones con estados (usa rive-interactive).Votes: 0GitHub stars: 2
- Modern Web DesignTendencias y principios de diseño web 2024-25 (bento, glassmorphism, neobrutalism) como inspiración puntual. Úsala DESPUÉS de ui-ux-pro-max y solo para explorar estilos; el design system y el patrón los decide ui-ux-pro-max. No para codificar.Votes: 0GitHub stars: 2
- Motion FramerAnimación en React con Motion (ex Framer Motion): variants, gestos, layout, AnimatePresence, springs, useScroll. ÚSALA en Next.js/React y en Astro dentro de una island React. No para Vue ni scroll complejo (usa gsap).Votes: 0GitHub stars: 2
- Pixijs 2dPixiJS v8: render 2D WebGL/WebGPU para sprites, sprite sheets, partículas (ParticleContainer), Graphics vectorial, filtros/shaders, BitmapText, juegos 2D y HUD sobre Three.js. No para 3D (threejs-webgl) ni DOM (gsap-scrolltrigger).Votes: 0GitHub stars: 2
- Playcanvas EngineMotor WebGL/WebGPU PlayCanvas: juegos 3D en navegador, ECS, scripts pc.createScript, física Ammo.js, carga glTF, export del Editor. No para 3D low-level (threejs-webgl), R3F (react-three-fiber) ni VR declarativo (aframe-webxr).Votes: 0GitHub stars: 2
- React Spring PhysicsFísica de muelles en React con @react-spring/web (useSpring, useTrail, useTransition, useScroll, useInView) y Popmotion (inertia). Gestos, drag con momentum, listas enter/exit. Solo React; no para vanilla/Vue ni timelines.Votes: 0GitHub stars: 2
- React Three Fiber3D declarativo en React con React Three Fiber + drei: Canvas, useFrame, useGLTF, Environment, ScrollControls. ÚSALA en Next.js/React para heros 3D, configuradores, escenas. No para Vue (TresJS en threejs-webgl) ni Astro sin React.Votes: 0GitHub stars: 2
- Rive InteractiveAnimaciones Rive (.riv) con máquinas de estados, inputs (boolean/number/trigger), ViewModel data binding y eventos en React (rive-react): botones, toggles, loaders, UI interactiva. No para timelines simples (usa lottie-animations).Votes: 0GitHub stars: 2
- Scroll Reveal LibrariesReveals al hacer scroll con AOS (Animate On Scroll): data-aos, fade/slide/zoom/flip en landings, marketing y blogs, con React/Vue/Next. No para timelines, scrub o parallax (gsap-scrolltrigger, locomotive-scroll) ni física.Votes: 0GitHub stars: 2
- SlidesCrea presentaciones HTML estratégicas (pitch deck, ventas, demo) con Chart.js, design tokens, layouts responsive y fórmulas de copywriting. Disparadores: slides, deck, presentación, pitch. No para PPTX/Google Slides ni gráficos sueltos.Votes: 0GitHub stars: 2
- Spline InteractiveIntegra escenas Spline (editor 3D visual sin código) en React/Next.js: @splinetool/react-spline, eventos onSpline*, emitEvent, findObjectByName, lazy load, SSR. No para 3D por código (threejs-webgl, react-three-fiber) ni juegos.Votes: 0GitHub stars: 2
- Substance 3d TexturingTexturizado PBR con Adobe Substance 3D Painter y exportación web: presets metallic/roughness, glTF, Three.js, Babylon.js, ORM packing, API Python de Painter. No para cargar/modelar en el motor (threejs-webgl, blender-web-pipeline).Votes: 0GitHub stars: 2
- Threejs Webgl3D/WebGL con Three.js: modelos GLB, heros 3D, configuradores, partículas, shaders, scroll 3D. TresJS (Vue/Inertia), R3F (Next), vanilla (Astro); assets, rendimiento móvil, dispose, fallback. No para charts, 2D ni animación DOM (gsap).Votes: 0GitHub stars: 2
- Ui Stylingshadcn/ui y shadcn-vue + Tailwind: implementar componentes accesibles en Next, Vue/Inertia o Astro. Úsala DESPUÉS de ui-ux-pro-max (esta no elige estilo, paleta ni patrón: solo implementa componentes con los tokens ya decididos).Votes: 0GitHub stars: 2
- Ui Ux Pro MaxSKILL POR DEFECTO de front: ante cualquier landing, página, web, hero, componente, formulario, dashboard, tema o rediseño úsala PRIMERO (elige estilo, paleta, tipografía y patrón; design system por stack). Después, la especialista. No para backend.Votes: 0GitHub stars: 2
- Web3d Integration PatternsMeta-skill de arquitectura para combinar Three.js, GSAP ScrollTrigger, React Three Fiber, Motion y React Spring: capas, estado (Zustand), render bajo demanda, conflictos entre librerías. No para la API de una sola librería (usa su skill).Votes: 0GitHub stars: 2
- Front ActivationÚSAME PRIMERO en tareas de front: detecta el stack (Laravel+Inertia+Vue, Next, Astro, Vue) y aplica el árbol de front: 1º ui-ux-pro-max (design system y patrón), luego el efecto (catálogo de efectos), animación (gsap) o 3D (three). Contexto mínimo.Votes: 0GitHub stars: 2
- Skill RouterÚSAME PRIMERO en cualquier tarea no trivial: árbol de decisión que dice qué skill y sección leer (UI: ui-ux-pro-max; animación, 3D, calidad, arquitectura DDD, devlog) y detecta el stack. Puerta de entrada de Senzu; contexto mínimo.Votes: 0GitHub stars: 2
- Blender Web PipelineBlender to web export workflows for 3D models and animations. Use this skill when exporting Blender models to glTF for web, optimizing 3D assets for Three.js or Babylon.js, batch processing models with Python scripts, automating Blender workflows, or creating web-ready 3D pipelines. Triggers on tasks involving Blender glTF export, bpy scripting, 3D asset optimization, model compression, texture baking, or Blender automation. Exports models for threejs-webgl, react-three-fiber, and babylonjs-e...Votes: 0GitHub stars: 2
- Gsap ScrolltriggerComprehensive skill for GSAP (GreenSock Animation Platform) and ScrollTrigger plugin. Use this skill when creating web animations, scroll-driven experiences, timelines, tweens, scroll-triggered animations, pinning, scrubbing, parallax effects, or animating DOM elements, SVG, Canvas, WebGL, or Three.js. Triggers on tasks involving GSAP, ScrollTrigger, smooth animations, scroll effects, or animation sequencing.Votes: 0GitHub stars: 2
- Substance 3d TexturingComprehensive skill for Adobe Substance 3D Painter texturing and material creation workflow. Use this skill when creating PBR materials, exporting textures for web/game engines, optimizing 3D assets for real-time rendering, or automating texture workflows. Triggers on tasks involving Substance 3D Painter, PBR texturing, material creation, texture export for Three.js, Babylon.js, Unity, Unreal, glTF optimization, or Python API automation. Creates optimized textures for threejs-webgl, react-thr...Votes: 0GitHub stars: 2
- Ui Ux Pro MaxUI/UX design intelligence for web, mobile, and desktop. This skill should be used when designing, building, reviewing, or fixing interfaces, including pages, components, design systems, accessibility, interaction, responsive layout, typography, color, charts, and stack-specific UI implementation. Searchable local data: 79 searchable styles (50 active), 192 product palettes and reasoning profiles, 74 font pairings, 119 UX guidelines, 105 icons, 17 GSAP presets, 25 chart types, and 22 stacks.Votes: 0GitHub stars: 2
- Backend AuditAuditoría de backend y arquitectura con PRUEBAS: herramientas reales por stack, cada hallazgo con evidencia (salida, archivo:línea, test que falla), informe y plan de refactor seguro. Úsala para auditar, deuda técnica, legacy o antes de refactorizar.Votes: 0GitHub stars: 2
- Code QualityBuenas prácticas de código (Laravel/PHP, TypeScript, React/Next, Vue, Astro, Python): tipado, tests, errores/logs, seguridad, rendimiento, APIs, PR. Úsala al escribir o refactorizar lógica, testear, revisar PR o diseñar endpoints.Votes: 0GitHub stars: 2
- Ddd HexagonalBiblioteca DDD (estratégico/táctico) + hexagonal + CQRS ligero + integración (outbox, sagas, ACL) para proyectos complejos en Laravel, TypeScript (Next/Node, Vue) y Python: 74 docs por tema, plantillas y checklist de cuándo NO.Votes: 0GitHub stars: 2
- Deploy OpsDespliegue y operaciones para TODOS los stacks: deploy por plataforma (Netlify/Vercel/Forge/VPS), Docker, CI/CD con GitHub Actions, secretos por entorno, colas y cron en prod, backups con restore probado y monitorización. Deploy NUNCA sin aprobación.Votes: 0GitHub stars: 2
- DepurarMétodo para arreglar bugs sin dar palos de ciego: reproducir, test que falla, hipótesis, acotar, arreglar y verificar. Úsala cuando algo falla o no funciona mientras construyes (tests en rojo, excepción, error 500, resultado incorrecto).Votes: 0GitHub stars: 2
- DevlogDevlog del proyecto como diario y memoria: entrada del día e INDEX antes de cerrar o commitear, decisiones vigentes en MEMORIA.md y búsqueda en el pasado (buscar.mjs). Úsalo al terminar un paso, al decidir algo o ante «¿por qué hicimos…?».Votes: 0GitHub stars: 2
- Email HtmlEmails HTML que se ven bien en Gmail/Outlook/Apple Mail: transaccionales y newsletters con react-email/MJML o plantillas del framework, dark mode, texto plano y pruebas antes de enviar. Úsala al maquetar o arreglar cualquier email.Votes: 0GitHub stars: 2
- Image GenGenerar imágenes IA coherentes con la web: producto flotando, heros, fondos, 3D, mockups. PRIMERO la generación nativa del host (app de ChatGPT/Codex, Antigravity); scripts/generate.mjs por API solo si no hay. Paleta y estilo del design system.Votes: 0GitHub stars: 2
- Instalar ProyectoInstala o actualiza Senzu en el proyecto actual (clona el paquete, detecta el stack, pregunta qué es el proyecto: web, backend, front, agente de IA o librería, o a medida, y ejecuta el instalador). Úsala con /instalar o al pedir instalar Senzu.Votes: 0GitHub stars: 2
- Marketing SeoMarketing de la web: SEO on-page y local, GA4 + Tag Manager (contenedores, dataLayer, Consent Mode) y MCPs de analítica para operar con agentes (GA4 oficial, Search Console, PostHog). Úsala para posicionar y medir; el diseño es de ui-ux-pro-max.Votes: 0GitHub stars: 2
- Project PlannerPlanificador, ÚSALO PRIMERO al arrancar un proyecto o feature: crea senzu/plan/PLAN.md (fases entregables, tareas con skill y sección, hecho cuando, verificación) y lo hace seguir tarea a tarea. También ante plan, roadmap o siguiente tarea.Votes: 0GitHub stars: 2
- Ui VerifyVerificación OBLIGATORIA de UI antes de dar una vista por hecha: script Playwright (scripts/verify-ui.mjs) o navegador Chrome MCP en 375/768/1440, MÓVIL PRIMERO, dark mode, consola y accesibilidad. También al pedir verificar el responsive.Votes: 0GitHub stars: 2